/* MoahBoost Classic Panel Skin — v2 (cs1)
   Sandbox-only reskin layer for moah.moahboost.com.
   Loaded AFTER styles-DWYF33MU.css: redefines design tokens + converts the
   desktop sidebar into a classic fixed top navbar. Mobile layout untouched. */

/* ============ 1. CLASSIC PALETTE (slate + MoahBoost purple) ============ */
:root{
  --background:#0B1220;
  --foreground:#F2F4F8;
  --surface:#121A2B;
  --surface-2:#182236;
  --card:#121A2B;
  --card-foreground:#F2F4F8;
  --popover:#152238;
  --popover-foreground:#F2F4F8;
  --primary:#2563EB;
  --primary-text:#8FC2FF;
  --primary-foreground:#fff;
  --primary-glow:#38BDF8;
  --secondary:#1B2942;
  --secondary-foreground:#E2E5E8;
  --muted:#16223A;
  --muted-foreground:#97A0B0;
  --accent:#1E2A45;
  --accent-foreground:#F2F4F8;
  --border:#243350;
  --input:#243350;
  --ring:#38BDF8;
  --radius:.75rem;
}
.user-shell{ background:var(--background); }

/* ============ 2. DESKTOP: SIDEBAR -> CLASSIC TOP NAVBAR ============ */
@media (min-width:768px){
  aside[class*="w-64"]{
    position:fixed!important;
    left:0!important; right:0!important; top:0!important; bottom:auto!important;
    width:100%!important; height:auto!important;
    flex-direction:row!important; align-items:center!important;
    gap:.75rem!important;
    padding:.55rem 1.25rem!important;
    border-right:0!important;
    border-bottom:1px solid var(--border)!important;
    background:rgba(15,23,42,.94)!important;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transform:none!important;
    z-index:60!important;
    box-shadow:0 6px 24px -12px rgba(0,0,0,.55);
  }
  /* neutralize the old vertical block paddings/borders inside the bar */
  aside[class*="w-64"] > *{
    height:auto!important; margin:0!important;
    border-top:0!important; padding:0!important;
    flex-shrink:0;
  }
  /* header row (logo + wallet chip): compact */
  aside[class*="w-64"] > *:first-child{ display:flex; align-items:center; gap:.75rem; }
  /* wallet pill: natural width, no stretch */
  aside[class*="w-64"] [class*="border-primary/10"]{ width:auto!important; white-space:nowrap; }
  aside[class*="w-64"] [class*="w-full"]{ width:auto!important; }
  /* nav area: horizontal scroll rail, centered */
  aside[class*="w-64"] [class*="overflow-y-auto"]{
    flex:1 1 auto!important;
    display:flex; flex-direction:row!important; align-items:center!important;
    overflow-x:auto!important; overflow-y:hidden!important;
    gap:.25rem!important; padding:0!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  aside[class*="w-64"] [class*="overflow-y-auto"]::-webkit-scrollbar{ display:none; }
  /* group labels (MAIN / MONEY / ...): hidden in navbar mode */
  aside[class*="w-64"] [class*="tracking-widest"]{ display:none!important; }
  /* groups become inline rows */
  aside[class*="w-64"] [class*="flex-col"]{ flex-direction:row!important; align-items:center; gap:.25rem; }
  /* nav items: compact classic pills */
  aside[class*="w-64"] nav a,
  aside[class*="w-64"] nav button,
  aside[class*="w-64"] [class*="overflow-y-auto"] a,
  aside[class*="w-64"] [class*="overflow-y-auto"] button{
    width:auto!important; white-space:nowrap;
    padding:.5rem .8rem!important;
    border-radius:.55rem;
    font-size:.8rem;
  }
  /* Download App button: compact gradient pill at the right end */
  aside[class*="w-64"] [class*="gradient-primary"]{
    width:auto!important; margin:0!important;
    padding:.5rem 1.05rem!important;
  }
  /* content: drop the old 16rem left gutter, clear the fixed bar */
  .user-content{ margin-left:0!important; padding-top:5.25rem!important; }
  /* in-page sticky bars must clear the navbar too */
  [class*="sticky"][class*="top-0"]{ top:3.6rem; }
}

/* ============ 3. DASHBOARD CARDS — CLASSIC POLISH (cs2) ============ */
/* classic panels: flat bordered cards, crisp shadows, accent notices */
.user-content [class*="rounded-2xl"][class*="bg-surface"]{
  border-radius:.8rem;
  border-color:#2A3B58;
  box-shadow:0 10px 28px -18px rgba(0,0,0,.55);
}
/* pinned notice strips: purple accent edge, tamer radius */
.user-content [class*="snap-center"]{
  border-radius:1rem;
  border-left:3px solid var(--primary);
}
/* primary buttons: flat classic purple + soft glow (was glossy gradient) */
.user-content .gradient-primary{
  background:var(--primary)!important;
  box-shadow:0 8px 20px -10px rgba(37,99,235,.55);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.user-content .gradient-primary:hover{
  background:var(--primary-glow)!important;
  box-shadow:0 10px 24px -10px rgba(37,99,235,.7);
}
/* secondary bordered tiles: crisper hover edge */
.user-content [class*="rounded-xl"][class*="border-border"]:hover{
  border-color:#3D527A;
}

/* ============ 4. ORDER FORM & SERVICE PICKERS — CLASSIC PRO INPUTS (cs3) ============ */
/* form fields: inset dark, purple focus glow */
.user-content input,
.user-content textarea,
.user-content select{
  background:#0E1526;
  border-color:#2A3B58;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.user-content input:focus,
.user-content textarea:focus,
.user-content select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(135,71,252,.16);
  outline:none;
}
/* platform & service tiles: professional hover lift + purple edge */
.user-content button[class*="rounded-2xl"]:hover,
.user-content a[class*="rounded-2xl"]:hover{
  border-color:rgba(135,71,252,.45);
  transform:translateY(-2px);
  transition:transform .15s ease, border-color .15s ease;
}

/* ============ 5. DASHBOARD ARRANGEMENT — CLASSIC TWO-COLUMN (cs4) ============ */
/* .mb-dash is added by mb-dash-arrange.js on /dashboard only. */
@media (min-width:1024px){
  .user-content.mb-dash{ max-width:1180px; }
  .mb-dash-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    grid-template-areas:
      "wallet  actions"
      "quick   featured"
      "recent  pinned";
    gap:1.1rem 1.4rem;
    align-items:start;
  }
  .mb-dash .mb-sec-wallet{ grid-area:wallet; }
  .mb-dash .mb-sec-quick{ grid-area:quick; }
  .mb-dash .mb-recent{ grid-area:recent; }
  .mb-dash .mb-sec-actions{ grid-area:actions; }
  .mb-dash .mb-sec-featured{ grid-area:featured; }
  .mb-dash .mb-sec-pinned{ grid-area:pinned; }
  /* side-column tiles: compact 2-up grids */
  .mb-dash .mb-sec-actions [class*="grid-cols"],
  .mb-dash .mb-sec-featured [class*="grid-cols"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
/* pinned notices: slim single banner (first card only) */
/* slim single banner: first notice only */
.mb-dash .mb-sec-pinned .space-y-2 > div ~ div{ display:none!important; }
/* --- My Recent Orders card --- */
.mb-recent{
  border-radius:.8rem;
  border:1px solid #2A3244;
  background:var(--surface);
  box-shadow:0 10px 28px -18px rgba(0,0,0,.55);
  padding:1rem 1.1rem;
}
.mb-recent-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.35rem; }
.mb-recent-title{ font-size:.95rem; font-weight:700; color:var(--foreground); }
.mb-recent-viewall{ font-size:.75rem; font-weight:700; color:var(--primary-text); text-decoration:none; }
.mb-recent-viewall:hover{ text-decoration:underline; }
.mb-recent-row{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem 0; border-top:1px solid var(--border);
  text-decoration:none;
}
.mb-recent-row:hover .mb-recent-svc{ color:var(--primary-text); }
.mb-recent-status{
  flex:0 0 auto;
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.2rem .5rem; border-radius:999px; white-space:nowrap;
}
.mb-recent-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.1rem; }
.mb-recent-svc{
  font-size:.78rem; font-weight:600; color:var(--foreground);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mb-recent-meta{ font-size:.66rem; color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-recent-charge{ flex:0 0 auto; }
.mb-recent-amt{ font-size:.8rem; font-weight:700; color:var(--success); white-space:nowrap; }
.mb-recent-empty{ padding:1.4rem 0 .9rem; text-align:center; }
.mb-recent-emptytitle{ font-size:.9rem; font-weight:700; color:var(--foreground); }
.mb-recent-emptysub{ font-size:.74rem; color:var(--muted-foreground); margin-top:.25rem; }
.mb-recent-cta{
  display:inline-block; margin-top:.8rem; padding:.5rem 1.05rem; border-radius:.55rem;
  background:var(--primary); color:var(--primary-foreground);
  font-size:.8rem; font-weight:700; text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(37,99,235,.55);
}
.mb-recent-cta:hover{ background:var(--primary-glow); }
/* status pills */
.mb-pill-pending{ background:rgba(242,166,24,.14); color:#f2a618; }
.mb-pill-processing{ background:rgba(96,165,250,.14); color:#60A5FA; }
.mb-pill-completed{ background:rgba(57,195,75,.14); color:#39c34b; }
.mb-pill-partial{ background:rgba(251,146,60,.15); color:#fb923c; }
.mb-pill-cancelled{ background:rgba(253,43,46,.13); color:#fd6a6c; }

/* ===== 5. MOBILE COMPACT (phones, dashboard) ===== */
@media (max-width:767px){
  .mb-dash .mb-sec-wallet{ padding:12px !important; }
  .mb-dash .mb-sec-wallet > .flex-wrap{ gap:8px !important; }
  .mb-dash .mb-sec-wallet .text-3xl{ font-size:clamp(1.45rem,8.5vw,1.7rem) !important; line-height:1.1 !important; margin-top:2px !important; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .mb-dash .mb-sec-wallet .h-11{ height:38px !important; width:38px !important; }
  .mb-dash .mb-sec-wallet .h-11 svg{ width:18px !important; height:18px !important; }
  .mb-dash .mb-sec-wallet .mt-4.flex-col{ flex-direction:row !important; gap:8px !important; margin-top:10px !important; }
  .mb-dash .mb-sec-wallet .mt-4.flex-col > a{ flex:1 1 0% !important; padding-top:9px !important; padding-bottom:9px !important; white-space:nowrap; }
  .mb-dash .mb-sec-wallet > button{ margin-top:8px !important; padding-top:8px !important; padding-bottom:8px !important; }
  .mb-dash-grid > .mb-4:first-child{ margin-bottom:10px !important; }
  .mb-dash-grid > .mb-4:first-child h1{ font-size:1.15rem !important; }
  .mb-dash .mb-sec-quick{ padding:12px !important; }
  .mb-dash .mb-sec-quick .grid{ gap:8px !important; }
  .mb-dash .mb-sec-quick .grid > a{ padding:8px 6px !important; }
  .mb-dash .mb-sec-quick .grid > a svg{ width:22px !important; height:22px !important; }
  .mb-dash .mb-sec-quick .mb-3, .mb-dash .mb-sec-quick .mb-4{ margin-bottom:8px !important; }
  .mb-recent{ padding:12px !important; }
  .mb-recent-head{ margin-bottom:.3rem !important; }
  .mb-recent-row{ padding:8px 10px !important; gap:.5rem !important; }
  .md\:hidden .flex.max-w-2xl{ padding-top:.4rem !important; padding-bottom:.4rem !important; }
  .md\:hidden ul.grid-cols-4 > li > a{ height:52px !important; }
  .mb-dash{ overflow-x:hidden; }
  .mb-dash{ padding-bottom:160px !important; }
}
/* debug sim: apply the same phone rules at desktop width for visual verification */
.mb-sim-mobile .mb-dash{ max-width:430px !important; margin-left:auto !important; margin-right:auto !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet{ padding:12px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet > .flex-wrap{ gap:8px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .text-3xl{ font-size:clamp(1.45rem,8.5vw,1.7rem) !important; line-height:1.1 !important; margin-top:2px !important; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .h-11{ height:38px !important; width:38px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .h-11 svg{ width:18px !important; height:18px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .mt-4.flex-col{ flex-direction:row !important; gap:8px !important; margin-top:10px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .mt-4.flex-col > a{ flex:1 1 0% !important; padding-top:9px !important; padding-bottom:9px !important; white-space:nowrap; }
.mb-sim-mobile .mb-dash .mb-sec-wallet > button{ margin-top:8px !important; padding-top:8px !important; padding-bottom:8px !important; }
.mb-sim-mobile .mb-dash-grid > .mb-4:first-child{ margin-bottom:10px !important; }
.mb-sim-mobile .mb-dash-grid > .mb-4:first-child h1{ font-size:1.15rem !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick{ padding:12px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid{ gap:8px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid > a{ padding:8px 6px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid > a svg{ width:22px !important; height:22px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .mb-3, .mb-dash .mb-sec-quick .mb-4{ margin-bottom:8px !important; }
.mb-sim-mobile .mb-recent{ padding:12px !important; }
.mb-sim-mobile .mb-recent-head{ margin-bottom:.3rem !important; }
.mb-sim-mobile .mb-recent-row{ padding:8px 10px !important; gap:.5rem !important; }
.mb-sim-mobile .md\:hidden .flex.max-w-2xl{ padding-top:.4rem !important; padding-bottom:.4rem !important; }
.mb-sim-mobile .md\:hidden ul.grid-cols-4 > li > a{ height:52px !important; }
.mb-sim-mobile .mb-dash{ overflow-x:hidden; }
.mb-sim-mobile .mb-dash{ padding-bottom:160px !important; }
.mb-sim-mobile .mb-dash .mb-4:first-child{ margin-bottom:10px !important; }
.mb-sim-mobile .mb-dash .mb-4:first-child h1{ font-size:1.15rem !important; }

/* ===== 6. ENTERPRISE SHINE (cs9) ===== */
/* primary CTAs: blue->sky gradient + glow + hover lift */
.user-content .gradient-primary{
  background:linear-gradient(135deg,#2563EB 0%,#3B82F6 55%,#38BDF8 100%)!important;
  box-shadow:0 8px 22px -8px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.user-content .gradient-primary:hover{
  background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 55%,#38BDF8 100%)!important;
  box-shadow:0 12px 28px -8px rgba(37,99,235,.8), inset 0 1px 0 rgba(255,255,255,.2)!important;
  transform:translateY(-1px);
}
@media (min-width:768px){
  aside[class*="w-64"] .gradient-primary{
    background:linear-gradient(135deg,#2563EB 0%,#3B82F6 55%,#38BDF8 100%)!important;
    box-shadow:0 6px 18px -6px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.18)!important;
  }
  /* navbar: soft sky shine line under the bar */
  aside[class*="w-64"]{
    box-shadow:0 1px 0 rgba(56,189,248,.22), 0 8px 28px -14px rgba(2,8,23,.85)!important;
  }
}
/* wallet balance: soft emerald shine */
.user-content .mb-sec-wallet .text-success,
.user-content .text-3xl.text-success{
  text-shadow:0 0 18px rgba(52,211,153,.35);
}
/* main cards: hover lift + sky glow edge */
.user-content [class*="rounded-2xl"][class*="bg-surface"]:hover{
  border-color:#3D527A;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(56,189,248,.08);
  transform:translateY(-1px);
}
/* chat FAB: blue->sky gradient (was purple) */
[class*="from-[#7C3AED]"]{
  background-image:linear-gradient(to bottom right,#2563EB,#38BDF8)!important;
  box-shadow:0 10px 26px -10px rgba(56,189,248,.55)!important;
}
/* focus rings: sky glow */
.user-content input:focus,.user-content textarea:focus,.user-content select:focus{
  box-shadow:0 0 0 3px rgba(56,189,248,.22)!important;
}
/* inline-styled purple stragglers (announcement link fallback, airtime promo) */
[style*="#7c3aed"]{ background:linear-gradient(135deg,#2563EB,#38BDF8)!important; }
[class*="from-[#9333ea]"]{ background-image:linear-gradient(to bottom right,#2563EB,#1D4ED8,#38BDF8)!important; }

/* ===== SECTION 5 (cs11): SERVICES PAGE POLISH — scoped to /services layout wrapper only ===== */
/* --- service cards: classic lift + hover glow --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4{
  position:relative; overflow:hidden; border-radius:14px;
  background:linear-gradient(180deg,rgba(37,99,235,.05),rgba(37,99,235,0) 46%),#151921;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.45);
  box-shadow:0 10px 26px -10px rgba(37,99,235,.4),0 2px 6px rgba(0,0,0,.3);
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,#38BDF8,transparent);
  opacity:0; transition:opacity .18s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4:hover::before{opacity:1;}
/* --- platform icon box: blue tint --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .grid.h-9.w-9.shrink-0.place-items-center.rounded-lg.bg-muted{
  background:rgba(37,99,235,.14);
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.18);
}
/* --- price: blue-sky gradient emphasis --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .mt-3.flex.items-baseline.gap-1 > span:first-child{
  background:linear-gradient(135deg,#38BDF8,#2563EB);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* --- status dot: emerald glow --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .h-1\.5.w-1\.5.rounded-full.bg-emerald-500{
  box-shadow:0 0 6px 1px rgba(16,185,129,.55);
}
/* --- order button: blue gradient + press feel --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.mt-3.flex.w-full.items-center.justify-center.gap-2.rounded-xl.bg-primary{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#38BDF8 135%)!important;
  box-shadow:0 3px 12px -3px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.mt-3.flex.w-full.items-center.justify-center.gap-2.rounded-xl.bg-primary:hover{
  transform:translateY(-1px); filter:brightness(1.08);
  box-shadow:0 6px 18px -4px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.mt-3.flex.w-full.items-center.justify-center.gap-2.rounded-xl.bg-primary:active{ transform:translateY(0); }
/* --- featured pill: sky gradient --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .rounded-lg.bg-primary.px-3.py-1\.5.text-xs.font-bold.text-primary-foreground{
  background:linear-gradient(135deg,#2563EB,#38BDF8)!important;
  box-shadow:0 2px 10px -2px rgba(37,99,235,.5);
}
/* --- platform chips + top tag chips: hover lift, active glow --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .-mx-4.px-4.overflow-x-auto button,
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-wrap.items-center.gap-2 button{
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .-mx-4.px-4.overflow-x-auto button:hover,
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-wrap.items-center.gap-2 button:hover{
  transform:translateY(-1px); border-color:rgba(56,189,248,.5);
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .-mx-4.px-4.overflow-x-auto button.bg-primary{
  box-shadow:0 0 0 1px rgba(56,189,248,.4),0 4px 14px -4px rgba(37,99,235,.55);
}
/* --- load more: quiet blue hover --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.w-full.items-center.justify-center.gap-2.rounded-xl.border.border-border.bg-card:hover{
  border-color:rgba(56,189,248,.45)!important; color:#7DD3FC;
}