/* ============================================================
   fixedseen "fs" design system
   Ported 1:1 from the fixedmember PerfectPanel theme
   (custom_header.html + layout.twig shared CSS), re-branded
   from blue #0077b6 to the fixedseen red palette.
   Loads on top of vendor/bootstrap.min.css (3.4.1) — the same
   base the original theme was written against.
   ============================================================ */

:root {
  --fs-primary: #dc2626;
  --fs-primary-dark: #b91c1c;
  --fs-primary-glow: rgba(220,38,38,0.25);
  --fs-primary-light: #fef2f2;
  --fs-gradient: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  /* 4-Tier Structural Architecture (Light Mode) */
  --fs-bg: #f8f9fa;         /* Neutral 100: App Background */
  --fs-card: #ffffff;       /* Neutral 200: Elevated Card Surface */
  --fs-hover: #f1f3f5;      /* Neutral 300: Hover State */
  --fs-border: #e9ecef;     /* Neutral 400: Borders / Dividers */

  /* Text Colors */
  --fs-text: #212529;
  --fs-body: #495057;
  --fs-muted: #6c757d;
  --fs-shadow: 0 2px 16px rgba(0,0,0,0.04);
  --fs-shadow-lg: 0 8px 32px rgba(0,0,0,0.07);
  --fs-r: 14px;
  --fs-r-sm: 8px;
  --fs-star: #f59e0b;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--fs-bg) !important;
  color: var(--fs-body) !important;
  -webkit-font-smoothing: antialiased;
  font-size: 15px !important;            /* base — was browser default (16) but inline 13s overrode it */
  line-height: 1.6 !important;
}
@media (min-width: 1200px) {
  body { font-size: 16px !important; }    /* +1px on desktop for modern density */
}
a, button, input, select, textarea, [role="button"], .btn, .navbar-brand, .dropdown-toggle {
  outline: none !important;
}
a:focus, a:active, button:focus, button:active, .btn:focus, .btn:active,
.navbar-brand:focus, .navbar-brand:active, .dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ====== NAVBAR ====== */
.navbar {
  background: var(--fs-card, #f8f9fa) !important;
  border: none !important;
  border-bottom: 1px solid var(--fs-border, #e9ecef) !important;
  box-shadow: var(--fs-shadow, 0 1px 12px rgba(0,0,0,0.04)) !important;
  min-height: 60px !important;
  margin-bottom: 0 !important;
}
.navbar::after, .navbar::before { display: none !important; }
.navbar-brand { padding: 12px 15px !important; height: auto !important; display: flex !important; align-items: center !important; }
.navbar-brand img { max-height: 35px !important; }
.navbar-nav > li > a {
  color: var(--fs-text, #212529) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 20px 14px !important;
  transition: color 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  outline: none !important;
}
.navbar-nav > li > a i { font-size: 14px; color: var(--fs-primary, #dc2626); }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a {
  color: var(--fs-primary) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.navbar-nav > li.active > a { font-weight: 600 !important; }

/* Theme Toggle */
.fs-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--fs-border, #e9ecef); color: var(--fs-text, #393E46); font-size: 12px;
  transition: all 0.3s; margin: 12px 6px;
}
.fs-theme-toggle:hover { background: var(--fs-primary-light, #fef2f2); color: var(--fs-primary, #dc2626); border-color: var(--fs-primary, #dc2626); transform: scale(1.1); }
.dark-mode .fs-theme-toggle { background: rgba(255,255,255,0.08); border-color: transparent; color: #fbbf24; }
.dark-mode .fs-theme-toggle:hover { background: rgba(255,255,255,0.15); }
.navbar-toggle {
  border: 1px solid var(--fs-border, #e9ecef) !important;
  border-radius: var(--fs-r-sm) !important;
  margin-top: 13px !important;
}
.navbar-toggle .icon-bar { background: var(--fs-text, #212529) !important; }
@media (max-width: 767px) {
  .navbar-nav > li > a { padding: 8px 15px !important; font-size: 14px !important; }
  .navbar-nav { margin: 4px 0 !important; }
  .navbar-collapse { background: var(--fs-card, #f8f9fa) !important; border-top: 1px solid var(--fs-border, #e9ecef) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; }
  .navbar-nav > li { border-bottom: 1px solid var(--fs-border, #e9ecef) !important; }
  .navbar-nav > li:last-child { border-bottom: none !important; }

  /* Global mobile: reduce card padding */
  .fs-card-body { padding: 16px !important; }
  .fs-card-header { padding: 14px 16px !important; }
  .fs-card-header h3 { font-size: 15px !important; }

  /* Contact/info boxes stack vertically */
  .fs-contact-box { flex-direction: column !important; gap: 12px !important; }
  .fs-tg-contact { flex-direction: column !important; gap: 8px !important; text-align: center; }
  .fs-tg-contact a { align-self: center; }

  /* Chat bubbles wider on mobile */
  .fs-msg-bubble { max-width: 95% !important; }

  /* Page padding reduction */
  .fs-page { padding: 12px 0 40px !important; }
  .fs-auth-page { padding: 20px 0 40px !important; }

  /* Tables: ensure horizontal scroll */
  .fs-table-card { border-radius: 10px !important; }
  .fs-table-card .table thead th { padding: 10px 10px !important; font-size: 11px !important; }
  .fs-table-card .table tbody td { padding: 8px 10px !important; font-size: 12px !important; }

  /* Ticket guide: tighter on mobile */
  .fs-tickets-guide { padding: 14px !important; }
  .fs-tickets-guide h4 { font-size: 14px !important; }
  .fs-tickets-guide p, .fs-tickets-guide ul { font-size: 12px !important; }

  /* Crypto guide: tighter */
  .fs-cg-header { flex-direction: column !important; gap: 8px !important; text-align: center; }

  /* Auth forms: tighter */
  .fs-auth-card { padding: 24px 18px !important; }

  /* Info card (neworder): stack vertically */
  .fs-info-card { flex-direction: column !important; }
  .fs-info-card-icon { padding: 16px !important; }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991px) {
  .fs-card-body { padding: 20px !important; }
  .fs-page { padding: 16px 0 50px !important; }
}

.well {
  background: var(--fs-card) !important;
  border: none !important;
  border-radius: var(--fs-r) !important;
  box-shadow: var(--fs-shadow) !important;
}

/* ====== BUTTONS ====== */
.btn-primary {
  background: var(--fs-gradient) !important;
  border: none !important;
  border-radius: var(--fs-r-sm) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px var(--fs-primary-glow) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 14px var(--fs-primary-glow) !important;
  transform: translateY(-1px);
}
.btn-default {
  border-radius: var(--fs-r-sm) !important;
  border-color: var(--fs-border) !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}
.btn-default:hover {
  border-color: var(--fs-primary) !important;
  color: var(--fs-primary) !important;
}

/* ====== FORMS ====== */
.form-control {
  border: 1px solid var(--fs-border) !important;
  border-radius: var(--fs-r-sm) !important;
  box-shadow: var(--fs-shadow) !important;
  font-size: 16px !important;             /* 16px prevents iOS Safari zoom-on-focus */
  padding: 10px 14px !important;
  height: auto !important;
  transition: all 0.2s !important;
  font-family: 'Roboto', sans-serif !important;
}
.form-control:focus {
  border-color: var(--fs-primary) !important;
  box-shadow: 0 0 0 3px var(--fs-primary-glow) !important;
}
.form-group label {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--fs-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 6px !important;
}
select.form-control {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

/* ====== TABLES ====== */
.table { border: none !important; }
.table > thead > tr > th {
  border-bottom: 2px solid var(--fs-border) !important;
  border-top: none !important;
  color: var(--fs-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  padding: 12px 10px !important;
}
.table > tbody > tr > td {
  border-top: none !important;
  border-bottom: 1px solid #f8f9fa !important;
  padding: 12px 10px !important;
  vertical-align: middle !important;
  font-size: 14px !important;
}
.table > tbody > tr:hover > td { background: var(--fs-hover) !important; }

/* ====== ALERTS ====== */
.alert { border-radius: var(--fs-r-sm) !important; border: none !important; font-size: 14px !important; font-weight: 500 !important; }
.alert-success { background: #dcfce7 !important; color: #166534 !important; }
.alert-danger { background: #fee2e2 !important; color: #991b1b !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }

/* ====== DROPDOWNS ====== */
.dropdown-menu {
  background: var(--fs-card, #fff) !important;
  border: none !important;
  border-radius: var(--fs-r) !important;
  box-shadow: var(--fs-shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  padding: 8px 14px !important;
  border-radius: var(--fs-r-sm) !important;
  font-size: 14px !important;
  color: var(--fs-body) !important;
  transition: background 0.15s !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover {
  background: var(--fs-primary-light) !important;
  color: var(--fs-primary-dark) !important;
}

/* ====== PAGINATION ====== */
.pagination > li > a, .pagination > li > span {
  border: none !important;
  border-radius: var(--fs-r-sm) !important;
  margin: 0 3px !important;
  color: var(--fs-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
}
.pagination > .active > a { background: var(--fs-primary) !important; color: #fff !important; }
.pagination > li > a:hover { background: var(--fs-primary-light) !important; color: var(--fs-primary-dark) !important; }

.badge { background: var(--fs-gradient) !important; border-radius: 999px !important; font-weight: 600 !important; padding: 4px 10px !important; }
.nav-tabs { border: none !important; }
h1, h2, h3 { color: var(--fs-text) !important; font-weight: 700 !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }

[data-favorite-service-id] .fas.fa-star { color: var(--fs-star) !important; }
[data-favorite-service-id] .far.fa-star { color: #d1d5db !important; transition: color 0.2s; }
[data-favorite-service-id]:hover .far.fa-star { color: #fbbf24 !important; }

.nav-pills > li > a { border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--fs-body) !important; transition: all 0.2s !important; padding: 8px 16px !important; }
.nav-pills > li > a:hover { background: var(--fs-primary-light) !important; color: var(--fs-primary) !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--fs-primary) !important; color: #fff !important; font-weight: 600 !important; }

.modal-content { border-radius: 16px !important; border: none !important; box-shadow: var(--fs-shadow-lg) !important; }
.modal-header { border-bottom: 1px solid var(--fs-border) !important; }
.modal-footer { border-top: 1px solid var(--fs-border) !important; }

@keyframes fmFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.container, .container-fluid { animation: fmFadeIn 0.3s ease; }

/* ========== SHARED COMPONENT CSS (centralized) ========== */
.fs-page { background: var(--fs-bg, #f8f9fa); padding: 20px 0 60px; min-height: 80vh; }
.fs-auth-page { background: transparent; padding: 40px 0 60px; min-height: 70vh; }
.fs-card { background: var(--fs-card, #fff); border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
.fs-card-header { padding: 18px 24px; border-bottom: 1px solid var(--fs-border, #e8eef3); }
.fs-card-header h3 { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.fs-card-header h3 i { color: var(--fs-primary, #dc2626); font-size: 14px; }
.fs-card-body { padding: 24px; }
.fs-card form { padding: 24px; }
.fs-mb { margin-bottom: 16px; }
.fs-tabs { margin-bottom: 20px; }
.fs-auth-card { background: var(--fs-card, #fff); border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,0.06); padding: 32px 28px; }
.fs-table-card { background: var(--fs-card, #fff); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.05); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fs-table-card .table { margin: 0; }
.fs-table-card .table thead th { background: var(--fs-hover, #f8fafc); border-bottom: 2px solid var(--fs-border, #e8eef3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fs-muted, #adb5bd); padding: 12px 14px; white-space: nowrap; }
.fs-table-card .table tbody td { padding: 10px 14px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid var(--fs-border, #f1f5f9); }
.fs-table-card .table tbody tr:hover { background: var(--fs-hover, #f8fafc); }
.fs-table-card .table a { color: var(--fs-primary, #dc2626) !important; }
.fs-btn-full { width: 100%; padding: 12px !important; font-size: 14px !important; display: flex; align-items: center; justify-content: center; gap: 8px; }
.fs-pagination { margin-top: 16px; }
.fs-pagination li a { border-radius: 8px !important; margin: 0 2px; }
.fs-pagination li.active a { background: var(--fs-primary, #dc2626) !important; border-color: var(--fs-primary, #dc2626) !important; }
.fs-link { color: var(--fs-primary, #dc2626) !important; font-weight: 500; font-size: 12px; }
.fs-2fa-icon { width: 56px; height: 56px; background: var(--fs-gradient); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #fff; font-size: 24px; }
.fs-divider { text-align: center; margin: 16px 0; position: relative; }
.fs-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--fs-border, #e9ecef); }
.fs-divider span { background: var(--fs-card, #fff); padding: 0 16px; color: var(--fs-muted, #6c757d); font-size: 12px; position: relative; z-index: 1; }

/* Search inputs with a leading icon reserve room for it */
#new-order-search input,
#new-order-search .form-control,
.search-dropdown input,
.search-dropdown .form-control {
  padding-left: 40px !important;
}

/* ========== MANUAL DARK MODE (class-based, fully variable-driven) ========== */
body.dark-mode {
  /* 4-Tier Structural Architecture (Dark Mode) */
  --fs-bg: #121212;         /* DarkNeutral 100: App Background */
  --fs-card: #161616;       /* DarkNeutral 150: Elevated Card Surface (very subtle) */
  --fs-hover: #1e1e1e;      /* DarkNeutral 200: Hover State */
  --fs-border: #1f1f1f;     /* DarkNeutral 300: Ultra-Dark Stealth Borders */

  /* Text Colors */
  --fs-text: #E0E0E0;
  --fs-body: #B0B0B0;
  --fs-muted: #888888;

  /* Retain Primary Branding */
  --fs-primary: #ef4444;
  --fs-primary-dark: #dc2626;
  --fs-primary-glow: rgba(220,38,38,0.25);
  --fs-primary-light: rgba(220,38,38,0.15);
  --fs-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --fs-shadow: 0 2px 16px rgba(0,0,0,0.5);
  --fs-shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}

/*
  Since the entire app relies on CSS Variables (var(--fs-bg), var(--fs-card), etc.),
  toggling the .dark-mode class on the body instantly recolors the app.
  We only need overrides for items that don't natively map to our tokens clearly.
*/

body.dark-mode .form-control {
  background: var(--fs-bg) !important;
  color: var(--fs-text) !important;
  border: 1px solid #262626 !important;
}
body.dark-mode .form-control:focus {
  border-color: var(--fs-primary) !important;
}
body.dark-mode .fs-desc-box,
body.dark-mode #order-resume {
  background: #141414 !important;
  border: 1px solid #1f1f1f !important;
}
body.dark-mode .table > thead > tr > th,
body.dark-mode .table > tbody > tr > td,
body.dark-mode .table-bordered,
body.dark-mode .table-bordered > thead > tr > th,
body.dark-mode .table-bordered > tbody > tr > td {
  background: var(--fs-bg) !important;
  border-color: var(--fs-border) !important;
  color: var(--fs-text) !important;
}
body.dark-mode .fs-hero { background: linear-gradient(135deg, var(--fs-bg) 0%, #1a1a1a 50%, var(--fs-bg) 100%) !important; }
body.dark-mode .btn-default { background: transparent !important; color: var(--fs-body) !important; border-color: var(--fs-border) !important; }

/* Dark mode: navbar hover/active states */
body.dark-mode .navbar-nav > li > a:hover,
body.dark-mode .navbar-nav > li > a:focus,
body.dark-mode .navbar-nav > li.active > a,
body.dark-mode .navbar-nav > li.open > a { color: var(--fs-primary) !important; background: transparent !important; }

/* ============================================================
   LAYOUT GUARDS (ported from layout.twig inline <style>)
   ============================================================ */

/* ====== NO HORIZONTAL PAGE PANNING (site-wide) ======
   Any element wider than the viewport (wide tables, nowrap rows, Bootstrap
   .row negative margins) used to stretch the document → users could swipe
   left/right past the header. Wide content must scroll inside its own
   container instead. `clip` preferred over `hidden`: it doesn't create a
   scroll container, so position:sticky keeps working. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ====== HEADER SINGLE-LINE LOCK (desktop ≥1200px only) ======
   The logged-in navbar (menu + balance + account + logout) does NOT fit
   inline below ~1200px — hamburger mode owns everything below 1200px; the
   JS handlers use the same `window.innerWidth >= 1200` threshold. */
@media (min-width: 1200px) {
  .navbar > .container,
  .navbar > .container-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .navbar .navbar-header {
    float: none !important;
    flex-shrink: 0;
  }
  .navbar .navbar-collapse {
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .navbar .navbar-nav {
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .navbar .navbar-nav > li {
    float: none !important;
  }
  .navbar .navbar-nav > li > a {
    white-space: nowrap !important;
  }
  .navbar .navbar-right {
    margin-left: auto !important;
  }
}

/* ====== PAGE FULL-WIDTH STRETCH (phones and small tablets <992px) ====== */
@media (max-width: 991px) {
  html, body {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
  body { align-items: stretch !important; }
  /* :not() excludes injected body-level overlays (modals, backdrops, iframes)
     from the forced full-width stretch. */
  body > *:not(.modal):not(.modal-backdrop):not(iframe) {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ====== HAMBURGER MODE below desktop (<1200px) ======
   MUST match the JS threshold (`window.innerWidth >= 1200`). Uses #navbar ID
   selector → beats any Bootstrap class rule. */
@media (max-width: 1199px) {
  body > nav.navbar { margin: 0 !important; }
  body > nav.navbar > .container,
  body > nav.navbar > .container-fluid {
    width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
  }

  .navbar-header { float: none !important; padding: 0 12px !important; }
  .navbar-toggle { display: block !important; float: right !important; margin-right: 12px !important; }
  .navbar > .container,
  .navbar > .container-fluid { display: block !important; }

  #navbar.navbar-collapse { display: none !important; max-height: none !important; overflow-y: visible !important; width: 100% !important; flex: none !important;
    background: var(--fs-card, #f8f9fa) !important;
    border-top: 1px solid var(--fs-border, #e9ecef) !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
  }
  body > nav.navbar { box-shadow: none !important; }
  #navbar.navbar-collapse.in { display: block !important; }

  #navbar .navbar-nav { float: none !important; margin: 4px 0 !important; display: block !important; flex: none !important; }
  #navbar .navbar-nav > li { float: none !important; display: block !important; border-bottom: 1px solid var(--fs-border, #e9ecef) !important; }
  #navbar .navbar-nav > li:last-child { border-bottom: none !important; }
  #navbar .navbar-nav > li > a { padding: 14px 24px !important; line-height: 20px !important; white-space: normal !important; }
  #navbar .navbar-right { margin: 0 !important; }
  #navbar .dropdown-menu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    float: none !important;
  }
  #navbar .dropdown.open .dropdown-menu { display: block !important; }
  #navbar .dropdown-menu {
    list-style: none !important;
  }
  #navbar .dropdown-menu > li { display: block !important; margin: 0 !important; float: none !important; }
  #navbar .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px 12px 48px !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--fs-border, #e9ecef) !important;
    white-space: normal !important;
    background: transparent !important;
  }
  #navbar .dropdown-menu > li:last-child > a { border-bottom: none !important; }
  /* Theme toggle moon: align with menu item left edge instead of hugging the viewport edge */
  #navbar .fs-theme-toggle,
  .fs-theme-toggle { margin: 10px 24px !important; }
}

/* ====== FOOTER LOGIC ====== */
html { background-color: #eef2f6 !important; }
body.dark-mode { background-color: var(--fs-bg) !important; }

/* Layout V2: Flex-based sticky footer layout */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: #eef2f6 !important;
}
.fs-main-content {
  flex: 1 1 auto !important;
  background: var(--fs-bg, #f8f9fa);
  position: relative;
  z-index: 1;
}
footer, .fs-v3-footer {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}
html.dark-mode,
html.dark-mode body,
body.dark-mode {
  background-color: var(--fs-bg) !important;
}

/* ====== DESKTOP-ONLY WIDENING — PANEL PAGES ====== */
@media (min-width: 1200px) {
  body.fs-default-page .container {
    max-width: 1400px !important;
    width: 100% !important;
  }
  /* Promote 8/12-centered columns to 10/12-centered on wide screens */
  body.fs-default-page:not(.fs-narrow-text) .col-md-8.col-md-offset-2,
  body.fs-default-page:not(.fs-narrow-text) .col-lg-8.col-lg-offset-2 {
    width: 83.3333333% !important;
    margin-left: 8.3333333% !important;
  }
  body.fs-default-page.fs-narrow-text .container {
    max-width: 1170px !important;
  }
}
@media (min-width: 1500px) {
  body.fs-default-page:not(.fs-narrow-text) .container {
    max-width: 1500px !important;
  }
  body.fs-default-page:not(.fs-narrow-text) .col-md-8.col-md-offset-2,
  body.fs-default-page:not(.fs-narrow-text) .col-lg-8.col-lg-offset-2 {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ====== HEADER WIDTH: IDENTICAL ON EVERY PAGE TYPE ====== */
@media (min-width: 1200px) {
  .navbar > .container,
  body.fs-default-page.fs-narrow-text .navbar > .container {
    max-width: 1400px !important;
    width: 100% !important;
  }
}
@media (min-width: 1500px) {
  .navbar > .container,
  body.fs-default-page.fs-narrow-text .navbar > .container {
    max-width: 1500px !important;
  }
}

/* ============================================================
   FOOTER BENTO (guest pages) — ported from layout.twig
   ============================================================ */
.fs-v3-footer {
  font-family: 'Roboto', sans-serif;
  /* Subtle solid band edge-to-edge so the footer reads as a distinct section,
     not floating cards on the page background */
  background: #eef2f6;
  color: var(--fs-body, #495057) !important;
  padding: 28px 0 10px;
  margin-bottom: 0 !important;
  border-top: 1px solid var(--fs-border, #e8eef3);
}
body.dark-mode .fs-v3-footer {
  background: var(--fs-bg) !important;
  border-top-color: var(--fs-border);
}

/* Wider canvas on tablet/desktop, lighter side padding so cards stretch */
.fs-v3-inner {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 24px 0;
}
@media (max-width: 1199px) {
  .fs-v3-inner { max-width: 100%; padding: 0 18px; }
}
@media (max-width: 768px) {
  .fs-v3-inner { padding: 0 14px; }
}

.fs-v3-bento {
  display: grid;
  /* 4 columns: brand wider, then Panel, Support HQ, Top Services (Top wider too) */
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  grid-template-rows: auto;
  gap: 12px;
}
@media (max-width: 991px) { .fs-v3-bento { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (max-width: 768px) {
  .fs-v3-bento { grid-template-columns: 1fr; }
  .card-brand { display: block; }
  .card-brand p { margin-bottom: 12px; }
  .fs-desktop-only { display: none !important; }
}

/* Top Services: 2 internal columns at desktop+ so the card stays short like the others */
@media (min-width: 992px) {
  .card-seo .fs-v3-link-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
  }
}

.fs-v3-card {
  background: var(--fs-card, #fff);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.fs-v3-card:hover {
  background: var(--fs-hover, #f8fafc);
  border-color: rgba(220,38,38,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(220,38,38,0.08);
}
body.dark-mode .fs-v3-card { background: var(--fs-card); border-color: var(--fs-border); }

.card-brand { display: flex; flex-direction: column; }
.card-brand h3 {
  color: var(--fs-text, #393E46) !important; font-size: 20px;
  font-family: 'Roboto', sans-serif; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.5px;
}
.card-brand h3 span { color: var(--fs-primary, #dc2626) !important; }
/* Two-line clamp keeps the brand card tight regardless of description length */
.card-brand p {
  font-size: 12.5px; line-height: 1.55; color: var(--fs-body, #495057) !important;
  margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom row: contact pills + socials sit on one line at desktop */
.fs-v3-brand-bottom {
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.fs-v3-contact-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fs-v3-contact-item {
  background: transparent; border-radius: 40px; padding: 5px 11px; font-size: 11.5px; color: var(--fs-body, #495057);
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fs-border, #e8eef3); font-weight: 600;
  text-decoration: none !important; transition: all 0.2s;
}
.fs-v3-contact-item:hover { background: rgba(220,38,38,0.05); border-color: var(--fs-primary, #dc2626); color: var(--fs-primary, #dc2626) !important; }
.fs-v3-contact-item i { color: var(--fs-primary, #dc2626); font-size: 12px; }
body.dark-mode .fs-v3-contact-item { background: var(--fs-bg); border-color: var(--fs-border); }

.card-links h4 { color: var(--fs-text, #393E46) !important; font-size: 15px; margin: 0 0 12px; font-family: 'Roboto', sans-serif; font-weight: 700; }
.fs-v3-link-list { display: flex; flex-direction: column; gap: 4px; }
.fs-v3-link-list a {
  color: var(--fs-body, #495057) !important; text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: 6px; transition: all 0.2s; background: transparent;
  display: flex; align-items: center; justify-content: space-between;
}
.fs-v3-link-list a::after {
  content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 11px; color: transparent; transition: all 0.3s;
}
.fs-v3-link-list a:hover { background: rgba(220,38,38,0.08); color: var(--fs-primary, #dc2626); padding-left: 14px; }
.fs-v3-link-list a:hover::after { color: var(--fs-primary, #dc2626); }

.fs-v3-bottom-card {
  grid-column: 1 / -1; background: transparent; border: none;
  border-top: 1px solid var(--fs-border, #e8eef3); border-radius: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 10px 0; margin-top: 10px; flex-wrap: wrap; gap: 10px;
}
.fs-v3-bottom-card p { margin: 0; font-size: 12px; color: var(--fs-body, #495057) !important; }
.fs-v3-bottom-card p strong { color: var(--fs-text, #393E46) !important; font-weight: 700; }
.fs-v3-bottom-card:hover { background: transparent; transform: none; box-shadow: none; }

.fs-v3-socials { display: flex; gap: 6px; margin-left: auto; }
.fs-v3-socials a {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fs-muted, #6c757d); font-size: 12px; transition: all 0.25s;
  border: 1px solid var(--fs-border, #e8eef3);
}
.fs-v3-socials a:hover { background: var(--fs-primary, #dc2626); color: #ffffff; border-color: var(--fs-primary, #dc2626); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(220,38,38,0.18); }

.fs-v3-payments { display: flex; gap: 12px; font-size: 20px; color: var(--fs-muted, #6c757d); }
.fs-v3-payments i:hover { color: var(--fs-body, #495057); transition: color 0.3s; }

/* Bottom Nav (guest mobile) */
.fs-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.06); z-index: 9999;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
@media (max-width: 768px) {
  .fs-bottom-nav { display: flex; }
  body.fs-has-bottom-nav .fs-v3-footer { padding-bottom: 85px !important; }
}
/* While any modal is open, hide the bottom nav — its z-index 9999 would
   otherwise sit on top of the modal and steal taps in the bottom band. */
body.modal-open .fs-bottom-nav { display: none !important; }
.fs-bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: #495057; font-size: 11px; font-weight: 700;
  font-family: 'Roboto', sans-serif; transition: color 0.2s; padding: 6px 0;
}
.fs-bottom-nav a:hover, .fs-bottom-nav a.active { color: var(--fs-primary, #dc2626); }
.fs-bottom-nav a i { font-size: 18px; }
body.dark-mode .fs-bottom-nav { background: rgba(18,18,18,0.95) !important; }

/* ============================================================
   SHARED WIDGETS used across several pages (search pill, tabs)
   ============================================================ */
/* Search box — button inside input (orders/tickets/subscriptions/updates) */
.fs-tabs .nav-pills > li.search { min-width: 220px; }
.fs-ticket-search { position: relative; width: 100%; }
.fs-ticket-search .form-control {
  padding-right: 42px !important; border-radius: 10px !important;
  background: var(--fs-card, #fff) !important; border: 1px solid var(--fs-border, #e8eef3) !important;
  height: 38px !important; box-shadow: none !important; margin: 0 !important;
}
.fs-ticket-search button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: transparent;
  border-radius: 8px; color: var(--fs-primary, #dc2626); font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; padding: 0; outline: none;
}
.fs-ticket-search button:hover { color: var(--fs-primary-dark, #b91c1c); background: transparent; }

@media (max-width: 991px) {
  .fs-tabs .nav-pills > li.search { margin-left: 0; width: 100%; margin-top: 10px; }
}

.fs-btn-xs { border-radius: 6px !important; font-size: 11px !important; padding: 4px 10px !important; }

/* ============================================================
   FIXEDSEEN APP GLUE — pieces the Go templates need on top of
   the 1:1 theme port (brand mark, signout form, member footer,
   utility classes, status badges, legacy-token bridge).
   ============================================================ */

/* Brand mark: logo img + two-tone wordmark (theme renders its logo as an
   SVG with "Fixed" in text color + suffix in primary). */
.navbar-brand { gap: 9px; text-decoration: none !important; }
.fs-brand-text { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; color: var(--fs-text); line-height: 1; }
.fs-brand-accent { color: var(--fs-primary); }

/* Sign out is a POST form — style the button as a navbar link so it sits
   in the nav list like the theme's Logout entry. */
.fs-signout-form { margin: 0; }
.fs-signout-link {
  background: transparent; border: none; width: 100%; cursor: pointer;
  color: var(--fs-text, #212529) !important;
  font-weight: 500 !important; font-size: 14px !important;
  padding: 20px 14px !important; transition: color 0.2s !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  font-family: 'Roboto', sans-serif;
}
.fs-signout-link i { font-size: 14px; color: var(--fs-primary, #dc2626); }
.fs-signout-link:hover { color: var(--fs-primary) !important; }
@media (max-width: 1199px) {
  #navbar .fs-signout-link { padding: 14px 24px !important; line-height: 20px !important; justify-content: flex-start; text-align: left; }
}
.fs-toggle-li { display: flex; align-items: center; }

/* Balance badge in navbar right (mirrors the theme's account_menu badge) */
.navbar-right-block .badge { font-size: 13px !important; padding: 5px 12px !important; }

/* Slim member footer (theme shows no marketing footer to members) */
.fs-member-footer {
  background: transparent;
  border-top: 1px solid var(--fs-border, #e8eef3);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
}
.fs-member-footer-inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--fs-muted, #6c757d);
}
.fs-dot-ok { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; margin-right: 5px; vertical-align: 0; }

/* Utility classes carried over from the old templates (table cells etc.) */
.muted { color: var(--fs-muted, #6c757d) !important; }
.small { font-size: 12px; }
.error { color: #dc2626; font-size: 13px; font-weight: 500; }
.nowrap { white-space: nowrap; }
td.link { word-break: break-all; max-width: 280px; }
td.empty { text-align: center; color: var(--fs-muted, #6c757d); padding: 28px 12px !important; }
td .tag {
  display: inline-block; background: var(--fs-hover, #f1f3f5); color: var(--fs-body, #495057);
  border-radius: 6px; font-size: 11px; font-weight: 600; padding: 2px 7px; margin-right: 4px;
}
code {
  background: var(--fs-hover, #f1f3f5); color: var(--fs-primary-dark, #b91c1c);
  border-radius: 5px; font-size: 12px; padding: 2px 6px;
}
body.dark-mode td .tag, body.dark-mode code { background: var(--fs-hover); }

/* Status badges (.bdg) — shared naming with the admin panel, restyled as
   soft fm pills. Load-bearing class names: bdg-{status|lower}. */
.bdg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  background: var(--fs-hover, #f1f3f5); color: var(--fs-muted, #6c757d);
  line-height: 1.5; white-space: nowrap;
}
.bdg-pending, [class*="bdg-in"], .bdg-processing { background: rgba(245,158,11,.12); color: #b45309; }
.bdg-partial, .bdg-completed, .bdg-done, .bdg-active { background: rgba(16,185,129,.12); color: #047857; }
.bdg-canceled, .bdg-failed, .bdg-expired { background: rgba(239,68,68,.12); color: #b91c1c; }
body.dark-mode .bdg { background: rgba(255,255,255,.06); color: var(--fs-body); }
body.dark-mode .bdg-pending, body.dark-mode [class*="bdg-in"], body.dark-mode .bdg-processing { background: rgba(245,158,11,.15); color: #fbbf24; }
body.dark-mode .bdg-partial, body.dark-mode .bdg-completed, body.dark-mode .bdg-done, body.dark-mode .bdg-active { background: rgba(16,185,129,.15); color: #6ee7b7; }
body.dark-mode .bdg-canceled, body.dark-mode .bdg-failed, body.dark-mode .bdg-expired { background: rgba(239,68,68,.15); color: #fca5a5; }

/* Prev/Next pager (nav.pagination > a.btn markup from the Go templates) */
nav.pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
nav.pagination .btn {
  background: var(--fs-card, #fff); border: 1px solid var(--fs-border, #e8eef3);
  border-radius: 8px !important; color: var(--fs-body, #495057);
  font-size: 13px; font-weight: 500; padding: 7px 14px;
}
nav.pagination a.btn:hover { border-color: var(--fs-primary); color: var(--fs-primary); }
nav.pagination .btn[aria-current="page"] { color: var(--fs-muted); cursor: default; }

/* Legacy token bridge — partials shared with the admin panel (API docs
   .fs-api family and the public .svc-* styles in public.css) read the old
   app.css custom properties. Two layers:
   1. :root — public.css re-aliases its own tokens (--text: var(--fg)) at
      the html level, so --fg & friends must exist there too. Explicit dark
      values under :root[data-theme="dark"] (fs-theme.js keeps the attribute
      in sync with body.dark-mode).
   2. body — same map; re-computes against body-level --fs-* so everything
      that reads the bridge under body flips with .dark-mode. */
:root {
  --accent: #dc2626;
  --accent-hov: #b91c1c;
  --accent-soft: rgba(220,38,38,0.25);
  --ok: #10b981; --warn: #f59e0b; --err: #ef4444; --info: #409eff;
  --r-sm: 6px; --r: 8px; --r-lg: 10px; --r-xl: 14px; --t: 150ms ease;
  --bg-0: #f8f9fa; --bg: #f8f9fa; --bg-2: #ffffff;
  --surface: #ffffff; --surface-2: #f1f3f5; --surface-3: #e9ecef;
  --border: #e9ecef; --border-2: #dde2e6;
  --fg: #212529; --fg-dim: #495057; --fg-muted: #6c757d; --fg-faint: #adb5bd;
  --scrim: rgba(0,0,0,.4);
  --shadow-1: 0 2px 16px rgba(0,0,0,0.04); --shadow-2: 0 8px 32px rgba(0,0,0,0.07); --shadow-3: 0 8px 32px rgba(0,0,0,0.07);
}
:root[data-theme="dark"] {
  --accent: #ef4444;
  --accent-hov: #dc2626;
  --bg-0: #121212; --bg: #121212; --bg-2: #161616;
  --surface: #161616; --surface-2: #1e1e1e; --surface-3: #1f1f1f;
  --border: #1f1f1f; --border-2: #262626;
  --fg: #E0E0E0; --fg-dim: #B0B0B0; --fg-muted: #888888; --fg-faint: #666666;
  --shadow-1: 0 2px 16px rgba(0,0,0,0.5); --shadow-2: 0 8px 32px rgba(0,0,0,0.6); --shadow-3: 0 8px 32px rgba(0,0,0,0.6);
}
body {
  --accent: var(--fs-primary);
  --accent-hov: var(--fs-primary-dark);
  --accent-soft: var(--fs-primary-glow);
  --ok: #10b981; --warn: #f59e0b; --err: #ef4444; --info: #409eff;
  --r-sm: 6px; --r: 8px; --r-lg: 10px; --r-xl: 14px; --t: 150ms ease;
  --bg-0: var(--fs-bg); --bg: var(--fs-bg); --bg-2: var(--fs-card);
  --surface: var(--fs-card); --surface-2: var(--fs-hover); --surface-3: var(--fs-border);
  --border: var(--fs-border); --border-2: var(--fs-border);
  --fg: var(--fs-text); --fg-dim: var(--fs-body); --fg-muted: var(--fs-muted); --fg-faint: #adb5bd;
  --scrim: rgba(0,0,0,.4);
  --shadow-1: var(--fs-shadow); --shadow-2: var(--fs-shadow-lg); --shadow-3: var(--fs-shadow-lg);
}

/* ============================================================
   UTILITIES replacing inline style="" attributes — the CSP pins
   style hashes, which makes browsers ignore 'unsafe-inline', so
   attribute-level styles never apply. Use classes instead.
   ============================================================ */
.fs-hidden { display: none !important; }
.fs-inline-form { display: inline; }
.fs-m0 { margin: 0; }
.fs-mt0 { margin-top: 0; }
.fs-mt6 { margin-top: 6px; }
.fs-mt10 { margin-top: 10px; }
.fs-mt14 { margin-top: 14px; }
.fs-mt16 { margin-top: 16px; }
.fs-center { text-align: center; }
/* Table card flush inside an fs-card (results/history tables) */
.fs-table-flush { box-shadow: none !important; border-radius: 0 0 16px 16px !important; margin-bottom: 0 !important; }
/* Forms nested in a padded card body must not double-pad */
.fs-card-body form { padding: 0; }

/* ============================================================
   AUTH FORM widgets (signin/signup/forgot/reset + landing card)
   ============================================================ */
.fs-auth-header { margin-bottom: 24px; }
.fs-auth-header h1 { font-size: 22px !important; font-weight: 800 !important; margin: 0 0 6px !important; }
.fs-auth-header p { font-size: 13px; color: var(--fs-muted, #6c757d); margin: 0; }
.fs-input-wrap { position: relative; }
.fs-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fs-muted, #6c757d); font-size: 14px; z-index: 2; }
.fs-input { padding-left: 40px !important; }
.fs-label-row { display: flex; justify-content: space-between; align-items: center; }
.fs-forgot { font-size: 12px; color: var(--fs-primary, #dc2626) !important; font-weight: 500; text-decoration: none; }
.fs-forgot:hover { text-decoration: underline; color: var(--fs-primary-dark, #b91c1c) !important; }
.fs-btn-signin { width: 100%; padding: 12px !important; font-size: 15px !important; font-weight: 600 !important; margin-top: 8px; border-radius: 10px !important; display: flex; align-items: center; justify-content: center; gap: 8px; }
.fs-alt-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--fs-body, #495057); }
.fs-alt-link a { color: var(--fs-primary, #dc2626) !important; font-weight: 600; text-decoration: none; }
.fs-alt-link a:hover { text-decoration: underline; }

/* ============================================================
   ORDER CARD components (neworder/massorder) — ported from
   neworder.twig's shared style block
   ============================================================ */
.fs-order-card { padding: 0 !important; overflow: hidden; }
.fs-order-pane { padding: 18px 22px 22px; }

/* Tab strip lives inside the card top, balance widget pinned to the right */
.fs-card-tabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fs-border, #e8eef3);
}
.fs-order-tabs { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.fs-order-tabs li > a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 10px;
  background: var(--fs-card, #fff); color: var(--fs-muted, #6c757d);
  border: 1px solid var(--fs-border, #e8eef3);
  font-size: 13px; font-weight: 600;
  text-decoration: none !important; transition: all 0.15s;
  cursor: pointer;
}
.fs-order-tabs li > a:hover { color: var(--fs-primary, #dc2626); border-color: var(--fs-primary-glow, rgba(220,38,38,0.3)); }
.fs-order-tabs li.active > a {
  background: rgba(16, 185, 129, 0.1); color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
}
.fs-order-tabs li > a i { font-size: 13px; }
body.dark-mode .fs-card-tabs { border-bottom-color: var(--fs-border) !important; }
body.dark-mode .fs-order-tabs li > a { background: var(--fs-card) !important; border-color: var(--fs-border) !important; color: var(--fs-muted); }
body.dark-mode .fs-order-tabs li.active > a { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }

.fs-tab-label-short { display: none; }
.fs-tab-label, .fs-tab-label-short { white-space: nowrap; }

.fs-desc-box { background: var(--fs-hover, #f8fafc); border: 1px solid var(--fs-border, #e9ecef); border-radius: 8px; padding: 12px 16px; font-size: 13px; color: var(--fs-body, #495057); }
.fs-charge-input { font-weight: 700 !important; color: var(--fs-primary, #dc2626) !important; font-size: 16px !important; background: var(--fs-primary-light, #fef2f2) !important; }
.fs-checkbox { font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
.fs-checkbox a { color: var(--fs-primary, #dc2626) !important; }

/* Balance Widget */
.fs-balance-widget { display: flex; align-items: center; background: var(--fs-bg, #f8f9fa); border: 1px solid var(--fs-border, #e9ecef); border-radius: 12px; padding: 6px 6px 6px 12px; }
.fs-balance-icon { width: 32px; height: 32px; background: rgba(220,38,38,0.1); color: var(--fs-primary, #dc2626); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px; font-size: 14px; }
.fs-balance-info { display: flex; flex-direction: column; margin-right: 20px; }
.fs-balance-label { font-size: 10px; font-weight: 700; color: var(--fs-muted, #6c757d); letter-spacing: 0.5px; line-height: 1; margin-bottom: 2px; }
.fs-balance-val { font-size: 16px; font-weight: 800; color: var(--fs-primary, #dc2626); line-height: 1; }
.fs-balance-add { width: 32px; height: 32px; background: var(--fs-primary, #dc2626); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none !important; transition: all 0.2s ease; }
.fs-balance-add:hover { background: var(--fs-primary-dark, #b91c1c); transform: scale(1.05); color: #fff; }

/* Info cards (neworder sidebar) */
.fs-info-cards { display: flex; flex-direction: column; gap: 12px; }
.fs-info-card { background: var(--fs-card, #fff); border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,0.04); display: flex; overflow: hidden; }
.fs-info-card-icon { background: var(--fs-gradient); color: #fff; display: flex; align-items: flex-start; justify-content: center; padding: 24px 20px; font-size: 22px; flex-shrink: 0; }
.fs-info-card-body { padding: 20px 24px; flex: 1; }
.fs-info-card-body h4 { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--fs-text); }
.fs-info-card-body > p { margin: 0 0 14px; font-size: 13px; color: var(--fs-muted, #6c757d); }

.fs-info-tip { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.15); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #b91c1c; display: flex; align-items: center; gap: 8px; }
.fs-info-tip a { color: var(--fs-primary, #dc2626) !important; font-weight: 600; }

.fs-request-fields { margin-bottom: 14px; }
.fs-req-row { display: flex; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--fs-body, #495057); border-bottom: 1px solid var(--fs-border, #f1f5f9); }
.fs-req-row:last-child { border-bottom: none; }
.fs-req-row span { font-weight: 600; color: var(--fs-text, #393E46); min-width: 80px; flex-shrink: 0; }

.fs-btn-outline { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px !important; padding: 8px 16px !important; }

@media (max-width: 600px) {
  .fs-info-card { flex-direction: column; }
  .fs-info-card-icon { padding: 16px; justify-content: flex-start; }
}

/* Mobile + tablet: compact tabs + balance widget on a single row. */
@media (max-width: 991px) {
  .fs-card-tabs { gap: 6px; padding: 8px 10px; flex-wrap: nowrap; align-items: center; }
  .fs-order-tabs { gap: 4px; flex-wrap: nowrap; align-items: center; }
  .fs-order-tabs li > a,
  .fs-balance-widget {
    height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border-radius: 11px;
  }
  .fs-order-tabs li > a { padding: 0 14px; font-size: 14px; gap: 6px; white-space: nowrap; line-height: 1; }
  .fs-order-tabs li > a i { font-size: 13px; }
  .fs-tab-label-long { display: none; }
  .fs-tab-label-short { display: inline; }
  .fs-balance-widget { padding: 0 5px 0 12px; }
  .fs-balance-icon { display: none; }
  .fs-balance-info { margin-right: 10px; line-height: 1; }
  .fs-balance-label { font-size: 10px; margin-bottom: 2px; }
  .fs-balance-val { font-size: 14px; white-space: nowrap; }
  .fs-balance-add { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
  .fs-order-pane { padding: 14px 14px 18px; }
}