/* =====================================================================
   Bangkok99 — Mobile navigation drawer v2 (Patch-151)
   Loaded globally after theme.css / zone.css / dark.css.
   Clean sheet: quieter hierarchy, soft icon tiles, anchored footer.
   ===================================================================== */

.b99-mobile-menu{z-index:10000}
.b99-mobile-menu-backdrop{
  background:rgba(9,21,40,.48);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.b99-mobile-menu-panel{
  top:8px;
  right:8px;
  bottom:8px;
  width:min(368px,calc(100vw - 24px));
  border:1px solid #E6EDF7;
  border-radius:20px;
  background:#fff;
  box-shadow:-24px 0 64px rgba(11,23,54,.26);
  overflow:hidden;
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}

/* ---------------- header ---------------- */
.b99-mobile-menu-head{
  min-height:74px;
  padding:0 14px 0 18px;
  border-bottom:1px solid #EEF2F7;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.b99-mobile-menu-heading{display:flex;align-items:center;gap:11px;min-width:0}
.b99-mobile-menu-mark{
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  border-radius:11px;
  background:linear-gradient(135deg,#155EEF 0%,#1288A6 100%);
  box-shadow:0 6px 14px rgba(21,94,239,.24);
  color:#fff;
  font:700 11px/1 'Inter',sans-serif;
  letter-spacing:.04em;
}
.b99-mobile-menu-headtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.b99-mobile-menu-eyebrow{
  display:block;
  color:#93A1B5;
  font:700 8.5px/1 'Inter',sans-serif;
  letter-spacing:.18em;
}
.b99-mobile-menu-title{
  color:#0B1736;
  font:600 18px/1.2 'Kanit',sans-serif;
  letter-spacing:-.01em;
}
.b99-mobile-menu-close{
  width:40px;
  height:40px;
  border:1px solid #EDF1F7;
  border-radius:12px;
  background:#F7FAFF;
  color:#475467;
  box-shadow:none;
}
.b99-mobile-menu-close:hover{
  border-color:#D8E4FF;
  background:#EEF4FF;
  color:#155EEF;
}
.b99-mobile-menu-close svg{width:18px;height:18px}

/* ---------------- body ---------------- */
.b99-mobile-menu-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:16px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#FBFDFF 0%,#FFFFFF 230px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ---------------- primary actions ---------------- */
.b99-mobile-menu-cta-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}
.b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta{
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 16px;
  border-radius:12px!important;
  background:#155EEF;
  box-shadow:0 8px 18px rgba(21,94,239,.18);
  font:600 14px/1 'Kanit',sans-serif;
}
.b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta:hover{background:#1249C4}
.b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta:first-child,
.b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta:last-child{border-radius:12px!important}
.b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta-login{
  min-height:44px!important;
  border:1px solid #D9E4F7!important;
  background:#FFFFFF!important;
  box-shadow:none!important;
  color:#155EEF!important;
  font:600 13.5px/1 'Kanit',sans-serif!important;
}
.b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta-login:hover{
  background:#F5F9FF!important;
}

/* ---------------- section labels ---------------- */
.b99-mobile-menu-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 4px 7px;
  color:#6F7F98;
  font:600 10.5px/1 'Inter',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.b99-mobile-menu-label:after{
  content:"";
  flex:1;
  height:1px;
  background:#EEF2F7;
}

/* ---------------- nav links ---------------- */
.b99-mobile-menu-links{gap:5px;margin:0}
.b99-mobile-menu-links a{
  min-height:52px;
  padding:10px 10px;
  gap:12px;
  border-radius:12px;
  box-shadow:none;
  color:#24324A;
  font:500 15px/1.35 'Sarabun',sans-serif;
}
.b99-mobile-menu-links a span{
  display:block;
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
}
.b99-mobile-menu-links a svg{
  width:18px;
  height:18px;
  padding:8px;
  box-sizing:content-box;
  flex:0 0 auto;
  border-radius:10px;
  background:#F1F6FF;
  color:#155EEF;
  transition:background .15s,color .15s;
}
.b99-mobile-menu-links a:hover{background:#F7FAFF;color:#1249C4}
.b99-mobile-menu-links a:hover svg{background:#E7F0FF;color:#1249C4}
.b99-mobile-menu-links a.active{
  background:#EFF5FF;
  box-shadow:none;
  color:#1249C4;
  font-weight:600;
}
.b99-mobile-menu-links a.active svg{background:#155EEF;color:#fff}
.b99-mobile-menu-links a:focus-visible{outline:2px solid #155EEF;outline-offset:2px}

/* ---------------- account ---------------- */
.b99-mobile-menu-account{border-top:0;padding-top:0;margin-top:2px}
.b99-mobile-menu-logout{
  min-height:44px;
  margin-top:6px;
  padding:10px 12px;
  border-radius:11px;
  font-size:13.5px;
}
.b99-mobile-menu-logout svg{width:17px;height:17px}

/* ---------------- settings ---------------- */
.b99-mobile-menu-settings{margin-top:auto;padding-top:16px}
.b99-mobile-menu-settings .b99-mobile-menu-label{margin-top:0}
.b99-mobile-menu-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.b99-mobile-tool{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  min-height:52px;
  padding:7px 9px 7px 11px;
  border:1px solid #EEF2F7;
  border-radius:12px;
  background:#F8FAFD;
}
.b99-mobile-tool-label{
  min-width:0;
  color:#6B7A93;
  font:400 11px/1.3 'Sarabun',sans-serif;
}
.b99-mobile-tool .b99-lang-toggle,
.b99-mobile-tool .b99-textsize-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-width:40px;
  height:36px;
  padding:0 8px;
  border:1px solid #DCE6F4;
  border-radius:8px;
  background:#FFFFFF;
  box-shadow:0 1px 2px rgba(11,23,54,.04);
  color:#155EEF;
  font:700 11.5px/1 'Inter',sans-serif;
  cursor:pointer;
}
.b99-mobile-tool .b99-textsize-btn{min-width:38px}
.b99-mobile-tool .b99-lang-toggle:hover,
.b99-mobile-tool .b99-textsize-btn:hover{background:#EEF4FF}
.b99-mobile-tool .b99-textsize-btn[aria-pressed="true"]{
  border-color:#155EEF;
  background:#155EEF;
  color:#fff;
}
.b99-mobile-lang-note{margin:7px 4px 0;font-size:11px;line-height:1.45}

/* ---------------- footer links ---------------- */
.b99-mobile-menu-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:14px 0 0;
  padding:18px 4px 2px;
  border-top:1px solid #EEF2F7;
}
.b99-mobile-menu-secondary a{
  color:#6B7A93;
  font:400 12.5px/1.4 'Sarabun',sans-serif;
  text-decoration:none;
}
.b99-mobile-menu-secondary a:hover{color:#155EEF}

/* ---------------- small screens ---------------- */
@media (max-width:400px){
  .b99-mobile-menu-panel{
    top:6px;
    right:6px;
    bottom:6px;
    width:calc(100vw - 18px);
    border-radius:18px;
  }
  .b99-mobile-menu-head{min-height:68px;padding:0 12px 0 14px}
  .b99-mobile-menu-body{padding:14px 13px calc(12px + env(safe-area-inset-bottom))}
  .b99-mobile-menu-title{font-size:17px}
  .b99-mobile-menu-mark{width:34px;height:34px;border-radius:10px}
  .b99-mobile-menu-links a{min-height:50px;font-size:14.5px}
  .b99-mobile-tool{padding:6px 7px 6px 10px}
  .b99-mobile-tool-label{font-size:10.5px}
}
@media (max-width:360px){
  .b99-mobile-menu-tools{grid-template-columns:1fr}
  .b99-mobile-tool{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .b99-mobile-menu-panel,
  .b99-mobile-menu-backdrop{transition:none}
}

/* ---------------- dark theme ---------------- */
html[data-theme="dark"] .b99-mobile-menu-backdrop{background:rgba(0,0,0,.62)}
html[data-theme="dark"] .b99-mobile-menu-panel{
  border-color:#26334A;
  background:#0F1728;
  box-shadow:-24px 0 64px rgba(0,0,0,.55);
}
html[data-theme="dark"] .b99-mobile-menu-head{
  border-bottom-color:#223049;
  background:rgba(15,23,40,.94);
}
html[data-theme="dark"] .b99-mobile-menu-eyebrow{color:#7F8FA9}
html[data-theme="dark"] .b99-mobile-menu-title{color:#E7EBF3}
html[data-theme="dark"] .b99-mobile-menu-close{
  border-color:#2B3B60;
  background:#182337;
  color:#C9D1E0;
}
html[data-theme="dark"] .b99-mobile-menu-close:hover{
  border-color:#456094;
  background:#1D2A42;
  color:#8FB0FF;
}
html[data-theme="dark"] .b99-mobile-menu-body{
  background:linear-gradient(180deg,#101A2C 0%,#0F1728 230px);
}
html[data-theme="dark"] .b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta-login{
  border-color:#2B3B60!important;
  background:#141C2E!important;
  color:#8FB0FF!important;
}
html[data-theme="dark"] .b99-mobile-menu .b99-mobile-menu-cta-stack .b99-mobile-menu-cta-login:hover{
  background:#182741!important;
}
html[data-theme="dark"] .b99-mobile-menu-label{color:#8FA0BC}
html[data-theme="dark"] .b99-mobile-menu-label:after{background:#223049}
html[data-theme="dark"] .b99-mobile-menu-links a{color:#C9D1E0}
html[data-theme="dark"] .b99-mobile-menu-links a svg{background:#17233E;color:#8FB0FF}
html[data-theme="dark"] .b99-mobile-menu-links a:hover{background:#182741;color:#FFFFFF}
html[data-theme="dark"] .b99-mobile-menu-links a:hover svg{background:#1B2B4A;color:#FFFFFF}
html[data-theme="dark"] .b99-mobile-menu-links a.active{
  background:#1B2B4A;
  box-shadow:none;
  color:#FFFFFF;
}
html[data-theme="dark"] .b99-mobile-menu-links a.active svg{background:#155EEF;color:#FFFFFF}
html[data-theme="dark"] .b99-mobile-menu-account{border-top-color:#223049}
html[data-theme="dark"] .b99-mobile-menu-logout{color:#FDA29B}
html[data-theme="dark"] .b99-mobile-menu-logout:hover{background:#2A1A1D}
html[data-theme="dark"] .b99-mobile-menu-tools{border:0;background:transparent}
html[data-theme="dark"] .b99-mobile-tool{
  border-color:#243049;
  background:#141C2E;
}
html[data-theme="dark"] .b99-mobile-tool-label{color:#9FB0C9}
html[data-theme="dark"] .b99-mobile-tool .b99-lang-toggle,
html[data-theme="dark"] .b99-mobile-tool .b99-textsize-btn{
  border-color:#2B3B60;
  background:#182337;
  color:#8FB0FF;
}
html[data-theme="dark"] .b99-mobile-tool .b99-lang-toggle:hover,
html[data-theme="dark"] .b99-mobile-tool .b99-textsize-btn:hover{background:#1D2A42}
html[data-theme="dark"] .b99-mobile-tool .b99-textsize-btn[aria-pressed="true"]{
  border-color:#155EEF;
  background:#155EEF;
  color:#fff;
}
html[data-theme="dark"] .b99-mobile-lang-note{color:#FDB022}
html[data-theme="dark"] .b99-mobile-menu-secondary{border-top-color:#223049}
html[data-theme="dark"] .b99-mobile-menu-secondary a{color:#98A2B3}
html[data-theme="dark"] .b99-mobile-menu-secondary a:hover{color:#8FB0FF}