/* =====================================================================
   CasperSMM — style.css   (put ALL of this in  CSS/style.css)
   Full theme design system + SlimSelect dropdown fix.
   layout.twig now relies on this file (no inline <style>).
   ===================================================================== */

:root[data-theme="dark"]{
--canvas:#0B1120; --canvas-2:#0E1524; --hero:#111A2C; --surface:#151D2F; --surface-2:#1C2539; --surface-3:#232E46;
--line:#28334A; --line-2:#37435E;
--brand:#4F9BF6; --brand-2:#3B82F6; --brand-ink:#84B6FB; --brand-grad:linear-gradient(135deg,#4F9BF6,#3B82F6); --brand-soft:rgba(79,155,246,.14);
--text:#E9EEF7; --text-strong:#FFFFFF; --muted:#8B99B2;
--green:#3FD08B; --red:#F5776F; --shadow:0 4px 14px -12px rgba(0,0,0,.35); --ring:rgba(79,155,246,.16);
--r-card:16px; --r-el:12px; --r-sm:10px;
}
:root[data-theme="light"]{
--canvas:#F3F6FC; --canvas-2:#FFFFFF; --hero:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7FC; --surface-3:#EDF2FA;
--line:#E5EBF4; --line-2:#D3DCEA;
--brand:#2F7EF0; --brand-2:#2563EB; --brand-ink:#2F7EF0; --brand-grad:linear-gradient(135deg,#3B82F6,#2563EB); --brand-soft:rgba(47,126,240,.09);
--text:#0F1B2E; --text-strong:#0A1120; --muted:#5D6B84;
--green:#0EA372; --red:#E05656; --shadow:0 8px 22px -18px rgba(31,52,92,.2); --ring:rgba(47,126,240,.16);
--r-card:16px; --r-el:12px; --r-sm:10px;
}
*{box-sizing:border-box;}
html,body{background:var(--canvas)!important; color:var(--text)!important; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important; -webkit-font-smoothing:antialiased; margin:0; min-height:100vh;}
h1,h2,h3,h4,h5{color:var(--text-strong)!important; letter-spacing:-.02em; font-weight:800;}
a{color:var(--brand); transition:color .15s;} a:hover,a:focus{color:var(--brand-ink); text-decoration:none;}
hr{border-color:var(--line);}
label,.control-label{color:var(--muted)!important; font-weight:600; font-size:1.35rem; margin-bottom:7px;}
::selection{background:var(--brand); color:#fff;}

/* ---------- AUTH SHELL ---------- */
.casper-shell{display:flex; min-height:100vh;}
.casper-sidebar{width:264px; flex:0 0 264px; background:var(--canvas-2); border-right:1px solid var(--line); position:fixed; inset:0 auto 0 0; z-index:60; display:flex; flex-direction:column; transition:transform .25s;}
.casper-brand{padding:22px 22px 14px; display:flex; align-items:center;}
.casper-brand img{height:30px; width:auto;}
.casper-acct{margin:6px 14px 10px; display:flex; align-items:center; gap:11px; padding:11px 12px; background:var(--surface); border:1px solid var(--line); border-radius:13px; text-decoration:none;}
.casper-acct .av{width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem; text-transform:uppercase;}
.casper-acct .who{flex:1; min-width:0;} .casper-acct .who .t{font-size:1.1rem; color:var(--muted); font-weight:600;} .casper-acct .who .u{font-size:1.4rem; color:var(--text-strong); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.casper-acct .cv{color:var(--muted); font-size:1.2rem;}
.casper-nav{padding:6px 14px; flex:1; overflow-y:auto;} .casper-nav ul{list-style:none; padding:0; margin:0;}
.casper-nav a{display:flex; align-items:center; gap:13px; padding:12px 14px; margin:4px 0; border-radius:12px; color:var(--muted); font-weight:600; font-size:1.45rem; text-decoration:none; transition:.16s;}
.casper-nav a .navbar-icon{width:19px; text-align:center; font-size:1.6rem;}
.casper-nav a:hover{background:var(--surface-2); color:var(--text-strong);}
.casper-nav li.active>a{background:var(--brand-grad); color:#fff; box-shadow:0 14px 28px -14px var(--ring);}
.casper-nav li.active>a .navbar-icon{color:#fff;}
.casper-nav .badge{margin-left:auto; background:var(--red); color:#fff; border-radius:999px; padding:2px 8px; font-size:1.1rem; font-weight:700;}

.casper-main{margin-left:264px; flex:1; min-width:0; display:flex; flex-direction:column;}
.casper-topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px; padding:16px 28px; background:color-mix(in srgb,var(--canvas) 82%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.casper-crumb{font-size:1.3rem; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px;}
.casper-crumb b{color:var(--text-strong);}
.casper-topbar .sp{flex:1;}
.casper-tbtn{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-weight:600; font-size:1.35rem; padding:9px 12px; border-radius:10px; cursor:pointer; background:transparent; border:0;}
.casper-tbtn:hover{background:var(--surface); color:var(--text);}
.casper-tbtn svg{width:16px; height:16px;}
.casper-iconbtn{width:40px; height:40px; border-radius:11px; background:var(--surface); border:1px solid var(--line); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; text-decoration:none;}
.casper-iconbtn:hover{color:var(--text);}
.casper-balance{display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 6px; font-weight:700; font-size:1.4rem; color:var(--text-strong)!important; cursor:pointer; text-decoration:none;}
.casper-balance .d{width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-size:1.3rem;}
.casper-avatar{width:40px; height:40px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink)!important; display:flex; align-items:center; justify-content:center; font-weight:800; border:1px solid var(--line-2); text-transform:uppercase; text-decoration:none; cursor:pointer;}
:root[data-theme="dark"] .casper-icon-sun{display:none;} :root[data-theme="light"] .casper-icon-moon{display:none;}
.caret{color:var(--muted);}
.casper-content{padding:30px 28px 64px; max-width:1320px; width:100%; margin:0 auto;}
.casper-overlay{display:none; position:fixed; inset:0; background:rgba(4,7,12,.65); z-index:55;}
.casper-burger{display:none;}

/* ---------- GUEST SHELL ---------- */
.casper-guestnav{max-width:1180px; margin:18px auto 22px; padding:0 18px;}
.casper-guestnav-inner{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:11px 16px;}
.casper-guestnav-inner img{height:30px;}
.casper-guest-content{max-width:1180px; margin:0 auto; padding:0 18px 60px;}
/* guest header: logo left, links right; on mobile a burger opens a clean dropdown */
.casper-guestnav-burger{display:none; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; color:var(--text); cursor:pointer;}
.casper-guestnav-links{display:flex; align-items:center; gap:10px; margin-left:auto;}
@media (max-width:760px){
  .casper-guestnav{margin:12px auto 16px; padding:0 12px;}
  .casper-guestnav-inner{position:relative; padding:12px 14px;}
  .casper-guestnav-burger{display:inline-flex; align-items:center; justify-content:center; margin-left:auto; width:40px; height:40px; font-size:1.6rem;}
  .casper-guestnav-links{display:none; position:absolute; top:calc(100% + 8px); right:0; flex-direction:column; align-items:stretch; gap:2px; margin:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; min-width:190px; z-index:60;}
  .casper-guestnav-links.open{display:flex;}
  .casper-guestnav-links .casper-tbtn{white-space:nowrap; text-align:left; padding:9px 12px; border-radius:8px;}
  .casper-guestnav-links .dropdown{width:100%;}
  .casper-guestnav-links .dropdown .casper-tbtn{width:100%;}
}

/* ---------- Bootstrap base restyle (all inner pages inherit) ---------- */
.btn{font-family:'Manrope',sans-serif; font-weight:700; border-radius:11px; border:1px solid transparent; padding:10px 18px; transition:.15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand-grad)!important; border-color:transparent!important; color:#fff!important; box-shadow:0 14px 28px -16px var(--ring);}
.btn-primary:hover,.btn-primary:focus{filter:brightness(1.06); color:#fff!important;}
.btn-default{background:var(--surface-2)!important; border-color:var(--line-2)!important; color:var(--text)!important;}
.btn-default:hover{border-color:var(--brand)!important; color:var(--brand-ink)!important;}
.btn-xs{padding:4px 10px; font-size:1.2rem; border-radius:8px;} .btn-sm{padding:7px 13px; font-size:1.3rem; border-radius:9px;} .btn-block{width:100%;}

.form-control{background:var(--surface-2)!important; border:1px solid var(--line)!important; color:var(--text)!important; border-radius:12px; height:auto; padding:13px 15px; box-shadow:none!important; font-size:1.5rem;}
.form-control::placeholder{color:var(--muted); opacity:.85;}
.form-control:focus{border-color:var(--brand)!important; box-shadow:0 0 0 3px var(--ring)!important;}
select.form-control{appearance:none; -webkit-appearance:none;}

.well,.panel{background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:var(--r-card)!important; box-shadow:var(--shadow)!important; color:var(--text); padding:22px;}
.panel-heading{background:transparent!important; border-bottom:1px solid var(--line)!important; color:var(--text-strong)!important; font-weight:800; border-radius:var(--r-card) var(--r-card) 0 0!important;}
.panel-footer{background:transparent!important; border-top:1px solid var(--line)!important;}
.panel-body.border-solid{border:1px solid var(--line); border-radius:12px; background:var(--surface-2);}

.table{color:var(--text);}
.table>thead>tr>th{border-bottom:1px solid var(--line-2)!important; color:var(--muted); font-weight:700; font-size:1.2rem; letter-spacing:.02em; text-transform:uppercase; padding:14px 12px;}
.table>tbody>tr>td{border-top:1px solid var(--line)!important; padding:14px 12px; vertical-align:middle;}
.table>tbody>tr:hover>td{background:var(--surface-2);}
.table strong{color:var(--text-strong);}
.width-40,.link{word-break:break-all;}

.alert{border-radius:12px; border:1px solid transparent;}
.alert-danger{background:rgba(245,119,111,.12)!important; border-color:rgba(245,119,111,.4)!important; color:var(--red)!important;}
.alert-success{background:rgba(63,208,139,.12)!important; border-color:rgba(63,208,139,.4)!important; color:var(--green)!important;}
.alert .close{color:inherit; opacity:.6;}

.dropdown-menu{background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:12px!important; box-shadow:var(--shadow)!important; padding:6px; margin-top:8px; min-width:180px;}
.dropdown-menu>li>a,.dropdown-menu .dropdown-item{color:var(--text)!important; border-radius:8px; padding:9px 12px; font-size:1.4rem;}
.dropdown-menu>li>a:hover,.dropdown-menu .dropdown-item:hover,.dropdown-menu>li.active>a{background:var(--brand-soft)!important; color:var(--brand-ink)!important;}
.dropdown-max-height{max-height:320px; overflow:auto;}

/* ============================================================
   SlimSelect ([data-select]) — professional dark dropdown
   ============================================================ */
/* force the SlimSelect palette variables at every scope, with !important,
   so the "disabled/selected" light colour can never resolve to light-grey */
:root, html, body, .ss-main, .ss-content, .ss-content .ss-list, .ss-content .ss-option{
--ss-bg-color:var(--surface-2)!important;
--ss-font-color:var(--text)!important;
--ss-primary-color:var(--surface-3)!important;
--ss-placeholder-color:var(--muted)!important;
--ss-disabled-color:var(--surface-2)!important;
--ss-border-color:var(--line)!important;
--ss-highlight-color:var(--surface-3)!important;
--ss-focus-color:var(--brand)!important;
--ss-border-radius:12px!important;
}
/* control box */
.ss-main, .ss-main.ss-open-below, .ss-main.ss-open-above, .ss-main:focus, .ss-main:active{background:var(--surface-2)!important; border:1px solid var(--line)!important; color:var(--text)!important; border-radius:12px!important; -webkit-tap-highlight-color:transparent!important;}
.ss-main *{-webkit-tap-highlight-color:transparent!important;}
.ss-main .ss-single, .ss-main .ss-values{color:var(--text)!important;}

/* dropdown panel: clean rounded frame, soft shadow, small gap */
.ss-content{background:var(--surface-2)!important; border:1px solid var(--line)!important; border-radius:14px!important; overflow:hidden!important; margin-top:6px!important; box-shadow:0 18px 40px -24px rgba(0,0,0,.6)!important;}
.ss-content .ss-search{padding:10px!important;}
.ss-content .ss-search input{background:var(--surface-3)!important; border:1px solid var(--line)!important; color:var(--text)!important; border-radius:10px!important; padding:10px 12px!important; height:auto!important;}
.ss-content .ss-search input::placeholder{color:var(--muted)!important;}

/* list + flat, roomy option rows */
.ss-content .ss-list{padding:0!important; margin:0!important; border:0!important; background:transparent!important; box-shadow:none!important;}
.ss-content .ss-list .ss-option{margin:0!important; border:0!important; border-radius:0!important; padding:12px 14px!important; min-height:auto!important; line-height:1.45!important; -webkit-tap-highlight-color:transparent!important; transition:background-color .12s!important;}

/* KILL the light "selected/disabled" box — every option, state, child, AND pseudo-element */
html body .ss-content .ss-list .ss-option,
html body .ss-content .ss-list .ss-option *,
html body .ss-content .ss-list .ss-option::before,
html body .ss-content .ss-list .ss-option::after,
html body .ss-content .ss-list .ss-option.ss-disabled,
html body .ss-content .ss-list .ss-option.ss-selected,
html body .ss-content .ss-list .ss-option[aria-selected],
html body .ss-content .ss-list .ss-option[aria-selected="true"]{background:transparent!important; background-color:transparent!important; box-shadow:none!important; color:var(--text)!important; cursor:pointer!important;}

/* highlight ONLY the hovered / keyboard-highlighted row — neutral professional lift */
html body .ss-content .ss-list .ss-option:hover,
html body .ss-content .ss-list .ss-option.ss-highlighted{background:var(--surface-3)!important;}
html body .ss-content .ss-list .ss-option:hover,
html body .ss-content .ss-list .ss-option:hover *,
html body .ss-content .ss-list .ss-option.ss-highlighted,
html body .ss-content .ss-list .ss-option.ss-highlighted *{color:var(--text-strong)!important;}

/* subtle scrollbar inside the dropdown */
.ss-content .ss-list::-webkit-scrollbar{width:8px;}
.ss-content .ss-list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px;}
.ss-content .ss-list::-webkit-scrollbar-track{background:transparent;}

/* ============================================================
   Select2 (category / service dropdown on THIS panel) — dark
   Adapted from the old working theme. The selected option is
   styled via [aria-selected=true] (that was the missing piece).
   ============================================================ */
.select2-container .select2-selection, .select2.select2-container .select2-selection{background:var(--surface-2)!important; border:1px solid var(--line)!important; color:var(--text)!important; border-radius:12px!important; padding:9px 14px!important; display:flex!important; align-items:center!important; min-height:46px!important; outline:0!important;}
.select2-container .select2-selection__rendered{color:var(--text)!important; line-height:1.5!important; padding:0!important;}
.select2-container--focus .select2-selection, .select2-container--open .select2-selection{border:1px solid var(--brand)!important; box-shadow:0 0 0 3px var(--ring)!important;}
.select2-selection__arrow b{border-color:var(--muted) transparent transparent transparent!important;}

/* ============================================================
   Select2 dropdown — APPROVED in simulation (Select2 4.1.0-rc.0)
   ============================================================ */
/* closed select box */
.select2-container .select2-selection{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:12px!important;padding:9px 14px!important;min-height:48px!important;display:flex!important;align-items:center!important;height:auto!important;}
.select2-container .select2-selection__rendered{color:var(--text)!important;padding:0!important;line-height:1.5!important;}
.select2-container--focus .select2-selection,.select2-container--open .select2-selection{border:1px solid var(--brand)!important;box-shadow:0 0 0 3px var(--ring)!important;}
.select2-selection__arrow{top:12px!important;right:10px!important;}
.select2-selection__arrow b{border-color:var(--muted) transparent transparent transparent!important;}
/* dropdown panel — ONE clean outer frame, no inner shadow/border */
.select2-container .select2-dropdown{background:var(--surface-2)!important;border:0!important;border-radius:14px!important;margin-top:6px!important;overflow:hidden!important;box-shadow:0 0 0 1px var(--line-2)!important;}
.select2-container .select2-dropdown *{box-shadow:none!important;outline:0!important;border:0!important;}
.select2-container .select2-results,.select2-container .select2-results>ul{background:transparent!important;margin:0!important;padding:0!important;}
/* search box */
.select2-search--dropdown{padding:8px!important;}
.select2-search--dropdown .select2-search__field{background:var(--surface-3)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:10px!important;padding:9px 11px!important;outline:0!important;}
/* options list — flex column keeps them compact */
.select2-container .select2-dropdown .select2-results ul{display:flex!important;flex-direction:column!important;gap:0!important;padding:4px!important;margin:0!important;max-height:300px!important;}
.select2-results__option{color:var(--text)!important;text-decoration:none!important;flex-shrink:0!important;border-radius:8px!important;margin:0!important;min-height:0!important;padding:9px 12px!important;font-size:1.4rem!important;line-height:1.4!important;cursor:pointer!important;}
.select2-results__option::before,.select2-results__option::after{display:none!important;content:none!important;}
/* ============================================================
   SELECTED / HIGHLIGHTED ROW — verified live on smmpanelbase.com
   The pre-selected row had TWO problems on the real panel:
   (1) blue background, and (2) blue TEXT. The blue text was the real
   leftover: PerfectPanel wraps each option in <a><span.badge><span.text></a>,
   and the panel core CSS colours that inner <a> (and its price text)
   with --brand-ink on the selected/highlighted row.
   Fix = 3 layers, all kept theme-agnostic (plain .select2-container). */

/* (1) background tint — covers 4.1.x classes AND 4.0.x [aria-selected] */
html body .select2-container .select2-results__option--selected,
html body .select2-container .select2-results__option--highlighted,
html body .select2-container .select2-results__option--highlighted.select2-results__option--selectable,
html body .select2-container .select2-results__option[aria-selected="true"]{background-color:var(--surface-3)!important;color:var(--text-strong)!important;}

/* (2) the visible row text lives in span.select2-selection__text — force it neutral */
html body .select2-container .select2-results__option--selected .select2-selection__text,
html body .select2-container .select2-results__option--highlighted .select2-selection__text,
html body .select2-container .select2-results__option[aria-selected="true"] .select2-selection__text{color:var(--text-strong)!important;}

/* (3) the <a>'s own direct text (the "- $0.27 per 1000" price) needs ID-level
   weight to beat the panel core CSS. The result container id is deterministic:
   select2-<selectId>-results. Order form selects are orderform-service / -category. */
html body #select2-orderform-service-results li.select2-results__option--highlighted a,
html body #select2-orderform-service-results li.select2-results__option[aria-selected="true"] a,
html body #select2-orderform-category-results li.select2-results__option--highlighted a,
html body #select2-orderform-category-results li.select2-results__option[aria-selected="true"] a{color:var(--text-strong)!important;}
/* scrollbar */
.select2-results__options::-webkit-scrollbar{width:6px;}
.select2-results__options::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;}
.select2-results__options::-webkit-scrollbar-track{background:transparent;}

/* other widget fallbacks (harmless if unused) */
.ts-dropdown .active, .ts-dropdown .option.selected,
.choices__list--dropdown .is-highlighted, .choices__item.is-highlighted,
.nice-select .option.selected, .nice-select .option:hover{background:var(--surface-3)!important; color:var(--text-strong)!important;}

.pagination>li>a,.pagination>li>span{background:var(--surface-2); border:1px solid var(--line); color:var(--text); margin:0 3px; border-radius:9px!important;}
.pagination>li.active>a,.pagination>li.active>span,.pagination>li>a:hover{background:var(--brand)!important; border-color:var(--brand)!important; color:#fff!important;}

.nav-tabs{border-bottom:1px solid var(--line);}
.nav-tabs>li>a{color:var(--muted); border:0;}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:transparent!important; color:var(--brand-ink)!important; border:0; border-bottom:2px solid var(--brand)!important;}

#notify-wrapper{border-radius:12px;}
.tooltip-inner{background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:8px;}
*::-webkit-scrollbar{width:10px; height:10px;} *::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px;} *::-webkit-scrollbar-track{background:transparent;}

@media (max-width:991px){
.casper-sidebar{transform:translateX(-100%);}
.casper-shell.open .casper-sidebar{transform:translateX(0);}
.casper-shell.open .casper-overlay{display:block;}
.casper-main{margin-left:0;}
.casper-burger{display:inline-flex;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* =====================================================================
   CLEAN ORDER FORM — remove the box-in-box (flatten outer card, slim fields)
   ===================================================================== */
html body .no-card.no-order-form{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
html body .select2-container .select2-selection{min-height:44px!important;padding:6px 13px!important;border-radius:10px!important;background:var(--surface-2)!important;border:1px solid var(--line)!important;}
html body .select2-container .select2-dropdown{margin-top:4px!important;box-shadow:0 0 0 1px var(--line)!important;}
html body .no-order-form .form-group{margin-bottom:12px!important;}
html body .no-order-form label,html body .no-order-form .control-label{margin-bottom:5px!important;font-size:1.4rem!important;}


/* compact dropdown list — kill double padding (li + inner <a>) so rows pack tight like caspersmm */
html body .select2-container .select2-results__option{padding:0 4px!important;}
html body #select2-orderform-service-results li.select2-results__option a,
html body #select2-orderform-category-results li.select2-results__option a{padding:7px 10px!important;line-height:1.35!important;}
html body .select2-container .select2-dropdown .select2-results ul{padding:6px!important;}

/* rounded highlight bars, uniform inset inside the rounded frame (no square-corner clash, no side channel) */
html body .select2-container .select2-dropdown .select2-results ul{padding:6px!important;}
html body .select2-container .select2-results__option{padding:0!important;border-radius:9px!important;margin:1px 0!important;overflow:hidden!important;}
html body #select2-orderform-service-results li.select2-results__option a,
html body #select2-orderform-category-results li.select2-results__option a{padding:7px 12px!important;line-height:1.35!important;border-radius:9px!important;}
html body .select2-container .select2-results__options::-webkit-scrollbar{width:4px!important;}
html body .select2-container .select2-results__options::-webkit-scrollbar-thumb{background:var(--line-2)!important;border-radius:8px!important;}
html body .select2-container .select2-results__options::-webkit-scrollbar-track{background:transparent!important;}


/* self-contained dropdown card — robust across ALL browsers/devices (no fragile edge alignment) */
html body .select2-container--open .select2-selection{box-shadow:none!important;}
html body .select2-container--open .select2-dropdown{margin-top:8px!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 16px 40px -20px rgba(0,0,0,.55)!important;}


/* dropdown arrow rotates on open (down -> up) — professional touch */
html body .select2-selection__arrow{transition:transform .2s ease!important;transform-origin:center!important;top:0!important;height:100%!important;}
html body .select2-container--open .select2-selection__arrow{transform:rotate(180deg)!important;}


/* fix inner frame: results ul has class dropdown-menu (darker bg) -> force transparent for one uniform color */
html body .select2-container .select2-dropdown .select2-results__options{background:transparent!important;box-shadow:none!important;border:0!important;}


/* compact rows for ALL select2 dropdowns incl. search (no id) — tighten inner <a> padding */
html body .select2-container .select2-dropdown .select2-results .select2-results__option a{padding:5px 12px!important;line-height:1.35!important;border-radius:9px!important;}

/* =========================================================
   CasperSMM — Typography Standard (professional, compact)
   Root pinned so mobile never inflates; one consistent scale.
   ========================================================= */
html{font-size:10px !important;}
@media (max-width:768px){ html{font-size:10px !important;} }
body{font-size:1.6rem;}
h4,.h4{font-size:1.7rem !important;line-height:1.35;}
h5,.h5{font-size:1.35rem !important;}
.card-header{font-size:1.7rem;}
.btn{font-size:1.6rem;}
label,.form-label,.control-label{font-size:1.4rem;}
/* label size sync (match caspersmm 14px) */
html body .control-label, html body .form-label{font-size:1.4rem !important;}

.form-control,.form-select{font-size:1.4rem;}
.table td,.table th,.table th a,.table td a{font-size:1.35rem;}
/* nav size sync */
.casper-nav a{font-size:1.5rem;padding:10px 14px;margin:3px 0;}
/* select2 option size sync */
.select2-results__option,.select2-results,.select2-search__field,.select2-dropdown{font-size:1.4rem !important;}
/* mobile sidebar compact */
@media (max-width:991px){
  .casper-nav a{font-size:1.45rem;padding:10px 14px;margin:2px 0;gap:11px;}
  .casper-nav a .navbar-icon{font-size:1.45rem;width:18px;}
  .casper-nav .badge{font-size:1.05rem;}
}
/* service description size */
#service_description{font-size:1.45rem !important;line-height:1.6 !important;}
/* dark code blocks */
pre,.highlight{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line);border-radius:12px;padding:16px 18px!important;font-size:1.3rem;line-height:1.6;overflow:auto;}
pre code,pre samp{background:transparent!important;color:inherit!important;border:none!important;}
/* orders service id + responsive tables */
.svc-id{color:var(--muted);font-weight:800;}
@media(max-width:820px){
  html,body{overflow-x:hidden!important;max-width:100vw;}
  .casper-main,.casper-content{overflow-x:hidden!important;max-width:100vw;}
  .well,.well-float{width:100%!important;max-width:100%!important;box-sizing:border-box;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  /* wider content on mobile */
  .casper-content{padding-left:14px!important;padding-right:14px!important;}
  .table{min-width:860px;font-size:12.5px;}
  .table th{white-space:nowrap;}
  .table td{white-space:normal;word-break:normal;overflow-wrap:normal;}
  .table td,.table th{padding:9px 8px!important;vertical-align:middle;}
  .btn-xs{font-size:11px!important;padding:4px 9px!important;}
  /* vertical compact status tabs (mobile) - orders + refunds + refill */
  .nav-pills{display:block!important;margin-bottom:12px;}
  .nav-pills>li{display:block!important;width:100%!important;float:none!important;margin:0 0 3px 0!important;}
  .nav-pills>li>a{display:block!important;width:100%!important;padding:9px 14px!important;border-radius:9px!important;text-align:left;font-size:14px;font-weight:600;background:transparent;color:var(--text);}
  .nav-pills>li.active>a{background:var(--brand-grad,var(--brand))!important;color:#fff!important;}
  .nav-pills>li.search{margin-top:14px!important;}
}
/* pro scroll box (global) - orders + refunds + refill details */
.well,.well-float{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;scroll-behavior:smooth;}
.well::-webkit-scrollbar,.well-float::-webkit-scrollbar{height:8px;}
.well::-webkit-scrollbar-thumb,.well-float::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px;}
/* status tabs hover (global) - orders/refunds/refill - no white flash */
/* compact professional tabs (desktop) - orders/refunds/refill */
.nav-pills>li>a{transition:background .15s,color .15s;font-size:13.5px!important;padding:7px 14px!important;border-radius:8px;}
.nav-pills>li>a:hover,.nav-pills>li>a:focus{background:var(--surface-2)!important;color:var(--text-strong)!important;}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{background:var(--brand)!important;color:#fff!important;}
/* order-received / notify toast */
#notify-wrapper{position:fixed!important;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:470px;z-index:99999;margin:0!important;border-radius:16px;padding:18px 20px 18px 56px!important;font-size:13.5px;line-height:1.85;border:1px solid;box-shadow:0 26px 60px -18px rgba(0,0,0,.75);animation:notifyIn .28s cubic-bezier(.2,.9,.3,1.2);}
#notify-wrapper.hidden{display:none!important;}
#notify-wrapper::before{position:absolute;left:18px;top:17px;font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;font-size:22px;line-height:1;}
#notify-wrapper strong{display:block;font-size:15.5px;font-weight:800;margin-bottom:5px;letter-spacing:.2px;}
#notify-wrapper a{color:inherit;text-decoration:underline;word-break:break-all;}
#notify-wrapper.alert-success{background:linear-gradient(160deg,#123a2b,#0e2a20);border-color:rgba(63,208,139,.5);color:#d6f5e6;}
#notify-wrapper.alert-success::before{content:"\f058";color:#3fd08b;}
#notify-wrapper.alert-success strong{color:#7ff0b8;}
#notify-wrapper.alert-danger{background:linear-gradient(160deg,#3a1620,#2c1119);border-color:rgba(220,53,69,.5);color:#f7d9de;}
#notify-wrapper.alert-danger::before{content:"\f06a";color:#ff6b7a;}
#notify-wrapper.alert-danger strong{color:#ff9aa6;}
#notify-wrapper .close,#notify-wrapper button.close{position:absolute;top:10px;right:12px;color:inherit;opacity:.65;font-size:20px;background:none;border:none;cursor:pointer;}
@keyframes notifyIn{from{opacity:0;transform:translate(-50%,16px);}to{opacity:1;transform:translate(-50%,0);}}
/* light alerts + autofill dark */
.alert-info:not(#notify-wrapper){background:rgba(59,130,246,.12)!important;border:1px solid rgba(59,130,246,.32)!important;color:#bcd7ff!important;border-radius:12px;}
.alert-warning:not(#notify-wrapper){background:rgba(245,171,53,.12)!important;border:1px solid rgba(245,171,53,.32)!important;color:#ffd98a!important;border-radius:12px;}
.alert-info a,.alert-warning a{color:inherit;text-decoration:underline;}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--text-strong)!important;-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset!important;box-shadow:0 0 0 1000px var(--surface-2) inset!important;caret-color:var(--text-strong);border-color:var(--line)!important;}
/* dark modals + compact view btn */
.modal-content{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)!important;}
.modal-header{border-bottom:1px solid var(--line)!important;}
.modal-footer{border-top:1px solid var(--line)!important;}
.modal-title,.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4{color:var(--text-strong)!important;}
.modal .close,.modal-header .close,.modal button.close{color:var(--text)!important;opacity:.6;text-shadow:none!important;}
.modal .close:hover{opacity:1;}
.modal-body{color:var(--text)!important;}
.modal-backdrop.in,.modal-backdrop.show{opacity:.65!important;}
.btn-xs{font-size:12.5px!important;padding:5px 13px!important;border-radius:8px!important;font-weight:700;}
/* flush search input-group */
.input-group{display:flex!important;align-items:stretch;}
.input-group>.form-control{flex:1 1 auto;width:1%;border-right:none!important;}
.input-group>.input-group-btn,.input-group>.input-group-append{display:flex;align-items:stretch;width:auto;}
.input-group>.input-group-btn>.btn,.input-group>.input-group-btn>button,.input-group .input-group-btn button{border-radius:0 12px 12px 0!important;border:0.8px solid var(--line)!important;border-left:none!important;margin:0!important;display:flex;align-items:center;justify-content:center;}
/* structured data tables */
.well .table thead th,.well-float .table thead th{background:var(--surface-2);color:var(--muted);font-weight:800;border-top:none!important;border-bottom:1px solid var(--line-2)!important;}
.well .table thead th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px;}
.well .table thead th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;}
.well .table tbody tr,.well-float .table tbody tr{border-bottom:1px solid var(--line);}
.well .table tbody tr:last-child,.well-float .table tbody tr:last-child{border-bottom:none;}
.well .table .btn-xs.btn-default,.well-float .table .btn-xs.btn-default{background:var(--brand)!important;color:#fff!important;border:none!important;font-weight:700;}
.well .table .btn-xs.btn-default:hover,.well-float .table .btn-xs.btn-default:hover{filter:brightness(1.08);}

/* casper-style full-width search bar (orders/refunds/refill) */
.nav-pills>li.search{float:none!important;clear:both!important;display:block!important;width:100%!important;margin:0 0 8px 0!important;padding:28px 0 0 0!important;}
.nav-pills>li.search form{width:100%;}
.nav-pills>li.search .input-group{width:100%;}
.nav-pills>li.search .form-control{height:46px;border-radius:8px 0 0 8px;background:var(--surface-2);border:1px solid var(--line);border-right:none;color:var(--text-strong);font-size:14px;padding:10px 18px;transition:border-color .15s,box-shadow .15s;}
.nav-pills>li.search .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none;position:relative;z-index:2;}
.nav-pills>li.search .btn{height:46px;border-radius:0 8px 8px 0;background:var(--surface-2);border:1px solid var(--line);border-left:none;color:var(--muted);padding:0 22px;font-size:15px;transition:color .15s,background .15s,border-color .15s;}
.nav-pills>li.search .btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;}

/* standard alert font size */
.alert:not(#notify-wrapper){font-size:14px!important;line-height:1.55;padding:12px 38px 12px 14px;}

/* robust autofill dark override */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset!important;-webkit-text-fill-color:var(--text-strong)!important;caret-color:var(--text-strong)!important;border:1px solid var(--line)!important;transition:background-color 99999s ease-in-out 0s!important;}