/* =========================================================================
   FRESHCONNECTPANEL — DESIGN SYSTEM
   File kept as bootstrap.css to preserve PerfectPanel's <link> reference.
   Content is a full replacement: CSS custom properties + component classes
   compatible with existing Twig markup (container, row, col-md-*, navbar,
   form-group, form-control, btn, well, alert, badge, dropdown, collapse).
   ========================================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---- Design tokens ---- */
:root{
  --bg:            #F5F7FC;
  --surface:       #FFFFFF;
  --surface-2:     #EEF1FA;
  --text:          #12173A;
  --text-muted:    #666C8C;
  --border:        rgba(18,23,58,.09);
  --primary:       #0328D1;
  --primary-dark:  #021F9E;
  --primary-ink:   #FFFFFF;
  --accent:        #0328D1;
  --alt:           #56BAFF;
  --success:       #17B89C;
  --cta:           #FF6B4A;
  --danger:        #E5484D;
  --shadow-sm:     0 1px 2px rgba(18,23,58,.06);
  --shadow-md:     0 8px 24px rgba(18,23,58,.10);
  --shadow-lg:     0 24px 60px rgba(18,23,58,.16);
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --font-display:  'Poppins', sans-serif;
  --font-body:     'Poppins', sans-serif;
  --font-mono:     'Poppins', sans-serif;
  --ease:          cubic-bezier(.22,.9,.25,1);
  --dur-fast:      .18s;
  --dur-med:       .45s;
  --dur-slow:      .9s;
}

[data-theme="dark"]{
  --bg:            #0A0D1F;
  --surface:       #12162E;
  --surface-2:     #191E3B;
  --text:          #F1F2F9;
  --text-muted:    #9497B8;
  --border:        rgba(255,255,255,.08);
  --primary:       #56BAFF;
  --primary-dark:  #2E8FE0;
  --primary-ink:   #0328D1;
  --accent:        #56BAFF;
  --alt:           #0328D1;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.3);
  --shadow-md:     0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:     0 24px 60px rgba(0,0,0,.55);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  overflow-x:hidden; width:100%;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-muted); }
a{ color:var(--primary); text-decoration:none; transition:color var(--dur-fast) var(--ease); }
a:hover{ color:var(--primary-dark); }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---- Layout grid (Bootstrap-3-class-compatible) ---- */
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

@media (max-width:600px){
  .container{ padding:0 14px; }
  .well{ padding:22px !important; }
  .guide-block{ padding:20px !important; }
  .page-header{ padding:24px 0 18px; }
}
.container-fluid{ width:100%; padding:0 24px; }
.row{ display:flex; flex-wrap:wrap; margin:0 -12px; }
.row > [class*="col-"]{ padding:0 12px; }
[class^="col-md-"]{ flex:0 0 auto; width:100%; }
/* col-lg-* was never mapped here at all — Services, Orders, Updates, API,
   Drip Feed, Refill, Refunds, Subscriptions and the blog post template all
   use col-lg-12 (or col-lg-8) as their outer content column, and with no
   matching CSS rule it was an unstyled flex item inside .row{display:flex}.
   A flex item with no flex-grow doesn't fill its row just because it's
   alone in it — it shrinks to fit its content instead, and with a wide
   table sitting inside .well-float's overflow-x:auto (which lets a
   descendant's box be smaller than its content since the overflow is
   deferred to a scrollbar), that "fit content" width could resolve
   narrower than the actual available row width. That's what was leaving a
   gap of unstyled page background on the right of those pages' content —
   not a container/margin issue, this element just was never told to be
   full width like col-md-12 always was. */
[class^="col-lg-"]{ flex:0 0 auto; width:100%; }
@media (min-width:768px){
  .col-md-1{width:8.333%} .col-md-2{width:16.667%} .col-md-3{width:25%}
  .col-md-4{width:33.333%} .col-md-5{width:41.667%} .col-md-6{width:50%}
  .col-md-7{width:58.333%} .col-md-8{width:66.667%} .col-md-9{width:75%}
  .col-md-10{width:83.333%} .col-md-11{width:91.667%} .col-md-12{width:100%}
  .col-lg-8{width:66.667%} .col-lg-12{width:100%}
  .col-md-offset-2{margin-left:16.667%}
  .col-lg-offset-2{margin-left:16.667%}
  .text-md-right{ text-align:right; }
}
.hidden{ display:none !important; }

/* ---- Navbar ---- */
body{ padding-top:14px; }
.navbar{
  background:var(--surface); border:1px solid var(--border);
  padding:0 12px; position:sticky; top:12px; z-index:100;
  border-radius:28px; box-shadow:var(--shadow-lg);
  width:calc(100% - 24px); max-width:1180px; margin:0 auto 14px;
  transition:background var(--dur-med) var(--ease);
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:none; padding:0 8px;
}
.navbar-brand{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); display:flex; align-items:center; gap:9px; white-space:nowrap; flex:0 0 auto; }
.navbar-brand img{ height:100px; width:auto; max-width:none; flex-shrink:0; }
@media (max-width:900px){
  .navbar-brand img{ height:96px; }
  .navbar .container{ padding:10px 8px; }
}
@media (max-width:520px){
  .navbar-brand img{ height:72px; }
  .navbar .container{ padding:8px 8px; }
}
.logo-dark{ display:none; }
[data-theme="dark"] .logo-light{ display:none; }
[data-theme="dark"] .logo-dark{ display:block; }
.navbar-nav{ list-style:none; display:flex; gap:2px; margin:0; padding:0; align-items:center; white-space:nowrap; }
.navbar-nav > li > a{
  display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:9px;
  color:var(--text-muted); font-weight:500; font-size:14px;
}
.navbar-nav > li.active > a{ color:var(--primary-ink); background:var(--primary); font-weight:600; }
.navbar-nav > li > a:hover{ color:var(--text); }
/* Same specificity as the rule above (2 classes + 2 elements each), so
   without this the generic hover rule wins on source order and overrides
   just the text color on the active (blue-background) item — leaving
   near-black text (--text) on a blue pill in light mode, which is the
   low-contrast "black text on hover" bug. Keep the active item's ink color
   through hover explicitly. */
.navbar-nav > li.active > a:hover{ color:var(--primary-ink); }

.navbar-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:8px; padding:8px 10px; cursor:pointer; flex:0 0 auto; }
.navbar-toggle .icon-bar{ display:block; width:20px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; }

/* #navbar is the real Bootstrap .collapse.navbar-collapse wrapper — inline
   flex row on desktop, dropdown panel toggled by .navbar-toggle on mobile.
   Toggling is handled by PerfectPanel's own Bootstrap JS (data-toggle="collapse"),
   not our script.js, to avoid a double-toggle conflict. */
#navbar.collapse{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

@media (max-width:960px){
  .navbar-toggle{ display:block; }
  #navbar.collapse{
    display:none; flex-basis:100%; width:100%; flex-direction:column; align-items:stretch;
    background:var(--surface); border-top:1px solid var(--border); margin-top:12px; padding:12px 4px 16px; gap:4px;
  }
  #navbar.collapse.in{ display:flex; }
  /* Checked against the real bootstrap.js: Collapse.prototype.show/hide both
     do `.removeClass('collapse').addClass('collapsing')` (and the reverse on
     hide removes 'collapse' + 'in' too) — so during the whole height
     animation the element does NOT have the "collapse" class at all, only
     "collapsing". The previous rule here required BOTH ".collapse" and
     ".collapsing" together, which per the real plugin code can never be
     true, so it never matched — that's why the flash was still happening.
     Matching on ".collapsing" alone (no ".collapse" required) is what
     actually applies during the animation.
     Also: nowhere in this stylesheet is there a generic ".collapsing{
     overflow:hidden}" rule (that's normally part of Bootstrap's own bundled
     CSS, which this theme doesn't load — only its JS). Bootstrap's JS sets
     the element's height directly via inline style during the animation,
     but never touches overflow itself — it just assumes a CSS rule already
     clips it. Without overflow:hidden here, the nav links stay fully
     rendered and visible past the box's own shrinking height for the whole
     350ms (Collapse.TRANSITION_DURATION) close animation, floating over
     the page content behind them — that's the "background leaves before
     the menu" gap on close. Adding overflow:hidden plus an actual height
     transition (so it animates instead of snapping) fixes both directions. */
  #navbar.collapsing{
    display:flex; flex-basis:100%; width:100%; flex-direction:column; align-items:stretch;
    background:var(--surface); border-top:1px solid var(--border); margin-top:12px; padding:12px 4px 16px; gap:4px;
    overflow:hidden; transition:height .35s ease;
  }
  .navbar-nav{ flex-direction:column; align-items:stretch; gap:2px; }
  .navbar-nav > li > a{ padding:12px 16px; }
}

