/* ═══════════════════════════════════════════════════════════
SOUQFOLLOW — Panel theme · Bootstrap 5.3 (LTR + RTL)
Load bootstrap.min.css (LTR) or bootstrap.rtl.min.css (RTL) first.
Dark default · Light via
Uses logical properties (inline-start/end) → one file for both directions.
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root, [data-bs-theme="dark"]{
color-scheme:dark;
--sf-orange:#F26B0F; --sf-orange-mid:#FF8A1F; --sf-gold:#FFB627; --sf-ember:#B24A05;
--sf-grad:linear-gradient(135deg,#F26B0F 0%,#FF8A1F 48%,#FFB627 100%);
--sf-ok:#5FD08A; --sf-ok-bg:rgba(80,200,120,.14); --sf-err:#FF6B4A; --sf-err-bg:rgba(255,107,74,.14); --sf-warn-bg:rgba(255,182,39,.14);
--bg:#0B0B0D; --surface:#16171A; --surface-2:#1E1F24;
--text:#FFFFFF; --text-2:rgba(245,242,237,.78); --muted:rgba(245,242,237,.55); --faint:rgba(245,242,237,.4);
--border:rgba(245,242,237,.12); --border-strong:rgba(245,242,237,.22);
--accent:#FFB627; --accent-bg:rgba(255,182,39,.14); --input-bg:#16171A; --shadow:0 24px 60px rgba(0,0,0,.55);
--font-display:'Sora',system-ui,sans-serif; --font-body:'Manrope',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace;
--sf-bolt:url("data:image/svg+xml;utf8,");
/* Bootstrap 5 variable bridge */
--bs-body-bg:var(--bg); --bs-body-color:var(--text-2); --bs-body-font-family:var(--font-body); --bs-body-font-size:15px;
--bs-border-color:var(--border); --bs-border-radius:0; --bs-border-radius-sm:0; --bs-border-radius-lg:0; --bs-border-radius-xl:0; --bs-border-radius-pill:0;
--bs-link-color:var(--accent); --bs-link-hover-color:var(--sf-orange); --bs-link-color-rgb:255,182,39; --bs-link-hover-color-rgb:242,107,15;
--bs-heading-color:var(--text); --bs-secondary-color:var(--muted); --bs-tertiary-color:var(--faint); --bs-emphasis-color:var(--text);
--bs-tertiary-bg:var(--surface-2); --bs-secondary-bg:var(--surface);
--bs-focus-ring-color:rgba(255,182,39,.35);
}
[data-bs-theme="light"]{
color-scheme:light;
--bg:#F5F2ED; --surface:#FFFFFF; --surface-2:#E9E4DA;
--text:#0B0B0D; --text-2:rgba(11,11,13,.8); --muted:rgba(11,11,13,.6); --faint:rgba(11,11,13,.42);
--border:rgba(11,11,13,.1); --border-strong:rgba(11,11,13,.22);
--accent:#B24A05; --accent-bg:rgba(242,107,15,.12); --input-bg:#FFFFFF; --shadow:0 24px 60px rgba(11,11,13,.12);
--sf-ok:#1F7A44; --sf-ok-bg:rgba(40,150,80,.12); --sf-err:#C23A1E; --sf-err-bg:rgba(194,58,30,.1);
--bs-link-color-rgb:178,74,5;
}
[dir="rtl"]{ --font-display:'Thmanyah','IBM Plex Sans Arabic',sans-serif; --font-body:'Thmanyah','IBM Plex Sans Arabic',sans-serif; --font-mono:'Thmanyah','JetBrains Mono',monospace; }
[dir="rtl"] body{ line-height:1.75; }
[dir="rtl"] :is(h1,h2,h3,h4,.sf-h2){ font-weight:700; line-height:1.3; letter-spacing:0; }
[dir="rtl"] .navbar-brand, [dir="rtl"] .sf-sidebar__brand, [dir="rtl"] .sf-topbar__brand{ font-weight:800; }
/* numerals & labels: Thmanyah has proportional Arabic-Indic + Latin digits; keep them on the brand face, tabular, LTR */
[dir="rtl"] :is(.sf-num, .sf-id, .sf-rate, .sf-counters strong, .sf-stats strong, .sf-summary__row strong, .sf-charge .form-control, .sf-details__list dd, .table td.sf-id, .badge, .sf-balance strong, .sf-balance-pill strong){ font-family:'Thmanyah',sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
[dir="rtl"] :is(.sf-label, .sf-mono, label, .form-label, .table > thead th, .sf-status, .sf-hero__eyebrow, .sf-section-head .sf-label){ font-family:'Thmanyah',sans-serif; letter-spacing:0; text-transform:none; font-weight:500; font-size:12px; }
[dir="rtl"] .sf-status{ font-size:11px; }
[dir="rtl"] .btn{ font-weight:600; letter-spacing:0; }
/* ── Arabic typeface: Thmanyah Sans (font.thmanyah.com, free for commercial use).
Optional: swaps headings to Thmanyah Serif Display. */
@font-face{ font-family:'Thmanyah'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781713/thmanyahsans-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Thmanyah'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781714/thmanyahsans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Thmanyah'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781714/thmanyahsans-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Thmanyah'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781713/thmanyahsans-Bold.woff2') format('woff2'); font-weight:600 700; font-display:swap; }
@font-face{ font-family:'Thmanyah'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781713/thmanyahsans-Black.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
@font-face{ font-family:'Thmanyah Display'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781713/thmanyahserifdisplay-Bold.woff2') format('woff2'); font-weight:600 700; font-display:swap; }
@font-face{ font-family:'Thmanyah Display'; src:url('https://res.cloudinary.com/ebab7smv/raw/upload/v1788781717/thmanyahserifdisplay-Black.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
[dir="rtl"][data-font="display"]{ --font-display:'Thmanyah Display','Thmanyah',serif; }
[dir="rtl"] :is(.sf-num, .sf-id, .badge, .page-link, .sf-summary__row strong, .sf-summary #charge){ direction:ltr; unicode-bidi:isolate; }
/* ── Final: font inheritance guards (plugin selects, tooltips, modals, alerts) ── */
[dir="rtl"] :is(input, select, textarea, button, .tooltip, .popover, .modal, .alert, .dropdown-menu, .select-dropdown, .select-search-input, .select-option, .toast){ font-family:var(--font-body); }
[dir="rtl"] :is(.tooltip-inner, .sf-status, .badge){ letter-spacing:0; }
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="email"]{ direction:ltr; text-align:end; }
/* menu notification counters injected by the panel as */
:is(.sf-sidebar__link, .nav-link, .dropdown-item, .sf-side a) .badge{ background:var(--sf-grad) !important; color:#0B0B0D !important; font-family:var(--font-display); font-weight:700; font-size:11px; line-height:1; min-width:20px; height:20px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; margin-inline-start:8px; border-radius:0; vertical-align:middle; }
.sf-sidebar__link .badge{ margin-inline-start:auto; }
.sf-sidebar__link > span:has(.badge){ display:flex; flex:1; align-items:center; justify-content:space-between; gap:8px; }
.sf-sidebar__link.active:has(.badge)::after{ display:none; }
[dir="rtl"] :is(.sf-sidebar__link, .nav-link, .dropdown-item) .badge{ direction:ltr; }
/* ── Base ─────────────────────────────────────────────── */
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--text-2); font-family:var(--font-body); -webkit-font-smoothing:antialiased; transition:background .24s cubic-bezier(.2,0,0,1), color .24s; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.display-1,.display-2,.display-3{ font-family:var(--font-display); color:var(--text); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
[dir="rtl"] :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4){ letter-spacing:0; line-height:1.35; }
h1,.h1{ font-size:40px; } h2,.h2{ font-size:30px; } h3,.h3{ font-size:24px; } h4,.h4{ font-size:18px; letter-spacing:-.01em; }
a{ text-decoration:none; transition:color .16s; }
code,pre,kbd{ font-family:var(--font-mono); background:var(--surface-2); color:var(--accent); border:1px solid var(--border); }
pre{ padding:16px; color:var(--text-2); }
::selection{ background:var(--sf-orange); color:#0B0B0D; }
.sf-mono, .sf-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.sf-label--accent{ color:var(--accent); }
.sf-num{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; }
/* ── Layout ───────────────────────────────────────────── */
.container{ max-width:1200px; }
.sf-main > .container, .sf-main > .container-fluid{ padding-top:40px; padding-bottom:56px; }
.container-fluid{ padding-inline:32px; }
.sf-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.sf-page-head h1{ margin:0; font-size:32px; }
.sf-shell .sf-page-head > div > .sf-label:first-child{ display:none; } .sf-page-head .sf-label{ display:block; margin-bottom:10px; }
/* ── Navbar ───────────────────────────────────────────── */
.navbar.sf-nav{ background:color-mix(in srgb, var(--bg) 88%, transparent); border-bottom:1px solid var(--border); padding:0; min-height:68px; position:sticky; top:0; z-index:1020; backdrop-filter:blur(12px); }
.sf-nav .navbar-brand{ height:68px; display:flex; align-items:center; gap:12px; padding:0; margin-inline-end:36px; font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--text); }
.sf-nav .navbar-brand::before{ content:""; width:26px; height:26px; flex:none; background:var(--sf-grad); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; }
.sf-nav .navbar-brand img{ height:30px; width:auto; }
.sf-nav .navbar-brand:has(img)::before{ display:none; }
.sf-nav .nav-link{ color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:14px; padding:24px 14px; border-bottom:2px solid transparent; transition:color .16s, border-color .16s; }
.sf-nav .nav-link:hover, .sf-nav .nav-link:focus, .sf-nav .nav-link.show{ color:var(--text); }
.sf-nav .nav-link.active{ color:var(--text); border-bottom-color:var(--sf-gold); }
.sf-nav .navbar-icon{ margin-inline-end:8px; color:var(--accent); }
.sf-nav .badge{ background:var(--sf-grad); color:#0B0B0D; font-family:var(--font-mono); font-weight:500; font-size:12px; padding:6px 10px; letter-spacing:.02em; }
.sf-nav .navbar-toggler{ border:1px solid var(--border-strong); padding:8px 10px; margin-block:16px; }
.sf-nav .navbar-toggler:focus{ box-shadow:none; }
[data-bs-theme="light"] .sf-nav .navbar-toggler-icon{ filter:none; }
.sf-nav .navbar-toggler-icon{ background-image:url("data:image/svg+xml;utf8,"); }
.dropdown-menu{ --bs-dropdown-bg:var(--surface); --bs-dropdown-border-color:var(--border-strong); --bs-dropdown-link-color:var(--text-2); --bs-dropdown-link-hover-color:var(--text); --bs-dropdown-link-hover-bg:var(--accent-bg); --bs-dropdown-link-active-bg:var(--sf-orange); --bs-dropdown-link-active-color:#0B0B0D; --bs-dropdown-divider-bg:var(--border); box-shadow:var(--shadow); padding:6px 0; min-width:200px; }
.dropdown-item{ padding:10px 16px; font-size:14px; }
.dropdown-item.active{ background:var(--sf-grad); }
.sf-theme-toggle{ display:inline-flex; border:1px solid var(--border-strong); height:36px; cursor:pointer; background:transparent; padding:0; margin-inline-start:14px; margin-block:16px; }
.sf-theme-toggle span{ width:38px; height:34px; display:inline-flex; align-items:center; justify-content:center; color:var(--faint); font-size:13px; transition:all .16s; }
.sf-theme-toggle span.on{ background:var(--sf-grad); color:#0B0B0D; }
/* ── App shell (logged-in): sidebar + topbar ──────────── */
.sf-shell{ display:flex; min-height:100vh; }
.sf-sidebar{ width:260px; flex:none; background:var(--surface); border-inline-end:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sf-sidebar__brand{ height:68px; display:flex; align-items:center; gap:12px; padding:0 24px; border-bottom:1px solid var(--border); font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--text); }
[dir="rtl"] .sf-sidebar__brand{ letter-spacing:0; }
.sf-sidebar__brand::before{ content:""; width:26px; height:26px; flex:none; background:var(--sf-grad); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; }
.sf-sidebar__brand:has(img)::before{ display:none; } .sf-sidebar__brand img{ height:30px; width:auto; }
.sf-sidebar__nav{ display:flex; flex-direction:column; padding:16px 12px; gap:2px; flex:1; overflow-y:auto; }
.sf-sidebar__link{ display:flex; align-items:center; gap:12px; padding:12px 14px; color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:14px; border-inline-start:2px solid transparent; transition:color .16s, background .16s, border-color .16s; position:relative; }
.sf-sidebar__link.active::after{ content:""; position:absolute; inset-inline-end:14px; top:50%; width:5px; height:5px; margin-top:-2.5px; background:var(--sf-gold); }
.sf-sidebar__link:hover{ color:var(--text); background:var(--accent-bg); }
.sf-sidebar__link.active{ color:var(--text); background:var(--accent-bg); border-inline-start-color:var(--sf-gold); }
.sf-sidebar__icon{ width:18px; text-align:center; font-size:14px; color:var(--faint); flex:none; }
.sf-sidebar__link.active .sf-sidebar__icon, .sf-sidebar__link:hover .sf-sidebar__icon{ color:var(--accent); }
.sf-sidebar__foot{ padding:20px 24px 24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:18px; }
.sf-shell__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sf-topbar{ height:68px; display:flex; align-items:center; gap:8px; padding:0 32px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); position:sticky; top:0; z-index:1020; }
.sf-topbar__spacer{ flex:1; }
.sf-topbar__link{ color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:14px; padding:10px 14px; transition:color .16s; }
.sf-topbar__link:hover, .sf-topbar__link.active{ color:var(--text); }
.sf-topbar__brand{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--text); display:flex; align-items:center; gap:10px; }
.sf-topbar__brand::before{ content:""; width:22px; height:22px; background:var(--sf-grad); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; }
.sf-topbar__menu{ width:40px; height:40px; border:1px solid var(--border-strong); background:transparent; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0; margin-inline-end:8px; }
.sf-topbar__menu span{ width:18px; height:1.75px; background:var(--sf-gold); }
.sf-balance-pill{ display:flex; align-items:center; gap:12px; height:40px; padding:0 14px; border:1px solid var(--border-strong); background:transparent; color:var(--text); margin-inline-end:12px; transition:border-color .16s; }
.sf-balance-pill:hover{ border-color:var(--sf-gold); color:var(--text); }
.sf-balance-pill .sf-label{ font-size:10px; } .sf-balance-pill strong{ font-family:var(--font-mono); font-weight:500; font-size:14px; color:var(--text); }
.sf-balance-pill.dropdown-toggle::after{ margin-inline-start:4px; color:var(--faint); }
.sf-avatar{ width:40px; height:40px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:var(--font-display); font-weight:700; font-size:14px; display:inline-flex; align-items:center; justify-content:center; transition:border-color .16s; padding:0; }
.sf-avatar:hover, .sf-avatar[aria-expanded="true"]{ border-color:var(--sf-gold); }
.sf-avatar:focus:not(:focus-visible){ outline:none; }
.sf-avatar::after{ display:none; }
.sf-avatar__initial{ font-family:var(--font-display); }
[dir="rtl"] .sf-avatar__initial{ font-family:var(--font-body); font-weight:600; }
.sf-account-menu .dropdown-menu{ min-width:240px; margin-top:8px !important; padding:0 0 6px; }
.sf-account-menu .dropdown-item{ padding:9px 16px; font-size:14px; }
.sf-account-menu .dropdown-divider{ margin:6px 0; }
.sf-account-menu__head{ padding:14px 16px; border-bottom:1px solid var(--border); margin-bottom:6px; background:var(--bg); display:flex; flex-direction:column; gap:2px; }
.sf-account-menu__head strong{ font-family:var(--font-display); font-weight:600; color:var(--text); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-account-menu__head span{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:start; }
.sf-theme-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; background:transparent; width:100%; height:auto; margin:0; padding:9px 16px; color:var(--text-2); font-size:14px; font-family:var(--font-body); text-align:start; cursor:pointer; }
.sf-theme-item:hover{ background:var(--accent-bg); color:var(--text); }
.sf-theme-item .sf-switch{ position:relative; flex:none; width:36px; height:20px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border-strong); transition:background .2s, border-color .2s; }
.sf-theme-item .sf-switch::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:14px; height:14px; border-radius:50%; background:var(--faint); transition:transform .2s cubic-bezier(.2,0,0,1), background .2s; }
html[data-bs-theme="light"] .sf-theme-item .sf-switch{ background:var(--sf-orange); border-color:var(--sf-orange); }
html[data-bs-theme="light"] .sf-theme-item .sf-switch::after{ transform:translateX(16px); background:#fff; }
html[dir="rtl"][data-bs-theme="light"] .sf-theme-item .sf-switch::after{ transform:translateX(-16px); }
.sf-theme-item .sf-switch span{ display:none; }
.sf-lang-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 16px; color:var(--text-2); font-size:14px; }
.sf-lang-switch{ display:inline-flex; border:1px solid var(--border-strong); }
.sf-lang-switch a{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:26px; padding:0 8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--muted); transition:background .16s, color .16s; }
.sf-lang-switch a + a{ border-inline-start:1px solid var(--border-strong); }
.sf-lang-switch a:hover{ color:var(--text); background:var(--accent-bg); }
.sf-lang-switch a.on{ background:var(--sf-grad); color:#0B0B0D; }
/* language dropdown (scales to N languages) */
.sf-lang__btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--border-strong); background:transparent; color:var(--muted); font-family:var(--font-display); font-size:13px; font-weight:500; transition:border-color .16s, color .16s; }
.sf-lang__btn:hover, .sf-lang__btn[aria-expanded="true"]{ border-color:var(--sf-gold); color:var(--text); }
.sf-lang__btn i{ font-size:13px; color:var(--accent); }
.sf-lang__menu{ min-width:220px; max-height:min(60vh, 420px); overflow-y:auto; padding:6px 0; }
.sf-lang__menu .dropdown-item{ display:flex; align-items:center; gap:12px; padding:9px 14px; font-size:14px; }
.sf-lang__code{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; width:26px; height:20px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); color:var(--faint); flex:none; direction:ltr; }
.sf-lang__menu .dropdown-item.active .sf-lang__code{ border-color:transparent; background:rgba(11,11,13,.2); color:#0B0B0D; }
.sf-lang__menu .dropdown-item:hover .sf-lang__code{ border-color:var(--sf-gold); color:var(--accent); }
.sf-lang--nav{ margin-inline-start:14px; margin-block:16px; }
.sf-lang-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.sf-lang-row__cur{ font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.sf-lang-row__cur::after{ content:""; width:6px; height:6px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint); transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.sf-lang-row[aria-expanded="true"] .sf-lang-row__cur::after{ transform:rotate(225deg) translateY(-1px); }
.sf-lang-list{ max-height:220px; overflow-y:auto; background:var(--bg); border-block:1px solid var(--border); }
.sf-lang-list .dropdown-item{ display:flex; align-items:center; gap:12px; padding:8px 16px 8px 24px; font-size:13px; }
[dir="rtl"] .sf-lang-list .dropdown-item{ padding:8px 24px 8px 16px; }
@media (max-width:991.98px){ .sf-lang--nav{ margin:10px 16px; } }
.sf-logout{ color:var(--sf-err) !important; } .sf-logout:hover{ background:var(--sf-err-bg) !important; }
.sf-shell .sf-main > .container, .sf-shell .sf-main > .container-fluid{ padding-top:36px; }
.sf-shell .sf-main > .container + .container, .sf-shell .sf-main > .container-fluid + .container{ padding-top:0; }
.sf-well .sf-well{ background:var(--bg); }
.sf-well > .row > [class*="col-"] > .sf-well{ margin-bottom:0; }
.sf-well .table{ min-width:0; }
.sf-well--flush .table{ width:100%; min-width:0; }
.sf-well h4, .sf-well h5{ margin-bottom:16px; }
.sf-well p:last-child{ margin-bottom:0; }
.mb-3 .mb-3{ margin-bottom:14px !important; }
.form-control[type="file"]{ padding:10px 14px; }
.list-group{ --bs-list-group-bg:var(--surface); --bs-list-group-border-color:var(--border); --bs-list-group-color:var(--text-2); --bs-list-group-action-hover-bg:var(--accent-bg); --bs-list-group-active-bg:var(--sf-orange); --bs-list-group-active-border-color:var(--sf-orange); --bs-list-group-active-color:#0B0B0D; }
.accordion{ --bs-accordion-bg:var(--surface); --bs-accordion-border-color:var(--border); --bs-accordion-color:var(--text-2); --bs-accordion-btn-color:var(--text); --bs-accordion-btn-bg:var(--surface); --bs-accordion-active-bg:var(--accent-bg); --bs-accordion-active-color:var(--text); --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-border-radius:0; --bs-accordion-inner-border-radius:0; }
.accordion-button{ font-family:var(--font-display); font-weight:600; }
.accordion-button::after{ filter:invert(1) sepia(1) saturate(4) hue-rotate(5deg); } [data-bs-theme="light"] .accordion-button::after{ filter:none; }
blockquote{ border-inline-start:2px solid var(--sf-orange); padding-inline-start:16px; color:var(--muted); }
.sf-ticket{ display:flex; flex-direction:column; gap:12px; }
.sf-ticket__msg{ padding:16px 20px; border:1px solid var(--border); background:var(--bg); max-width:78%; }
.sf-ticket__msg--staff{ margin-inline-start:auto; background:var(--accent-bg); border-color:transparent; }
/* ── Ticket thread ─────────────────────────────────────── */
.sf-thread__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.sf-thread__title{ margin:6px 0 0; font-size:22px; }
.sf-thread__msgs{ display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.sf-msg{ display:flex; flex-direction:column; gap:6px; max-width:78%; }
.sf-msg--client{ align-self:flex-start; }
.sf-msg--staff{ align-self:flex-end; align-items:flex-end; }
.sf-msg__bubble{ background:var(--surface); border:1px solid var(--border); padding:14px 16px; }
.sf-msg--staff .sf-msg__bubble{ background:var(--accent-bg); border-color:transparent; }
.sf-msg__text{ font-size:14px; color:var(--text-2); line-height:1.6; white-space:pre-wrap; }
.sf-msg__files{ display:flex; flex-direction:column; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.sf-msg__files a{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--accent); }
.sf-msg__files a:hover{ color:var(--sf-orange); }
.sf-msg__meta{ display:flex; gap:10px; align-items:baseline; font-size:12px; color:var(--faint); }
.sf-msg__meta strong{ color:var(--muted); font-weight:600; }
.sf-thread__reply{ padding-top:24px; border-top:1px solid var(--border); }
.sf-thread__reply-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width:575.98px){ .sf-msg{ max-width:92%; } }
/* ── Blog ──────────────────────────────────────────────── */
.sf-blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:32px; }
.sf-blog-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); color:inherit; text-decoration:none; transition:border-color .16s, transform .2s cubic-bezier(.2,0,0,1); }
.sf-blog-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); color:inherit; }
.sf-blog-card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--bg); position:relative; }
.sf-blog-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-blog-card__media .sf-bolt-bg{ inset-inline-end:-10%; bottom:-30%; width:60%; opacity:.5; }
.sf-blog-card__body{ padding:22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sf-blog-card__body > .sf-mono{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.sf-blog-card__body h3{ margin:0; font-size:19px; line-height:1.3; }
.sf-blog-card__excerpt{ font-size:14px; color:var(--muted); line-height:1.6; flex:1; }
.sf-blog-card__link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--accent); margin-top:4px; }
.sf-blog-card:hover .sf-blog-card__link{ color:var(--sf-orange); }
.sf-blog-pagination{ margin-top:8px; }
.sf-article__back{ display:inline-flex; align-items:center; gap:8px; margin-top:32px; font-size:13px; color:var(--muted); }
.sf-article__back:hover{ color:var(--accent); }
.sf-article__head{ max-width:760px; margin:24px auto 0; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; }
.sf-article__head h1{ margin:0; font-size:40px; }
.sf-article__cover{ margin:40px 0; max-width:1100px; margin-inline:auto; aspect-ratio:16/7; overflow:hidden; border:1px solid var(--border); }
.sf-article__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-article__body{ max-width:720px; margin:0 auto; font-size:16px; line-height:1.8; color:var(--text-2); }
.sf-article__body img{ max-width:100%; }
.sf-article__body h2, .sf-article__body h3{ margin-top:36px; }
.sf-article__footer-back{ display:block; width:max-content; margin:48px auto 64px; }
@media (max-width:575.98px){ .sf-article__head h1{ font-size:28px; } }
.panel, .panel-default{ background:var(--surface); border:1px solid var(--border); margin-bottom:20px; }
.panel-heading{ padding:16px 20px; border-bottom:1px solid var(--border); font-family:var(--font-display); font-weight:600; color:var(--text); }
.panel-body{ padding:20px; }
.label{ display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 8px; background:var(--surface-2); color:var(--muted); }
.label-success{ background:var(--sf-ok-bg); color:var(--sf-ok); } .label-danger{ background:var(--sf-err-bg); color:var(--sf-err); } .label-primary, .label-info, .label-warning{ background:var(--accent-bg); color:var(--accent); }
.text-end{ text-align:end !important; }
.sf-shell .container{ max-width:1200px; margin-inline:auto; }
/* ── Cards / wells ────────────────────────────────────── */
.sf-well, .card, .sf-sidebar, .sf-topbar, .form-control, .form-select, .table > thead th{ transition:background-color .24s cubic-bezier(.2,0,0,1), border-color .24s, color .24s; }
.sf-well, .card{ background:var(--surface); border:1px solid var(--border); border-radius:0; box-shadow:none; color:var(--text-2); }
.sf-well{ padding:32px; margin-bottom:20px; }
.sf-well--flush{ padding:0; overflow:hidden; }
.card-header{ background:transparent; border-bottom:1px solid var(--border); color:var(--text); font-family:var(--font-display); font-weight:600; padding:16px 20px; }
.card-body{ padding:20px; }
.hidden{ display:none !important; }
.sf-desc{ border:1px solid var(--border); background:var(--bg); color:var(--text-2); font-size:14px; padding:16px; }
.list-group-item{ background:var(--surface); border-color:var(--border); color:var(--text-2); }
/* ── Forms ────────────────────────────────────────────── */
.form-label, label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:500; margin-bottom:8px; }
[dir="rtl"] :is(.form-label,label){ letter-spacing:.04em; }
.mb-3, .form-group{ margin-bottom:22px !important; }
.form-control, .form-select{ background:var(--input-bg); border:1px solid var(--border-strong); color:var(--text); min-height:48px; padding:0 14px; font-size:15px; font-family:var(--font-body); box-shadow:none; transition:border-color .16s, box-shadow .16s; }
textarea.form-control{ min-height:auto; padding:12px 14px; line-height:1.6; }
.form-select{ background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px; padding-inline-end:36px; }
[dir="rtl"] .form-select{ background-position:left 14px center; }
[data-bs-theme="light"] .form-select{ background-image:url("data:image/svg+xml;utf8,"); }
.form-select option{ background:var(--surface); color:var(--text); }
.form-control:focus, .form-select:focus{ background:var(--input-bg); color:var(--text); border-color:var(--sf-gold); box-shadow:0 0 0 1px var(--sf-gold); }
.form-control::placeholder{ color:var(--faint); }
.form-control[readonly], .form-control:disabled, .form-select:disabled{ background:var(--surface-2); color:var(--muted); opacity:1; }
.form-text{ color:var(--muted); font-size:13px; }
.form-check-input{ width:16px; height:16px; border:1px solid var(--border-strong); background-color:transparent; border-radius:0 !important; margin-top:.3em; }
.form-check-input:checked{ background-color:var(--sf-orange); border-color:var(--sf-orange); }
.form-check-input:focus{ box-shadow:0 0 0 2px var(--accent-bg); border-color:var(--sf-gold); }
.form-check-label{ text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:14px; color:var(--text-2); }
.form-switch .form-check-input{ width:40px; height:22px; background-image:url("data:image/svg+xml;utf8,"); }
.form-switch .form-check-input:checked{ background-image:url("data:image/svg+xml;utf8,"); }
.input-group .btn{ min-height:48px; }
.input-group-text{ background:var(--surface-2); border:1px solid var(--border-strong); color:var(--muted); }
.forgot-password{ display:block; margin-top:10px; font-size:13px; }
.was-validated .form-control:invalid, .form-control.is-invalid{ border-color:var(--sf-err); background-image:none; }
.invalid-feedback{ color:var(--sf-err); }
/* legacy select plugin containers (data-select) */
.select-wrapper, .select-dropdown, .select-search-input{ background:var(--surface) !important; border-color:var(--border-strong) !important; color:var(--text) !important; border-radius:0 !important; }
.select-option:hover, .select-option.active{ background:var(--accent-bg) !important; color:var(--text) !important; }
#new-order-search .form-control{ padding-inline-start:40px; }
#new-order-search .sf-search-btn{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:12px; padding:0 2px; background:none; border:none; color:var(--faint); }
/* ── Platform tabs (new order) — 3 styles via data-sf-tabs="chips|icons|segment" ── */
.sf-platform-tabs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.sf-platform-tabs::-webkit-scrollbar{ display:none; }
.sf-ptab{ flex:none; display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 14px; border:1px solid var(--border-strong); background:transparent; color:var(--muted); font-family:var(--font-display); font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:border-color .16s, color .16s, background .16s; }
[dir="rtl"] .sf-ptab{ padding:0 14px 0 16px; }
.sf-ptab i{ font-size:16px; color:var(--faint); transition:color .16s; }
.sf-ptab:hover{ border-color:var(--sf-gold); color:var(--text); } .sf-ptab:hover i{ color:var(--accent); }
.sf-ptab.active{ background:var(--sf-grad); border-color:transparent; color:#0B0B0D; } .sf-ptab.active i{ color:#0B0B0D; }
.sf-ptab[hidden]{ display:none; }
/* tabs are filtered by JS on load — keep them invisible until then to avoid a flash */
.sf-ptab.is-empty{ opacity:.45; } .sf-ptab.is-empty:hover{ opacity:.8; }
/* B · icon tiles (like landing walkthrough) */
.sf-platform-tabs[data-sf-tabs="icons"]{ overflow:visible; flex-wrap:wrap; gap:8px; }
.sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab{ width:56px; height:56px; padding:0; justify-content:center; border-color:var(--border); background:var(--bg); position:relative; }
.sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab i{ font-size:20px; }
.sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab span{ position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); font-size:10px; color:var(--faint); opacity:0; pointer-events:none; transition:opacity .16s; font-family:var(--font-mono); letter-spacing:.06em; }
[dir="rtl"] .sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab span{ font-family:var(--font-body); letter-spacing:0; }
.sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab:hover span, .sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab.active span{ opacity:1; }
.sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab.active{ background:var(--accent-bg); border-color:var(--sf-gold); color:var(--text); } .sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab.active i{ color:var(--sf-gold); }
.sf-platform-tabs[data-sf-tabs="icons"] .sf-ptab.active span{ color:var(--text); }
.sf-platform-tabs[data-sf-tabs="icons"]{ padding-bottom:22px; }
/* C · segmented underline (like nav-pills) */
.sf-platform-tabs[data-sf-tabs="segment"]{ gap:0; border-bottom:1px solid var(--border); padding-bottom:0; }
.sf-platform-tabs[data-sf-tabs="segment"] .sf-ptab{ border:0; border-bottom:2px solid transparent; margin-bottom:-1px; height:46px; padding:0 14px; background:transparent; }
.sf-platform-tabs[data-sf-tabs="segment"] .sf-ptab:hover{ color:var(--text); }
.sf-platform-tabs[data-sf-tabs="segment"] .sf-ptab.active{ background:transparent; color:var(--text); border-bottom-color:var(--sf-gold); } .sf-platform-tabs[data-sf-tabs="segment"] .sf-ptab.active i{ color:var(--sf-gold); }
@media (max-width:767.98px){ .sf-platform-tabs:not([data-sf-tabs]) .sf-ptab span, .sf-platform-tabs[data-sf-tabs="chips"] .sf-ptab span{ display:none; } .sf-platform-tabs:not([data-sf-tabs]) .sf-ptab, .sf-platform-tabs[data-sf-tabs="chips"] .sf-ptab{ width:44px; padding:0; justify-content:center; } .sf-platform-tabs:not([data-sf-tabs]) .sf-ptab.active, .sf-platform-tabs[data-sf-tabs="chips"] .sf-ptab.active{ width:auto; padding:0 14px; } .sf-platform-tabs:not([data-sf-tabs]) .sf-ptab.active span, .sf-platform-tabs[data-sf-tabs="chips"] .sf-ptab.active span{ display:inline; } .sf-platform-tabs[data-sf-tabs="segment"] .sf-ptab span{ display:none; } }
/* ── Buttons ──────────────────────────────────────────── */
.btn{ --bs-btn-border-radius:0; font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.02em; padding:13px 24px; line-height:20px; transition:transform .16s cubic-bezier(.2,0,0,1), filter .16s, background .16s, border-color .16s, color .16s; }
[dir="rtl"] .btn{ letter-spacing:0; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--sf-gold); }
.btn-primary{ --bs-btn-bg:transparent; --bs-btn-border-color:transparent; --bs-btn-color:#0B0B0D; --bs-btn-hover-bg:transparent; --bs-btn-hover-border-color:transparent; --bs-btn-hover-color:#0B0B0D; --bs-btn-active-bg:transparent; --bs-btn-active-border-color:transparent; --bs-btn-active-color:#0B0B0D; --bs-btn-disabled-bg:var(--surface-2); --bs-btn-disabled-border-color:transparent; --bs-btn-disabled-color:var(--faint); background-image:var(--sf-grad); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:active, .btn-primary.active, .btn-primary.show{ background-image:linear-gradient(135deg,#B24A05,#F26B0F); }
.btn-primary:disabled, .btn-primary.disabled{ background-image:none; }
.btn-outline-secondary, .btn-secondary, .btn-default{ --bs-btn-bg:transparent; --bs-btn-border-color:var(--border-strong); --bs-btn-color:var(--text); --bs-btn-hover-bg:transparent; --bs-btn-hover-border-color:var(--sf-gold); --bs-btn-hover-color:var(--sf-gold); --bs-btn-active-bg:transparent; --bs-btn-active-border-color:var(--sf-gold); --bs-btn-active-color:var(--sf-gold); }
.btn-success{ --bs-btn-bg:var(--sf-ok-bg); --bs-btn-border-color:transparent; --bs-btn-color:var(--sf-ok); --bs-btn-hover-bg:var(--sf-ok); --bs-btn-hover-color:#0B0B0D; --bs-btn-hover-border-color:transparent; }
.btn-danger, .btn-outline-danger{ --bs-btn-bg:transparent; --bs-btn-border-color:var(--sf-err); --bs-btn-color:var(--sf-err); --bs-btn-hover-bg:var(--sf-err); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:var(--sf-err); }
.btn-link{ --bs-btn-color:var(--accent); --bs-btn-hover-color:var(--sf-orange); text-decoration:none; font-weight:600; }
.btn-sm{ padding:9px 16px; font-size:13px; } .btn-xs{ padding:6px 12px; font-size:12px; } .btn-lg{ padding:16px 32px; font-size:16px; }
/* ── Nav pills / tabs ─────────────────────────────────── */
.nav-pills, .nav-tabs{ --bs-nav-link-color:var(--muted); --bs-nav-link-hover-color:var(--text); --bs-nav-pills-link-active-bg:transparent; --bs-nav-pills-link-active-color:var(--text); --bs-nav-tabs-link-active-bg:transparent; --bs-nav-tabs-link-active-color:var(--text); --bs-nav-tabs-border-color:var(--border); --bs-nav-tabs-link-active-border-color:transparent transparent var(--sf-gold); gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border); align-items:flex-end; flex-wrap:wrap; }
.nav-pills .nav-link, .nav-tabs .nav-link{ border-radius:0; padding:12px 16px; font-family:var(--font-display); font-weight:500; font-size:14px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active{ border-bottom-color:var(--sf-gold); background:transparent; }
.nav-pills .sf-search{ margin-inline-start:auto; padding-bottom:8px; }
.nav-pills .sf-search .form-control{ min-height:40px; min-width:220px; }
.nav-pills .sf-search .btn{ min-height:40px; padding:9px 14px; }
.nav-pills .dropdown .btn{ margin-bottom:8px; }
/* ── Tables ───────────────────────────────────────────── */
.sf-well--flush{ overflow-x:auto; scroll-snap-type:x proximity; background:
linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat local,
linear-gradient(to left, var(--surface) 30%, transparent) right / 40px 100% no-repeat local,
linear-gradient(to right, rgba(0,0,0,.28), transparent) left / 14px 100% no-repeat scroll,
linear-gradient(to left, rgba(0,0,0,.28), transparent) right / 14px 100% no-repeat scroll, var(--surface); }
[data-bs-theme="light"] .sf-well--flush{ background:
linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat local,
linear-gradient(to left, var(--surface) 30%, transparent) right / 40px 100% no-repeat local,
linear-gradient(to right, rgba(11,11,13,.10), transparent) left / 14px 100% no-repeat scroll,
linear-gradient(to left, rgba(11,11,13,.10), transparent) right / 14px 100% no-repeat scroll, var(--surface); }
.sf-well--flush .table{ background:transparent; } .sf-well--flush .table > thead th{ background:transparent; }
.table{ --bs-table-bg:transparent; --bs-table-color:var(--text-2); --bs-table-border-color:var(--border); --bs-table-hover-bg:var(--accent-bg); --bs-table-hover-color:var(--text-2); margin-bottom:0; font-size:14px; min-width:960px; }
.table > thead th{ border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--faint); padding:14px 12px; white-space:nowrap; background:var(--surface); }
[dir="rtl"] .table > thead th{ letter-spacing:.04em; }
.table > tbody td{ padding:14px 12px; vertical-align:middle; border-top:1px solid var(--border); border-bottom:0; }
.table > tbody td:first-child, .table > thead th:first-child{ padding-inline-start:20px; } .table > tbody td:last-child, .table > thead th:last-child{ padding-inline-end:20px; }
.table td.sf-id{ font-family:var(--font-mono); font-size:12px; color:var(--muted); direction:ltr; }
.table td.sf-num, .table td .sf-num{ font-variant-numeric:tabular-nums; }
.table td[colspan]{ background:var(--bg); font-family:var(--font-display); font-weight:600; color:var(--text); padding:14px 20px; }
.table .service-name, .table .sf-strong{ color:var(--text); white-space:normal; min-width:160px; max-width:650px; overflow-wrap:anywhere; }
.table th{ white-space:nowrap; }
.table td{ overflow-wrap:anywhere; }
.table td.nowrap-date, .table td.nowrap-count{ white-space:nowrap; }
.table td.nowrap-date{ width:1%; white-space:nowrap; } .table td.nowrap-date .sf-date{ display:flex; flex-direction:column; gap:2px; line-height:1.3; font-family:var(--font-mono); font-size:12px; direction:ltr; text-align:start; } .table td.nowrap-date .sf-date small{ color:var(--muted); font-size:11px; }
.table{ --sf-fav-w:44px; }
.table th.sf-fav, .table td.sf-fav{ width:var(--sf-fav-w); min-width:var(--sf-fav-w); max-width:var(--sf-fav-w); padding-inline:12px 0 !important; box-sizing:border-box; }
.table td.sf-fav > *{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; cursor:pointer; }
.table td.sf-id{ width:1%; white-space:nowrap; }
.table td.nowrap{ white-space:nowrap; } .table td.nowrap a{ white-space:normal; }
.table td.nowrap, .table th.nowrap{ white-space:nowrap; }
.favorite-active .fas{ color:var(--sf-gold); }
.table td > a[href][class*="favorite"], .table td > a > .fa-star{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; }
.table td > a:hover > .fa-star{ color:var(--sf-gold); }
.order-actions{ display:flex; gap:6px; flex-wrap:nowrap; }
.sf-status{ display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 8px; background:var(--surface-2); color:var(--muted); white-space:nowrap; }
[dir="rtl"] .sf-status{ letter-spacing:0; font-family:var(--font-body); font-size:11px; }
.sf-status--completed{ background:var(--sf-ok-bg); color:var(--sf-ok); }
.sf-status--inprogress, .sf-status--processing, .sf-status--pending{ background:var(--accent-bg); color:var(--accent); }
.sf-status--active{ background:var(--sf-ok-bg); color:var(--sf-ok); }
.sf-status--paused, .sf-status--expired{ background:var(--surface-2); color:var(--muted); }
.sf-status--rejected, .sf-status--error{ background:var(--sf-err-bg); color:var(--sf-err); }
.sf-status--canceled, .sf-status--partial{ background:var(--sf-err-bg); color:var(--sf-err); }
/* ── Alerts / toasts ──────────────────────────────────── */
.alert{ --bs-alert-bg:var(--surface); --bs-alert-color:var(--text-2); --bs-alert-border-color:var(--border); --bs-alert-padding-x:20px; --bs-alert-padding-y:16px; position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:start; border:1px solid var(--border); border-inline-start:2px solid var(--alert-accent,var(--sf-gold)); border-radius:0; font-size:14px; line-height:1.55; margin-bottom:20px; }
.alert::before{ content:""; width:18px; height:18px; margin-top:1px; background:var(--alert-accent,var(--sf-gold)); -webkit-mask:var(--alert-icon) center/contain no-repeat; mask:var(--alert-icon) center/contain no-repeat; }
.alert > *{ grid-column:2; grid-row:auto; }
.alert > .btn-close{ position:absolute; grid-area:1 / 1; }
.alert::before{ grid-column:1; grid-row:1; }
.alert h4, .alert h5, .alert .alert-heading{ grid-column:2; grid-row:1; }
.alert h4, .alert .alert-heading{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--alert-accent); margin:0 0 6px; letter-spacing:0; }
.alert br{ display:block; content:""; margin-bottom:2px; }
.alert{ grid-auto-flow:row; } .alert > *{ min-width:0; overflow-wrap:anywhere; }
.alert a, .alert .alert-link{ color:var(--alert-accent); font-weight:600; }
.alert-success{ --alert-accent:var(--sf-ok); --alert-icon:url("data:image/svg+xml;utf8,"); }
.alert-danger{ --alert-accent:var(--sf-err); --alert-icon:url("data:image/svg+xml;utf8,"); }
.alert-warning{ --alert-accent:var(--sf-gold); --alert-icon:url("data:image/svg+xml;utf8,"); }
.alert-info, .alert-primary, .alert-secondary{ --alert-accent:var(--sf-gold); --alert-icon:url("data:image/svg+xml;utf8,"); }
.alert-dismissible{ padding-inline-end:52px; }
.alert-dismissible .btn-close{ position:absolute !important; top:12px !important; inset-inline-end:12px !important; inset-inline-start:auto !important; bottom:auto !important; grid-column:auto !important; grid-row:auto !important; margin:0; width:28px; height:28px; padding:0 !important; background:none; opacity:.6; display:grid; place-items:center; border-radius:0; z-index:2; }
[dir="rtl"] .alert-dismissible .btn-close{ right:auto !important; left:12px !important; }
[dir="ltr"] .alert-dismissible .btn-close, html:not([dir="rtl"]) .alert-dismissible .btn-close{ left:auto !important; right:12px !important; }
.alert-dismissible .btn-close::before{ content:""; width:12px; height:12px; background:currentColor; color:var(--text); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.alert-dismissible .btn-close:hover{ opacity:1; background:var(--accent-bg); } .alert-dismissible .btn-close:focus{ box-shadow:none; outline:1px solid var(--sf-gold); }
[dir="rtl"] .alert{ border-inline-start:2px solid var(--alert-accent,var(--sf-gold)); }
/* order-success card (neworder.twig success alert contains key: value lines) */
.alert-success.sf-order-done{ grid-template-columns:auto minmax(0,1fr); }
/* toasts / notify */
#notify-wrapper{ position:fixed; bottom:24px; inset-inline-end:24px; z-index:2000; min-width:300px; max-width:min(420px,calc(100vw - 48px)); box-shadow:var(--shadow); margin:0; animation:sf-toast-in .32s cubic-bezier(.2,0,0,1); }
@keyframes sf-toast-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.toast{ --bs-toast-bg:var(--surface); --bs-toast-color:var(--text-2); --bs-toast-border-color:var(--border-strong); --bs-toast-border-radius:0; --bs-toast-header-bg:var(--surface-2); --bs-toast-header-color:var(--text); --bs-toast-header-border-color:var(--border); box-shadow:var(--shadow); }
.toast-header{ font-family:var(--font-display); font-weight:600; }
/* inline field validation */
.invalid-feedback, .help-block.text-danger{ display:block; color:var(--sf-err); font-size:12px; margin-top:6px; }
.is-invalid, .has-error .form-control{ border-color:var(--sf-err) !important; box-shadow:none !important; }
.valid-feedback{ color:var(--sf-ok); font-size:12px; }
/* ── Modals / offcanvas ───────────────────────────────── */
.modal{ --bs-modal-bg:var(--surface); --bs-modal-border-color:var(--border-strong); --bs-modal-border-radius:0; --bs-modal-header-border-color:var(--border); --bs-modal-footer-border-color:var(--border); --bs-modal-color:var(--text-2); }
.modal-content{ box-shadow:var(--shadow); }
.modal-title{ font-family:var(--font-display); font-weight:700; color:var(--text); font-size:18px; }
.modal-backdrop{ --bs-backdrop-bg:#0B0B0D; --bs-backdrop-opacity:.72; }
.modal .btn-close{ filter:invert(1) grayscale(1) opacity(.6); } [data-bs-theme="light"] .modal .btn-close{ filter:none; }
.offcanvas{ --bs-offcanvas-bg:var(--surface); --bs-offcanvas-border-color:var(--border-strong); --bs-offcanvas-color:var(--text-2); }
/* ── Pagination / badges / progress / tooltip ─────────── */
.pagination{ --bs-pagination-bg:transparent; --bs-pagination-border-color:var(--border); --bs-pagination-color:var(--muted); --bs-pagination-hover-bg:var(--accent-bg); --bs-pagination-hover-color:var(--text); --bs-pagination-hover-border-color:var(--border-strong); --bs-pagination-active-bg:var(--sf-orange); --bs-pagination-active-border-color:transparent; --bs-pagination-active-color:#0B0B0D; --bs-pagination-focus-box-shadow:none; --bs-pagination-focus-bg:var(--accent-bg); gap:4px; margin:24px 0 0; }
.page-link{ font-family:var(--font-mono); font-size:12px; padding:9px 14px; }
.page-item.active .page-link{ background-image:var(--sf-grad); }
.badge{ background:var(--accent-bg); color:var(--accent); font-family:var(--font-mono); font-weight:500; border-radius:0; }
.text-bg-success, .badge.bg-success{ background:var(--sf-ok-bg) !important; color:var(--sf-ok) !important; }
.text-bg-danger, .badge.bg-danger{ background:var(--sf-err-bg) !important; color:var(--sf-err) !important; }
.progress{ --bs-progress-bg:var(--surface-2); --bs-progress-bar-bg:var(--sf-orange); height:6px; }
.progress-bar{ background-image:var(--sf-grad); }
.tooltip{ --bs-tooltip-bg:var(--surface-2); --bs-tooltip-color:var(--text); --bs-tooltip-border-radius:0; --bs-tooltip-opacity:1; font-size:12px; }
.tooltip-inner{ border:1px solid var(--border-strong); }
.text-muted{ color:var(--muted) !important; } .text-success{ color:var(--sf-ok) !important; } .text-danger{ color:var(--sf-err) !important; }
/* ── SF blocks (landing · auth · order · account) ─────── */
.sf-hero{ position:relative; overflow:hidden; padding:96px 0 72px; background:radial-gradient(90% 70% at 85% 0%, rgba(242,107,15,.22) 0%, rgba(242,107,15,0) 60%), var(--bg); border-bottom:1px solid var(--border); }
[dir="rtl"] .sf-hero{ background:radial-gradient(90% 70% at 15% 0%, rgba(242,107,15,.22) 0%, rgba(242,107,15,0) 60%), var(--bg); }
.sf-hero__eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:22px; }
[dir="rtl"] .sf-hero__eyebrow{ font-family:var(--font-body); letter-spacing:0; font-size:13px; }
.sf-hero h1{ font-size:clamp(38px, 4.4vw, 56px); letter-spacing:-.03em; line-height:1.04; margin:0 0 22px; max-width:18ch; text-wrap:balance; }
[dir="rtl"] .sf-hero h1{ letter-spacing:0; line-height:1.3; font-size:clamp(34px, 4vw, 50px); max-width:18ch; }
.sf-hero .lead{ font-size:18px; color:var(--muted); max-width:460px; margin:0 0 30px; font-weight:400; }
.sf-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.sf-stats{ display:flex; gap:44px; flex-wrap:wrap; margin-top:40px; padding-top:28px; border-top:1px solid var(--border); }
.sf-stats div{ display:flex; flex-direction:column; gap:5px; }
.sf-stats strong{ font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--text); letter-spacing:-.02em; direction:ltr; }
.sf-stats span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
[dir="rtl"] .sf-stats span{ font-family:var(--font-body); letter-spacing:0; font-size:12px; }
.sf-hero__panel{ background:var(--surface); border:1px solid var(--border); padding:28px; }
.sf-bolt-bg{ position:absolute; inset-inline-end:-6%; bottom:-20%; width:46%; max-width:560px; aspect-ratio:1; opacity:.9; pointer-events:none; background:var(--sf-grad); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; }
[dir="rtl"] .sf-bolt-bg{ transform:scaleX(-1); }
.sf-section{ padding:88px 0; } .sf-section--alt{ background:var(--surface); border-block:1px solid var(--border); }
.sf-section-head{ display:flex; align-items:center; gap:16px; margin-bottom:40px; }
.sf-section-head .sf-label{ color:var(--accent); } .sf-section-head::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, rgba(242,107,15,.55), rgba(242,107,15,0)); }
[dir="rtl"] .sf-section-head::after{ background:linear-gradient(to left, rgba(242,107,15,.55), rgba(242,107,15,0)); }
.sf-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.sf-card{ background:var(--surface); border:1px solid var(--border); padding:32px; display:flex; flex-direction:column; gap:12px; height:100%; transition:border-color .16s, transform .24s cubic-bezier(.2,0,0,1); }
.sf-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.sf-section--alt .sf-card{ background:var(--bg); }
.sf-card__icon{ width:24px; height:24px; color:var(--accent); }
.sf-card__icon svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:square; }
[dir="rtl"] .sf-card__icon svg{ transform:scaleX(-1); }
.sf-card h3{ font-size:20px; font-weight:600; margin:0; }
.sf-card p{ color:var(--muted); font-size:14px; margin:0; }
.sf-card .sf-price{ margin-top:auto; padding-top:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--accent); direction:ltr; text-align:start; }
[dir="rtl"] .sf-card .sf-price{ font-family:var(--font-body); letter-spacing:0; font-size:13px; direction:rtl; }
.sf-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); }
.sf-steps div{ background:var(--bg); padding:32px 24px; display:flex; flex-direction:column; gap:10px; }
.sf-steps .sf-label{ color:var(--sf-orange); } .sf-steps strong{ font-family:var(--font-display); font-size:19px; color:var(--text); font-weight:600; }
.sf-steps p{ font-size:14px; color:var(--muted); margin:0; }
.sf-cta{ background:var(--sf-grad); padding:72px 0; color:#0B0B0D; }
.sf-cta h2{ color:#0B0B0D; font-size:40px; margin:0 0 12px; letter-spacing:-.03em; } [dir="rtl"] .sf-cta h2{ letter-spacing:0; }
.sf-cta p{ color:rgba(11,11,13,.72); font-size:17px; margin:0 0 28px; }
.sf-cta .btn-primary{ background-image:none; background:#0B0B0D; color:#fff; } .sf-cta .btn-primary:hover{ background:#16171A; filter:none; }
.sf-footer{ border-top:1px solid var(--border); padding:32px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.sf-footer .sf-brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; color:var(--text); letter-spacing:-.02em; }
.sf-footer .sf-brand::before{ content:""; width:26px; height:26px; background:var(--sf-grad); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; }
.sf-footer nav{ display:flex; gap:24px; flex-wrap:wrap; font-size:14px; } .sf-footer nav a{ color:var(--muted); } .sf-footer nav a:hover{ color:var(--text); }
.sf-hero--landing{ padding:72px 0 80px; min-height:calc(100vh - 68px); display:flex; align-items:center; }
.sf-login{ padding:32px; box-shadow:var(--shadow); position:relative; }
.sf-login__head{ margin-bottom:22px; } .sf-login__head h2{ font-size:26px; margin:0 0 4px; } .sf-login .sf-sub{ color:var(--muted); font-size:14px; margin:0; }
.sf-login__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.sf-login__forgot{ font-size:12px; color:var(--muted); } .sf-login__forgot:hover{ color:var(--accent); }
.sf-login .btn-primary{ margin-top:4px; }
.sf-login__or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--faint); font-size:12px; }
.sf-login__or::before, .sf-login__or::after{ content:""; flex:1; height:1px; background:var(--border); }
.sf-login .alert{ margin-bottom:18px; }
/* landing sections */
.sf-h2{ font-size:36px; margin:0 0 16px; } .sf-lead{ color:var(--muted); font-size:17px; margin:0 0 28px; max-width:46ch; }
.sf-counters{ border-bottom:1px solid var(--border); background:var(--surface); }
.sf-counters__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.sf-counters__grid > div{ padding:28px 24px; display:flex; flex-direction:column; gap:8px; border-inline-end:1px solid var(--border); }
.sf-counters__grid > div:last-child{ border-inline-end:0; }
.sf-counters strong{ font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:-.02em; color:var(--text); line-height:1; }
.sf-counters strong small{ font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-inline-start:4px; letter-spacing:.08em; }
[dir="rtl"] .sf-counters strong{ direction:ltr; display:inline-flex; align-items:baseline; gap:4px; }
.sf-steps-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.sf-steps-list li{ background:var(--bg); padding:24px; display:flex; gap:16px; align-items:flex-start; }
.sf-steps-list .sf-num{ color:var(--sf-orange); font-size:12px; letter-spacing:.1em; padding-top:4px; width:24px; flex:none; }
.sf-steps-list strong{ display:block; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--text); margin-bottom:4px; }
.sf-steps-list p{ margin:0; font-size:14px; color:var(--muted); }
.sf-platforms{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.sf-platform{ background:var(--bg); padding:26px 24px; display:flex; flex-direction:column; gap:8px; color:var(--text-2); transition:background .16s; }
.sf-platform:hover{ background:var(--accent-bg); color:var(--text); }
.sf-platform i{ font-size:22px; color:var(--accent); margin-bottom:6px; }
.sf-platform strong{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--text); }
.sf-platform span{ font-size:13px; color:var(--muted); }
.sf-platform--more i{ color:var(--faint); }
.sf-quote{ margin:0; background:var(--bg); border:1px solid var(--border); padding:28px; height:100%; display:flex; flex-direction:column; gap:20px; }
.sf-quote blockquote{ margin:0; border:0; padding:0; font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.5; color:var(--text); letter-spacing:-.01em; }
[dir="rtl"] .sf-quote blockquote{ letter-spacing:0; line-height:1.8; }
.sf-quote blockquote::before{ content:"“"; }
[dir="rtl"] .sf-quote blockquote::before{ content:"”"; }
.sf-quote blockquote::before{ display:block; color:var(--sf-orange); font-size:40px; line-height:.6; margin-bottom:12px; font-family:Georgia,serif; }
.sf-quote figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.sf-quote figcaption strong{ font-size:14px; color:var(--text); font-weight:600; } .sf-quote figcaption span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
[dir="rtl"] .sf-quote figcaption span{ font-family:var(--font-body); letter-spacing:0; }
.sf-walk{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.sf-walk__row{ display:grid; grid-template-columns:1fr 1fr; background:var(--bg); }
.sf-walk__row--rev .sf-walk__text{ order:2; } .sf-walk__row--rev .sf-walk__frame{ order:1; }
.sf-walk__text{ padding:48px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.sf-walk__text .sf-num{ color:var(--sf-orange); font-size:12px; letter-spacing:.1em; }
.sf-walk__text h3{ font-size:26px; margin:0; } .sf-walk__text p{ color:var(--muted); margin:0 0 8px; max-width:40ch; }
.sf-walk__frame{ padding:40px; background:var(--surface); background-image:repeating-linear-gradient(135deg, rgba(255,182,39,.07) 0 1px, transparent 1px 18px); display:flex; align-items:center; justify-content:center; border-inline-start:1px solid var(--border); }
.sf-walk__row--rev .sf-walk__frame{ border-inline-start:0; border-inline-end:1px solid var(--border); }
.sf-frame{ width:100%; max-width:420px; border:1px solid var(--border-strong); background:var(--bg); }
.sf-frame__bar{ display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--border); } .sf-frame__bar span{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.sf-frame__body{ padding:20px; display:flex; flex-direction:column; gap:12px; }
.sf-frame__title{ font-size:18px; margin:2px 0 6px; }
.sf-mini-field{ display:flex; flex-direction:column; gap:5px; }
.sf-mini-field label{ margin:0; font-size:9px; letter-spacing:.14em; }
.sf-mini-field > div{ height:36px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--border-strong); background:var(--input-bg); color:var(--text); font-size:13px; font-family:var(--font-body); direction:ltr; text-align:start; }
[dir="rtl"] .sf-mini-field > div{ direction:rtl; }
.sf-mini-select{ justify-content:space-between !important; } .sf-mini-select::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg) translateY(-2px); flex:none; margin-inline-start:8px; }
.sf-mini-charge{ font-family:var(--font-display) !important; font-weight:700; color:var(--accent) !important; }
.sf-mini-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sf-mini-btn{ height:38px; display:flex; align-items:center; justify-content:center; background:var(--sf-grad); color:#0B0B0D; font-family:var(--font-display); font-weight:600; font-size:13px; margin-top:4px; }
.sf-mini-chips{ display:flex; gap:6px; } .sf-mini-chips span{ flex:1; text-align:center; padding:7px 0; border:1px solid var(--border-strong); font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.sf-mini-chips span.on{ border-color:var(--sf-gold); color:var(--sf-gold); }
.sf-mini-tabs{ display:flex; gap:6px; margin-bottom:4px; } .sf-mini-tabs span{ width:36px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); color:var(--faint); font-size:14px; }
.sf-mini-tabs span.on{ border-color:var(--sf-gold); color:var(--sf-gold); background:var(--accent-bg); }
.sf-balance--mini{ padding:16px; margin-bottom:0; } .sf-balance--mini strong{ font-size:24px; margin-top:4px; }
.sf-frame__body .sf-label{ font-size:9px; }
.sf-payments{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:32px 0; background:var(--surface); }
.sf-payments .container{ display:flex; align-items:center; gap:20px 32px; flex-wrap:wrap; }
.sf-payments .sf-label{ flex:none; }
.sf-payments__row{ display:flex; flex-wrap:wrap; gap:8px; }
.sf-payments__row span{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--muted); border:1px solid var(--border-strong); padding:8px 14px; }
.sf-auth{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:stretch; max-width:1100px; margin:48px auto; border:1px solid var(--border); }
.sf-auth__art{ position:relative; overflow:hidden; background:var(--surface); border-inline-end:1px solid var(--border); padding:44px 40px; display:flex; flex-direction:column; justify-content:flex-end; gap:16px; }
.sf-auth__art .sf-bolt-bg{ inset-inline-end:-18%; top:-14%; bottom:auto; width:78%; opacity:.55; }
.sf-auth__art h2{ font-size:28px; letter-spacing:-.02em; max-width:16ch; position:relative; margin:0; line-height:1.15; } [dir="rtl"] .sf-auth__art h2{ letter-spacing:0; line-height:1.4; }
.sf-auth__art p{ color:var(--muted); position:relative; max-width:36ch; margin:0; font-size:15px; }
.sf-auth__form{ display:flex; align-items:center; justify-content:center; padding:40px 32px; background:var(--bg); }
.sf-auth__form .sf-well{ width:100%; max-width:440px; padding:40px; }
.sf-auth__form h1{ font-size:30px; margin-bottom:6px; } .sf-auth__form .sf-sub{ color:var(--muted); font-size:14px; margin-bottom:28px; }
.sf-auth__form .btn-primary{ width:100%; }
.sf-auth__meta{ margin-top:22px; font-size:14px; color:var(--muted); text-align:center; }
.sf-auth__points{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; position:relative; }
.sf-auth__points li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--text-2); }
.sf-auth__points li::before{ content:""; width:14px; height:14px; flex:none; margin-top:4px; background:var(--sf-grad); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; }
.sf-auth--signup .sf-auth__art{ justify-content:center; }
.sf-auth__points{ margin-top:20px; } .sf-auth__points li{ font-size:14px; }
.sf-auth__form .sf-well{ box-shadow:none; border:0; background:transparent; padding:0; max-width:420px; }
.sf-auth__form .sf-well .btn-primary{ margin-top:4px; }
/* services page */
.sf-services-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; }
.sf-services-bar .dropdown .btn{ min-height:44px; }
.sf-services-bar .sf-search{ margin-inline-start:auto; min-width:280px; }
@media (max-width:767.98px){ .sf-services-bar .sf-search{ width:100%; min-width:0; margin-inline-start:0; } }
.sf-services-bar .sf-search .form-control, .sf-services-bar .sf-search .btn{ min-height:44px; }
.table .sf-rate{ font-family:var(--font-mono); color:var(--text); white-space:nowrap; }
.table .sf-desc-btn{ color:var(--faint); } .table .sf-desc-btn:hover{ color:var(--accent); }
.table .btn-xs{ white-space:nowrap; }
.sf-order{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); gap:20px; align-items:start; }
.sf-details .sf-well{ padding:28px; }
.sf-details__name{ font-size:18px; line-height:1.3; margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.sf-details__list{ margin:0; display:flex; flex-direction:column; }
.sf-details__list > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.sf-details__list dt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:500; }
[dir="rtl"] .sf-details__list dt{ font-family:var(--font-body); letter-spacing:0; font-size:12px; text-transform:none; }
.sf-details__list dd{ margin:0; font-size:14px; color:var(--text); font-weight:500; text-align:end; }
.sf-details__desc{ margin-top:16px; font-size:13px; color:var(--muted); line-height:1.6; }
.sf-details__desc:empty{ display:none; }
/* hide the inline description block — it now lives in the details panel */
#service_description{ display:none !important; }
.sf-charge-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-top:22px; margin-top:6px; border-top:1px solid var(--border); flex-wrap:wrap; }
.sf-charge{ display:flex; flex-direction:column; gap:6px; }
.sf-charge #charge{ border:0; background:transparent; min-height:auto; padding:0; font-family:var(--font-display); font-weight:700; font-size:28px; letter-spacing:-.02em; color:var(--text); width:auto; max-width:200px; direction:ltr; text-align:start; }
#order-form #charge, .sf-order #charge{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text); direction:ltr; text-align:start; }
.sf-order .form-check{ margin-bottom:22px; }
.sf-summary{ position:sticky; top:92px; }
.sf-summary__row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px; color:var(--muted); }
.sf-summary__row strong{ color:var(--text); font-family:var(--font-mono); font-weight:500; direction:ltr; }
.sf-summary__total{ display:flex; justify-content:space-between; align-items:center; padding:18px 0 22px; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text); }
.sf-summary #charge{ border:0; background:transparent; min-height:auto; padding:0; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text); text-align:end; width:auto; max-width:160px; direction:ltr; }
.sf-summary .btn-primary{ width:100%; }
.sf-balance{ background:var(--sf-grad); padding:22px; color:#0B0B0D; margin-bottom:20px; }
.sf-balance .sf-label{ color:rgba(11,11,13,.62); } .sf-balance strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-.02em; line-height:1; margin-top:8px; direction:ltr; text-align:start; }
.sf-account{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; align-items:start; }
.sf-side{ position:sticky; top:92px; display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.sf-side a{ background:var(--surface); padding:14px 18px; color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:14px; border-inline-start:2px solid transparent; }
.sf-side a:hover{ color:var(--text); } .sf-side a.active{ color:var(--text); border-inline-start-color:var(--sf-gold); }
.sf-account .sf-well h4{ margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
@media (max-width: 1100px){ .sf-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 991.98px){
.sf-sidebar{ width:280px; height:100%; position:fixed; --bs-offcanvas-bg:var(--surface); --bs-offcanvas-width:280px; border:0; }
.sf-topbar{ padding:0 16px; gap:6px; } .sf-balance-pill .sf-label{ display:none; }
.sf-auth{ grid-template-columns:1fr; margin:16px; border:0; } .sf-auth__art{ display:none; }
.sf-order, .sf-account{ grid-template-columns:1fr; } .sf-summary, .sf-side{ position:static; }
.sf-hero{ padding:64px 0 48px; } .sf-bolt-bg{ display:none; }
.sf-hero--landing{ min-height:0; display:block; } .sf-login{ margin-top:40px; }
.sf-counters__grid{ grid-template-columns:1fr 1fr; } .sf-counters__grid > div:nth-child(2){ border-inline-end:0; } .sf-counters__grid > div:nth-child(-n+2){ border-bottom:1px solid var(--border); }
.sf-platforms{ grid-template-columns:1fr 1fr; } .sf-platform--more{ grid-column:1 / -1; } .sf-steps-list{ grid-template-columns:1fr; }
.sf-walk__row{ grid-template-columns:1fr; } .sf-walk__row--rev .sf-walk__text{ order:1; } .sf-walk__row--rev .sf-walk__frame{ order:2; border:0; border-top:1px solid var(--border); } .sf-walk__frame{ border:0; border-top:1px solid var(--border); padding:28px; } .sf-walk__text{ padding:32px 24px; }
.sf-h2{ font-size:28px; }
.container-fluid{ padding-inline:16px; } .sf-well{ padding:22px; }
.sf-nav .nav-link{ padding:12px 16px; border-bottom:0; border-inline-start:2px solid transparent; }
.sf-nav .nav-link.active{ border-inline-start-color:var(--sf-gold); }
.sf-nav .navbar-collapse{ padding-bottom:12px; }
.sf-theme-toggle{ margin:10px 16px; }
.nav-pills .sf-search{ width:100%; margin-inline-start:0; } .nav-pills .sf-search .form-control{ min-width:0; }
}
@media (max-width: 560px){ .sf-steps{ grid-template-columns:1fr; } .sf-platforms{ grid-template-columns:1fr; } .sf-counters__grid{ grid-template-columns:1fr; } .sf-counters__grid > div{ border-inline-end:0; border-bottom:1px solid var(--border); } }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
/* ── Finishing: states ────────────────────────────────── */
.sf-empty{ padding:64px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--muted); }
.sf-empty::before{ content:""; width:40px; height:40px; background:var(--faint); -webkit-mask:var(--sf-bolt) center/contain no-repeat; mask:var(--sf-bolt) center/contain no-repeat; margin-bottom:6px; }
.sf-empty strong{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text); }
.sf-empty p{ margin:0; font-size:14px; max-width:36ch; }
.btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2px solid rgba(11,11,13,.25); border-top-color:#0B0B0D; border-radius:50%; animation:sf-spin .7s linear infinite; }
.btn-outline-secondary.is-loading::after{ border-color:var(--border-strong); border-top-color:var(--sf-gold); }
@keyframes sf-spin{ to{ transform:rotate(360deg); } }
.sf-skeleton{ background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:sf-shimmer 1.4s ease infinite; min-height:14px; }
@keyframes sf-shimmer{ to{ background-position:-200% 0; } }
.sf-kbd{ font-family:var(--font-mono); font-size:11px; padding:2px 6px; border:1px solid var(--border-strong); color:var(--muted); }
/* dropdown-toggle caret colour */
.dropdown-toggle::after{ border-top-color:var(--faint); }
/* scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background:var(--border-strong); } ::-webkit-scrollbar-track{ background:transparent; }
/* focus visible everywhere */
a:focus-visible, button:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{ outline:2px solid var(--sf-gold); outline-offset:2px; }
.offcanvas:focus, .offcanvas:focus-visible, .modal:focus, .modal:focus-visible, .sf-sidebar:focus{ outline:none; }
.form-control:focus-visible, .form-select:focus-visible{ outline:none; }
/* print: invoices / order confirmations */
@media print{
:root{ --bg:#fff; --surface:#fff; --text:#000; --text-2:#111; --muted:#444; --faint:#666; --border:#ccc; }
.sf-sidebar, .sf-topbar, .sf-nav, .sf-footer, .sf-theme-toggle, .btn, .nav-pills, .pagination{ display:none !important; }
.sf-shell__body, .sf-main{ display:block; } .sf-well{ border:1px solid #ccc; break-inside:avoid; }
.table{ min-width:0; } .sf-status{ border:1px solid #999; }
}
/* ═══ Brand layer — motion, pattern, geometry ═══════════ */
/* skip link */
/* 135° trace lines behind hero (brand motif) */
.sf-hero--landing::before{ content:""; position:absolute; inset:-10% -5%; pointer-events:none; background:
linear-gradient(135deg, transparent 38%, rgba(242,107,15,.16) 38.5%, rgba(255,182,39,.16) 47%, transparent 47.5%),
linear-gradient(135deg, transparent 56%, rgba(255,182,39,.07) 56.3%, rgba(255,182,39,.07) 58%, transparent 58.3%);
-webkit-mask:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); mask:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); }
[dir="rtl"] .sf-hero--landing::before{ transform:scaleX(-1); }
.sf-hero--landing .container{ position:relative; }
/* bolt field pattern */
.sf-bolt-field{ position:relative; isolation:isolate; }
.sf-bolt-field::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.55; pointer-events:none;
background-color:transparent; background-image:var(--sf-bolt); background-size:28px 28px; background-position:0 0; background-repeat:repeat;
-webkit-mask:linear-gradient(90deg, #000 0%, transparent 70%); mask:linear-gradient(90deg, #000 0%, transparent 70%); }
.sf-bolt-field::before{ background-image:url("data:image/svg+xml;utf8,"); }
[data-bs-theme="light"] .sf-bolt-field::before{ background-image:url("data:image/svg+xml;utf8,"); }
.sf-cta.sf-bolt-field::before{ background-image:url("data:image/svg+xml;utf8,"); background-size:40px 40px; -webkit-mask:linear-gradient(90deg, transparent 40%, #000 100%); mask:linear-gradient(90deg, transparent 40%, #000 100%); }
/* corner cut — the 135° shear on cards */
.sf-card, .sf-platform, .sf-quote{ clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
[dir="rtl"] .sf-card, [dir="rtl"] .sf-platform, [dir="rtl"] .sf-quote{ clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
/* shadowed panels keep their shadow: corner cut drawn as a gradient triangle */
.sf-login, .sf-auth__form .sf-well{ position:relative; }
.sf-login::before, .sf-auth__form .sf-well::before{ content:""; position:absolute; top:-1px; inset-inline-end:-1px; width:15px; height:15px; background:linear-gradient(225deg, var(--bg) 50%, transparent 50%); pointer-events:none; z-index:1; }
[dir="rtl"] .sf-login::before, [dir="rtl"] .sf-auth__form .sf-well::before{ background:linear-gradient(135deg, var(--bg) 50%, transparent 50%); }
/* primary button — light sweep on hover */
.btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn-primary::before{ content:""; position:absolute; top:-20%; bottom:-20%; width:40%; inset-inline-start:-60%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-25deg); transition:inset-inline-start .55s cubic-bezier(.2,0,0,1); pointer-events:none; z-index:-1; }
.btn-primary:hover::before{ inset-inline-start:120%; }
.btn-primary > *{ position:relative; }
/* live orders ticker */
.sf-ticker{ border-bottom:1px solid var(--border); background:var(--bg); overflow:hidden; position:relative; height:44px; display:flex; align-items:center; }
.sf-ticker::before, .sf-ticker::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.sf-ticker::before{ inset-inline-start:0; background:linear-gradient(to right, var(--bg), transparent); } .sf-ticker::after{ inset-inline-end:0; background:linear-gradient(to left, var(--bg), transparent); }
[dir="rtl"] .sf-ticker::before{ background:linear-gradient(to left, var(--bg), transparent); } [dir="rtl"] .sf-ticker::after{ background:linear-gradient(to right, var(--bg), transparent); }
.sf-ticker__live{ position:absolute; inset-inline-start:0; top:0; bottom:0; z-index:3; display:flex; align-items:center; gap:8px; padding:0 20px; background:var(--bg); font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--accent); border-inline-end:1px solid var(--border); }
[dir="rtl"] .sf-ticker__live{ font-family:var(--font-body); letter-spacing:0; font-size:12px; }
.sf-ticker__live i{ width:6px; height:6px; border-radius:50%; background:var(--sf-orange); box-shadow:0 0 0 0 rgba(242,107,15,.6); animation:sf-pulse 1.6s ease-out infinite; }
@keyframes sf-pulse{ to{ box-shadow:0 0 0 8px rgba(242,107,15,0); } }
.sf-ticker__track{ display:flex; gap:0; white-space:nowrap; animation:sf-marquee 48s linear infinite; padding-inline-start:120px; }
[dir="rtl"] .sf-ticker__track{ animation-name:sf-marquee-rtl; }
.sf-ticker:hover .sf-ticker__track{ animation-play-state:paused; }
@keyframes sf-marquee{ to{ transform:translateX(-50%); } } @keyframes sf-marquee-rtl{ to{ transform:translateX(50%); } }
.sf-ticker__item{ display:inline-flex; align-items:center; gap:10px; padding:0 22px; font-size:13px; color:var(--muted); border-inline-end:1px solid var(--border); }
.sf-ticker__item i{ color:var(--faint); font-size:13px; } .sf-ticker__item strong{ color:var(--text); font-weight:600; font-family:var(--font-display); }
.sf-ticker__item .sf-num{ color:var(--accent); font-size:12px; }
/* scroll reveal */
.sf-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,0,0,1), transform .6s cubic-bezier(.2,0,0,1); }
.sf-reveal.is-in{ opacity:1; transform:none; }
.sf-reveal[data-delay="1"]{ transition-delay:.08s } .sf-reveal[data-delay="2"]{ transition-delay:.16s } .sf-reveal[data-delay="3"]{ transition-delay:.24s }
/* guest footer */
.sf-footer{ display:block; padding:56px 0 28px; }
.sf-footer__grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; padding-bottom:32px; border-bottom:1px solid var(--border); }
.sf-footer__links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 28px; }
.sf-footer__links a{ color:var(--muted); font-size:14px; font-family:var(--font-display); font-weight:500; } .sf-footer__links a:hover{ color:var(--text); }
.sf-footer__brand{ display:flex; flex-direction:column; gap:14px; }
.sf-footer__brand p{ margin:0; font-size:14px; color:var(--muted); max-width:34ch; }
.sf-footer__col{ display:flex; flex-direction:column; gap:10px; }
.sf-footer__col .sf-label{ margin-bottom:6px; } .sf-footer__col a{ color:var(--muted); font-size:14px; } .sf-footer__col a:hover{ color:var(--text); }
.sf-footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:22px; }
.sf-footer__bottom nav{ display:flex; gap:20px; }
/* mobile sticky CTA (guest landing) */
.sf-sticky-cta{ display:none; }
@media (max-width:767.98px){
.sf-sticky-cta{ position:fixed; bottom:0; inset-inline:0; z-index:1030; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--border); transform:translateY(100%); transition:transform .3s cubic-bezier(.2,0,0,1); }
.sf-sticky-cta.is-on{ transform:none; } .sf-sticky-cta .btn{ flex:1; }
.sf-footer__grid{ grid-template-columns:1fr; } .sf-footer__links{ justify-content:flex-start; } body:has(.sf-sticky-cta.is-on) .sf-footer{ padding-bottom:96px; }
}
@media (prefers-reduced-motion: reduce){ .sf-reveal{ opacity:1; transform:none; } .sf-ticker__track{ animation:none; } .btn-primary::before{ display:none; } }
.sf-side--inline{ position:static; flex-direction:row; margin-bottom:20px; }
.sf-side--inline a{ border-inline-start:0; border-bottom:2px solid transparent; }
.sf-side--inline a.active{ border-bottom-color:var(--sf-gold); }
/* ── Table multi-select ─────────────────────────────────── */
.table th.sf-check, .table td.sf-check{ width:44px; padding-inline-end:0; }
.table .sf-check .form-check-input{ margin:0; width:16px; height:16px; cursor:pointer; background-color:var(--input-bg); border-color:var(--border-strong); border-radius:0; }
.table .sf-check .form-check-input:checked{ background-color:var(--sf-orange); border-color:var(--sf-orange); }
.table .sf-check .form-check-input:indeterminate{ background-color:var(--sf-gold); border-color:var(--sf-gold); }
.table .sf-check .form-check-input:focus{ box-shadow:0 0 0 2px var(--accent-bg); }
.table tr.is-selected > td{ background:var(--accent-bg); }
.sf-selectbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; margin-bottom:12px; background:var(--surface); border:1px solid var(--sf-gold); font-size:14px; color:var(--text-2); }
.sf-selectbar strong{ color:var(--accent); font-variant-numeric:tabular-nums; }
.sf-selectbar__actions{ display:flex; gap:8px; }
/* ── Copy-ID cell ────────────────────────────────────────── */
.sf-copy{ display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; padding:0; font:inherit; color:inherit; cursor:pointer; direction:ltr; }
.sf-copy i{ font-size:13px; color:var(--faint); transition:color .16s; }
.sf-copy:hover i, .sf-copy:focus-visible i{ color:var(--accent); }
.sf-copy.is-copied i{ color:var(--sf-ok); }
/* ── Table text columns: link never wraps, service wraps ≤2 lines ── */
.table td.link, .table td.sf-link{ min-width:120px; max-width:650px; white-space:normal; }
.sf-link__url{ display:inline; overflow-wrap:anywhere; word-break:break-all; direction:ltr; unicode-bidi:isolate; font-family:var(--font-mono); font-size:12px; line-height:1.5; color:var(--text-2); text-decoration:none; }
.sf-link__open{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-inline-start:6px; vertical-align:middle; color:var(--faint); font-size:12px; }
.sf-link__open:hover{ color:var(--accent); }
.table td.sf-service{ min-width:120px; max-width:650px; color:var(--text); white-space:normal; line-height:1.45; }
@media (max-width:991.98px){ .table > thead th{ white-space:nowrap; } .table td.sf-service{ min-width:310px; } .table td.link, .table td.sf-link{ min-width:200px; } }
.sf-table--doc{ min-width:0 !important; font-size:14px; } .sf-table--doc td:first-child{ font-family:var(--font-mono); font-size:12px; color:var(--accent); white-space:nowrap; }
@media (max-width:767.98px){ .sf-table--doc{ display:block; overflow-x:auto; } }
/* Reference behaviour: table fills the card; overflow scrolls horizontally, never collapses */
.sf-well--flush{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sf-well--flush > .table{ width:100%; }
/* ── In-progress pill doubles as the progress bar: same pill size, gradient fills to the delivered % ── */
.sf-status--inprogress.sf-status--progress{ position:relative; color:#0B0B0D;
background:linear-gradient(90deg, #F26B0F 0, #FFB627 var(--sf-pct,0%), var(--surface-2) var(--sf-pct,0%)); transition:background .7s cubic-bezier(.2,0,0,1); }
[dir="rtl"] .sf-status--inprogress.sf-status--progress{ background:linear-gradient(270deg, #F26B0F 0, #FFB627 var(--sf-pct,0%), var(--surface-2) var(--sf-pct,0%)); }
.sf-status--progress.is-low{ color:var(--text); }
.sf-status--progress[title]{ cursor:help; }
@media (prefers-reduced-motion: reduce){ .sf-status--inprogress .sf-dot{ animation:none; } }
/* ── Tempus Dominus (date/time picker) on brand tokens ── */
:root{ --td-widget-z-index:1060; --td-border-radius:0; }
body .tempus-dominus-widget, body .tempus-dominus-widget.light, body .tempus-dominus-widget.dark{ background:var(--surface); color:var(--text-2); border:1px solid var(--border-strong); border-radius:0; box-shadow:var(--shadow); padding:8px; font-family:var(--font-body); }
body .tempus-dominus-widget .calendar-header{ color:var(--text); font-family:var(--font-display); }
body .tempus-dominus-widget .date-container-days .dow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
body .tempus-dominus-widget .date-container-days div:not(.no-highlight):hover, body .tempus-dominus-widget .toolbar div:hover, body .tempus-dominus-widget .time-container-clock div:not(.no-highlight):hover{ background:var(--accent-bg); color:var(--text); }
body .tempus-dominus-widget .date-container-days div:not(.no-highlight).active, body .tempus-dominus-widget .date-container-months div:not(.no-highlight).active, body .tempus-dominus-widget .date-container-years div:not(.no-highlight).active, body .tempus-dominus-widget .time-container-hour div:not(.no-highlight).active, body .tempus-dominus-widget .time-container-minute div:not(.no-highlight).active{ background:var(--sf-grad) !important; color:#0B0B0D !important; text-shadow:none; }
body .tempus-dominus-widget .date-container-days .range-in{ background:var(--accent-bg) !important; box-shadow:none; }
body .tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before{ border-bottom-color:var(--sf-orange); }
body .tempus-dominus-widget .date-container-days div:not(.no-highlight).new, body .tempus-dominus-widget .date-container-days div:not(.no-highlight).old, body .tempus-dominus-widget [data-action].disabled{ color:var(--faint); }
body .tempus-dominus-widget button{ background:var(--sf-grad); border:0; color:#0B0B0D; border-radius:0; font-family:var(--font-display); font-weight:600; }
body .tempus-dominus-widget .timepicker-hour, body .tempus-dominus-widget .timepicker-minute, body .tempus-dominus-widget .timepicker-second{ font-family:var(--font-mono); color:var(--text); }
/* ══ Select2 — single source of truth (panel's own select2 CSS is skipped in layout.twig) ══ */
.select2-container{ box-sizing:border-box; display:inline-block; margin:0; position:relative; vertical-align:middle; font-family:var(--font-body); }
.mb-3 > .select2-container, .form-group > .select2-container, .neworder-services > .select2-container{ width:100% !important; }
.select2-hidden-accessible{ border:0 !important; clip:rect(0 0 0 0) !important; height:1px !important; margin:-1px !important; overflow:hidden !important; padding:0 !important; position:absolute !important; width:1px !important; }
.select2-close-mask{ border:0; margin:0; padding:0; display:block; position:fixed; left:0; top:0; min-height:100%; min-width:100%; height:auto; width:auto; opacity:0; z-index:99; background:#fff; }
/* closed control */
.select2-container .select2-selection--single{ box-sizing:border-box; cursor:pointer; user-select:none; height:48px; display:flex; align-items:center; background:var(--input-bg); border:1px solid var(--border-strong); border-radius:0; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); line-height:1.4; padding-inline-start:14px; padding-inline-end:40px; }
.select2-container--default .select2-selection--single .select2-selection__rendered a, .select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; text-decoration:none; }
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--faint); }
.select2-container--default .select2-selection--single .select2-selection__clear{ cursor:pointer; float:right; font-weight:700; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; position:absolute; top:0; right:12px; width:20px; }
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow{ right:auto; left:12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b{ border-style:solid; border-width:5px 4px 0 4px; border-color:var(--accent) transparent transparent; height:0; left:50%; margin-left:-4px; margin-top:-2px; position:absolute; top:50%; width:0; }
.select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--sf-gold); box-shadow:0 0 0 1px var(--sf-gold); }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-width:0 4px 5px 4px; border-color:transparent transparent var(--accent); }
.select2-container--default.select2-container--disabled .select2-selection--single{ background:var(--surface-2); opacity:.7; cursor:default; }
/* option parts (also used inside the closed control) */
.select2-selection__icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none; color:var(--accent); margin-inline-end:6px; }
.select2-selection__icon img, .select2-selection__icon svg{ max-width:20px; max-height:20px; }
.select2-selection__text{ display:inline; vertical-align:middle; }
.select2-selection__id, [class*="select2-selection__id-"]{ flex:none; display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--accent); background:var(--accent-bg); padding:2px 6px; direction:ltr; vertical-align:middle; text-align:center; }
.select2-selection__id-1{ min-width:22px; } .select2-selection__id-2{ min-width:30px; } .select2-selection__id-3{ min-width:38px; } .select2-selection__id-4{ min-width:45px; } .select2-selection__id-5{ min-width:52px; } .select2-selection__id-6{ min-width:60px; }
/* dropdown geometry — the container is appended to #select-*-container (data-select-container) */
.select2-dropdown{ display:block; position:absolute; left:-100000px; width:100%; z-index:1060; margin-top:0; box-sizing:border-box; background:var(--surface); color:var(--text-2); border:1px solid var(--border-strong); border-radius:0; box-shadow:var(--shadow); overflow:hidden; }
.select2-container--open .select2-dropdown{ left:0; }
.select2-dropdown[dir="rtl"], [dir="rtl"] .select2-dropdown{ direction:rtl; }
.select2-container--open .select2-dropdown--below{ margin-top:4px; } .select2-container--open .select2-dropdown--above{ margin-bottom:4px; }
/* results list (panel wraps it in Bootstrap .dropdown-menu) */
.select2-results{ display:block; background:var(--surface); }
.select2-results__options, .select2-results__options.dropdown-menu, .select2-dropdown .dropdown-menu{ list-style:none; margin:0 !important; padding:0 !important; display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; position:static !important; inset:auto !important; transform:none !important; float:none; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:var(--surface) !important; }
.select2-container--default .select2-results > .select2-results__options{ max-height:min(412px, 55vh); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.select2-results__option{ display:block; clear:both; user-select:none; padding:0; margin:0; font-size:14px; color:var(--text-2); background:var(--surface); }
.select2-results__option + .select2-results__option{ border-top:1px solid var(--border); }
.select2-results__option[aria-selected]{ cursor:pointer; }
.select2-results__option a{ display:flex; align-items:flex-start; gap:10px; padding:11px 14px; color:var(--text-2); background:var(--surface); text-decoration:none; white-space:normal; line-height:1.5; overflow-wrap:anywhere; word-break:break-word; }
.select2-results__option a > .select2-selection__id, .select2-results__option a > [class*="select2-selection__id-"]{ margin-top:2px; }
.select2-results__option a > .select2-selection__text, .select2-results__option a > span:not([class]){ flex:1; min-width:0; white-space:normal; }
.select2-results__option a:hover, .select2-results__option--highlighted a{ background:var(--accent-bg); color:var(--text); }
.select2-results__option.active a, .select2-results__option[aria-selected="true"] a{ background:var(--sf-grad); color:#0B0B0D; }
.select2-results__option.active a .select2-selection__id, .select2-results__option[aria-selected="true"] a .select2-selection__id, .select2-results__option.active a [class*="select2-selection__id-"], .select2-results__option.active a .select2-selection__icon{ color:#0B0B0D; background:rgba(11,11,13,.14); }
.select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:transparent; color:inherit; }
.select2-container--default .select2-results__option[role="group"]{ padding:0; }
.select2-container--default .select2-results__option[aria-disabled="true"]{ color:var(--faint); }
.select2-results__group{ display:block; padding:10px 14px 6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); background:var(--bg); }
[dir="rtl"] .select2-results__group{ font-family:var(--font-body); letter-spacing:0; font-size:12px; }
.select2-results__message{ padding:14px; color:var(--muted); font-size:14px; }
/* search box: .select2-search__field-wrapper > [icon:search] + input + [icon:clear] */
.select2-search--dropdown{ display:block; position:relative; padding:8px; background:var(--surface); border-bottom:1px solid var(--border); }
.select2-search--dropdown.select2-search--hide{ display:none; }
.select2-search__field-wrapper{ position:relative; display:block; height:40px; }
.select2-search--dropdown .select2-search__field{ display:block; width:100%; height:40px; box-sizing:border-box; background:var(--bg); border:1px solid var(--border-strong); color:var(--text); padding:0 40px; font-family:inherit; font-size:14px; outline:none; border-radius:0; }
.select2-search--dropdown .select2-search__field:focus{ border-color:var(--sf-gold); }
.select2-search--dropdown .select2-search__field::placeholder{ color:var(--faint); }
.select2-search__field-icon{ position:absolute; top:0; bottom:0; height:100%; min-height:0; width:40px; padding:0; margin:0; display:flex; align-items:center; justify-content:center; color:var(--faint); z-index:2; }
.select2-search__field-icon span{ display:inline-flex; align-items:center; justify-content:center; }
.select2-search__field-icon:first-child{ inset-inline-start:0; pointer-events:none; }
.select2-search__field ~ .select2-search__field-icon, .select2-search__field-icon:not(:first-child){ inset-inline-start:auto; inset-inline-end:0; cursor:pointer; pointer-events:auto; }
.select2-search__field ~ .select2-search__field-icon:hover{ color:var(--accent); }
/* new order: select + favourite */
.neworder-services{ display:flex; align-items:stretch; gap:8px; }
.neworder-services .select2-container{ flex:1; min-width:0; }
.neworder-services .btn-favorite{ flex:none; margin:0 !important; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); background:transparent; color:var(--faint); padding:0; }
.neworder-services .btn-favorite:hover, .neworder-services .btn-favorite.favorite-active{ color:var(--sf-gold); border-color:var(--sf-gold); }
/* panel service search box (above the form) */
.search-dropdown .input-wrapper{ position:relative; }
.search-dropdown .input-wrapper .form-control{ padding-inline-start:44px; padding-inline-end:40px; }
.search-dropdown .input-wrapper .input-wrapper__prepend, .search-dropdown .input-wrapper .input-wrapper__append{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; padding:0 2px; color:var(--faint); }
.search-dropdown .input-wrapper .input-wrapper__prepend{ inset-inline-start:14px; left:auto; right:auto; } .search-dropdown .input-wrapper .input-wrapper__append{ inset-inline-end:14px; left:auto; right:auto; font-size:12px; }
.search-dropdown .input-wrapper .input-wrapper__prepend:hover, .search-dropdown .input-wrapper .input-wrapper__append:hover{ color:var(--accent); opacity:1; }
.spin-loader{ color:var(--accent); }
.panel-description{ padding:12px 16px; background:var(--bg); border:1px solid var(--border); color:var(--text-2); font-size:14px; border-radius:0; box-shadow:none; }