:root{
    --speed: 220ms;
    --ease: cubic-bezier(.2,.7,.2,1);
    --font: system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial, "Cairo", "Noto Sans Arabic", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    --shadow:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 24px 40px rgba(0,0,0,.14), 0 10px 16px rgba(0,0,0,.08);
}
:root,
:root[data-theme="light"]{
    --bg:        #f6f7fb;
    --bg-2:      #ffffff;
    --bg-soft:   #eef0f6;
    --fg:        #15181f;
    --fg-2:      #2a2f3a;
    --muted:     #6b7280;
    --card:      #ffffff;
    --card-2:    #fbfbfd;
    --border:    #e6e8ef;
    --border-strong:#d4d8e2;
    /* AZURE BASE — default palette when none is set.
       Ember is removed; Azure is the canonical Fusion identity. */
    --accent:      #2563eb;
    --accent-2:    #0891b2;
    --accent-fg:   #ffffff;
    --accent-soft: rgba(37,99,235,.10);
    --accent-ring: rgba(37,99,235,.35);
    --accent-glow: rgba(37,99,235,.28);
    --accent-press:#1d4ed8;
    --accent-rgb:  37,99,235;
    --surface-tint:#f2f7ff;
    --card-tint:   #f7faff;
    --header-tint: #eaf2ff;
    --danger:      #dc2626;
    --success:     #16a34a;
    --warning:     #d97706;
    --info:        #0ea5e9;
    --link:        #334155;
    --header-bg: #ffffff;
    --sidebar-bg:#ffffff;
    --sidebar-fg:#1a1d24;
    --sidebar-muted:#6b7280;
    --table-stripe:#fafbfd;
    --table-hover: #f0f3fa;
    --input-bg:    #ffffff;
    --input-fg:    #15181f;
    --dropdown-bg: #ffffff;
    --dropdown-fg: #15181f;
    --dropdown-hover: #f0f3fa;
    --modal-bg: #ffffff;
    color-scheme: light;
}
:root[data-theme="dark"]{
    --bg:        #0e1218;
    --bg-2:      #141921;
    --bg-soft:   #0a0d12;
    --fg:        #e8ebf2;
    --fg-2:      #c5cad6;
    --muted:     #9aa3b2;
    --card:      #171c25;
    --card-2:    #1c222d;
    --border:    #232a36;
    --border-strong:#2e3644;
    /* AZURE BASE DARK — default palette when none is set. */
    --accent:      #60a5fa;
    --accent-2:    #22d3ee;
    --accent-fg:   #0a1220;
    --accent-soft: rgba(96,165,250,.16);
    --accent-ring: rgba(96,165,250,.45);
    --accent-glow: rgba(34,211,238,.40);
    --accent-press:#3b82f6;
    --accent-rgb:  96,165,250;
    --surface-tint:#0b1220;
    --card-tint:   #101a2b;
    --header-tint: #0a111e;
    --danger:      #ef4444;
    --success:     #22c55e;
    --warning:     #fbbf24;
    --info:        #38bdf8;
    --link:        #cbd5e1;
    --header-bg: #11151c;
    --sidebar-bg:#11151c;
    --sidebar-fg:#e8ebf2;
    --sidebar-muted:#8b94a3;
    --table-stripe:#141a23;
    --table-hover: #1c2330;
    --input-bg:    #161b24;
    --input-fg:    #e8ebf2;
    --dropdown-bg: #181d27;
    --dropdown-fg: #e8ebf2;
    --dropdown-hover:#1f2734;
    --modal-bg:    #161b24;
    color-scheme: dark;
}
/* ============================================================
   PALETTES — 4 identities, each tuned independently for Light
   and Dark. Light uses rich saturated deep accents on pale
   surfaces; Dark uses bright luminous accents that glow against
   deep surfaces. Every palette redefines the full token set so
   every UI surface repaints cohesively when switched.
   ============================================================ */

/* GRAPHITE — cool neutral steel / platinum, understated premium */
:root[data-palette="Graphite"],
:root[data-palette="Graphite"][data-theme="light"]{
    --bg:          #f5f7fa;
    --bg-2:        #ffffff;
    --bg-soft:     #e8ecf2;
    --accent:      #475569;
    --accent-2:    #1e293b;
    --accent-fg:   #ffffff;
    --accent-soft: rgba(71,85,105,.10);
    --accent-ring: rgba(71,85,105,.32);
    --accent-glow: rgba(30,41,59,.22);
    --accent-press:#334155;
    --accent-rgb:  71,85,105;
    --link:        #334155;
    --surface-tint:#f3f5f8;
    --card-tint:   #f7f9fc;
    --header-tint: #eef1f5;
    --header-bg:   #ffffff;
}
:root[data-palette="Graphite"][data-theme="dark"]{
    --bg:          #0d1018;
    --bg-2:        #141826;
    --bg-soft:     #090b11;
    --card:        #1a1f2e;
    --card-2:      #20263a;
    --border:      #2a314a;
    --border-strong:#3a4461;
    --accent:      #94a3b8;
    --accent-2:    #cbd5e1;
    --accent-fg:   #0f172a;
    --accent-soft: rgba(148,163,184,.14);
    --accent-ring: rgba(148,163,184,.40);
    --accent-glow: rgba(148,163,184,.28);
    --accent-press:#64748b;
    --accent-rgb:  148,163,184;
    --link:        #cbd5e1;
    --surface-tint:#0f172a;
    --card-tint:   #141c2e;
    --header-tint: #0c1424;
    --header-bg:   #0d1018;
}

/* AZURE — cool deep ocean / electric cyan, corporate tech */
:root[data-palette="Azure"],
:root[data-palette="Azure"][data-theme="light"]{
    --bg:          #f4f8ff;
    --bg-2:        #ffffff;
    --bg-soft:     #e4edff;
    --accent:      #2563eb;
    --accent-2:    #0891b2;
    --accent-fg:   #ffffff;
    --accent-soft: rgba(37,99,235,.10);
    --accent-ring: rgba(37,99,235,.35);
    --accent-glow: rgba(37,99,235,.28);
    --accent-press:#1d4ed8;
    --accent-rgb:  37,99,235;
    --link:        #1d4ed8;
    --surface-tint:#f2f7ff;
    --card-tint:   #f7faff;
    --header-tint: #eaf2ff;
    --header-bg:   #ffffff;
}
:root[data-palette="Azure"][data-theme="dark"]{
    --bg:          #060c1a;
    --bg-2:        #0d1526;
    --bg-soft:     #040812;
    --card:        #0f1a33;
    --card-2:      #15213f;
    --border:      #1f2d4f;
    --border-strong:#2c3d6a;
    --accent:      #60a5fa;
    --accent-2:    #22d3ee;
    --accent-fg:   #0a1220;
    --accent-soft: rgba(96,165,250,.16);
    --accent-ring: rgba(96,165,250,.45);
    --accent-glow: rgba(34,211,238,.40);
    --accent-press:#3b82f6;
    --accent-rgb:  96,165,250;
    --link:        #93c5fd;
    --surface-tint:#0b1220;
    --card-tint:   #101a2b;
    --header-tint: #0a111e;
    --header-bg:   #070e1c;
}

/* FOREST — lush emerald / neon mint, organic nature */
:root[data-palette="Forest"],
:root[data-palette="Forest"][data-theme="light"]{
    --bg:          #f4faf6;
    --bg-2:        #ffffff;
    --bg-soft:     #e4f3ea;
    --accent:      #16a34a;
    --accent-2:    #059669;
    --accent-fg:   #ffffff;
    --accent-soft: rgba(22,163,74,.10);
    --accent-ring: rgba(22,163,74,.35);
    --accent-glow: rgba(22,163,74,.28);
    --accent-press:#15803d;
    --accent-rgb:  22,163,74;
    --link:        #15803d;
    --surface-tint:#f2fbf5;
    --card-tint:   #f7fdf9;
    --header-tint: #eafbf0;
    --header-bg:   #ffffff;
}
:root[data-palette="Forest"][data-theme="dark"]{
    --bg:          #081210;
    --bg-2:        #0f1b16;
    --bg-soft:     #05100d;
    --card:        #12211b;
    --card-2:      #172a22;
    --border:      #1f3429;
    --border-strong:#2b4636;
    --accent:      #4ade80;
    --accent-2:    #10b981;
    --accent-fg:   #08130c;
    --accent-soft: rgba(74,222,128,.14);
    --accent-ring: rgba(74,222,128,.45);
    --accent-glow: rgba(74,222,128,.40);
    --accent-press:#22c55e;
    --accent-rgb:  74,222,128;
    --link:        #86efac;
    --surface-tint:#0c1512;
    --card-tint:   #101e18;
    --header-tint: #0a130f;
    --header-bg:   #081210;
}

/* EMBER — warm orange / crimson, fire-dragon identity */
:root[data-palette="Ember"],
:root[data-palette="Ember"][data-theme="light"]{
    --bg:          #fff8f3;
    --bg-2:        #ffffff;
    --bg-soft:     #ffece0;
    --accent:      #f97316;
    --accent-2:    #dc2626;
    --accent-fg:   #ffffff;
    --accent-soft: rgba(249,115,22,.12);
    --accent-ring: rgba(249,115,22,.35);
    --accent-glow: rgba(249,115,22,.32);
    --accent-press:#c2410c;
    --accent-rgb:  249,115,22;
    --link:        #c2410c;
    --surface-tint:#fff4ea;
    --card-tint:   #fff8f1;
    --header-tint: #ffeede;
    --header-bg:   #ffffff;
}
:root[data-palette="Ember"][data-theme="dark"]{
    --bg:          #1a0e08;
    --bg-2:        #25160d;
    --bg-soft:     #120804;
    --card:        #2a1810;
    --card-2:      #371f15;
    --border:      #4a2a1c;
    --border-strong:#603627;
    --accent:      #fb923c;
    --accent-2:    #f87171;
    --accent-fg:   #1a0a04;
    --accent-soft: rgba(251,146,60,.16);
    --accent-ring: rgba(251,146,60,.45);
    --accent-glow: rgba(251,146,60,.42);
    --accent-press:#f97316;
    --accent-rgb:  251,146,60;
    --link:        #fdba74;
    --surface-tint:#1f120a;
    --card-tint:   #281710;
    --header-tint: #190b04;
    --header-bg:   #1a0e08;
}

@media (prefers-reduced-motion: reduce){ :root{ --speed: 0ms; } }
:root[data-reduce-motion="1"]{ --speed: 0ms; }