/* ---- Theme toggle ---- */
.theme-toggle{
  display:flex; align-items:center; gap:8px; flex:0 0 auto; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px 6px 6px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text);
  transition:background var(--dur-fast) var(--ease); white-space:nowrap;
}
.theme-toggle .track{
  width:34px; height:18px; border-radius:999px; background:var(--border); position:relative; flex:0 0 auto;
}
.theme-toggle .track::after{
  content:'☀️'; font-size:11px; line-height:14px; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-fast) var(--ease);
}
[data-theme="dark"] .theme-toggle .track::after{ content:'🌙'; transform:translateX(16px); }
.theme-toggle .tt-label::after{ content:'Light'; }
[data-theme="dark"] .theme-toggle .tt-label::after{ content:'Dark'; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff 18%), var(--primary));
  color:var(--primary-ink); font-weight:700; border-bottom:3px solid var(--primary-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 6px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, #fff 10%), var(--primary-dark));
  color:var(--primary-ink); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.2),
    0 10px 20px -4px color-mix(in srgb, var(--primary) 60%, transparent);
}
.btn-primary:active{
  transform:translateY(2px) scale(.98); border-bottom-width:1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.btn-cta{ background:var(--cta); color:#fff; }
.btn-cta:hover{ filter:brightness(1.07); transform:translateY(-1px); color:#fff; }
.btn-block{ display:flex; width:100%; }

/* ---- Forms ---- */
.form-group{ margin-bottom:18px; }
.control-label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.form-control{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:15px; font-family:var(--font-body);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,95,239,.15); }
.form-inline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.forgot-password{ float:right; font-size:13px; }
.form-group__password{ overflow:hidden; }
.pull-right-middle{ font-size:14px; color:var(--text-muted); }
.pull-right{ float:right; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.help-block{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.nowrap{ white-space:nowrap; }

/* ---- Checkbox ---- */
.checkbox{ margin:4px 0 18px; }
.checkbox label{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-muted); font-weight:400; cursor:pointer; }
.checkbox input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; accent-color:var(--primary); flex:0 0 auto; cursor:pointer; }
.checkbox a{ font-weight:600; }

/* ---- Simple auth page (signup, reset-password, etc.) ---- */
.auth-page{ position:relative; min-height:calc(100vh - 220px); display:flex; align-items:center; padding:48px 24px; overflow:hidden; }
.auth-card-wrap{ position:relative; z-index:1; max-width:480px; width:100%; margin:0 auto; }
.auth-card-wrap .eyebrow{ display:flex; margin:0 auto 16px; width:fit-content; }
.auth-card-wrap h1{ text-align:center; font-size:clamp(26px,4vw,34px); margin-bottom:8px; }
.auth-card-wrap .auth-sub{ text-align:center; margin-bottom:28px; }

/* =========================================================================
   SHARED APP CHROME — page headers, tables, dropdown/nav-pills, code blocks
   Used across services, API, and every authenticated dashboard page.
   ========================================================================= */
.page-header{ padding:36px 0 28px; }
.page-header h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:6px; }
.page-header p{ margin:0; }

.well.well-float{ padding:24px; overflow-x:auto; }
@media (max-width:600px){ .well.well-float{ padding:12px; } }

/* ---- Order history cards (replaces the old Orders table) ---- */
.order-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; margin-bottom:24px; }
.order-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:20px; display:flex; flex-direction:column; gap:12px;
}
.order-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--border); font-weight:700;
}
.order-card-id{ display:flex; align-items:center; gap:8px; font-size:14.5px; }
.order-copy-btn{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
  cursor:pointer; font-size:11px; padding:0; flex:0 0 auto;
}
.order-copy-btn:hover{ color:var(--text); background:var(--surface); }
.order-copy-btn.is-copied{ color:var(--success); border-color:var(--success); }
.order-card-charge{ font-size:15px; color:var(--primary); }
.order-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.order-card-field{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.order-card-field-full{ grid-column:1 / -1; }
.order-card-k{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.order-card-v{ font-size:14px; color:var(--text); word-break:break-word; }
.order-card-link-row{ display:flex; align-items:center; gap:8px; }
.order-card-link-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-card-detail-btn{ flex:0 0 auto; color:var(--text-muted); }
.order-card-detail-btn:hover{ color:var(--primary); }
.order-card-status{
  align-self:flex-start; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:var(--surface-2); color:var(--text-muted); display:flex; align-items:center; gap:6px;
}
.order-status-completed{ background:rgba(23,184,156,.12); color:var(--success); }
.order-status-inprogress, .order-status-processing{ background:rgba(3,40,209,.1); color:var(--primary); }
.order-status-pending, .order-status-partial{ background:rgba(255,107,74,.12); color:var(--cta); }
.order-status-canceled{ background:rgba(229,72,77,.1); color:var(--danger); }
.order-card-actions{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }

.table{ width:100%; border-collapse:collapse; font-size:14px; }
@media (max-width:900px){
  /* This table has too many columns to usefully reflow on a phone — instead
     of squeezing every column unreadable, keep it at a real desktop width
     and let .well-float's overflow-x:auto handle horizontal scrolling. */
  #service-table{ min-width:760px; }
}

/* REVERTED: table-layout:fixed here previously broke the table outright —
   with several of the th's conditional (favorite-star column, average-time
   column) the real column count varies per account/site config, so the
   "split the remaining width evenly among unspecified columns" behavior of
   fixed layout squeezed the nowrap Rate/Min/Max/Avg-time headers into cells
   too narrow to hold them, and since nowrap text isn't clipped by default it
   visibly overlapped the neighboring columns. Back to table-layout:auto
   (the default — not re-declared) and instead just capping the one column
   that was actually causing the post-load reflow (service name, which
   PerfectPanel's own search/filter plugin modifies after init) with a hard
   width, so that cell alone can't grow the table after the fact without
   having to hand-size every other column.
   Previously this also truncated the name with an ellipsis, which hid the
   full service name — the client's old site shows the complete name, no
   cut-off, so this now wraps onto multiple lines within the fixed width
   instead of clipping. Wrapping (not a single unclipped line) is still
   what keeps the column from being able to grow the table again — the
   width is capped either way, this just changes what happens to text that
   doesn't fit on one line: wrap it, don't hide it.
   NOT `word-break:break-word` — per spec that value computes to
   `word-break:normal; overflow-wrap:anywhere`, and unlike plain
   `overflow-wrap:break-word`, "anywhere" is counted by the browser's
   auto table-layout algorithm when it works out each column's minimum
   possible width, letting it treat this column as shrinkable down to a
   single character. On a real phone width, table-layout:auto then had
   to steal space from *somewhere* to fit the other nowrap columns
   (Rate/Min/Max/Average Time, which can't shrink), and this was the one
   column willing to give it up — collapsing to a sliver where every
   word, including the "SERVICE" header, wrapped one letter per line.
   Plain `overflow-wrap:break-word` still wraps an unusually long single
   word when needed, it just isn't counted toward that minimum-width
   calculation, so the column keeps behaving like a normal ~240px column
   instead of getting crushed. */
#service-table td.service-name, #service-table th.width-service-name{
  width:240px; max-width:240px; white-space:normal; overflow-wrap:break-word;
}

/* ---- Global scale-down: the design reads slightly large overall. Using
   `zoom` (well-supported: Chrome, Safari, Edge, Firefox 126+) rather than
   transform:scale, since transform doesn't affect layout flow and would
   need extra width/height compensation to avoid clipping or stray gaps. ---- */
html{ zoom:0.85; }

/* ---- Force-desktop pages: Services only (Orders was moved off this in
   layout.twig's URL-detection script — a wide table + real mobile layout is
   what's wanted there now, not a scaled-down desktop canvas). Instead of the
   earlier viewport-meta-width trick (unreliable — many mobile browsers
   don't auto-scale to fit and just crop the wider layout instead), this
   computes the exact zoom ratio needed to fit a 1024px-wide desktop layout
   into whatever the real device width is, so nothing is ever cropped. This
   REPLACES (doesn't stack with) the 0.7 global zoom above, since it's a
   more specific rule targeting the same property. */
html.force-desktop-view{ zoom:calc(100vw / 1024px); }
html.force-desktop-view body{ min-width:1024px; }
/* No dropdown-direction override here anymore — the sitewide default below
   is now left:0 (open rightward, toward the middle of the screen) for
   exactly this reason: forcing right:0 here made the filter dropdown's menu
   open leftward off the edge of the screen when its toggle button sits near
   the left of the row, which is what every "dropdown opens off to the side"
   report has actually been. */

/* ---- Compact pages (Updates): tighter type + padding so wide tabular
   content has more room to breathe on narrow screens, without forcing full
   desktop-scale like Services. ---- */
html.compact-page .table{ font-size:12.5px; }
html.compact-page .table th, html.compact-page .table td{ padding:8px 6px; }
@media (max-width:600px){
  html.compact-page .container{ padding:0 8px; }
  html.compact-page .well-float{ padding:14px; }
}
.table th{
  text-align:left; font-weight:600; color:var(--text-muted); font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.table td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:hover{ background:var(--surface-2); }
.table tr[data-filter-table-category-id] td[colspan]{
  background:var(--surface-2); color:var(--primary); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border);
}
/* The category icon can render as an <img> (this stylesheet's global reset
   sets img{display:block}, which forces a line break before whatever
   follows it) or as a <span> icon/emoji (inline by default, so no break) —
   inconsistent depending on which icon type an admin picked. Wrapping both
   the icon and the name in one inline-flex row makes them sit side by side
   regardless of which icon type is used, instead of the icon stacking above
   the name whenever it happens to be an image. */
.category-header-inline{ display:inline-flex; align-items:center; gap:8px; }

.nav-pills{ list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0; margin:0 0 16px; }
/* Search fills whatever row space is left after the filter button(s) to its
   left, spanning to the right edge — not a fixed box. flex:1 with a
   min-width lets it grow to fill the row and still shrink/wrap to its own
   line if the row genuinely can't fit it next to the filter button(s).
   min-width was 200px, which worked on Services (its filter toggle is just
   an icon, ~50px) but was too high on Orders/Updates, whose filter buttons
   show the active option as text ("All ▾") and are noticeably wider — the
   combined width didn't fit most phone screens, so flex-wrap:wrap (further
   down) kicked in and dropped search to its own line below the button
   instead of sharing the row. Lowering the floor gives it enough shrink
   room to stay on the same row as a labeled button, not just an icon one. */
.nav-pills .search{ flex:1 1 140px; min-width:110px; float:none; }
.nav-pills .search .input-group{ width:100%; }
/* Tickets' search form (tickets.twig) isn't wrapped in a <li class="search">
   like Services/Orders/Updates — it's a bare <form id="history-search">
   sitting directly inside .nav-pills, so the .nav-pills .search rule above
   never matches it at all. With no flex-grow of its own, that form was an
   unstyled flex item that just shrinks to fit its content instead of
   filling the row — the same "unstyled flex item" bug that hit col-lg-*
   earlier in this project, just one level down. Widening tickets.twig's
   outer column to col-md-12 (last round) was necessary but not sufficient
   — this is the other half of that fix. Scoped to a direct-child form so it
   doesn't affect Services/Orders/Updates, where the form is nested one
   level deeper inside <li class="search"> instead. */
.nav-pills > form{ flex:1 1 auto; min-width:0; }
.nav-pills > form .input-group{ width:100%; }
/* A mobile-width column-stacking rule used to live here
   (html:not(.force-desktop-view) .nav-pills{flex-direction:column}),
   scoped to skip Services because CSS `zoom` doesn't change what @media
   width queries evaluate against, so it was stretching Services' filter
   button/menu when it fired there. But the scoping meant Orders and
   Updates — which don't carry .force-desktop-view — kept getting
   stacked into two rows (button, then a full-width search bar below it)
   on every phone-width screen, which is exactly the "search bar and
   filter button aren't on the same row" + "extra space before the
   table" symptom: a two-row stack is taller than one row, and reads as
   a gap above the table. Removed outright so every page uses the same
   flex row + wrap layout Services already uses — the .search flex-basis
   fix above already makes it wrap gracefully if a row genuinely can't
   fit both pieces, so the forced stack isn't needed anywhere. */
.input-group{ display:flex; align-items:stretch; }
.input-group .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; flex:1; min-width:0; }
.input-group-btn{ display:flex; }
.input-group-btn .btn{ border-top-left-radius:0; border-bottom-left-radius:0; padding:0 18px; height:auto; }
.btn-default{ background:var(--primary); color:var(--primary-ink); border:1px solid var(--primary); }
.btn-default:hover{ background:var(--primary-dark); color:var(--primary-ink); }
.btn-xs{ padding:5px 10px; font-size:12px; border-radius:8px; }

