/* ═══ [20 Oct 2026] GLASS POP-UPS — every modal, dialog, drawer, menu and toast in the sidebar's glass language ═══
   Matti, 20 Oct: "good, each and every modal now, all the pop ups we need to refine same way" (after the glass
   dashboard). Staff only (body.sb2-on); the rider app is untouched. The hand-built pop-ups (inline backdrop + card
   styles in the JS) are tagged at runtime by js/glass-pop.js as .gx-scrim / .gx-card; the shared ones (.overlay
   .modal, glass-confirm, filter menus, toasts) are styled here directly.
   Language: a cool, softly blurred backdrop; a near-white frosted card (12px corners, white inner highlight, deep
   soft shadow); hairline header/footer; glass secondary buttons; solid maroon primary with the sidebar pill's glow;
   8px inputs with a maroon focus ring; tighter inner corners. */

/* ── backdrops ─────────────────────────────────────────────────────────────────────────────────────────────── */
body.sb2-on .overlay,
body.sb2-on .gx-scrim,
body.sb2-on .glass-confirm-overlay{
  background:rgba(28,34,52,.22) !important;
  -webkit-backdrop-filter:blur(10px) saturate(140%) !important;backdrop-filter:blur(10px) saturate(140%) !important;
}

/* ── cards ─────────────────────────────────────────────────────────────────────────────────────────────────── */
body.sb2-on .overlay .modal,
body.sb2-on .gx-card,
body.sb2-on .glass-confirm-card{
  border-radius:12px !important;
  background:linear-gradient(165deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 32%),rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;   /* 95% white over an already-blurred backdrop: a second blur adds nothing but GPU work */
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(17,24,39,.05),0 40px 90px -40px rgba(30,40,70,.6),0 4px 14px -6px rgba(17,24,39,.12) !important;
}
body.sb2-on .gx-card.gx-side{border-radius:12px 0 0 12px !important}
body.sb2-on .gx-card.gx-side.gx-left{border-radius:0 12px 12px 0 !important}
body.sb2-on .gx-card.gx-bottom{border-radius:12px 12px 0 0 !important}
body.sb2-on .overlay.open:not(.morphed) .modal,
body.sb2-on .gx-card.gx-in:not(.gx-side){animation:gxIn .32s cubic-bezier(.2,1,.3,1) both !important}
body.sb2-on .gx-card.gx-in.gx-side{animation:gxSide .34s cubic-bezier(.2,1,.3,1) both !important}
@keyframes gxIn{from{opacity:0;transform:translateY(8px) scale(.975)}}
@keyframes gxSide{from{opacity:.4;transform:translateX(24px)}}

/* ── pop-ups that sit in the page from the start (the tagger only sees newly added ones) ─────────────────────── */
body.sb2-on .bike-drawer-scrim.open,
body.sb2-on .gmp-overlay.open,
body.sb2-on #courier-edit-overlay{
  background:rgba(28,34,52,.22) !important;
  -webkit-backdrop-filter:blur(10px) saturate(140%) !important;backdrop-filter:blur(10px) saturate(140%) !important;
}
body.sb2-on .bike-drawer,
body.sb2-on #courier-edit-overlay > div:first-child,
body.sb2-on .gmp-overlay > .gmp{
  background:linear-gradient(165deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 32%),rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;   /* 95% white over an already-blurred backdrop: a second blur adds nothing but GPU work */
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(17,24,39,.05),0 40px 90px -40px rgba(30,40,70,.6),0 4px 14px -6px rgba(17,24,39,.12) !important;
}
body.sb2-on #courier-edit-overlay > div:first-child,
body.sb2-on .gmp-overlay > .gmp{border-radius:12px !important}
body.sb2-on .bike-drawer{border-radius:12px 0 0 12px !important;border-right:0 !important}
body.sb2-on .bike-drawer-foot{background:rgba(246,247,250,.55) !important;border-top-color:rgba(17,24,39,.06) !important}
body.sb2-on .bike-drawer :is(.bd-rider,.bd-fc,.bd-alert,.bd-alist){border-radius:8px !important}
body.sb2-on .bike-drawer :is(.bd-x,.bd-aic){border-radius:7px !important}
body.sb2-on #courier-edit-overlay :is(#ce-save-btn,.btn-glass-neutral){border-radius:8px !important}
body.sb2-on #courier-edit-overlay #ce-save-btn{box-shadow:0 1px 1px rgba(40,0,0,.12),0 8px 18px -8px rgba(139,26,26,.7) !important}
body.sb2-on #courier-edit-overlay .btn-glass-neutral{background:rgba(255,255,255,.75) !important;border:1px solid rgba(17,24,39,.1) !important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,24,39,.05) !important}
body.sb2-on #courier-edit-overlay .af-inp{border-radius:8px !important}

