/* ============================================================
   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: #2b50d4;
  --fs-primary-dark: #1e3aa0;
  --fs-primary-glow: rgba(43,80,212,0.25);
  --fs-primary-light: #eef2ff;
  --fs-gradient: linear-gradient(135deg, #2b50d4 0%, #4169e1 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, #2b50d4); }
.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, #eef2ff); color: var(--fs-primary, #2b50d4); border-color: var(--fs-primary, #2b50d4); 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, #1e3aa0 0%, #2b50d4 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, #2b50d4); 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, #2b50d4) !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, #2b50d4) !important; border-color: var(--fs-primary, #2b50d4) !important; }
.fs-link { color: var(--fs-primary, #2b50d4) !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: #4169e1;
  --fs-primary-dark: #2b50d4;
  --fs-primary-glow: rgba(43,80,212,0.25);
  --fs-primary-light: rgba(43,80,212,0.15);
  --fs-gradient: linear-gradient(135deg, #4169e1 0%, #2b50d4 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(43,80,212,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(43,80,212,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, #2b50d4) !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(43,80,212,0.05); border-color: var(--fs-primary, #2b50d4); color: var(--fs-primary, #2b50d4) !important; }
.fs-v3-contact-item i { color: var(--fs-primary, #2b50d4); 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(43,80,212,0.08); color: var(--fs-primary, #2b50d4); padding-left: 14px; }
.fs-v3-link-list a:hover::after { color: var(--fs-primary, #2b50d4); }

.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, #2b50d4); color: #ffffff; border-color: var(--fs-primary, #2b50d4); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(43,80,212,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, #2b50d4); }
.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, #2b50d4); 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, #1e3aa0); 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, #2b50d4); }
.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; }
.fs-member-footer-links a { color: var(--fs-muted, #6c757d); text-decoration: none; }
.fs-member-footer-links a:hover { color: var(--fs-primary, #2b50d4); }

/* 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, #1e3aa0);
  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: #2b50d4;
  --accent-hov: #1e3aa0;
  --accent-soft: rgba(43,80,212,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: #4169e1;
  --accent-hov: #2b50d4;
  --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; }

/* Custom "Sign in with Google" button. Replaces Google's GIS iframe widget,
   which on cold load painted an oversized unstyled placeholder before its
   iframe settled (the "big, then shrinks" flash). This is a plain button with
   a local, inline Google-"G" SVG — deterministic size, zero flash. The click
   drives Google's OAuth token flow from fs-theme.js (initGoogleCustomButton). */
.fs-google-wrap { display: flex; justify-content: center; margin: 8px 0; }
.fs-google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 300px; max-width: 100%; height: 40px; padding: 0 12px;
  background: #fff; color: #1f1f1f;
  border: 1px solid #747775; border-radius: 8px;
  font-family: 'Roboto', system-ui, -apple-system, 'Open Sans', sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.fs-google-btn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, .28); }