html, body{
    background: var(--bg) !important;
    color: var(--fg) !important;
    font-family: var(--font);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
body, body.dark, body.light{ background: var(--bg) !important; color: var(--fg) !important; }
body.bg-gray, .bg-gray, .bg-white{ background: var(--bg) !important; color: var(--fg) !important; }
body.bg-svg{ background: var(--bg) !important; }

a, .nav-link, .card-link{ color: var(--link); transition: color var(--speed) var(--ease); }
a:hover{ color: var(--accent); }

.text-muted, .small, small{ color: var(--muted) !important; }
.text-dark{ color: var(--fg) !important; }
.text-white{ color: #ffffff !important; }

header, .header, .header-color, .header-top, .header-middle, .header-bottom{
    background: var(--header-bg) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
}
.header-top{ border-bottom: 1px solid var(--border) !important; }

footer, .footer, .footer-top, .footer-middle, .footer-bottom,
.footer-copyrights, .footer-section, .footer-widgets{
    background: var(--bg-2) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
}
.footer-top{ border-top: 1px solid var(--border) !important; }
.footer-bottom{ background: var(--bg-soft) !important; }
footer a, .footer a, .footer-top a, .footer-middle a, .footer-bottom a{
    color: var(--link) !important;
}
footer a:hover, .footer a:hover, .footer-top a:hover,
.footer-middle a:hover, .footer-bottom a:hover{ color: var(--accent) !important; }
footer h3, footer h4, footer h5, footer .widget-title,
.footer h3, .footer h4, .footer h5, .footer .widget-title{
    color: var(--fg) !important;
}
footer .text-muted, .footer .text-muted, .footer-bottom .text-muted{ color: var(--muted) !important; }
.footer-top .subscribe-box,
.footer-top .newsletter-box,
.footer-top input[type="email"],
.footer-top input[type="text"]{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border: 1px solid var(--border) !important;
}

.svg-light, .svg-dark{ background: var(--bg) !important; color: var(--fg) !important; }
svg.bg-svg-shape path{ fill: var(--bg-2) !important; stroke: var(--border) !important; }
.preloader, .pre-loader, .loader, #pre-loader, #loader{
    background: var(--bg) !important;
    color: var(--fg) !important;
}
.page-wrapper, .content-wrapper, .main-content, .site-wrapper, #wrapper, #main{
    background: var(--bg) !important;
    color: var(--fg) !important;
}
.bg-white, .bg-gray-lightest, .bg-gray-100, .bg-gray-200, .bg-light-gray{
    background: var(--bg-2) !important;
    color: var(--fg) !important;
}
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:white"],
[style*="background-color: white"]{
    background: var(--bg-2) !important;
    background-color: var(--bg-2) !important;
}
:root[data-theme="light"] [style*="background:#fff"],
:root[data-theme="light"] [style*="background: #fff"],
:root[data-theme="light"] [style*="background:white"],
:root[data-theme="light"] [style*="background: white"],
:root[data-theme="light"] [style*="background-color:#fff"],
:root[data-theme="light"] [style*="background-color: #fff"],
:root[data-theme="light"] [style*="background-color:white"],
:root[data-theme="light"] [style*="background-color: white"]{
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.navbar, .navbar-light, .nav, .nav-pills{ background: transparent !important; }
.navbar .nav-link, .nav-link, .navbar-light .navbar-nav .nav-link{ color: var(--fg) !important; }
.navbar-brand{ color: var(--fg) !important; font-weight: 600; }

.card, .panel, .modal-content, .fusion-card,
.groupstabes, .card-product .product-info{
    background: var(--card) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.card:not(.card-search):hover, .fusion-card:hover, .groupstabes:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card-search{ position: relative !important; z-index: 100 !important; overflow: visible !important; }
.card-search.chosen-open-host{ z-index: 1061 !important; }
.card-body{ color: var(--fg) !important; }

.table{ color: var(--fg) !important; background: transparent !important; }
.table thead th{ color: var(--fg) !important; border-bottom-color: var(--border-strong) !important; background: var(--card-2) !important; font-weight: 600; }
.table th, .table td{ border-color: var(--border) !important; }
.table-striped tbody tr:nth-of-type(odd){ background: var(--table-stripe) !important; }
.table-hover tbody tr:hover{ background: var(--table-hover) !important; }

input, select, textarea, .form-control, .input-group-text{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
input::placeholder, textarea::placeholder, .form-control::placeholder{ color: var(--muted) !important; opacity: .85; }
input:focus, select:focus, textarea:focus, .form-control:focus{
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.chosen-container-single .chosen-single,
.chosen-container .chosen-drop,
.chosen-container .chosen-results li{ background: var(--input-bg) !important; color: var(--input-fg) !important; border-color: var(--border) !important; }
.chosen-container .chosen-results li.highlighted{ background: var(--accent) !important; color: var(--accent-fg) !important; }

.btn, button.btn, input[type="submit"], input[type="button"]{
    border-radius: var(--radius-sm);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
    position: relative;
    overflow: hidden;
    font-weight: 500;
}
.btn{ background: var(--card-2); color: var(--fg); border: 1px solid var(--border); }
.btn:hover{ background: var(--card); border-color: var(--border-strong); color: var(--fg); }
.btn-primary, .btn.btn-primary{ background: var(--accent) !important; color: var(--accent-fg) !important; border: 1px solid var(--accent) !important; }
.btn-primary:hover, .btn.btn-primary:hover{ background: var(--accent-2) !important; border-color: var(--accent-2) !important; color: var(--accent-fg) !important; }
.btn-light, .btn.btn-light{ background: var(--card-2) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.btn-secondary{ background: var(--card-2) !important; color: var(--fg) !important; border-color: var(--border-strong) !important; }
.btn-success{ background: var(--success) !important; color: #fff !important; border-color: var(--success) !important; }
.btn-danger { background: var(--danger)  !important; color: #fff !important; border-color: var(--danger)  !important; }
.btn-warning{ background: var(--warning) !important; color: #000 !important; border-color: var(--warning) !important; }
.btn-info   { background: var(--info)    !important; color: #fff !important; border-color: var(--info)    !important; }
.btn:active{ transform: translateY(1px); }
.btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at center, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%); opacity:0; transition:opacity 400ms var(--ease); pointer-events:none; }
.btn:active::after{ opacity:1; transition:opacity 0ms; }

.dropdown-menu{ background: var(--dropdown-bg) !important; color: var(--dropdown-fg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.dropdown-item{ color: var(--dropdown-fg) !important; }
.dropdown-item:focus, .dropdown-item:hover{ background: var(--dropdown-hover) !important; color: var(--fg) !important; }
.dropdown-divider, .dropdown-header{ border-color: var(--border) !important; color: var(--muted) !important; }
.dropdown-header{ font-weight: 600; }

.modal-content{ background: var(--modal-bg) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius); }
.modal-header, .modal-footer{ background: transparent !important; border-color: var(--border) !important; }
.modal-header .close, .modal-header button.close{ color: var(--fg) !important; opacity: .8; }

.list-group, .list-group-item{ background: var(--card) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.list-group-item:hover{ background: var(--table-hover) !important; }

.pagination .page-link{ background: var(--card) !important; color: var(--link) !important; border-color: var(--border) !important; }
.pagination .page-item.active .page-link{ background: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--accent) !important; }

.border, .border-top, .border-right, .border-bottom, .border-left{ border-color: var(--border) !important; }
hr, .dropdown-divider{ border-color: var(--border) !important; }

.bg-primary{ background: var(--accent) !important; color: var(--accent-fg) !important; }
.bg-secondary{ background: var(--card-2) !important; color: var(--fg) !important; }
.bg-light{ background: var(--card) !important; color: var(--fg) !important; }
.bg-dark{ background: var(--bg-soft) !important; color: var(--fg) !important; }

.alert{ border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-2); color: var(--fg); }
.alert-success{ border-left: 4px solid var(--success); }
.alert-danger { border-left: 4px solid var(--danger);  }
.alert-warning{ border-left: 4px solid var(--warning); }
.alert-info   { border-left: 4px solid var(--info);    }

.breadcrumb{ background: transparent !important; padding-left: 0; color: var(--muted); }
.breadcrumb a{ color: var(--link); }
.breadcrumb-item + .breadcrumb-item::before{ color: var(--muted); }

.page-title{ color: var(--fg) !important; }
.serchcontent, .serchcontent li{ background: var(--dropdown-bg) !important; color: var(--dropdown-fg) !important; border-color: var(--border) !important; }

.fusion-skeleton{ display:block; background:linear-gradient(90deg, var(--border) 0%, var(--bg-2) 50%, var(--border) 100%); background-size:200% 100%; animation:fusion-shimmer 1.4s ease-in-out infinite; border-radius:var(--radius-sm); min-height:16px; }
@keyframes fusion-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.fusion-toast-stack{ position:fixed; top:16px; right:16px; display:flex; flex-direction:column; gap:10px; max-width:min(92vw, 380px); }
.fusion-toast{ background:var(--card); color:var(--fg); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:8px; transform:translateX(120%); animation:fusion-toast-in var(--speed) var(--ease) forwards; }
.fusion-toast.is-error{ border-left-color:var(--danger); }
.fusion-toast.is-success{ border-left-color:var(--success); }
.fusion-toast.is-warn{ border-left-color:var(--warning); }
.fusion-toast .progress{ grid-column:1/-1; height:2px; background:var(--border); overflow:hidden; border-radius:1px; margin-top:8px; }
.fusion-toast .progress > span{ display:block; height:100%; width:100%; background:var(--accent); transform-origin:left center; animation:fusion-toast-progress 5s linear forwards; }
@keyframes fusion-toast-in{ from{ transform:translateX(120%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes fusion-toast-progress{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

.fusion-nav a{ position:relative; padding-bottom:4px; }
.fusion-nav a::before{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); transition:width var(--speed) var(--ease); }
.fusion-nav a:hover::before, .fusion-nav a.is-active::before{ width:100%; }

.fusion-route-enter{ opacity:0; transform:translateY(8px); animation:fusion-route-in var(--speed) var(--ease) forwards; }
@keyframes fusion-route-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

.fusion-appearance-toggle{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 8px; color:var(--fg); }
.fusion-appearance-toggle button, .fusion-appearance-toggle select{ background:transparent; border:none; color:inherit; font:inherit; cursor:pointer; padding:4px 6px; border-radius:6px; }
.fusion-appearance-toggle button:hover, .fusion-appearance-toggle select:hover{ background:var(--bg); }

.fusion-theme-trigger{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--fg); cursor:pointer; transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease); }
.fusion-theme-trigger:hover{ background:var(--card-2); border-color:var(--border-strong); }
.fusion-theme-trigger .dot{ width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 0 2px var(--card); }
.fusion-theme-trigger .label{ font-size:13px; font-weight:500; letter-spacing:.2px; }

.fusion-theme-panel{ width:280px; padding:14px; }
.fusion-theme-panel h6{ margin:8px 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; }
.fusion-theme-modes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fusion-theme-modes button{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:var(--radius-sm); cursor:pointer; transition:all var(--speed) var(--ease); font-weight:500; }
.fusion-theme-modes button:hover{ background:var(--card-2); border-color:var(--border-strong); }
.fusion-theme-modes button.is-active{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.fusion-theme-modes .swatch{ width:22px; height:22px; border-radius:6px; border:1px solid var(--border-strong); }
.fusion-theme-modes .swatch.light{ background:linear-gradient(135deg, #ffffff 0%, #f1f4fa 100%); }
.fusion-theme-modes .swatch.dark { background:linear-gradient(135deg, #11151c 0%, #1c222d 100%); }
.fusion-palettes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.fusion-palettes button{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:var(--radius-sm); cursor:pointer; transition:all var(--speed) var(--ease); font-size:11px; font-weight:600; }
.fusion-palettes button:hover{ background:var(--card-2); border-color:var(--border-strong); }
.fusion-palettes button.is-active{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.fusion-palettes .swatch{ width:34px; height:18px; border-radius:6px; }
.fusion-palettes .swatch[data-p="Azure"]   { background:linear-gradient(135deg,#2563eb,#0891b2); }
.fusion-palettes .swatch[data-p="Graphite"]{ background:linear-gradient(135deg,#546e7a,#263238); }
.fusion-palettes .swatch[data-p="Forest"]  { background:linear-gradient(135deg,#16a34a,#059669); }
.fusion-palettes .swatch[data-p="Ember"]   { background:linear-gradient(135deg,#f97316,#dc2626); }

.fusion-theme-panel-inner{ padding: 14px; }
.fusion-orderstyles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fusion-orderstyles .ordertheme{ padding: 6px !important; cursor: pointer; }
.fusion-orderstyles .ordertheme img{ width: 100%; height: auto; min-width: 0 !important; }

.fusion-theme-trigger{ font-size: 18px; padding: 8px 12px !important; line-height: 1; }
.fusion-theme-trigger:hover{ color: var(--accent) !important; }

html[data-dense="1"] .card, html[data-dense="1"] .groupstabes, html[data-dense="1"] .panel{ padding:10px !important; }
html[data-dense="1"] input, html[data-dense="1"] select, html[data-dense="1"] .form-control{ padding:4px 8px !important; }

.dropdown-menu, .select2-dropdown, .chosen-drop, .serchcontent,
ul.chosen-results, .ui-autocomplete, .tt-menu, .typeahead,
.searchDropdown, .fusion-theme-panel{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-sm) !important;
}
.card-search, .card.card-search,
.chosen-container, .chosen-container-single, .chosen-container-multi,
.form-group, .form-inline, .input-group{
    overflow: visible !important;
}
.chosen-container .chosen-drop{
    position: absolute !important;
    min-width: 100% !important;
}
.chosen-container.chosen-with-drop .chosen-drop{ left: 0 !important; }
.serchcontent{
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 360px;
    overflow: auto;
    margin-top: 4px;
    padding: 8px 0;
}
.serchcontent li{
    list-style: none;
    padding: 6px 14px;
    margin: 0;
}
.serchcontent li.dropdown-header{
    color: var(--muted) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.serchcontent li.dropdown-item{
    background: transparent !important;
    color: var(--dropdown-fg) !important;
    cursor: pointer;
}
.serchcontent li.dropdown-item:hover{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.serchcontent li.dropdown-item a{
    color: inherit !important;
    text-decoration: none !important;
    display: block;
}
/* When .serchcontent is rendered inside the fusion search panel (header dropdown),
   keep it inline — the ul#searchresult already provides scroll + sizing. */
.fusion-quicksearch-panel #searchresult .serchcontent,
.fusion-quicksearch-panel .serchcontent{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* === Floating layer scale (Bootstrap-aligned) =========================
   Only floating popups get z-index. Containers (header/card/body) DO NOT.
   This prevents any stacking-context battle between siblings. */
.navbar-products,
header,
header .position-static,
.header,
.header-top,
.header-middle,
.header-bottom,
.navbar,
.fusion-quicksearch-dropdown,
.fusion-theme-dropdown,
.dropdown,
.nav-item,
.card-search,
.card.card-search,
.chosen-container,
.form-group,
.form-inline,
.input-group{
    overflow: visible !important;
}
/* Single high z-index for all floating popups so they sit above page content */
.dropdown-menu.show,
.dropdown.show > .dropdown-menu,
header .dropdown-menu,
.fusion-theme-panel.show,
.fusion-theme-dropdown.show > .fusion-theme-panel,
.fusion-quicksearch-panel.show,
.fusion-quicksearch-dropdown.show > .fusion-quicksearch-panel,
.serchcontent,
.chosen-container.chosen-with-drop .chosen-drop,
.chosen-drop,
.select2-container--open .select2-dropdown,
.ui-autocomplete,
.tt-menu,
.typeahead{
    z-index: 1060 !important;
}
.modal-backdrop{ z-index: 1040 !important; }
.modal{ z-index: 1050 !important; }
.modal .dropdown-menu,
.modal .chosen-drop,
.modal .select2-dropdown{ z-index: 1070 !important; }
.tooltip, .popover{ z-index: 1080 !important; }
.fusion-toast-stack{ z-index: 1090 !important; }
/* Header stays a normal flow block */
header, .header, .header-fixed, .header-top, .header-middle, .header-bottom,
.navbar, .navbar-fixed-top{
    position: relative;
}
.fusion-theme-dropdown{ position: relative !important; }
.fusion-theme-panel{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 6px !important;
    min-width: 280px !important;
    max-width: 320px !important;
    transform: none !important;
    inset: auto 0 auto auto !important;
}
.fusion-theme-dropdown.show > .fusion-theme-panel,
.fusion-theme-panel.show{
    display: block !important;
}
.fusion-theme-panel h6{ background: transparent !important; color: var(--muted) !important; }
.fusion-quicksearch-dropdown{ position: relative !important; }
.fusion-quicksearch-panel{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 6px !important;
    transform: none !important;
    inset: auto 0 auto auto !important;
}
.fusion-quicksearch-dropdown.show > .fusion-quicksearch-panel,
.fusion-quicksearch-panel.show{
    display: block !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--input-fg) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--input-fg) !important; line-height: 36px !important; }
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600;
}
.select2-container--default .select2-results__option[aria-selected="true"]{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600;
}
.select2-container--default .select2-results__option{
    background: transparent !important;
    color: var(--dropdown-fg) !important;
    padding: 8px 12px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
}

.chosen-container .chosen-results li.highlighted,
.chosen-container .chosen-results li.result-selected{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600;
}

.card-product .product-info,
.card-product, .groupstabes, .service-card, .product-card{
    overflow: visible !important;
}

.fusion-theme-dropdown{ position: relative; }

.fusion-quicksearch-trigger{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--fg) !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
    text-decoration: none !important;
}
.fusion-quicksearch-trigger:hover{
    background: var(--card-2);
    border-color: var(--border-strong);
    color: var(--accent) !important;
}
.fusion-quicksearch-trigger i{ color: var(--muted); transition: color var(--speed) var(--ease); }
.fusion-quicksearch-trigger:hover i{ color: var(--accent); }
.fusion-quicksearch-dropdown > .fusion-quicksearch-panel{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
}
.fusion-quicksearch-panel .search-products,
.fusion-quicksearch-panel #fusionsearchvalue{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 13px;
    width: 100%;
    box-shadow: none !important;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.fusion-quicksearch-panel .search-products:focus,
.fusion-quicksearch-panel #fusionsearchvalue:focus{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}
.fusion-quicksearch-panel #searchresult .dropdown-header{
    color: var(--muted) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 8px 10px 4px;
}
.fusion-quicksearch-panel #searchresult .dropdown-item{
    padding: 6px 10px !important;
    border-radius: var(--radius-sm);
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.fusion-quicksearch-panel #searchresult .dropdown-item:hover{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.fusion-quicksearch-panel #searchresult .dropdown-item a{
    color: inherit !important;
    text-decoration: none !important;
    display: block;
    font-size: 13px;
}

/* Modal backdrop — proper dim layer between page content and modal. */
.modal-backdrop{
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    background: #000 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    transition: opacity 200ms var(--ease);
}
.modal-backdrop.fade{ opacity: 0 !important; }
.modal-backdrop.show, .modal-backdrop.fade.show{ opacity: .55 !important; }
:root[data-theme="light"] .modal-backdrop.show{ opacity: .35 !important; }
body.modal-open{ overflow: hidden !important; }

/* Order style preview buttons — always distinguishable in both themes */
.ordertheme,
.ordertheme.btn,
.ordertheme.btn-light,
.ordertheme.btn.btn-light{
    background: #ffffff !important;
    border: 2px solid var(--border) !important;
    padding: 8px !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform 140ms ease;
}
.ordertheme img{
    display: block !important;
    max-width: 100% !important;
    min-width: 80px !important;
    height: auto !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}
.ordertheme:hover{
    border-color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--accent-glow);
}
.ordertheme.active,
.ordertheme.btn-light.active{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    background: #ffffff !important;
}
:root[data-theme="dark"] .ordertheme,
:root[data-theme="dark"] .ordertheme.btn,
:root[data-theme="dark"] .ordertheme.btn-light,
body.dark .ordertheme,
body.dark .ordertheme.btn-light{
    background: #f5f6fa !important;
}
:root[data-theme="dark"] .ordertheme.active,
body.dark .ordertheme.active{ background: #f5f6fa !important; }

/* Heading text — always readable in both themes */
h1, h2, h3, h4, h5, h6,
.page-title, .pagetitle, #subheader_txt, #subheader2_txt,
.breadcrumb, .breadcrumb a{
    color: var(--fg) !important;
    text-shadow: none !important;
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6,
body.dark .page-title, body.dark .pagetitle{
    color: #ffffff !important;
}
:root[data-theme="dark"] [style*="color:#000"],
:root[data-theme="dark"] [style*="color: #000"],
:root[data-theme="dark"] [style*="color:black"],
:root[data-theme="dark"] [style*="color: black"],
body.dark [style*="color:#000"],
body.dark [style*="color: #000"],
body.dark [style*="color:black"],
body.dark [style*="color: black"]{
    color: var(--fg) !important;
}

/* Table group-headers / card-headers — dark mode readability (incl. thead td + inner h1-h6) */
thead, thead tr, thead th, thead td,
.table thead, .table thead th, .table thead td,
.card-header, .group-header, .groupstab, .groupstabes > .header,
tr.group, tr.group-header, tr.grouprow,
.table-heading, .heading-row{
    background: var(--card-2) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
}
thead h1, thead h2, thead h3, thead h4, thead h5, thead h6,
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
tr.group h1, tr.group h2, tr.group h3, tr.group h4, tr.group h5, tr.group h6{
    color: inherit !important;
    margin: 0;
}
:root[data-theme="dark"] thead,
:root[data-theme="dark"] thead tr,
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] thead td,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .group-header,
:root[data-theme="dark"] .groupstab,
:root[data-theme="dark"] tr.group,
:root[data-theme="dark"] tr.group-header,
body.dark thead, body.dark thead tr, body.dark thead th, body.dark thead td,
body.dark .card-header, body.dark .group-header, body.dark .groupstab,
body.dark tr.group, body.dark tr.group-header{
    background: #1a1f2a !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] thead h1, :root[data-theme="dark"] thead h2, :root[data-theme="dark"] thead h3,
:root[data-theme="dark"] thead h4, :root[data-theme="dark"] thead h5, :root[data-theme="dark"] thead h6,
body.dark thead h1, body.dark thead h2, body.dark thead h3,
body.dark thead h4, body.dark thead h5, body.dark thead h6{
    color: #ffffff !important;
}
:root[data-theme="dark"] thead th[style*="color"],
:root[data-theme="dark"] thead td[style*="color"],
:root[data-theme="dark"] tr.group [style*="color"],
body.dark thead th[style*="color"],
body.dark thead td[style*="color"],
body.dark tr.group [style*="color"]{
    color: #ffffff !important;
}

/* Native <select> + enhanced dropdowns — full readability in dark mode */
select, select.form-control, select.custom-select{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
select option, select optgroup{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
}
select option:checked, select option:hover, select option:focus{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Bootstrap-select & every dropdown-menu variant */
.dropdown-menu, .dropdown-menu.show,
.bootstrap-select .dropdown-menu,
.bs-select-all ~ .dropdown-menu,
ul.dropdown-menu, div.dropdown-menu{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}
.dropdown-menu .dropdown-item,
.dropdown-menu a.dropdown-item,
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a span.text{
    color: var(--dropdown-fg) !important;
    background: transparent !important;
    padding: 8px 14px !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu a.dropdown-item:hover,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.selected a{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.dropdown-menu .dropdown-item:hover *,
.bootstrap-select .dropdown-menu li a:hover *,
.bootstrap-select .dropdown-menu li.active a *,
.bootstrap-select .dropdown-menu li.selected a *{
    color: var(--accent) !important;
}
.dropdown-divider{ border-top-color: var(--border) !important; }
.dropdown-header{ color: var(--muted) !important; }

/* Chosen-container: selected choice + search input readability */
.chosen-container-single .chosen-single,
.chosen-container-single .chosen-single div,
.chosen-container-single .chosen-single span,
.chosen-container-multi .chosen-choices,
.chosen-container-multi .chosen-choices li.search-field input{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border-color: var(--border) !important;
}
.chosen-container .chosen-drop{
    background: var(--dropdown-bg) !important;
    color: var(--dropdown-fg) !important;
    border: 1px solid var(--border) !important;
}
.chosen-container .chosen-results li{
    color: var(--dropdown-fg) !important;
    background: transparent !important;
}

/* tcs-select cell-selection highlight — theme-aware */
.tcs-select{
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}
:root[data-theme="dark"] .tcs-select,
body.dark .tcs-select{
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.tcs-select.tcs-ignore, .tcs-ignore .tcs-select{
    background-color: var(--muted) !important;
    color: var(--bg) !important;
}

/* Nav hover — never paint solid white in dark mode */
.header-top .nav-item:hover,
.header-middle .nav-item:hover,
.header-bottom .nav-item:hover,
.navbar .nav-item:hover{
    background: transparent !important;
}
.header-top .nav-item:hover > .nav-link,
.header-middle .nav-item:hover > .nav-link{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-radius: var(--radius-sm);
}

/* Kill legacy white-filled cells in dark mode */
:root[data-theme="dark"] td[bgcolor="#ffffff"],
:root[data-theme="dark"] td[bgcolor="#fff"],
:root[data-theme="dark"] td[bgcolor="white"],
:root[data-theme="dark"] td[style*="background:#fff"],
:root[data-theme="dark"] td[style*="background: #fff"],
:root[data-theme="dark"] td[style*="background-color:#fff"],
:root[data-theme="dark"] td[style*="background-color: #fff"],
:root[data-theme="dark"] td[style*="background:white"],
:root[data-theme="dark"] td[style*="background-color:white"],
body.dark td[bgcolor="#ffffff"],
body.dark td[bgcolor="#fff"],
body.dark td[bgcolor="white"],
body.dark td[style*="background:#fff"],
body.dark td[style*="background: #fff"],
body.dark td[style*="background-color:#fff"],
body.dark td[style*="background-color: #fff"]{
    background: var(--card-2) !important;
    background-color: var(--card-2) !important;
    color: var(--fg) !important;
}

/* Nuke legacy bgcolor white on any element in dark mode */
:root[data-theme="dark"] [bgcolor="#ffffff"],
:root[data-theme="dark"] [bgcolor="#fff"],
:root[data-theme="dark"] [bgcolor="white"],
body.dark [bgcolor="#ffffff"],
body.dark [bgcolor="#fff"],
body.dark [bgcolor="white"]{
    background: var(--card) !important;
    background-color: var(--card) !important;
    color: var(--fg) !important;
}

/* =====================================================================
   PALETTE-DRIVEN UI PAINTING
   Every clickable / selectable / active / highlighted surface pulls
   its color chain from the active palette+mode token set, so changing
   palette or mode repaints the entire client UI cohesively — buttons,
   service cards, tabs, badges, pagination, progress, selection,
   scrollbars, focus rings and pressed states, all in one sweep.
   ===================================================================== */

/* Text selection ----------------------------------------------------- */
::selection    { background: var(--accent) !important; color: var(--accent-fg) !important; }
::-moz-selection{ background: var(--accent) !important; color: var(--accent-fg) !important; }

/* Native form control accent (checkbox / radio / range) --------------- */
:root, html{ accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"], input[type="range"]{ accent-color: var(--accent) !important; }

/* Keyboard focus-visible outline ------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbars — palette-tinted gradient thumb ------------------------- */
*::-webkit-scrollbar       { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg-soft); }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius: 10px;
    border: 2px solid var(--bg-soft);
}
*::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
html{ scrollbar-color: var(--accent) var(--bg-soft); }

/* Cards — accent border + glow on hover ------------------------------ */
.card:not(.card-search):hover,
.fusion-card:hover,
.groupstabes:hover{
    border-color: var(--accent) !important;
    box-shadow: 0 14px 32px var(--accent-glow), 0 4px 10px rgba(0,0,0,.06) !important;
}

/* Service / Product / Group card — gradient accent stripe on hover --- */
.card-product,
.card-group,
.group.card,
.groupstab{ position: relative; }
.card-product::before,
.card-group::before,
.group.card::before,
.groupstab::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
    z-index: 1;
}
.card-product:hover::before,
.card-group:hover::before,
.group.card:hover::before,
.groupstab:hover::before{ opacity: 1; }

/* Service name / product link hover ---------------------------------- */
.card-product a:hover .service-name,
.card-product a:hover .truncate-text,
.card-group a:hover .truncate-text,
.services a:hover,
.services-list a:hover{
    color: var(--accent) !important;
}

/* Price / totals — palette-colored ----------------------------------- */
.price, .service-price, .price-value,
.card-product .price,
.cart-total, .grand-total, .total-amount,
.price-details tr:last-child td:last-child{
    color: var(--accent) !important;
    font-weight: 600;
}

/* Hot / New / Featured ribbons --------------------------------------- */
.hot, .tag-hot, .new, .tag-new,
.featured, .tag-featured,
.ribbon-hot, .ribbon-new{
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
    color: var(--accent-fg) !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--accent-glow) !important;
}

/* Primary buttons — flat premium surface, no two-tone gradient ------- */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
button.btn.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary{
    background: var(--accent) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: var(--accent-fg) !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    padding: 10px 22px !important;
    border-radius: var(--radius) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.14) inset,
        0 2px 4px rgba(0,0,0,.10),
        0 0 0 0 var(--accent-ring) !important;
    transition:
        background-color 180ms var(--ease),
        box-shadow       180ms var(--ease),
        transform        180ms var(--ease),
        filter           180ms var(--ease) !important;
    position: relative;
    overflow: hidden;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover,
input[type="button"].btn-primary:hover{
    background: var(--accent) !important;
    background-image: none !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: var(--accent-fg) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 10px 22px var(--accent-glow),
        0 3px 6px rgba(0,0,0,.12) !important;
}
.btn-primary:active,
.btn.btn-primary:active,
button.btn-primary:active,
input[type="submit"].btn-primary:active{
    background: var(--accent-press) !important;
    background-image: none !important;
    filter: brightness(.96);
    transform: translateY(0) !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,.18) inset,
        0 1px 2px rgba(0,0,0,.12) !important;
}
.btn-primary:focus,
.btn.btn-primary:focus,
button.btn-primary:focus,
.btn-primary:focus-visible{
    outline: none !important;
    box-shadow:
        0 0 0 3px var(--accent-ring),
        0 6px 14px var(--accent-glow) !important;
}

/* Primary button ripple sheen — subtle click feedback -------------- */
.btn-primary::after,
.btn.btn-primary::after{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                rgba(255,255,255,.35) 0%,
                rgba(255,255,255,0)  55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms var(--ease);
}
.btn-primary:active::after{ opacity: 1; transition-duration: 0ms; }

/* Outline primary — clean border, inverted on hover ----------------- */
.btn-outline-primary,
.btn.btn-outline-primary{
    background: transparent !important;
    background-image: none !important;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent) !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    border-radius: var(--radius) !important;
    transition: all 180ms var(--ease) !important;
}
.btn-outline-primary:hover,
.btn.btn-outline-primary:hover{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px var(--accent-glow) !important;
}
.btn-outline-primary:active,
.btn.btn-outline-primary:active{
    background: var(--accent-press) !important;
    color: var(--accent-fg) !important;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.18) inset !important;
}

/* Generic .btn focus ring + press feedback --------------------------- */
.btn:focus,
button.btn:focus,
.btn.focus{
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.btn:active{ filter: brightness(.96); }

/* Input focus — palette ring ----------------------------------------- */
input:focus,
select:focus,
textarea:focus,
.form-control:focus{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Nav tabs — palette underline --------------------------------------- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
    color: var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
    background: transparent !important;
    font-weight: 600;
}
.nav-tabs .nav-link:hover{
    color: var(--accent) !important;
    border-bottom-color: var(--accent-soft) !important;
}

/* Nav pills — palette fill ------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    box-shadow: 0 6px 16px var(--accent-glow);
}
.nav-pills .nav-link:hover:not(.active){
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Badges ------------------------------------------------------------- */
.badge-primary, .badge.badge-primary{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
}
.badge-light, .badge.badge-light{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-soft);
    font-weight: 600;
}

/* Pagination --------------------------------------------------------- */
.pagination .page-item.active .page-link{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 6px 16px var(--accent-glow) !important;
}
.pagination .page-link:hover{
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: var(--accent-soft) !important;
}

/* Progress bar ------------------------------------------------------- */
.progress{ background: var(--bg-soft) !important; border-radius: 999px; overflow: hidden; }
.progress-bar{
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) !important;
    color: var(--accent-fg) !important;
}

/* List group active / hover ----------------------------------------- */
.list-group-item.active{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    border-color: var(--accent) !important;
}
.list-group-item-action:hover{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Sidebar active item ----------------------------------------------- */
.sidebar .nav-link.active,
.sidebar-menu .nav-link.active,
.sidebar li.active > a,
.sidebar-menu li.active > a,
.side-menu li.active > a{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-left: 3px solid var(--accent) !important;
}

/* Theme-toggle / quicksearch trigger — palette glow on hover --------- */
.fusion-theme-trigger:hover,
.fusion-quicksearch-trigger:hover{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Active mode / palette button inside theme panel -------------------- */
.fusion-theme-modes button.is-active,
.fusion-palettes button.is-active{
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Order style preview — active palette ring -------------------------- */
.ordertheme.active,
.ordertheme.btn-light.active{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring), 0 10px 22px var(--accent-glow) !important;
}
.ordertheme:hover{
    border-color: var(--accent) !important;
    box-shadow: 0 8px 20px var(--accent-glow) !important;
}

/* Spinner / loader --------------------------------------------------- */
.spinner-border, .spinner-grow{ color: var(--accent) !important; }

/* Fusion animated nav underline — palette gradient ------------------- */
.fusion-nav a::before{ background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); }

/* Smooth repaint when palette or mode changes ------------------------ */
.card, .btn, .badge, .nav-link, .form-control,
input, select, textarea,
.dropdown-item, .page-link, .list-group-item,
.fusion-theme-trigger, .fusion-quicksearch-trigger{
    transition:
        background-color var(--speed) var(--ease),
        border-color     var(--speed) var(--ease),
        color            var(--speed) var(--ease),
        box-shadow       var(--speed) var(--ease);
}

/* =====================================================================
   LEGACY DHRU OVERRIDES — force every chrome surface to use the active
   palette and to remain readable in BOTH light and dark, including
   active/selected states that legacy theme.css hardcodes to black.
   ===================================================================== */

/* Dropdown menu panels — palette-aware container -------------------- */
.dropdown-menu{
    background: var(--dropdown-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--dropdown-fg) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.06) !important;
    border-radius: 10px !important;
    padding: 6px !important;
}
.dropdown-menu .dropdown-header{ color: var(--muted) !important; }
.dropdown-divider{ border-top-color: var(--border) !important; }

/* Dropdown items (beats theme.css:1623 color:#525252) --------------- */
.dropdown-item,
header .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item{
    color: var(--dropdown-fg) !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: background-color 150ms var(--ease), color 150ms var(--ease) !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.bg-hover:hover, .bg-hover:focus,
header .dropdown-menu .dropdown-item:hover,
header .dropdown-menu .dropdown-item:focus{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu .dropdown-item.active{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
}

/* Modal menu items (beats theme.css:1744 color:black) --------------- */
.modal-menu .dropdown-item,
.modal-menu .nav-link,
.modal-menu .nav-link.dropdown-toggle,
.modal-menu .catloglist li.maincategory > a,
.modal-menu .catloglist > li.nocategory > a{
    color: var(--fg) !important;
    border-bottom-color: var(--border) !important;
}
.modal-menu .dropdown-item:hover,
.modal-menu .nav-link:hover{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.modal-menu .nav-link.dropdown-toggle{ color: var(--muted) !important; }

/* Header nav item hover (beats theme.css:144 + 1677 color:black) ---- */
.header-top .nav-item:hover,
.header-middle .nav-item:hover,
.header-bottom .nav-item:hover,
.navbar-products .nav-item:hover{
    background: var(--accent-soft) !important;
}
.header-top .nav-item:hover .nav-link,
.header-middle .nav-item:hover .nav-link,
.header-bottom .nav-item:hover .nav-link,
.navbar-products .nav-item:hover .nav-link{
    color: var(--accent) !important;
}

/* nav-pills.flex-nowrap (beats theme.css:2244 color:black on active) - */
ul.nav-pills.flex-nowrap .nav-link,
.homepagegroups ul.nav-pills.flex-nowrap .nav-link{
    color: var(--fg-2) !important;
    border-color: transparent !important;
    font-weight: 500;
    transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
ul.nav-pills.flex-nowrap .nav-link:hover,
.homepagegroups ul.nav-pills.flex-nowrap .nav-link:hover{
    color: var(--accent) !important;
}
ul.nav-pills.flex-nowrap .nav-link.active,
.homepagegroups ul.nav-pills.flex-nowrap .nav-link.active{
    background: transparent !important;
    color: var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
    border-radius: 0 !important;
    font-weight: 600;
}

/* Nav tabs — dark/light contrast for active text -------------------- */
.nav-tabs{
    border-bottom: 1px solid var(--border) !important;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link{
    color: var(--fg-2) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom-width: 2px !important;
    padding: 10px 16px !important;
    font-weight: 500;
    transition: all 160ms var(--ease) !important;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-item .nav-link:hover{
    color: var(--accent) !important;
    border-bottom-color: var(--accent-soft) !important;
    background: transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-item .nav-link.active{
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 2px solid var(--accent) !important;
    font-weight: 600;
    box-shadow: 0 4px 14px var(--accent-glow);
}

/* Footer nav (beats theme.css:2402 color:black) ---------------------- */
.footer-top .footer-navbar .nav .nav-item a.nav-link{
    color: var(--fg-2) !important;
}
.footer-top .footer-navbar .nav .nav-item a.nav-link:hover{
    color: var(--accent) !important;
}

/* Header dropdown menu alt-row legacy stripe (theme.css:1641) ------- */
header .dropdown-menu.dropdown-menu-inline .dropdown-item:nth-child(2n+1),
header .dropdown-menu.dropdown-menu-inline .dropdown-item:nth-child(2n+3){
    background: var(--card-2) !important;
}

/* =====================================================================
   MODAL — comfortable width, airy padding, palette-aware chrome
   ===================================================================== */
.modal-dialog:not(.modal-menu-dialog):not(.modal-sm){
    max-width: min(720px, calc(100vw - 32px));
    margin: 1.75rem auto;
}
.modal-dialog.modal-lg{
    max-width: min(960px, calc(100vw - 32px));
}
.modal-dialog.modal-xl{
    max-width: min(1200px, calc(100vw - 32px));
}
.modal-content{
    background: var(--card) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow:
        0 24px 48px rgba(0,0,0,.22),
        0 6px 12px  rgba(0,0,0,.08) !important;
    max-height: 90vh !important;
    overflow: hidden;
}
.modal-header{
    background: transparent !important;
    color: var(--fg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1.25rem 1.5rem !important;
    align-items: center;
}
.modal-header .modal-title{
    color: var(--fg) !important;
    line-height: 1.3 !important;
    font-weight: 600;
    margin: 0;
}
.modal-header .close,
.modal-header .btn-close{
    color: var(--fg) !important;
    opacity: .65;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.modal-header .close:hover,
.modal-header .btn-close:hover{
    opacity: 1;
    transform: scale(1.06);
    color: var(--accent) !important;
}
.modal-body{
    padding: 1.5rem !important;
    color: var(--fg) !important;
    overflow: auto;
    max-height: calc(90vh - 140px);
}
.modal-footer{
    border-top: 1px solid var(--border) !important;
    padding: 1rem 1.5rem !important;
    background: transparent !important;
}

/* Modal backdrop — deeper dim for premium feel -------------------- */
.modal-backdrop.show{ opacity: .6 !important; }

/* =====================================================================
   MOBILE NAV — hamburger toggler + side drawer (modal-menu)
   Premium palette-aware design for phones, cohesive in Light + Dark.
   :root:root prefix boosts specificity above legacy theme.css rules.
   ===================================================================== */

/* Hamburger toggler button — beats theme.css:1521 color:white ------- */
:root:root .navbar-toggler,
:root:root .header-bottom.header-middle .navbar-toggler,
:root:root .text-dark.navbar-toggler,
:root:root .navbar-dark .navbar-toggler,
:root:root .navbar-light .navbar-toggler{
    background: var(--card) !important;
    background-color: var(--card) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    color: var(--fg) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 180ms var(--ease),
        border-color 180ms var(--ease),
        color 180ms var(--ease),
        transform 180ms var(--ease),
        box-shadow 180ms var(--ease) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
:root:root .navbar-toggler i,
:root:root .navbar-toggler .fa,
:root:root .navbar-toggler .fal,
:root:root .navbar-toggler .fas,
:root:root .navbar-toggler svg,
:root:root .navbar-toggler .navbar-toggler-icon{
    color: var(--fg) !important;
    font-size: 20px;
    line-height: 1;
    background-image: none !important;
}
:root:root .navbar-toggler:hover{
    background: var(--accent-soft) !important;
    background-color: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--accent-glow);
}
:root:root .navbar-toggler:hover i,
:root:root .navbar-toggler:hover svg{
    color: var(--accent) !important;
}
:root:root .navbar-toggler:active{
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.18) inset !important;
}
:root:root .navbar-toggler:focus,
:root:root .navbar-toggler:focus-visible{
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-ring), 0 4px 10px var(--accent-glow) !important;
}

/* ---------- Side drawer (modal-menu) — premium surface ------------- */
.modal-menu .modal-dialog{
    max-width: 320px !important;
    width: 86vw !important;
    margin: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
}
.modal-menu .modal-content{
    background: var(--card) !important;
    color: var(--fg) !important;
    border: none !important;
    border-radius: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    box-shadow: 0 0 48px rgba(0,0,0,.45) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Drawer header (avatar + name + email area) ----------------------- */
.modal-menu .modal-header{
    background:
        linear-gradient(135deg,
            var(--header-tint) 0%,
            var(--card) 70%) !important;
    color: var(--fg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}
.modal-menu .modal-header::before{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 50%,
        transparent 100%);
    opacity: .6;
}
.modal-menu .modal-header .close,
.modal-menu .modal-header .btn-close{
    color: var(--fg) !important;
    opacity: .65;
    background: transparent !important;
    border: none !important;
    font-size: 22px;
    transition: opacity 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.modal-menu .modal-header .close:hover{
    opacity: 1;
    color: var(--accent) !important;
    transform: scale(1.1);
}

/* Avatar inside drawer header -------------------------------------- */
.modal-menu .avatar-img,
.modal-menu .lg-icon.avatar-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
    flex-shrink: 0;
    background: var(--card-2);
}
.modal-menu .avatar-img img,
.modal-menu .lg-icon.avatar-icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Drawer body — scrollable nav list -------------------------------- */
.modal-menu .modal-body{
    background: var(--card) !important;
    color: var(--fg) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto;
    min-height: 0;
}

/* Subtler scrollbar inside drawer (override loud palette gradient) -- */
.modal-menu .modal-body::-webkit-scrollbar{ width: 4px !important; height: 4px !important; }
.modal-menu .modal-body::-webkit-scrollbar-track{ background: transparent !important; }
.modal-menu .modal-body::-webkit-scrollbar-thumb{
    background: var(--border-strong) !important;
    border: none !important;
    border-radius: 4px !important;
}
.modal-menu .modal-body::-webkit-scrollbar-thumb:hover{
    background: var(--accent) !important;
}

/* Drawer top-level <ul> reset ------------------------------------- */
.modal-menu .modal-body > ul,
.modal-menu .modal-body ul:first-child{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Drawer nav items (Client Area, Place Order, Order History, etc) -- */
.modal-menu .nav-item{
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
}
.modal-menu .nav-item:last-child{ border-bottom: none !important; }

/* Section label (PLACE ORDER / ORDER HISTORY / MY ACCOUNT) --------- */
.modal-menu .nav-item.dropdown > .nav-link.dropdown-toggle,
.modal-menu > .nav-link.dropdown-toggle,
.modal-menu .nav-link.dropdown-toggle{
    color: var(--muted) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    padding: 16px 1.25rem 8px !important;
    border-bottom: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    position: relative;
    pointer-events: none;
}
.modal-menu .nav-link.dropdown-toggle .fa-chevron-down{
    display: none !important;
}
.modal-menu .nav-link.dropdown-toggle::after{
    display: none !important;
}

/* Direct nav-link without dropdown (Client Area) ------------------- */
.modal-menu .nav-item > .nav-link:not(.dropdown-toggle){
    color: var(--fg) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 14px 1.25rem !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: none !important;
    transition:
        background 160ms var(--ease),
        color 160ms var(--ease),
        padding 160ms var(--ease) !important;
    position: relative;
}
.modal-menu .nav-item > .nav-link:not(.dropdown-toggle):hover,
.modal-menu .nav-item > .nav-link:not(.dropdown-toggle):focus{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    padding-left: 1.5rem !important;
}

/* Inline expanded dropdown-menu inside drawer --------------------- */
.modal-menu .dropdown-menu,
.modal-menu .dropdown .dropdown-menu,
.modal-menu .dropdown:hover .dropdown-menu:not(.onclick){
    display: block !important;
    position: static !important;
    float: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Drawer dropdown items (indented sub-links) ---------------------- */
.modal-menu .dropdown-menu .dropdown-item{
    color: var(--fg) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 11px 1.25rem 11px 2rem !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 0 !important;
    position: relative;
    width: 100% !important;
    transition:
        background 160ms var(--ease),
        color 160ms var(--ease),
        padding 160ms var(--ease) !important;
}
.modal-menu .dropdown-menu .dropdown-item:last-child{
    border-bottom: none !important;
}

/* Chevron indicator on drawer items ------------------------------- */
.modal-menu .dropdown-menu .dropdown-item::after,
.modal-menu .nav-item > .nav-link:not(.dropdown-toggle)::after{
    content: "\f054";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome, "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 11px;
    color: var(--muted);
    opacity: .45;
    flex-shrink: 0;
    transition:
        transform 160ms var(--ease),
        opacity 160ms var(--ease),
        color 160ms var(--ease);
    margin-left: auto;
}
.modal-menu .dropdown-menu .dropdown-item:hover::after,
.modal-menu .nav-item > .nav-link:not(.dropdown-toggle):hover::after{
    color: var(--accent);
    opacity: 1;
    transform: translateX(3px);
}
.modal-menu .dropdown-menu .dropdown-item:hover,
.modal-menu .dropdown-menu .dropdown-item:focus{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    padding-left: 2.25rem !important;
}

/* "+Add Funds" emphasized call-to-action -------------------------- */
.modal-menu .dropdown-item[href*="addfunds"]{
    color: var(--accent) !important;
    font-weight: 600 !important;
}
.modal-menu .dropdown-item[href*="addfunds"]:hover{
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    padding-left: 2.25rem !important;
}
.modal-menu .dropdown-item[href*="addfunds"]:hover::after{
    color: var(--accent-fg);
}

/* Logout (text-danger) drawer item -------------------------------- */
.modal-menu .dropdown-item.text-danger{
    color: var(--danger) !important;
    font-weight: 500;
}
.modal-menu .dropdown-item.text-danger:hover{
    background: rgba(239,83,80,.14) !important;
    color: var(--danger) !important;
}
.modal-menu .dropdown-item.text-danger:hover::after{
    color: var(--danger);
}

/* Dropdown divider inside drawer (h6.dropdown-divider) ------------ */
.modal-menu .dropdown-divider,
.modal-menu h6.dropdown-divider{
    height: 1px !important;
    margin: 10px 1.25rem !important;
    border-top: 1px solid var(--border) !important;
    background: transparent !important;
    padding: 0 !important;
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

/* User balance chip (text-success green balance) ------------------ */
.modal-menu .user-balance,
.modal-menu .user-balance.text-success{
    color: var(--success) !important;
    font-weight: 600;
    display: inline-block;
    padding: 2px 8px;
    background: rgba(31,157,85,.14);
    border-radius: 6px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

/* Last login metadata (small timestamp / IP) ---------------------- */
.modal-menu .dropdown-item small{
    color: var(--muted) !important;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 400;
}

/* Drawer profile card — when .profile section is the first item -- */
.modal-menu .nav-item.profile .d-none.d-lg-block{ display: none !important; }
.modal-menu .nav-item.profile > a.d-block.d-lg-none.dropdown-toggle{
    display: block !important;
}

/* Drawer motion — slide in from left ------------------------------ */
.modal-menu.modal{ background: rgba(0,0,0,.55); }
.modal-menu.modal.show .modal-dialog{
    animation: fusion-drawer-in 260ms var(--ease) both;
}
@keyframes fusion-drawer-in{
    from{ transform: translateX(-100%); opacity: .6; }
    to  { transform: translateX(0);     opacity: 1;  }
}

/* Small screens — full-height comfortable drawer ------------------ */
@media (max-width: 420px){
    .modal-menu .modal-dialog{ width: 90vw !important; max-width: 90vw !important; }
}

/* =====================================================================
   FORM INPUTS — roomy, palette focus ring, dark/light ready
   ===================================================================== */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select.form-control,
textarea.form-control,
.chosen-container-single .chosen-single{
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    min-height: 42px;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03) inset;
    transition:
        border-color 160ms var(--ease),
        box-shadow   160ms var(--ease),
        background   160ms var(--ease) !important;
}
.form-control:hover,
input:hover,
select:hover,
textarea:hover{
    border-color: var(--border-strong) !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus{
    border-color: var(--accent) !important;
    background: var(--input-bg) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
    outline: none !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder{
    color: var(--muted) !important;
    opacity: .7;
}
label, .form-group label:not(.custom-control-label){
    color: var(--fg-2) !important;
    font-weight: 500;
}

/* Password strength helper text ------------------------------------ */
.password-strength,
.strength-label,
[class*="strength"] small{
    color: var(--muted) !important;
}

/* =====================================================================
   CARD — consistent premium container (beats theme.css:384 hardcode)
   ===================================================================== */
.card{
    background: var(--card) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
    transition:
        transform  220ms var(--ease),
        box-shadow 220ms var(--ease),
        border     220ms var(--ease) !important;
}
:root[data-theme="dark"] .card,
body.dark .card{
    box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}

/* Checkbox / radio — palette tint instead of browser default ------ */
input[type="checkbox"]:checked,
input[type="radio"]:checked{
    accent-color: var(--accent);
}

/* "Want to use frequently" and similar inline tag buttons ---------- */
.inline-checkbox, .inline-tag,
label.btn-check-inline{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-soft) !important;
    padding: 6px 12px;
    border-radius: 8px;
}

/* =====================================================================
   MOTION & MICRO-INTERACTIONS
   ===================================================================== */

/* Dropdown / panel entrance — fade + slide + scale ------------------ */
@keyframes fusion-drop-in{
    from{ opacity: 0; transform: translateY(-8px) scale(.97); }
    to  { opacity: 1; transform: translateY(0)    scale(1);   }
}
.dropdown-menu.show,
.fusion-theme-panel.show,
.fusion-theme-dropdown.show > .fusion-theme-panel,
.fusion-quicksearch-panel.show,
.fusion-quicksearch-dropdown.show > .fusion-quicksearch-panel{
    animation: fusion-drop-in 220ms var(--ease) both;
    transform-origin: top right;
}

/* Ribbon / hot pills — glow boost on hover -------------------------- */
.hot:hover, .tag-hot:hover,
.new:hover, .tag-new:hover,
.featured:hover, .tag-featured:hover,
.ribbon-hot:hover, .ribbon-new:hover{
    box-shadow: 0 6px 18px var(--accent-glow), 0 0 0 3px var(--accent-ring) !important;
    transform: translateY(-1px);
}

/* Primary button — subtle breathing ring when focused (keyboard) ---- */
@keyframes fusion-pulse-ring{
    0%, 100%{ box-shadow: 0 0 0 3px var(--accent-ring), 0 6px 16px var(--accent-glow); }
    50%     { box-shadow: 0 0 0 5px var(--accent-ring), 0 10px 22px var(--accent-glow); }
}
.btn-primary:focus-visible,
.btn.btn-primary:focus-visible{
    animation: fusion-pulse-ring 1.8s var(--ease) infinite;
}

/* Cards — hint the compositor for smooth hover lift ---------------- */
.card:not(.card-search),
.fusion-card,
.groupstabes,
.card-product,
.card-group{
    will-change: transform, box-shadow, border-color;
}

/* Page content route-style fade ------------------------------------- */
#container-content, .main-content, .page-wrapper > .container{
    animation: fusion-content-in 320ms var(--ease) both;
}
@keyframes fusion-content-in{
    from{ opacity: 0; transform: translateY(6px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   RESPONSIVE — phone / tablet / desktop refinements
   ===================================================================== */

/* Touch devices — minimum 44px tap targets ------------------------- */
@media (hover: none) and (pointer: coarse){
    .btn, .btn-primary, .btn-outline-primary,
    .nav-link, .dropdown-item,
    .fusion-theme-trigger, .fusion-quicksearch-trigger,
    .fusion-palettes button, .fusion-theme-modes button{
        min-height: 44px;
    }
    .dropdown-item{ padding-top: 10px !important; padding-bottom: 10px !important; }
    .ordertheme{ min-height: 72px; }
}

/* Tablet landscape down — theme panel sizing ----------------------- */
@media (max-width: 992px){
    .fusion-theme-panel{ width: 92vw; max-width: 320px; }
}

/* Phone landscape — full-width floating panels ---------------------- */
@media (max-width: 576px){
    .fusion-theme-panel{
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .fusion-quicksearch-panel{
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
    .fusion-theme-modes{ grid-template-columns: 1fr 1fr; }
    .fusion-palettes    { grid-template-columns: repeat(4, 1fr); }
    .card-product .product-info{ padding: 12px !important; }
}

/* Extra-small phones — 2-column palette grid ----------------------- */
@media (max-width: 360px){
    .fusion-palettes{ grid-template-columns: repeat(2, 1fr); }
    .fusion-orderstyles{ grid-template-columns: repeat(2, 1fr); }
}

/* High-DPI / retina — sharper borders + smoother shadows ----------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
    .card, .btn, .dropdown-menu, .fusion-theme-panel, .fusion-quicksearch-panel{
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Reduced motion — respect user preference ------------------------- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === ORDERSTYLE 4 — HORIZONTAL CARD RAIL === */
.orderstyle-4 .order-list,
.orderstyle-4 .orderlist-wrap,
.orderstyle-4 [data-orderlist]{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 14px;
    margin: 0 -4px;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar);
}
.orderstyle-4 .order-list > *,
.orderstyle-4 .orderlist-wrap > *,
.orderstyle-4 [data-orderlist] > *{
    flex: 0 0 320px;
    min-width: 320px;
    height: 180px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    scroll-snap-align: start;
    box-shadow: var(--shadow);
    transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.orderstyle-4 .order-list > *:hover,
.orderstyle-4 .orderlist-wrap > *:hover,
.orderstyle-4 [data-orderlist] > *:hover{
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px var(--accent-glow);
}

/* === ORDERSTYLE 5 — TABLE DENSE === */
.orderstyle-5 table.order-table,
.orderstyle-5 .order-list table,
.orderstyle-5 [data-orderlist] table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.orderstyle-5 table.order-table thead,
.orderstyle-5 .order-list table thead,
.orderstyle-5 [data-orderlist] table thead{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--accent);
    color: var(--accent-fg);
}
.orderstyle-5 table.order-table th,
.orderstyle-5 .order-list table th,
.orderstyle-5 [data-orderlist] table th{
    padding: 10px 12px;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--accent-press);
}
.orderstyle-5 table.order-table td,
.orderstyle-5 .order-list table td,
.orderstyle-5 [data-orderlist] table td{
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    height: 36px;
}
.orderstyle-5 table.order-table tbody tr:nth-child(even),
.orderstyle-5 .order-list table tbody tr:nth-child(even),
.orderstyle-5 [data-orderlist] table tbody tr:nth-child(even){
    background: var(--bg-2);
}
.orderstyle-5 table.order-table tbody tr:hover,
.orderstyle-5 .order-list table tbody tr:hover,
.orderstyle-5 [data-orderlist] table tbody tr:hover{
    background: var(--accent-tint);
}
.orderstyle-5.density-comfortable table.order-table td,
.orderstyle-5.density-comfortable .order-list table td,
.orderstyle-5.density-comfortable [data-orderlist] table td{
    height: 52px;
    padding: 14px 12px;
}

/* === ORDERSTYLE 6 — KANBAN COLUMNS === */
.orderstyle-6 .order-list,
.orderstyle-6 .orderlist-wrap,
.orderstyle-6 [data-orderlist]{
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 14px;
    overflow-x: auto;
}
.orderstyle-6 .kanban-column{
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.orderstyle-6 .kanban-column .kanban-header{
    background: var(--accent);
    color: var(--accent-fg);
    padding: 10px 12px;
    font-weight: 600;
    letter-spacing: .02em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.orderstyle-6 .kanban-column[data-status="processing"] .kanban-header{
    background: var(--info);
    color: #fff;
}
.orderstyle-6 .kanban-column[data-status="done"] .kanban-header{
    background: var(--success);
    color: #fff;
}
.orderstyle-6 .kanban-column[data-status="cancelled"] .kanban-header{
    background: var(--danger);
    color: #fff;
}
.orderstyle-6 .kanban-body{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 120px;
}
.orderstyle-6 .kanban-card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.orderstyle-6 .kanban-card:hover{
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
}
@media (max-width: 768px){
    .orderstyle-6 .order-list,
    .orderstyle-6 .orderlist-wrap,
    .orderstyle-6 [data-orderlist]{
        grid-template-columns: 1fr;
    }
    .orderstyle-4 .order-list > *,
    .orderstyle-4 .orderlist-wrap > *,
    .orderstyle-4 [data-orderlist] > *{
        flex: 0 0 calc(100vw - 48px);
        min-width: calc(100vw - 48px);
    }
}


/* === FUSION FIX-PACK 2026-05 ============================================ */
/* Surfaces, badges, drawers, sweetalert tick & modal background, Bootstrap */
/* custom-controls in dark — all theme-aware via tokens, no fixed colors.   */
/* ======================================================================== */

#custom-alert{
    background: var(--bg) !important;
    color: var(--fg) !important;
    z-index: 1080 !important;
    padding: clamp(1.25rem, 4vw, 2.5rem) !important;
    overflow-y: auto !important;
}
#custom-alert.bg-white{ background: var(--bg) !important; }

#custom-alert #custom-alert-msg.alert-success{
    background: var(--accent-soft, rgba(76,175,80,.12)) !important;
    color: var(--fg) !important;
    border: 1px solid var(--success, #4CAF50) !important;
    border-left: 4px solid var(--success, #4CAF50) !important;
    border-radius: 10px !important;
    padding: .85rem 1rem !important;
    margin: 1.25rem auto 1rem !important;
}
#custom-alert #custom-alert-msg li{ list-style: none !important; }
#custom-alert > .btn,
#custom-alert a.btn{
    display: inline-block;
    background: var(--accent) !important;
    color: var(--accent-fg, #fff) !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: .55rem 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#custom-alert > .btn:hover,
#custom-alert a.btn:hover{ filter: brightness(1.08); }

/* visual emphasis on the existing Close link (.btn) inside the alert */
#custom-alert a.btn,
#custom-alert > .btn{
    margin: .35rem .35rem !important;
    min-width: 90px;
    text-align: center;
}

/* 2. SweetAlert classic tick (.sa-icon.alert-success) -------------------- */
.sa-icon.alert-success::before,
.sa-icon.alert-success::after{
    background: var(--bg) !important;
}
.sa-icon.alert-success .sa-fix{
    background-color: var(--bg) !important;
}
.sa-icon.alert-success .sa-line{
    background-color: var(--success, #4CAF50) !important;
    z-index: 2 !important;
}
.sa-icon.alert-success .sa-placeholder{
    border-color: color-mix(in srgb, var(--success, #4CAF50) 50%, transparent) !important;
}
.sa-icon.alert-success{ border-color: var(--success, #4CAF50) !important; }
#custom-alert .sa-icon{ margin: 0 auto 1rem !important; display: block; }

/* 3. Drawer close button (vx-drawer-close + generic) --------------------- */
.vx-drawer{
    background: var(--bg) !important;
    color: var(--fg) !important;
    border-right: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
}
[dir="rtl"] .vx-drawer{ border-right: 0 !important; border-left: 1px solid var(--border) !important; }

.vx-drawer-head{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    padding: .9rem 1rem !important;
    border-bottom: 1px solid var(--border) !important;
    flex: 0 0 auto !important;
}
.vx-drawer-logo{
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    text-decoration: none !important;
    color: inherit !important;
}
.vx-drawer-logo img{
    height: 36px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
}

button.vx-drawer-close,
.vx-drawer-close,
[data-drawer-close].vx-drawer-close{
    background: var(--card, rgba(255,255,255,.08)) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vx-drawer-close:hover{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.vx-drawer-close svg{
    stroke: currentColor !important;
    color: inherit !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

.vx-drawer-nav{
    display: flex !important;
    flex-direction: column !important;
    gap: .15rem !important;
    padding: .75rem !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}
.vx-drawer-link{
    display: flex !important;
    align-items: center !important;
    gap: .7rem !important;
    padding: .65rem .85rem !important;
    border-radius: 8px !important;
    color: var(--fg) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.vx-drawer-link > i,
.vx-drawer-link > .fa,
.vx-drawer-link > .fal,
.vx-drawer-link > .fab,
.vx-drawer-link > .fas,
.vx-drawer-link > .far{
    flex: 0 0 auto !important;
    width: 1.4rem !important;
    text-align: center !important;
    font-size: 1rem !important;
    color: var(--accent) !important;
}
.vx-drawer-link:hover{
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.vx-drawer-link.is-active{
    background: var(--accent) !important;
    color: var(--accent-fg, #fff) !important;
}
.vx-drawer-link.is-active > i{ color: var(--accent-fg, #fff) !important; }

.vx-drawer-group{
    display: flex !important;
    flex-direction: column !important;
    gap: .15rem !important;
    margin: .35rem 0 !important;
    padding-top: .5rem !important;
    border-top: 1px solid var(--border) !important;
}
.vx-drawer-group-head{
    padding: .35rem .85rem !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--text-muted, var(--muted, #888)) !important;
}
.vx-drawer-group-head > i{ color: var(--accent) !important; margin-right: .35rem !important; }

.vx-drawer-cta{
    background: var(--card, rgba(255,255,255,.06)) !important;
    border: 1px solid var(--border) !important;
    margin-top: .5rem !important;
}
.vx-drawer-primary{
    background: var(--accent) !important;
    color: var(--accent-fg, #fff) !important;
    font-weight: 600 !important;
    margin-top: .35rem !important;
}
.vx-drawer-primary > i{ color: var(--accent-fg, #fff) !important; }

.vx-drawer-social{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    padding: .85rem 1rem !important;
    border-top: 1px solid var(--border) !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
}
.vx-social-tile{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--fg);
    text-decoration: none !important;
    font-size: 1rem !important;
    transition: background .15s ease, color .15s ease, transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.vx-social-tile > i,
.vx-social-tile > svg{ font-size: 1rem !important; line-height: 1 !important; }
.vx-social-tile:hover{
    transform: translateY(-2px);
    filter: brightness(1.10);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.vx-social-tile.brand-whatsapp,
.vx-social-tile.brand-telegram,
.vx-social-tile.brand-facebook,
.vx-social-tile.brand-x,
.vx-social-tile.brand-twitter,
.vx-social-tile.brand-instagram,
.vx-social-tile.brand-discord,
.vx-social-tile.brand-youtube,
.vx-social-tile.brand-linkedin,
.vx-social-tile.brand-tiktok,
.vx-social-tile.brand-pinterest,
.vx-social-tile.brand-reddit,
.vx-social-tile.brand-github,
.vx-social-tile.brand-skype,
.vx-social-tile.brand-vk{
    border-color: transparent !important;
}
.vx-social-tile.brand-whatsapp,
.vx-social-tile.brand-whatsapp > i,
.vx-social-tile.brand-whatsapp > svg,
.vx-social-tile.brand-telegram,
.vx-social-tile.brand-telegram > i,
.vx-social-tile.brand-telegram > svg,
.vx-social-tile.brand-facebook,
.vx-social-tile.brand-facebook > i,
.vx-social-tile.brand-facebook > svg,
.vx-social-tile.brand-x,
.vx-social-tile.brand-x > i,
.vx-social-tile.brand-x > svg,
.vx-social-tile.brand-twitter,
.vx-social-tile.brand-twitter > i,
.vx-social-tile.brand-twitter > svg,
.vx-social-tile.brand-instagram,
.vx-social-tile.brand-instagram > i,
.vx-social-tile.brand-instagram > svg,
.vx-social-tile.brand-discord,
.vx-social-tile.brand-discord > i,
.vx-social-tile.brand-discord > svg,
.vx-social-tile.brand-youtube,
.vx-social-tile.brand-youtube > i,
.vx-social-tile.brand-youtube > svg,
.vx-social-tile.brand-linkedin,
.vx-social-tile.brand-linkedin > i,
.vx-social-tile.brand-linkedin > svg,
.vx-social-tile.brand-tiktok,
.vx-social-tile.brand-tiktok > i,
.vx-social-tile.brand-tiktok > svg,
.vx-social-tile.brand-pinterest,
.vx-social-tile.brand-pinterest > i,
.vx-social-tile.brand-pinterest > svg,
.vx-social-tile.brand-reddit,
.vx-social-tile.brand-reddit > i,
.vx-social-tile.brand-reddit > svg,
.vx-social-tile.brand-github,
.vx-social-tile.brand-github > i,
.vx-social-tile.brand-github > svg,
.vx-social-tile.brand-skype,
.vx-social-tile.brand-skype > i,
.vx-social-tile.brand-skype > svg,
.vx-social-tile.brand-vk,
.vx-social-tile.brand-vk > i,
.vx-social-tile.brand-vk > svg{ color: #ffffff !important; }

.vx-social-tile.brand-whatsapp { background: #25D366 !important; }
.vx-social-tile.brand-telegram { background: linear-gradient(135deg, #2AABEE, #229ED9) !important; }
.vx-social-tile.brand-facebook { background: #1877F2 !important; }
.vx-social-tile.brand-x        { background: #000000 !important; }
.vx-social-tile.brand-twitter  { background: #1DA1F2 !important; }
.vx-social-tile.brand-instagram{ background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
.vx-social-tile.brand-discord  { background: #5865F2 !important; }
.vx-social-tile.brand-youtube  { background: #FF0000 !important; }
.vx-social-tile.brand-linkedin { background: #0A66C2 !important; }
.vx-social-tile.brand-tiktok   { background: linear-gradient(135deg, #25F4EE 0%, #000000 50%, #FE2C55 100%) !important; }
.vx-social-tile.brand-pinterest{ background: #E60023 !important; }
.vx-social-tile.brand-reddit   { background: #FF4500 !important; }
.vx-social-tile.brand-github   { background: #181717 !important; }
.vx-social-tile.brand-skype    { background: #00AFF0 !important; }
.vx-social-tile.brand-vk       { background: #0077FF !important; }
.vx-social-tile.brand-snapchat { background: #FFFC00 !important; border-color: transparent !important; }
.vx-social-tile.brand-snapchat,
.vx-social-tile.brand-snapchat > i,
.vx-social-tile.brand-snapchat > svg{ color: #000000 !important; }
.vx-social-tile.brand-default  { background: var(--accent) !important; color: var(--accent-fg, #fff) !important; border-color: transparent !important; }
.vx-social-tile.brand-default > i,
.vx-social-tile.brand-default > svg{ color: var(--accent-fg, #fff) !important; }

i.fal{
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 300 !important;
}

/* 4. Modal body white-background override -------------------------------- */
.modal-body{
    background: var(--card, #fff) !important;
    color: var(--fg) !important;
}
.modal-content{
    background: var(--card, #fff) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
}
.modal-header,
.modal-footer{
    background: var(--card-2, var(--card, #fff)) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
}
.modal-title{ color: var(--fg) !important; }
.modal .close,
.modal .btn-close{
    color: var(--fg) !important;
    opacity: .8;
    text-shadow: none !important;
    filter: none !important;
}
.modal .close:hover,
.modal .btn-close:hover{ opacity: 1; }

/* keep the tall mobile-modal exception sane in dark */
@media (max-width: 992px){
    .modal-body{
        height: calc(100vh - 0px);
        background: var(--bg) !important;
    }
    .modal-dialog,
    .modal-content{
        background: var(--bg) !important;
    }
}

/* 5. Bootstrap custom-control-label & custom-checkbox in dark/light ------ */
.custom-control{ padding-left: 1.65rem; min-height: 1.4rem; }
.custom-control-label{
    color: var(--fg) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}
.custom-control-label::before{
    background-color: var(--card, #fff) !important;
    border: 1.5px solid var(--border-strong, var(--border)) !important;
    border-radius: 4px !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    top: .18rem !important;
    left: -1.55rem !important;
    transition: background .15s ease, border-color .15s ease;
}
.custom-control-input:checked ~ .custom-control-label::before{
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.custom-control-label::after{
    width: 1.05rem !important;
    height: 1.05rem !important;
    top: .18rem !important;
    left: -1.55rem !important;
}
.custom-control-input:focus ~ .custom-control-label::before{
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before{
    background-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
    border-color: var(--accent) !important;
}

/* "Want to use frequently" yellow tile — keep yellow but readable in dark */
.form-group .custom-control.custom-checkbox{ position: relative; }
[style*="background: #ffc107"] .custom-control-label,
[style*="background:#ffc107"] .custom-control-label{
    color: #1a1a1a !important;
    font-weight: 600 !important;
}
[style*="background: #ffc107"] .custom-control-label::before,
[style*="background:#ffc107"] .custom-control-label::before{
    background-color: #fff !important;
    border-color: rgba(0,0,0,.35) !important;
}

/* 6. Place-order layout polish (card + summary + button) ----------------- */
.card-place-retail-order{
    background: var(--card) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: clamp(.85rem, 2vw, 1.25rem) !important;
}
.card-place-retail-order .form-group label{
    color: var(--fg) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
}
.card-place-retail-order .form-control{
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
.card-place-retail-order .form-control:focus{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
.card-place-retail-order .text-muted,
.card-place-retail-order .font-normal{ color: var(--text-muted, var(--muted)) !important; }
.card-place-retail-order .order-total{
    color: var(--success, #2e7d32) !important;
    font-weight: 700 !important;
}
.placeorder.btn-primary{
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-fg, #fff) !important;
    border-radius: 10px !important;
    padding: .7rem 1rem !important;
    font-weight: 600 !important;
}
.placeorder.btn-primary:hover{ filter: brightness(1.06); }

/* 7. .alert.addedtocart that always rendered display:block empty bar ---- */
.alert.addedtocart:empty{ display: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.alert.addedtocart{
    background: var(--accent-soft) !important;
    color: var(--fg) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 8px !important;
}

/* 8. progress-bar minimal fallback --------------------------------------- */
.progress{
    background: var(--card-2, var(--card)) !important;
    border-radius: 999px !important;
    overflow: hidden;
}
.progress-bar{ transition: width .3s ease; }

.nav-item-curlang .nav-link .fi,
.nav-item-curlang .nav-link .flag{
    width: 1.45em !important;
    height: 1.05em !important;
    margin-right: .4rem !important;
    vertical-align: -.18em !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px var(--border, rgba(0,0,0,.1)), inset 0 0 0 1px rgba(255,255,255,.15) !important;
}
[dir="rtl"] .nav-item-curlang .nav-link .fi,
[dir="rtl"] .nav-item-curlang .nav-link .flag{
    margin-right: 0 !important;
    margin-left: .4rem !important;
}
.dropdown-menu.language{
    background: var(--card, #fff) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: .35rem !important;
    min-width: 14rem !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
}
.dropdown-menu.language .dropdown-item{
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .45rem .65rem !important;
    border-radius: 6px !important;
    color: var(--fg) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    transition: background .15s ease, color .15s ease;
}
.dropdown-menu.language .dropdown-item .fi,
.dropdown-menu.language .dropdown-item .flag{
    width: 1.45em !important;
    height: 1.05em !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px var(--border, rgba(0,0,0,.1)), inset 0 0 0 1px rgba(255,255,255,.15) !important;
}
.dropdown-menu.language .dropdown-item.mr-3,
.dropdown-menu.language .dropdown-item .mr-3{ margin-right: 0 !important; }
.dropdown-menu.language .dropdown-item:hover{
    background: var(--accent-soft, rgba(37,99,235,.10)) !important;
    color: var(--accent) !important;
}
.dropdown-menu.language .dropdown-item.active,
.dropdown-menu.language .dropdown-item:focus{
    background: var(--accent) !important;
    color: var(--accent-fg, #fff) !important;
}