/* thin scrollbars on a clear track, so a long form keeps its rounded corners */
body.sb2-on :is(.overlay .modal,.gx-card,.bike-drawer,#courier-edit-overlay > div:first-child,.gmp-overlay > .gmp),
body.sb2-on :is(.overlay .modal,.gx-card,.bike-drawer,#courier-edit-overlay > div:first-child,.gmp-overlay > .gmp) *{
  scrollbar-width:thin;scrollbar-color:rgba(17,24,39,.18) transparent}

/* ── header / body / footer of the shared .modal ────────────────────────────────────────────────────────────── */
body.sb2-on .overlay .modal-hd{padding:16px 20px !important;border-bottom:1px solid rgba(17,24,39,.06) !important;background:transparent !important}
body.sb2-on .overlay .modal-title{font-size:15.5px !important;font-weight:800 !important;letter-spacing:-.3px !important;color:#18171A !important}
body.sb2-on .overlay .modal-body{padding:18px 20px !important}
body.sb2-on .overlay .modal-ft{padding:12px 20px !important;border-top:1px solid rgba(17,24,39,.06) !important;background:rgba(246,247,250,.55) !important;border-radius:0 0 12px 12px}
body.sb2-on .modal-close{width:28px !important;height:28px !important;border-radius:7px !important;background:rgba(255,255,255,.7) !important;border:1px solid rgba(17,24,39,.08) !important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,24,39,.05) !important;color:#56555B !important;transition:background .15s ease,color .15s ease,border-color .15s ease !important}
body.sb2-on .modal-close:hover{background:rgba(139,26,26,.06) !important;border-color:rgba(139,26,26,.25) !important;color:#8B1A1A !important}

/* ── buttons inside pop-ups ──────────────────────────────────────────────────────────────────────────────────── */
body.sb2-on :is(.modal,.gx-card,.glass-confirm-card) :is(.btn-glass-maroon,.btn-primary,.glass-confirm-ok){
  border-radius:8px !important;background:#8B1A1A !important;color:#fff !important;border:1px solid #8B1A1A !important;
  box-shadow:0 1px 1px rgba(40,0,0,.12),0 8px 18px -8px rgba(139,26,26,.7) !important;transition:background .15s ease,box-shadow .15s ease,transform .1s ease !important}
body.sb2-on :is(.modal,.gx-card,.glass-confirm-card) :is(.btn-glass-maroon,.btn-primary,.glass-confirm-ok):hover{background:#9E2222 !important;border-color:#9E2222 !important}
body.sb2-on :is(.modal,.gx-card,.glass-confirm-card) :is(.btn-glass-neutral,.btn-glass-blue,.btn-secondary,.glass-confirm-cancel){
  border-radius:8px !important;background:rgba(255,255,255,.75) !important;color:#2A292D !important;border:1px solid rgba(17,24,39,.1) !important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,24,39,.05) !important;transition:background .15s ease,border-color .15s ease !important}
body.sb2-on :is(.modal,.gx-card,.glass-confirm-card) :is(.btn-glass-neutral,.btn-glass-blue,.btn-secondary,.glass-confirm-cancel):hover{background:#fff !important;border-color:rgba(17,24,39,.18) !important}
body.sb2-on :is(.modal,.gx-card,.glass-confirm-card) :is(button,.btn-glass-maroon,.btn-glass-neutral):active{transform:translateY(.5px)}

/* ── inputs inside pop-ups ───────────────────────────────────────────────────────────────────────────────────── */
body.sb2-on :is(.modal,.gx-card) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea){border-radius:8px !important}
body.sb2-on :is(.modal,.gx-card) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea):focus{
  border-color:rgba(139,26,26,.45) !important;box-shadow:0 0 0 3px rgba(139,26,26,.08) !important;outline:none !important}

/* ── tighter inner corners (cards drawn inside pop-ups were 12–18px, the bubbly look Matti dislikes) ───────── */
body.sb2-on :is(.modal,.gx-card) :is([style*="border-radius:12px"],[style*="border-radius: 12px"],[style*="border-radius:14px"],[style*="border-radius: 14px"],[style*="border-radius:16px"],[style*="border-radius: 16px"],[style*="border-radius:18px"]){border-radius:8px !important}
body.sb2-on :is(.modal,.gx-card) :is([style*="border-radius:10px"],[style*="border-radius: 10px"]){border-radius:7px !important}

/* ── glass confirm (helloo_confirm / glass-confirm) ──────────────────────────────────────────────────────────── */
body.sb2-on .glass-confirm-title{font-weight:800 !important;letter-spacing:-.3px !important;color:#18171A !important}
body.sb2-on .glass-confirm-msg{color:#56555B !important}

/* ── filter menus (the ▾ dropdowns) ──────────────────────────────────────────────────────────────────────────── */
body.sb2-on .pf-dd-pop{
  border-radius:10px !important;
  background:linear-gradient(165deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 40%),rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;backdrop-filter:blur(20px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(17,24,39,.06),0 24px 50px -24px rgba(30,40,70,.5),0 2px 8px -2px rgba(17,24,39,.1) !important;
}

/* ── toasts (centre pill) and notify cards (corner) ──────────────────────────────────────────────────────────── */
body.sb2-on .toast{
  background:linear-gradient(165deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 40%),rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;backdrop-filter:blur(20px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(17,24,39,.06),0 18px 40px -18px rgba(30,40,70,.45) !important;
}
body.sb2-on .toast-n{
  border-radius:10px !important;
  background:linear-gradient(165deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 40%),rgba(255,255,255,.93) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;backdrop-filter:blur(20px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(17,24,39,.06),0 24px 50px -24px rgba(30,40,70,.5),0 2px 8px -2px rgba(17,24,39,.1) !important;
}
/* the side accent: one solid colour, no gradient */
body.sb2-on .toast-n.toast-success::before{background:#2D6A2E !important;opacity:1 !important}
body.sb2-on .toast-n.toast-error::before{background:#B3261E !important;opacity:1 !important}
body.sb2-on .toast-n.toast-warning::before{background:#B86E00 !important;opacity:1 !important}
body.sb2-on .toast-n.toast-info::before{background:#3568A8 !important;opacity:1 !important}

@media (prefers-reduced-motion:reduce){
  body.sb2-on .overlay.open .modal,body.sb2-on .gx-card.gx-in{animation:none !important}
}