.dropdown-toggle .caret{ margin-left:4px; }

pre, code{ font-family:var(--font-mono); }
pre{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:16px; overflow-x:auto; font-size:13px; line-height:1.6;
}
code{ background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:13px; }
pre code{ background:none; padding:0; }

/* ---- Dashboard stat cards (new order landing page) ---- */
.dash-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.dash-stats-4col{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .dash-stats-4col{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .dash-stats-4col{ grid-template-columns:1fr; } }

.app-download-banner{
  background:linear-gradient(135deg,var(--primary),#8B5FEF); border-radius:var(--radius-lg);
  padding:36px 28px; text-align:center; color:#fff; margin-top:8px;
}
.app-download-banner .app-download-icon{ font-size:32px; margin-bottom:10px; }
.app-download-banner h3{ color:#fff; font-size:19px; margin:0 0 8px; }
.app-download-banner p{ color:rgba(255,255,255,.85); font-size:14px; max-width:420px; margin:0 auto 20px; }
.app-download-banner .btn{ background:#fff; color:var(--primary-dark); }
.dash-stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px; display:flex; align-items:center; gap:14px;
}
.dash-stat-icon{
  width:42px; height:42px; border-radius:10px; background:rgba(3,40,209,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto;
}
.dash-stat-card b{ font-size:16px; display:block; }
.dash-stat-card span{ font-size:12.5px; color:var(--text-muted); display:block; margin-bottom:8px; }
.dash-stat-card a{ font-weight:600; }
/* "Learn More" / "Fund wallet" were plain inline text links (12.5px, packed
   into a card that already has an icon + bold value + small label) — an easy
   target to miss or mis-tap on mobile, which is what "the button isn't
   clicking" turned out to be: the link was always functional (correct href),
   it was just too small/inconspicuous to reliably hit. Promoting it to the
   same 3D button style used everywhere else on the site (.btn-primary) both
   fixes the tap-target size and matches the client's request to reuse that
   button style here. */
.dash-stat-btn{ margin-top:2px; }

/* ---- Dashboard quick actions (New Order / Add Funds / Order History) ----
   Explicitly requested as 3-in-a-row on every device, mobile included — an
   earlier pass added a ≤600px breakpoint that stacked them into one column,
   which was never asked for and directly contradicted "should be in a row".
   Removed that breakpoint; narrow screens instead get smaller buttons/gap/
   text so all 3 still fit on one line rather than wrapping or overflowing. */
.dash-quick-actions{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px;
}
.dash-quick-actions .btn{
  width:100%; padding:12px 10px; font-size:14px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; gap:6px;
}
@media (max-width:480px){
  .dash-quick-actions{ gap:8px; }
  .dash-quick-actions .btn{ padding:9px 4px; font-size:11.5px; border-radius:9px; }
}

.dash-video-wrap{ border-radius:16px; overflow:hidden; margin:0 0 20px; position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.dash-video-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; display:block; }
.dash-app-download{ text-align:center; margin:0 0 28px; }

/* ---- Tab interface: Dashboard / Place Order (same page, feels separate) ---- */
.page-tabs{ display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:0; }
.page-tab{
  padding:12px 22px; font-weight:700; font-size:14.5px; color:var(--text-muted); cursor:pointer;
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color var(--dur-fast) var(--ease);
}
.page-tab:hover{ color:var(--text); }
.page-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.guide-block{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; margin-bottom:20px; }
.guide-block .highlight{ color:var(--primary); font-weight:600; }

.guide-steps{ display:flex; flex-direction:column; gap:12px; }
.guide-step{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--surface-2); border-radius:12px; }
.guide-step-icon{ width:30px; height:30px; border-radius:8px; background:rgba(3,40,209,.12); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex:0 0 auto; }
.guide-step p{ margin:0; font-size:14px; line-height:1.6; color:var(--text); }
.guide-tip{ display:flex; gap:12px; align-items:center; background:rgba(23,184,156,.08); border-radius:12px; padding:14px 18px; margin-top:8px; }
.guide-tip p{ margin:0; font-size:13.5px; color:var(--text); }

.update-card{
  display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--primary),#8B5FEF);
  border-radius:var(--radius-lg); padding:26px 28px; color:#fff;
}
.update-card .update-badge{ background:rgba(255,255,255,.2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:8px; }
.update-card h3{ color:#fff; font-size:18px; margin:0 0 6px; }
.update-card p{ color:rgba(255,255,255,.85); margin:0 0 14px; font-size:14px; }
.update-card .btn{ background:#fff; color:var(--primary-dark); }
.update-card .update-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Restyle PerfectPanel's visual-builder dashboard widget (New Order page
   stat cards) to match our design system. This targets the builder's own
   class names directly — it doesn't touch how the widget gets its live data
   (Explorer tier, discount %, balance, active services), only how it looks. ---- */
.totals-block__card{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-md) !important; box-shadow:none !important;
  padding:20px !important; display:flex !important; align-items:center !important; gap:14px !important;
}
.totals-block__icon-preview{
  background:rgba(3,40,209,.1) !important; border-radius:10px !important;
  width:42px !important; height:42px !important; min-width:42px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.totals-block__icon{ color:var(--primary) !important; font-size:18px !important; }
.totals-block__count-value{ color:var(--text) !important; font-size:16px !important; font-family:var(--font-display) !important; }
.totals-block__card-name, .totals-block__card-name p{ color:var(--text-muted) !important; font-size:12.5px !important; margin:0 !important; }
.totals-block__card-name a{ color:var(--primary) !important; font-weight:600 !important; }
.col-ed-elements{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:16px !important; }

/* ---- Contact page: platform cards ---- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.contact-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.contact-card .contact-icon{
  width:44px; height:44px; border-radius:10px; background:rgba(3,40,209,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.contact-card h4{ font-size:16px; margin:0; }
.contact-card p{ font-size:14px; margin:0; flex:1; }
.contact-card a.btn{ align-self:flex-start; padding:8px 16px; font-size:13.5px; }

/* ---- Modal ---- */
.modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(10,13,31,.55); padding:20px; }
.modal.in, .modal.show{ display:flex; }
.modal-dialog{ width:100%; max-width:520px; }
.modal-content{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header{ padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title{ font-size:17px; margin:0; }
.modal-body{ padding:22px; }
.modal .close{ background:none; border:none; font-size:20px; color:var(--text-muted); cursor:pointer; }

/* ---- Ticket thread ---- */
.titcket-title{ font-size:19px; font-weight:700; margin-bottom:20px; }
.ticket-message-block{ margin-bottom:18px; }
.ticket-message{
  background:var(--surface-2); border-radius:16px; padding:16px 18px; display:inline-block; max-width:100%;
}
.ticket-message-right .ticket-message{ background:var(--primary); color:var(--primary-ink); border-bottom-right-radius:4px; }
.ticket-message-left .ticket-message{ border-bottom-left-radius:4px; }
.ticket-message-right .ticket-message a{ color:var(--primary-ink); text-decoration:underline; }
.ticket-message .message{ font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.ticket-message-block .info{ margin-top:6px; font-size:12.5px; color:var(--text-muted); }
.ticket-message-block .info strong{ color:var(--text); }
.ticket-message-block .text-right{ text-align:right; }
.panel-border-top{ border-top:1px solid var(--border); padding-top:20px; margin-top:8px; }

/* =========================================================================
   AUTHENTICATED APP SHELL — persistent sidebar (desktop) + drawer (mobile)
   ========================================================================= */
.app-shell{ display:flex; align-items:flex-start; }
.app-sidebar{
  width:260px; flex:0 0 260px; position:sticky; top:0; align-self:flex-start; height:100vh;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 16px; z-index:80;
}
.app-sidebar-brand{ display:block; margin-bottom:20px; padding:0 6px; }
.app-sidebar-brand img{ height:52px; width:auto; }
.app-sidebar-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.app-sidebar-nav li a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:var(--text-muted); font-weight:500; font-size:14.5px; }
.app-sidebar-nav li a:hover{ background:var(--surface-2); color:var(--text); }
.app-sidebar-nav li.active a{ background:var(--primary); color:var(--primary-ink); font-weight:600; }
.app-sidebar-nav .navbar-icon{ width:18px; text-align:center; flex:0 0 auto; }
.app-sidebar-footer{ padding-top:14px; border-top:1px solid var(--border); margin-top:12px; }
.app-sidebar-footer .theme-toggle{ width:100%; justify-content:center; }

.app-main{ flex:1; min-width:0; }
.app-topbar-desktop{
  display:flex; justify-content:flex-end; align-items:center; padding:16px 28px; border-bottom:1px solid var(--border);
  gap:10px; position:sticky; top:0; z-index:70; background:var(--surface);
}
.app-account-menu{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; }
.app-account-menu li a{ font-size:14px; font-weight:600; color:var(--text); padding:8px 14px; border-radius:10px; display:flex; align-items:center; gap:6px; }
.app-account-menu li a:hover{ background:var(--surface-2); }
.app-content{ padding:28px; }

.app-topbar-mobile{ display:none; }
.app-drawer{ display:none; }

@media (max-width:960px){
  .app-sidebar{ display:none; }
  .app-topbar-desktop{ display:none; }
  .app-topbar-mobile{
    display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:12px;
    background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
  }
  .app-topbar-mobile .navbar-brand img{ height:44px; }
  /* .app-drawer sits in normal document flow right after .app-topbar-mobile
     (a *sticky* element, not fixed) — sticky siblings still occupy their
     normal-flow space, so the drawer's position in the DOCUMENT is fixed
     near the very top of .app-main regardless of scroll. Opening it after
     scrolling far down therefore opened it far above the current viewport,
     forcing a scroll back to the top to see any menu items. Anchoring the
     open drawer with position:fixed right below the topbar (which is always
     visually pinned to the top of the viewport via its own sticky rule)
     keeps it directly under the topbar no matter how far the page is
     scrolled. 65px = the topbar's own rendered height (10px vertical
     padding × 2 + 44px logo + 1px border). */
  .app-drawer.in{
    display:block; position:fixed; top:65px; left:0; right:0; z-index:99;
    max-height:calc(100vh - 65px); overflow-y:auto;
  }
  /* Same transient-collapsing gap as #navbar above (see comment there) —
     covered here too since the dashboard drawer uses the same real
     Bootstrap collapse toggle. */
  .app-drawer.collapsing{
    display:block; position:fixed; top:65px; left:0; right:0; z-index:99;
    background:var(--surface); border-bottom:1px solid var(--border); padding:14px 16px 18px;
    overflow:hidden; transition:height .35s ease;
  }
  .app-drawer{ background:var(--surface); border-bottom:1px solid var(--border); padding:14px 16px 18px; }
  .app-drawer ul{ list-style:none; margin:0 0 14px; padding:0; }
  .app-drawer li a{ display:flex; align-items:center; gap:10px; padding:10px 8px; font-weight:500; color:var(--text); border-radius:8px; }
  .app-drawer li.active a{ color:var(--primary-ink); background:var(--primary); font-weight:700; }
  .app-content{ padding:20px 16px; }
}

/* ---- Blog list ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; align-items:stretch; margin-bottom:48px; }
.well.blog-card{
  padding:0; overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card img{ width:100%; height:180px; object-fit:cover; }
.blog-card .blog-card-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-card h4{ font-size:17px; margin-bottom:10px; line-height:1.35; }
.blog-card .blog-card-body > div{ color:var(--text-muted); font-size:14px; margin-bottom:16px; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.blog-card .btn{ align-self:flex-start; }

/* ---- Pagination ---- */
.pagination{ list-style:none; display:flex; gap:6px; padding:0; margin:24px 0 40px; justify-content:center; }
.pagination li a{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px;
  border-radius:10px; border:1px solid var(--border); color:var(--text); font-weight:600; font-size:14px;
}
.pagination li a:hover{ background:var(--surface-2); }
.pagination li.active a{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }

/* ---- Well / card ---- */
.well{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:36px; box-shadow:var(--shadow-md); margin-bottom:22px;
}
/* REMOVED .well:last-child{margin-bottom:0} — most pages put each .well in
   its own dedicated container/row/col wrapper (addfunds.twig's payment-info
   well and its payment-history well right below it are a good example: two
   separate <div class="container"> blocks, each with exactly one .well
   inside). Every one of those wells is technically "the last (and only)
   .well child of ITS OWN parent", so :last-child was matching and zeroing
   out margin-bottom on essentially every well on the site, including ones
   sitting directly above another well-bearing section — which is exactly
   what was collapsing the gap between them. Losing this rule just means a
   trailing ~22px of extra space below a well that happens to be the last
   thing before the footer on some pages — harmless — instead of silently
   erasing the gap between two clearly-separate stacked sections. */

/* ---- Alerts ---- */
.alert{ padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:14.5px; position:relative; }
.alert-danger{ background:rgba(229,72,77,.1); color:#E5484D; border:1px solid rgba(229,72,77,.25); }
.alert-success{ background:rgba(23,184,156,.1); color:#0E8C77; border:1px solid rgba(23,184,156,.25); }
.alert .close{ position:absolute; right:14px; top:10px; background:none; border:none; font-size:18px; color:inherit; cursor:pointer; opacity:.6; }
.alert .close:hover{ opacity:1; }

/* ---- Badge / caret / dropdown ---- */
.badge{ background:var(--surface-2); color:var(--text); font-family:var(--font-mono); font-size:13px; padding:4px 10px; border-radius:999px; }
.dropdown-currencies .dropdown-toggle{ display:flex; align-items:center; gap:8px; }
.dropdown-currencies .badge{ background:var(--primary); color:var(--primary-ink); font-weight:700; padding:8px 16px; }
.dropdown-currencies .caret{ color:var(--primary); }
.app-drawer .dropdown-currencies .badge{ width:100%; justify-content:center; display:flex; }
.caret{ display:inline-block; width:0; height:0; margin-left:5px; border:4px solid transparent; border-top-color:currentColor; vertical-align:middle; }
.dropdown{ position:relative; }
/* Scoped to .dropdown (my own currency/account menus) specifically — NOT a
   bare .dropdown-menu selector. PerfectPanel's category/service search
   plugin (data-select="true") also generates elements with a generic
   "dropdown-menu" class; an unscoped rule here was overriding its own
   compact mobile styling, causing the oversized, poorly-spaced rows. */
/* Default anchor is left:0 (menu opens rightward from the button) — every
   filter/type dropdown on the site (services category, orders status,
   updates type) has its toggle button at the LEFT of its row, so opening
   rightward keeps the menu on-screen. right:0 (opening leftward) is only
   correct for a toggle that sits at the right edge of the screen, which is
   just the account/currency menu in the desktop topbar — that gets its own
   override right below instead of being the sitewide default. */
.dropdown > .dropdown-menu{
  position:absolute; left:0; right:auto; top:calc(100% + 8px); min-width:180px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px;
  list-style:none; display:none; z-index:200; max-height:320px; overflow-y:auto;
  max-width:calc(100vw - 32px);
}
.dropdown.open > .dropdown-menu{ display:block; }
.dropdown > .dropdown-menu li a{ display:block; padding:8px 12px; border-radius:8px; color:var(--text); font-size:14px; }
.dropdown > .dropdown-menu li a:hover{ background:var(--surface-2); }
.dropdown > .dropdown-menu li.active a{ background:var(--primary); color:var(--primary-ink); font-weight:700; }
/* The one dropdown that genuinely sits at the right edge of the screen:
   the account/currency menu in the desktop authenticated topbar
   (.app-topbar-desktop is justify-content:flex-end and only shown above the
   960px breakpoint — its mobile-drawer equivalent is at the left already,
   so it uses the default). Opening rightward there would run off the right
   edge, so it keeps the old leftward-opening behavior. */
.app-topbar-desktop .dropdown > .dropdown-menu{ left:auto; right:0; }

/* ---- Tooltips ----
   This file is a full replacement for Bootstrap's CSS (see the file-level
   comment at the top), so nothing here ever defined how a Bootstrap
   tooltip popup should look. The bundled bootstrap.js Tooltip plugin
   still works fine and inserts a real `<div class="tooltip" role="tooltip">`
   into the page when triggered (see script.js's initTooltips) — but
   without a `.tooltip{position:absolute}` rule, that div has no
   positioning at all and just drops into the normal document flow at
   wherever it got inserted, which is usually right inside a table cell
   (the Average Time header, the cancel-reason icon on Orders). An
   unstyled block sitting inside a table cell forces that cell — and
   the table's whole auto-layout column-width calculation — to expand
   around it, which is what was throwing the entire table's layout into
   disarray the moment a tooltip was opened, instead of a small floating
   box appearing over the page. These are Bootstrap 3's own standard
   tooltip rules (the plugin's JS expects this exact structure/class
   naming), just not previously included since only select pieces of
   Bootstrap's CSS were ported into this file. */
/* UPDATE: on real testing, Bootstrap's JS-computed inline top/left for the
   popup landed nowhere near its trigger — this site applies CSS `zoom` sitewide
   (and an extra zoom:calc(100vw/1024px) "force desktop view" scale on
   Services), and the plugin positions the tip using getBoundingClientRect()
   pixel math that doesn't translate correctly through a zoom scale, the same
   family of bug that's hit dropdown/collapse positioning earlier in this
   project. Rather than patch that math, positioning is now pure CSS,
   anchored to the trigger's own immediate parent (the plugin inserts the
   popup as that element's next sibling when no `container` option is set —
   see script.js) via :has(), and forced with !important so it always wins
   over whatever inline top/left the plugin still sets. That parent needs
   position:relative to be an anchor at all. Every current trigger uses
   data-placement="top", so this originally forced the box directly above
   its icon.
   UPDATE 2: that put the popup right at the *top* edge of .well-float —
   every current trigger (Average Time header, rate cell, Orders'
   cancel-reason/refill icons) lives inside that box, and .well-float has
   overflow-x:auto for the table's horizontal scrolling. Per the CSS
   Overflow spec, setting overflow-x to anything but visible forces the
   used value of overflow-y to auto too (a browser can't scroll one axis
   and leave the other truly unclipped) — so .well-float was quietly
   clipping vertically as well, and a popup opening upward from a cell
   near the very top of that box had nowhere to go but into that clipped
   region, appearing cut off right under the search bar instead of as a
   floating box. Forcing the popup downward instead opens it into the
   table's own body rows, which is well within .well-float's visible
   area, so nothing clips it. The arrow rules below are likewise forced
   to always point up (ignoring which of Bootstrap's top/right/bottom/left
   classes actually got applied, since real placement is no longer used)
   to match a popup that's always below its trigger. */
:has(> [data-toggle="tooltip"]){ position:relative; }
.tooltip{
  position:absolute !important; z-index:1070; display:block; font-family:var(--font-body);
  font-size:12px; font-style:normal; font-weight:400; line-height:1.42857143;
  text-align:left; text-decoration:none; text-shadow:none; text-transform:none;
  letter-spacing:normal; word-break:normal; word-spacing:normal; white-space:normal;
  opacity:0; filter:alpha(opacity=0);
  top:100% !important; right:auto !important; bottom:auto !important; left:50% !important;
  transform:translateX(-50%);
  margin-top:8px;
}
.tooltip.in{ opacity:.9; filter:alpha(opacity=90); }
/* REVERTED the zoom-cancellation trick that was here — confirmed on the live
   site (DevTools, mobile viewport) that it wasn't the cause, and it visibly
   changed the tooltip's overall scale, which wasn't wanted.
   The real cause, confirmed by inspecting the live rendered tooltip: .tooltip
   is position:absolute with left:50%, right:auto, and no explicit width —
   that specific combination (an offset given on one side, the other left
   auto, width left auto) makes the browser run the "shrink-to-fit" sizing
   algorithm, which caps the box's width to whatever space is left in its
   containing block from that 50% point onward — NOT to max-width. Measured
   directly: the containing <th> was 183px wide, half of that is ~91.5px,
   and the tooltip's rendered width was 91.392px — matching that cap almost
   exactly, regardless of what max-width said (335px at the time, doing
   nothing). max-width was never the broken part.
   Fix: `width:max-content` opts the box out of that shrink-to-fit-by-
   available-space algorithm entirely (per spec, explicit intrinsic sizing
   keywords size to content, unconstrained by the containing block, unlike
   plain `width:auto`), so it can now actually reach max-width. Verified live
   with this exact change: width jumped from 91px to the full 335px cap. */
.tooltip{ width:max-content; }
.tooltip-inner{
  max-width:min(280px, calc(100vw - 40px)); padding:6px 10px; color:var(--primary-ink); text-align:center;
  background:var(--text); border-radius:8px;
}
.tooltip-arrow{
  position:absolute !important; width:0; height:0; border-color:transparent; border-style:solid;
  top:0 !important; bottom:auto !important; left:50% !important; right:auto !important;
  margin-left:-5px !important; margin-top:-5px !important;
  border-width:0 5px 5px !important; border-bottom-color:var(--text) !important; border-top-color:transparent !important;
}

/* ---- PerfectPanel's category/service picker plugin: confirmed = Select2 ----
   Verified directly from PerfectPanel's own bundled stylesheet
   (storage.perfectcdn.com/global/bom82moil4436i6g.css), which ships real
   Select2 CSS (.select2-container, .select2-results__option,
   .select2-selection__icon, etc.) — this widget is jQuery Select2 wired up
   via the data-select / data-select-search attributes on the <select>, with
   each <option>'s icon supplied as raw HTML in its data-icon attribute (see
   neworder.twig). Select2 appends its open dropdown (.select2-dropdown) near
   <body> by default — NOT necessarily inside the #select-category-container /
   #select-service-container divs those data-select-container attributes
   point at — which is the real reason two earlier rounds of CSS scoped only
   to those container IDs never visibly changed anything on the live site.
   These rules target Select2's actual class names directly instead of
   guessing at wrapper markup; the container IDs are kept too as a harmless
   fallback in case the dropdown does render inside them for some layouts. */
#select-category-container, #select-service-container{ position:relative; z-index:50; }

/* Icon + title on one row, both in the closed "selected value" pill and every
   open option row.
   NOTE, round 1: this used `display:flex` on the option row itself, which
   shoved the price segment onto its own row instead of continuing the text
   (flex makes every child its own column). Switched to block flow + a fixed
   padding-left/absolute-positioned icon.
   NOTE, round 2: that fixed-padding approach is what caused BOTH of the
   next bugs reported. (1) Category options and Service options don't share
   one structure — Services (confirmed via live screenshots) bake their
   icon/emoji directly into the title text with no separate icon element at
   all, so the 28px padding I reserved for "the icon" on every row was
   pure dead space on every Service row → "too much left padding". (2) Select2's
   OWN stock CSS (confirmed from PerfectPanel's bundled stylesheet) applies
   `margin-left:-1em / padding-left:2em`-style rules to options nested inside
   an <optgroup> (`.select2-results__option .select2-results__option`), and
   the Service list is grouped into optgroups — my flat `padding-left`
   override didn't touch `margin-left` at all, so each row's real indentation
   became my fixed padding PLUS whatever leftover optgroup margin Select2
   added, which varies by nesting depth → "every option starting at a
   different point".
   Fix: stop reserving fixed space up front. Neutralize Select2's own
   optgroup margin/padding entirely (flat, always 10px, no exceptions), and
   let the icon — where one actually exists — float left with its own
   margin, so text wraps around it naturally with zero space reserved on
   rows that have no icon. */
.select2-selection__rendered,
.select2-results__option,
.select2-results__option a{
  display:block !important;
  margin:0 !important;
  padding-left:10px !important;
  white-space:normal !important; text-align:left !important;
  overflow:hidden; /* clears the floated icon so row height still fits wrapped text */
}
/* NOTE, round 1: grabbed the icon by position (`> span:first-child`), which
   mistook the Services list's leading numeric ID for an icon and spilled its
   digits over the title underneath it, and missed real icons nested one
   level deeper than expected on some Category rows.
   Fix already applied: target icons by what they actually ARE — the exact
   <img> and FontAwesome classes PerfectPanel puts in each <option>'s
   data-icon attribute (confirmed verbatim: `<span class='fas fa-star'>`,
   `<span class='fab fa-tiktok'>`, `<img class='img-responsive ...'>`) — at
   any nesting depth, instead of guessing by sibling position. Now floated
   instead of absolutely positioned, so it reserves its own space in normal
   flow rather than relying on a guessed parent padding value. */
.select2-selection__icon,
.select2-results__option img,
.select2-results__option .select2-selection__icon,
.select2-results__option .fas,
.select2-results__option .far,
.select2-results__option .fab,
.select2-results__option .fal{
  float:left !important;
  width:18px !important; height:18px !important;
  max-width:18px !important; max-height:18px !important;
  margin:1px 8px 0 0 !important;
}
.select2-selection__icon img{
  width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
  object-fit:contain !important;
}
/* Font Awesome icons are a text glyph, not an image — width/height alone
   only sizes the box, not the glyph, so the visible icon size still needs
   font-size set to match. */
.select2-results__option .fas,
.select2-results__option .far,
.select2-results__option .fab,
.select2-results__option .fal{
  display:block !important; font-size:14px !important; line-height:18px !important; text-align:center !important;
}
.select2-selection__text,
.select2-results__option .select2-selection__text{
  display:inline !important;
}
.select2-results__option,
.select2-results__option a{
  font-size:13px !important; padding-top:8px !important; padding-bottom:8px !important;
  padding-right:10px !important; line-height:1.35 !important;
}

/* Dark mode: Select2's own CSS hardcodes #333 text on options and #ddd for the
   selected-row background, which is why category/service option text and the
   search icon stayed black regardless of theme. */
.select2-dropdown{
  background:var(--surface) !important; border-color:var(--border) !important;
  border-radius:12px !important; box-shadow:var(--shadow-lg) !important; overflow:hidden;
}
.select2-results__options{ max-height:320px; overflow-y:auto; }
.select2-results__option,
.select2-results__option a,
.select2-selection__text,
.select2-selection__rendered,
.select2-selection__placeholder{
  color:var(--text) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]{
  background:var(--surface-2) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--primary) !important; color:#fff !important;
}
.select2-search--dropdown{ background:var(--surface) !important; }
.select2-search__field{
  background:var(--surface-2) !important; border-color:var(--border) !important; color:var(--text) !important;
}
.select2-search__field::placeholder{ color:var(--text-muted) !important; opacity:1; }
.select2-search__field-icon, .select2-search__field-icon span{ color:var(--text-muted) !important; }

/* The magnifying-glass search box above the Category/Service selects.
   THREE rounds of `#new-order-search`-scoped rules never worked — confirmed
   why via a live DevTools Styles panel screenshot on the actual icon: none
   of those rules even showed up in the matched-rules list, meaning the
   `id="new-order-search"` this theme sets in neworder.twig doesn't survive
   onto the element PerfectPanel actually renders (their JS turns this box
   into its own mini Select2-style widget — the live DOM shows real classes
   `search-dropdown`, `input-wrapper`, `input-wrapper__prepend` on it, but no
   id at all in the inspector's breadcrumb). Re-targeted by the classes
   confirmed present in that live DOM instead of the id, which is why every
   attempt through the id came up empty. Id-based rules kept alongside as a
   harmless fallback. */
#select-category-container input, #select-service-container input,
.search-dropdown input, .search-dropdown button,
.search-dropdown .fas, .search-dropdown .far, .search-dropdown .fab, .search-dropdown .fal,
.input-wrapper__prepend, .input-wrapper__prepend *,
#new-order-search input, #new-order-search button,
#new-order-search .fa-search, #new-order-search i, #new-order-search svg{
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important; opacity:1 !important;
}
#select-category-container input, #select-service-container input,
.search-dropdown input{
  background:var(--surface-2) !important; border-color:var(--border) !important;
}
#select-category-container input::placeholder, #select-service-container input::placeholder,
.search-dropdown input::placeholder,
#new-order-search input::placeholder{
  color:var(--text-muted) !important; opacity:1;
}

/* =========================================================================
   HOMEPAGE / SIGN-IN — hero, benefits, stats
   ========================================================================= */
.hero{ position:relative; padding:64px 0 56px; overflow:hidden; }
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; z-index:0;
  transition:transform .05s linear;
}
.hero-blob.b1{ width:420px; height:420px; background:var(--primary); top:40px; right:-120px; }
.hero-blob.b2{ width:320px; height:320px; background:var(--accent); bottom:-140px; left:-80px; opacity:.22; }
[data-theme="dark"] .hero-blob{ opacity:.25; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:20px 0 32px; }
  .hero-blob.b1{ width:260px; height:260px; top:-40px; right:-90px; opacity:.22; }
  .hero-blob.b2{ width:200px; height:200px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--primary); background:rgba(91,95,239,.1);
  padding:7px 14px; border-radius:999px; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse-dot 1.8s infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.4);} }