.fs-google-btn:active { background: #eceef0; }
.fs-google-btn:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }
.fs-google-btn svg, .fs-google-btn img { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
.fs-google-btn--sm { width: auto; height: 34px; font-size: 13px; gap: 8px; }
/* Dark theme: use Google's dark button variant so it reads as native. */
body.dark-mode .fs-google-btn { background: #131314; color: #e3e3e3; border-color: #8e918f; }
body.dark-mode .fs-google-btn:hover { background: #1e1f20; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
body.dark-mode .fs-google-btn:active { background: #282a2c; }

/* Brand icons in the account "connected accounts" list, as local SVGs so they
   don't flash in when the Font Awesome webfont loads. */
.fs-conn-ico { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.fs-conn-ico--apple { color: var(--fs-text); }

/* ============================================================
   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, #2b50d4) !important; font-weight: 500; text-decoration: none; }
.fs-forgot:hover { text-decoration: underline; color: var(--fs-primary-dark, #1e3aa0) !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, #2b50d4) !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, #2b50d4); border-color: var(--fs-primary-glow, rgba(43,80,212,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, #2b50d4) !important; font-size: 16px !important; background: var(--fs-primary-light, #eef2ff) !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, #2b50d4) !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(43,80,212,0.1); color: var(--fs-primary, #2b50d4); 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, #2b50d4); line-height: 1; }
.fs-balance-add { width: 32px; height: 32px; background: var(--fs-primary, #2b50d4); 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, #1e3aa0); 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(43,80,212,0.06); border: 1px solid rgba(43,80,212,0.15); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #1e3aa0; display: flex; align-items: center; gap: 8px; }
.fs-info-tip a { color: var(--fs-primary, #2b50d4) !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; }
}

/* ============================================================================
   MEMBER TOP HEADER + LEFT SIDEBAR
   Ported from the fixedmember layout.twig sidebar redesign (2026). Replaces the
   old top navbar for signed-in members only — guest/auth pages keep the
   .navbar. Desktop (>=1200px): permanent left rail, content shifted by
   --fs-sb-w, hamburger hidden. Below 1200px: off-canvas drawer opened by the
   topbar hamburger. Member area is English-only, so this is LTR-only (the
   reference's RTL rules are dropped). Red theme via the --fs-* tokens.
   ============================================================================ */
:root { --fs-sb-w: 268px; --fs-tb-h: 54px; }

/* --- Sidebar rail --- */
.fs-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--fs-sb-w);
  z-index: 1030; /* below any panel modals */
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1e3aa0 0%, #2b50d4 60%, #4169e1 100%);
  color: #fff;
  box-shadow: 4px 0 24px rgba(20, 40, 120, 0.16);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}
/* Dark mode: rail becomes a dark surface (same as cards) with a hairline edge */
body.dark-mode .fs-sidebar {
  background: var(--fs-card, #161616);
  box-shadow: none;
  border-right: 1px solid var(--fs-border, #1f1f1f);
}
body.fs-sb-open .fs-sidebar { transform: none; }
@media (min-width: 992px) {
  /* Rail starts below the top header; brand lives in the header on desktop */
  .fs-sidebar { top: var(--fs-tb-h); transform: none; }
  .fs-sidebar .fs-sb-head { display: none; }
  /* Shift BOTH the content and the slim member footer clear of the fixed rail
     (the footer is a sibling of .fs-main-content, not a child). */
  body.fs-has-sidebar .fs-main-content,
  body.fs-has-sidebar .fs-member-footer { margin-left: var(--fs-sb-w) !important; }
  .fs-topbar .fs-topbar-toggle { display: none; }
}

/* --- Drawer backdrop (mobile/tablet only) --- */
.fs-sb-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1029; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
body.fs-sb-open .fs-sb-backdrop { opacity: 1; pointer-events: auto; }
@media (max-width: 991px) { body.fs-sb-open { overflow: hidden !important; } }
@media (min-width: 992px) { .fs-sb-backdrop { display: none; } }

/* --- Top header bar (all widths) --- */
.fs-topbar {
  display: flex; align-items: center; gap: 6px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1028;
  background: var(--fs-card, #fff);
  border-bottom: 1px solid var(--fs-border, #e9ecef);
  box-shadow: var(--fs-shadow, 0 1px 12px rgba(0,0,0,0.04));
  padding: 4px 14px; min-height: var(--fs-tb-h);
}
/* !important is REQUIRED: the flex-layout reset earlier in this file sets
   `html, body { padding: 0 !important }`, which would otherwise win and let
   every page slide UP behind the fixed top header. */
body.fs-has-sidebar { padding-top: var(--fs-tb-h) !important; }
.fs-topbar-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--fs-border, #e9ecef); border-radius: 9px;
  background: transparent; color: var(--fs-text, #212529); font-size: 15px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.2s;
}
.fs-topbar-toggle:hover { color: var(--fs-primary, #2b50d4); border-color: var(--fs-primary, #2b50d4); }
.fs-topbar-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; text-decoration: none !important; }
.fs-topbar-brand img { max-height: 34px; }
.fs-topbar-brand .fs-brand-text { font-weight: 800; font-size: 18px; color: var(--fs-text, #212529); text-transform: uppercase; letter-spacing: 0.3px; }
.fs-topbar-brand .fs-brand-accent { color: var(--fs-primary, #2b50d4); }
.fs-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fs-topbar .fs-theme-toggle { margin: 0 !important; width: 34px; height: 34px; font-size: 13px; }
.fs-topbar-balance {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--fs-border, #e9ecef); border-radius: 999px;
  padding: 5px 13px; white-space: nowrap; font-weight: 700; font-size: 13px;
  color: var(--fs-primary, #2b50d4) !important; text-decoration: none !important;
}
@media (min-width: 992px) { .fs-topbar-balance { display: none; } }
.fs-topbar-user > a {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  color: var(--fs-text, #212529) !important; font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.fs-topbar-user > a:hover { color: var(--fs-primary, #2b50d4) !important; }
.fs-topbar-user .fa-user-circle { font-size: 19px; color: var(--fs-primary, #2b50d4); }
.fs-topbar-user .fa-chevron-down { font-size: 9px; color: var(--fs-muted, #6c757d); }
.fs-topbar-user .dropdown-menu { right: 0; left: auto; margin-top: 8px; min-width: 200px; }
.fs-topbar-user .dropdown-menu > li > a { padding: 9px 16px; display: flex; align-items: center; gap: 10px; }
.fs-topbar-user .dropdown-menu i { width: 16px; text-align: center; color: var(--fs-primary, #2b50d4); }
.fs-topbar-user .fs-signout-form { margin: 0; }
.fs-topbar-user .fs-signout-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; background: none; border: none; text-align: left; font: inherit; color: var(--fs-text, #212529); cursor: pointer; }
.fs-topbar-user .fs-signout-link:hover { background: var(--fs-hover, #f1f3f5); color: var(--fs-primary, #2b50d4) !important; }
@media (max-width: 519px) {
  .fs-topbar-balance { display: none; }
  .fs-topbar-user .fs-topbar-username { display: none; }
  .fs-topbar-brand .fs-brand-text { display: none; }
}

/* --- Sidebar head (drawer mode only) --- */
.fs-sb-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; flex-shrink: 0; }
.fs-sb-brand { display: flex; align-items: center; text-decoration: none !important; }
.fs-sb-brand-text { color: #fff; font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.3px; }
.fs-sb-brand-accent { color: rgba(255,255,255,0.72); }
body.dark-mode .fs-sb-brand-accent { color: var(--fs-primary, #4169e1); }
.fs-sb-close {
  display: none; width: 34px; height: 34px; border: none; border-radius: 10px;
  background: rgba(255,255,255,0.16); color: #fff; font-size: 14px;
  align-items: center; justify-content: center; cursor: pointer;
}
body.dark-mode .fs-sb-close { background: var(--fs-hover, #1e1e1e); color: var(--fs-text, #E0E0E0); }
@media (max-width: 991px) { .fs-sb-close { display: flex; } }

/* --- Sidebar orders search --- */
.fs-sb-search { position: relative; margin: 6px 16px 14px; flex-shrink: 0; }
.fs-sb-search .fa-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: rgba(255,255,255,0.75); pointer-events: none; }
.fs-sb-search input {
  width: 100%; font-family: inherit; font-size: 14px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.20);
  color: #fff; border-radius: 12px; padding: 10px 46px 10px 38px;
}
.fs-sb-search input::placeholder { color: rgba(255,255,255,0.7); }
.fs-sb-search input:focus { outline: none; background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
.fs-sb-search button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; border-radius: 9px;
  background: rgba(255,255,255,0.24); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s;
}
.fs-sb-search button:hover { background: rgba(255,255,255,0.38); }

/* --- Sidebar balance card --- */
.fs-sb-balance {
  margin: 0 16px 16px; flex-shrink: 0;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px; padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fs-sb-balance-info { min-width: 0; }
.fs-sb-balance-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); margin-bottom: 2px; }
.fs-sb-amount { font-size: 19px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fs-sb-amount .fa-wallet { font-size: 14px; color: rgba(255,255,255,0.8); }
.fs-sb-balance-add {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--fs-primary, #2b50d4) !important; font-size: 13px;
  text-decoration: none !important; box-shadow: 0 3px 10px rgba(20, 40, 120, 0.18);
  transition: transform 0.2s ease;
}
.fs-sb-balance-add:hover { transform: scale(1.1); }

/* --- Sidebar nav --- */
.fs-sb-nav {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: 4px 12px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
}
.fs-sb-nav::-webkit-scrollbar { width: 5px; }
.fs-sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 999px; }
.fs-sb-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: none; border-radius: 12px;
  background: transparent; color: rgba(255,255,255,0.92) !important;
  font-size: 14px; font-weight: 500;
  text-decoration: none !important; cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.fs-sb-link i:first-child { width: 20px; flex-shrink: 0; text-align: center; font-size: 15px; color: rgba(255,255,255,0.85); }
.fs-sb-link:hover { background: rgba(255,255,255,0.12); color: #fff !important; }
.fs-sb-link:hover i:first-child { color: #fff; }
.fs-sb-link.active { background: rgba(255,255,255,0.18); color: #fff !important; font-weight: 700; }
.fs-sb-link.active i:first-child { color: #fff; }
.fs-sb-primary { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.26); font-weight: 600; margin-bottom: 6px; }
.fs-sb-primary:hover { background: rgba(255,255,255,0.20); }
.fs-sb-primary.active {
  background: #fff; color: var(--fs-primary, #2b50d4) !important; font-weight: 700;
  box-shadow: 0 6px 18px rgba(20, 40, 120, 0.22);
}
.fs-sb-primary.active:hover { background: #fff; }
.fs-sb-primary.active i:first-child { color: var(--fs-primary, #2b50d4); }

/* Dark-mode: rail is a dark surface, so white-on-white would vanish — swap to
   theme text tokens + the primary-tint active state. */
body.dark-mode .fs-sb-link { color: var(--fs-body, #B0B0B0) !important; }
body.dark-mode .fs-sb-link i:first-child { color: var(--fs-muted, #888) !important; }
body.dark-mode .fs-sb-link:hover { background: var(--fs-hover, #1e1e1e); color: var(--fs-text, #E0E0E0) !important; }
body.dark-mode .fs-sb-link:hover i:first-child { color: var(--fs-primary, #4169e1) !important; }
body.dark-mode .fs-sb-link.active { background: var(--fs-primary-light, rgba(43,80,212,0.15)); color: var(--fs-text, #E0E0E0) !important; }
body.dark-mode .fs-sb-link.active i:first-child { color: var(--fs-primary, #4169e1) !important; }
body.dark-mode .fs-sb-primary { border-color: var(--fs-border, #333); }
body.dark-mode .fs-sb-primary.active { background: var(--fs-gradient); color: #fff !important; box-shadow: none; }
body.dark-mode .fs-sb-primary.active i:first-child { color: #fff !important; }
body.dark-mode .fs-sb-search input,
body.dark-mode .fs-sb-balance { background: var(--fs-hover, #1e1e1e); border-color: var(--fs-border, #333); }
body.dark-mode .fs-sb-amount,
body.dark-mode .fs-sb-search input { color: var(--fs-text, #E0E0E0); }
body.dark-mode .fs-sb-balance-label,
body.dark-mode .fs-sb-search .fa-search,
body.dark-mode .fs-sb-amount .fa-wallet,
body.dark-mode .fs-sb-search input::placeholder { color: var(--fs-muted, #888); }
body.dark-mode .fs-sb-search button { background: var(--fs-primary, #4169e1); }
body.dark-mode .fs-sb-balance-add { background: var(--fs-primary, #4169e1); color: #fff !important; }