.hero h1{ font-size:clamp(34px,4.6vw,54px); margin-bottom:.25em; }
.hero h1 .accent{ color:var(--primary); }
.hero-copy{ text-align:left; }
.hero-sub{ font-size:17px; max-width:480px; margin:0 0 16px; text-align:justify; text-align-last:left; }

/* Mobile-only override for the heading/eyebrow rules just above.
   Must come AFTER the unconditional rules it overrides — a media query
   doesn't add specificity, so with equal specificity the later rule in
   source order always wins regardless of whether it's gated by @media. */
@media (max-width:900px){
  /* The heading itself had 0 margin-top (relying entirely on the eyebrow
     badge's own margin-bottom for top spacing) and only .25em margin-bottom
     — an unbalanced, non-equivalent gap the heading didn't actually own.
     Give the heading its own explicit, equal top/bottom spacing and trim
     the eyebrow's margin so the combined gap above the heading doesn't
     double up. */
  .eyebrow{ margin-bottom:6px; }
  .hero h1{ margin-top:16px; margin-bottom:16px; }
  /* The 480px cap here is independent of how the heading breaks — the
     hero-copy column itself is often wider than 480px on mobile, so the
     paragraph stops well short of the column's (and heading's) right edge
     regardless of whether the heading is 1 or 2 lines. Let it use the
     full column width on mobile. */
  .hero-sub{ max-width:none; }
}

.pulse-wrap{ position:relative; height:110px; margin:8px 0 18px; overflow:visible; }
.pulse-wrap--mobile{ display:none; }
@media (max-width:900px){
  .pulse-wrap--desktop{ display:none; }
  .pulse-wrap--mobile{ display:block; margin:18px 0 0; height:100px; }
}
.pulse-wrap svg{ width:100%; height:100%; overflow:visible; }
.pulse-line{ fill:none; stroke:var(--primary); stroke-width:2.5; stroke-linecap:round; }
.pulse-fill{ opacity:.15; }
.pulse-dot{ fill:var(--alt); }
.pulse-flow{ fill:none; stroke:var(--alt); stroke-width:3; stroke-linecap:round; stroke-dasharray:6 26; animation:pulse-flow 2.2s linear infinite; opacity:.95; }
@keyframes pulse-flow{ to{ stroke-dashoffset:-64; } }

/* ---- Floating platform icons along the pulse graph ---- */
.pulse-icon{
  position:absolute; width:58px; height:58px; border-radius:50%;
  box-shadow:var(--shadow-md); background-color:var(--surface);
  background-repeat:no-repeat; background-size:210%; background-position:center 15%;
  animation:pulse-float 3.4s ease-in-out infinite; z-index:2;
}
@keyframes pulse-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

.trust-stats{ display:flex; gap:32px; flex-wrap:wrap; }
.trust-stat b{ font-family:var(--font-mono); font-size:22px; display:block; color:var(--text); }
.trust-stat span{ font-size:12.5px; color:var(--text-muted); }

.login-card{ position:relative; perspective:1000px; }
.login-card .well{ padding:32px; transition:transform .12s ease-out, box-shadow var(--dur-fast) var(--ease); transform-style:preserve-3d; will-change:transform; }

.benefits{ padding:76px 0; }
.benefits-head{ text-align:center; max-width:560px; margin:0 auto 48px; }
.benefit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.benefit-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(44px) scale(.94); filter:blur(6px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.benefit-card.is-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.benefit-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px) scale(1.01); }
.benefit-grid .benefit-card:nth-child(1){ transition-delay:0s; }
.benefit-grid .benefit-card:nth-child(2){ transition-delay:.08s; }
.benefit-grid .benefit-card:nth-child(3){ transition-delay:.16s; }
.benefit-grid .benefit-card:nth-child(4){ transition-delay:.24s; }
.benefit-icon{
  width:44px; height:44px; border-radius:12px; background:rgba(91,95,239,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:19px;
}
.benefit-card h3{ font-size:17px; margin-bottom:6px; }
.benefit-card p{ font-size:14.5px; margin:0; }

.stats-bar{
  background:var(--text); color:#fff; border-radius:var(--radius-lg); padding:36px 24px;
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:24px; margin:0 24px;
}
[data-theme="dark"] .stats-bar{ background:var(--surface-2); }
/* Tickets' "Attach files" control: `.tickets-uploader` (tickets.twig and
   viewticket.twig) is an empty container PerfectPanel's own JS plugin fills
   in at runtime — I don't control its markup or class names, the same
   situation as the category/service picker plugin noted elsewhere in this
   file, and this account can't sign in to the authenticated Tickets page to
   inspect the plugin's actual output and target it precisely. The button
   showing black text in dark mode matches a common cause for exactly this
   kind of unstyled plugin output: browsers don't inherit `color`/`font`
   into form controls (button/input/select/textarea) from the page by
   default, so if the plugin renders a plain <button> without setting its
   own color, it falls back to the browser's default black regardless of
   the site's theme. Rather than guess at a specific class, this targets
   the one container/ID this file does control and forces every descendant
   to the theme's text color — safe regardless of what element(s) the
   plugin actually renders inside it. */
[data-theme="dark"] .tickets-uploader,
[data-theme="dark"] .tickets-uploader *{ color:var(--text) !important; }
.stats-bar .stat b{ font-family:var(--font-mono); font-size:26px; display:block; }
.stats-bar .stat span{ font-size:12.5px; opacity:.7; }

[data-reveal]{ opacity:0; transform:translateY(36px) scale(.97); filter:blur(4px); transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* ---- Why choose us (icon row) ---- */
.why-us{ padding:76px 0; }
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; border-top:1px solid var(--border); border-left:1px solid var(--border); }
.why-item{ padding:32px 26px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; }
.why-item .why-icon{ font-size:24px; margin-bottom:14px; }
.why-item h4{ font-size:15px; margin-bottom:6px; }
.why-item p{ font-size:13.5px; margin:0; }

/* ---- Figures panel ---- */
.figures{ padding:0 0 76px; }
.figures-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; box-shadow:var(--shadow-md);
}
@media (max-width:800px){ .figures-card{ grid-template-columns:1fr; } }
.figures-list{ display:flex; flex-direction:column; gap:16px; }
.figures-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface-2); border-radius:12px; }
.figures-row .fnum{ font-family:var(--font-mono); font-weight:700; font-size:18px; color:var(--primary); }
.figures-row .flabel{ font-size:13px; color:var(--text-muted); }

/* ---- How it works ---- */
.how-it-works{ padding:76px 0; }
.steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.step-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px;
  position:relative; overflow:hidden;
}
.step-card .step-num{
  font-family:var(--font-mono); font-size:12px; color:var(--primary); background:rgba(91,95,239,.1);
  display:inline-block; padding:3px 10px; border-radius:999px; margin-bottom:14px; font-weight:600;
}
.step-card h4{ font-size:16px; margin-bottom:6px; }
.step-card p{ font-size:13.5px; margin:0; }

/* ---- Comparison table ---- */
.compare{ padding:76px 0; }
.compare-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; }
.compare-row{
  display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 24px;
}
@media (max-width:640px){ .compare-row{ grid-template-columns:1fr; } }
.compare-feature h4{ font-size:15px; margin-bottom:4px; }
.compare-feature p{ font-size:13px; margin:0; }
.compare-vs{ display:flex; gap:18px; }
.compare-pill{ flex:1; display:flex; align-items:center; gap:8px; font-size:13px; padding:8px 12px; border-radius:10px; }
.compare-pill.us{ background:rgba(23,184,156,.1); color:#0E8C77; font-weight:600; }
.compare-pill.them{ background:rgba(229,72,77,.08); color:var(--text-muted); }

/* Real comparison graphics supplied by the client (replaces the earlier
   hand-written .compare-row text rows — client wants the actual images,
   not a custom-built table) */
.compare-images{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.compare-images img{
  /* These images are pre-rendered cards with their own baked-in shadow and
     genuinely transparent (alpha:0) corners around that shadow — an opaque
     background here fills those transparent corners with a solid block,
     showing up as an unwanted white box behind the shadow in light mode.
     Let the image's own artwork show through instead. */
  width:100%; display:block;
}

/* ---- Platform grid ---- */
.platforms{ padding:76px 0; }
.platform-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.platform-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; text-align:center; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.platform-card .platform-cta{ margin-top:auto; padding-top:12px; }
.platform-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.platform-emoji{ font-size:28px; margin-bottom:10px; }
.platform-card h4{ font-size:14.5px; margin-bottom:4px; }
.platform-card span{ font-family:var(--font-mono); font-size:12.5px; color:var(--primary); }

/* ---- Marquee (testimonials + payment partners) ---- */
.marquee-section{ padding:76px 0; overflow:hidden; }
.marquee-track{ display:flex; gap:20px; width:max-content; animation:marquee 32s linear infinite; }
.marquee-section:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.testimonial-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; width:280px; flex:0 0 auto; box-shadow:var(--shadow-sm);
}
.testimonial-card p{ font-size:14px; margin-bottom:14px; }
.testimonial-card .who{ font-size:12.5px; font-weight:600; color:var(--text); }
.payment-strip{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.payment-chip{
  font-family:var(--font-mono); font-size:12.5px; padding:8px 16px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
}

/* ---- Pillars (We help grow your social presence) ---- */
.pillars{ padding:76px 0; }
.pillar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.pillar-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:30px;
}
.pillar-num{
  width:38px; height:38px; border-radius:10px; background:rgba(91,95,239,.1); color:var(--primary);
  font-family:var(--font-mono); font-weight:700; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; font-size:15px;
}
.pillar-card h4{ font-size:17px; margin-bottom:8px; }
.pillar-card p{ font-size:14px; margin:0; }

/* ---- Promo banner ---- */
.promo{ padding:0 0 76px; }
.promo-card{
  background:linear-gradient(135deg,var(--primary),#8B5FEF); border-radius:var(--radius-lg);
  padding:44px; color:#fff; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; text-align:left;
}
.promo-card h2{ color:#fff; font-size:clamp(22px,3vw,32px); max-width:640px; margin:0 0 12px; text-align:left; }
.promo-card p{ color:rgba(255,255,255,.85); max-width:480px; margin:0 0 26px; text-align:left; }
.promo-card .btn{
  background:linear-gradient(180deg,#ffffff,#eef0f7); color:var(--primary-dark); font-weight:700;
  border-bottom:3px solid #cfd3e6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.06),
    0 8px 18px -4px rgba(0,0,0,.3);
}
.promo-card .btn:hover{
  background:linear-gradient(180deg,#ffffff,#ffffff); color:var(--primary-dark); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.08),
    0 12px 24px -4px rgba(0,0,0,.35);
}
.promo-card .btn:active{
  transform:translateY(2px) scale(.98); border-bottom-width:1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
.promo-card img{ width:100%; height:auto; border-radius:16px; }
@media (max-width:760px){
  .promo-card{ grid-template-columns:1fr; padding:28px; text-align:center; }
  .promo-card h2, .promo-card p{ text-align:center; margin-left:auto; margin-right:auto; }
  .promo-card img{ max-width:320px; margin:0 auto; }
}

/* ---- FAQ accordion ---- */
.faq{ padding:76px 0; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 24px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--text);
}
.faq-q .faq-plus{ font-size:20px; color:var(--primary); transition:transform var(--dur-fast) var(--ease); flex:0 0 auto; }
.faq-item.open .faq-q .faq-plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease); }
.faq-a-inner{ padding:0 24px 20px; font-size:14px; color:var(--text-muted); }
.faq-item.open .faq-a{ max-height:400px; }

/* ---- Admin-managed raw-HTML content blocks (authText, addfunds, newOrderText) ----
   These come from the admin panel as raw HTML with the OLD theme's hardcoded inline
   colors baked in, which don't adapt to dark mode since inline styles beat our CSS
   variables. This neutralizes the worst offenders (hardcoded blues, highlight boxes)
   without stripping genuinely semantic colors like warning red/orange. */
.raw-admin-content{ line-height:1.7; }
.raw-admin-content [style*="color: blue" i],
.raw-admin-content [style*="color:blue" i],
.raw-admin-content [style*="color: #0000" i],
.raw-admin-content a{ color:var(--primary) !important; }
.raw-admin-content [style*="background" i]{
  background:var(--surface-2) !important; color:var(--text) !important;
  padding:12px 16px; border-radius:10px; display:inline-block;
}
.raw-admin-content strong{ color:inherit; }
.raw-admin-content mark{ background:var(--surface-2) !important; color:var(--text) !important; padding:2px 6px; border-radius:4px; }

/* ---- Footer ---- */
.site-footer{ padding:64px 0 40px; text-align:center; border-top:1px solid var(--border); }
.site-footer img{ height:100px; margin:0 auto 22px; }
.site-footer p{ max-width:640px; margin:0 auto 28px; font-size:14px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; margin-bottom:28px; }
.footer-links a{ font-size:14px; color:var(--text-muted); font-weight:500; }
.footer-links a:hover{ color:var(--primary); }
.footer-copy{ font-size:12.5px; color:var(--text-muted); }