/* === DIGITAL AURA — light theme application layer ===
   Consumes css/panel/cerulean/tokens.css. Loaded AFTER the theme style.css so
   it overrides the legacy dark styling. Reversible: remove the <link> in
   header.twig (or this file) to fully restore the previous look. */

/* ---------- Base / typography ---------- */
body{
  background:var(--bg-page) !important;
  color:var(--text-primary);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--font-heading);
  color:var(--text-primary);
  font-weight:600;
}
a{ color:var(--primary-600); }
a:hover{ color:var(--primary-700); }
code,.order-id,.price,.mono{ font-family:var(--font-mono); }
.app-content{ background:var(--bg-page); color:var(--text-primary); }
.text-muted{ color:var(--text-muted) !important; }

/* ---------- Surfaces / cards ---------- */
.g-card,.card,.panel,.panel-default,.dash-list,.modal-content{
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-header,.panel-heading{
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);
  font-family:var(--font-heading);
  font-weight:600;
}

/* ---------- Buttons ---------- */
.btn{
  border-radius:var(--radius-md);
  font-family:var(--font-heading);
  font-weight:600;
  border:1px solid transparent;
  transition:background var(--transition,.15s ease),
             box-shadow var(--transition,.15s ease),
             transform var(--transition,.15s ease);
}
.btn:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; }
.btn-primary{ background:var(--primary-600); border-color:var(--primary-600); color:var(--text-inverse); }
.btn-primary:hover{ background:var(--primary-700); border-color:var(--primary-700); box-shadow:var(--shadow-glow); }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-success{ background:var(--success); border-color:var(--success); color:#fff; }
.btn-default,.btn-secondary{ background:var(--bg-elevated); border-color:var(--border-subtle); color:var(--text-primary); }
/* Accent CTA (pink→amber gradient) */
.btn-accent,.btn-cta{ background:var(--accent-gradient); color:#fff; border:none; }
.btn-accent:hover,.btn-cta:hover{ filter:brightness(1.05); color:#fff; }

/* ---------- Forms ---------- */
.form-control,.input-style .form-control,.dfb-input{
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
}
.form-control::placeholder,.dfb-input::placeholder{ color:var(--text-muted); }
.form-control:focus{ border-color:var(--border-focus); box-shadow:0 0 0 3px var(--primary-50); }
label,.control-label{ color:var(--text-secondary); font-weight:500; }
.input-group-text{ background:var(--bg-elevated); border:1px solid var(--border-subtle); color:var(--text-secondary); }

/* ---------- Tables ---------- */
.table{ color:var(--text-primary); }
.table thead th,.table th{ color:var(--text-secondary); border-bottom:1px solid var(--border-subtle); font-family:var(--font-heading); }
.table td{ border-color:var(--border-subtle); }
/* the services table is markup-tagged text-white for the old dark theme; force readable text on the new light surface */
.table.services.text-white,.table.services.text-white td,.table.services.text-white th{ color:var(--text-primary) !important; }
.table.services .service-category td{ color:var(--text-secondary) !important; font-family:var(--font-heading); }

/* ---------- Status badges ---------- */
.ordStatus{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; border-radius:var(--radius-full);
  font-size:.8rem; font-weight:600;
}

/* ---------- Navigation: topbar + sidebar ---------- */
.navbar.navbar-dark,.navbar-dark{ background:var(--bg-surface) !important; border-bottom:1px solid var(--border-subtle); }
.navbar-dark .navbar-brand{ color:var(--text-primary) !important; font-family:var(--font-heading); }
.navbar-dark .navbar-nav .nav-link{ color:var(--text-secondary) !important; }
.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-item.active .nav-link{ color:var(--primary-600) !important; }
.navbar-toggler{ border-color:var(--border-subtle); }
.app-sidebar{ background:var(--bg-surface); border-right:1px solid var(--border-subtle); color:var(--text-primary); }
.sidebar-menu a,.sidebar-content a{ color:var(--text-secondary); }
.sidebar-menu a:hover,.sidebar-menu .active a{ color:var(--primary-600); }

/* ---------- Footer (was dark) ---------- */
.footer{ background:var(--bg-elevated); color:var(--text-secondary); }
.footer .text-white,.footer .text-white-50,.copyright .text-white-50{ color:var(--text-secondary) !important; }
.footer a{ color:var(--text-secondary); }
.footer a:hover{ color:var(--primary-600); }

/* ---------- WhatsApp FAB + Telegram topbar link ---------- */
.wa-fab{ position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:var(--radius-full); background:var(--whatsapp); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:28px; box-shadow:var(--shadow-lg); z-index:9990; text-decoration:none; animation:wa-pulse 2s infinite; }
.wa-fab:hover,.wa-fab:focus{ color:#fff; filter:brightness(1.05); }
.wa-fab:focus-visible{ outline:3px solid rgba(37,211,102,.5); outline-offset:2px; }
@keyframes wa-pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (max-width:575.98px){ .wa-fab{ width:48px; height:48px; font-size:24px; right:14px; bottom:14px; } }
.tg-support{ color:var(--telegram) !important; font-weight:600; }
.tg-support:hover{ filter:brightness(.92); }

/* ===== Phase 3B Step 3: defensive light-theme hardening + hero + platform colors ===== */
/* Rule 1: legacy light-on-dark text becomes dark on the new light bg.
   Exclude colored-bg components (buttons, badges, alerts, ticket bubbles, FAB). */
.app-content .text-white:not(.btn):not(.badge),
.app-content .text-white-50:not(.btn):not(.badge),
.g-card .text-white:not(.btn):not(.badge), .card .text-white:not(.btn):not(.badge),
.panel .text-white:not(.btn):not(.badge), .text-light:not(.btn){ color:var(--text-primary) !important; }
/* Rule 4: dark bootstrap utilities flipped to light surfaces */
.bg-dark,.bg-darker,.bg-gray{ background:var(--bg-surface) !important; color:var(--text-primary) !important; }
.navbar-light{ background:var(--bg-surface) !important; }
/* Hero (home / marketing) */
.hero,.home-hero,.app-hero,.banner-area{
  background:linear-gradient(135deg,var(--bg-hero-start) 0%,var(--bg-hero-end) 100%);
  color:var(--text-primary); border-radius:var(--radius-xl);
}
.hero h1,.home-hero h1,.app-hero h1{ font-family:var(--font-heading); font-weight:700; color:var(--text-primary); }
.hero p,.home-hero p,.app-hero p{ font-family:var(--font-body); color:var(--text-secondary); }
/* Platform color utilities for icon grids (the 16 social brand colors) */
.pf-instagram{color:var(--instagram)} .pf-tiktok{color:var(--tiktok)} .pf-youtube{color:var(--youtube)}
.pf-facebook{color:var(--facebook)} .pf-telegram{color:var(--telegram)} .pf-whatsapp{color:var(--whatsapp)}
.pf-twitter{color:var(--twitter)} .pf-linkedin{color:var(--linkedin)} .pf-twitch{color:var(--twitch)}
.pf-spotify{color:var(--spotify)} .pf-snapchat{color:#111} .pf-discord{color:var(--discord)}
.pf-pinterest{color:var(--pinterest)} .pf-reddit{color:var(--reddit)} .pf-soundcloud{color:var(--soundcloud)} .pf-threads{color:var(--threads)}

/* ===== Phase 3B Step 4: auth card + CTA sections + testimonials ===== */
.bg-pattern{ background:var(--accent-gradient) !important; color:#fff !important; border-radius:var(--radius-xl); }
.bg-pattern .text-white{ color:#fff !important; }
.g-card.espece{ max-width:460px; margin:0 auto; box-shadow:var(--shadow-lg); border-radius:var(--radius-xl); }
.testimonial{ background:var(--bg-surface) !important; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); color:var(--text-primary); }
.secure-payment{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); }
.feature{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:var(--space-3); color:var(--text-primary); }
.btn-dark{ background:var(--primary-600) !important; border-color:var(--primary-600); color:#fff !important; }
.btn-dark-outline{ background:var(--bg-surface); border:1px solid var(--primary-600); color:var(--primary-600); }

/* ===== Phase 3B Step 5: dashboard stat cards + quick actions + announcements ===== */
.stat-card{ border-radius:var(--radius-lg); padding:var(--space-5); color:var(--text-inverse); box-shadow:var(--shadow-md); }
.stat-card .stat-value{ font-family:var(--font-mono); font-size:36px; font-weight:700; line-height:1.1; }
.stat-card .stat-label{ font-size:14px; opacity:.9; }
.stat-card--primary{ background:var(--primary-500); }
.stat-card--accent{ background:var(--accent-gradient); }
.stat-card--success{ background:var(--success); }
.stat-card--warning{ background:var(--warning); }
.quick-action{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); transition:box-shadow var(--transition,.15s ease),transform var(--transition,.15s ease); }
.quick-action:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.announcement{ background:var(--warning-bg); color:#92610a; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); border:1px solid #fde68a; }

/* ===== Phase 3B Step 6: services platform icon slot + new-order step wizard ===== */
.svc-platform{ display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; margin-right:.45rem; font-size:18px; vertical-align:middle; }
.order-wizard{ display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; margin-bottom:var(--space-4); }
.order-wizard .step{ display:inline-flex; align-items:center; gap:.5rem; color:var(--text-muted); font-weight:600; }
.order-wizard .step .num{ width:28px; height:28px; border-radius:var(--radius-full); background:var(--bg-elevated); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); }
.order-wizard .step.active{ color:var(--primary-600); }
.order-wizard .step.active .num{ background:var(--primary-500); color:#fff; }
.order-wizard .step.done .num{ background:var(--success); color:#fff; }
.order-wizard .bar{ flex:1 1 16px; height:2px; background:var(--border-subtle); }
.wizard-card{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-5); }
/* the legacy neworder example grid (.sira/.hucre) -> readable light cells */
.sira{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.hucre{ color:var(--text-primary); }

/* ===== Phase 3B Step 7: orders / add funds / tickets ===== */
/* Filter chips (horizontal scroll on mobile) */
.filter-chips{ display:flex; gap:var(--space-2); overflow-x:auto; padding-bottom:var(--space-2); -webkit-overflow-scrolling:touch; }
.chip{ flex:0 0 auto; border-radius:var(--radius-full); padding:.35rem .9rem; background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border-subtle); font-weight:600; cursor:pointer; }
.chip.active{ background:var(--primary-50); color:var(--primary-600); border-color:var(--primary-500); }
/* Semantic status badges (pill, icon+text) */
.badge-pending,.status-pending,.badge-processing,.status-processing,.badge-completed,.status-completed,
.badge-partial,.status-partial,.badge-canceled,.badge-cancelled,.status-canceled{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem;
  border-radius:var(--radius-full); font-size:.8rem; font-weight:600;
}
.badge-pending,.status-pending{ background:var(--warning-bg); color:#92610a; }
.badge-processing,.status-processing{ background:var(--info-bg); color:#1e40af; }
.badge-completed,.status-completed{ background:var(--success-bg); color:#065f46; }
.badge-partial,.status-partial{ background:#fce7f3; color:var(--accent-600); }
.badge-canceled,.badge-cancelled,.status-canceled{ background:var(--danger-bg); color:#991b1b; }
/* Add funds method tiles + amount buttons + summary */
.pay-method,.method-tile{ min-height:64px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; padding:var(--space-3); transition:background var(--transition,.15s ease),border-color var(--transition,.15s ease); }
.pay-method:hover,.method-tile:hover{ background:var(--primary-50); }
.pay-method.selected,.method-tile.selected{ background:var(--primary-50); border-color:var(--primary-500); }
.amount-btn{ background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-md); min-height:44px; color:var(--text-primary); }
.amount-btn:hover{ background:var(--primary-50); }
.summary-card{ background:var(--bg-elevated); border-radius:var(--radius-md); padding:var(--space-4); }
/* Ticket chat bubbles (existing markup: right=user, left=support) */
.ticket-message-right .message{ background:var(--primary-500) !important; color:#fff !important; border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); }
.ticket-message-left .message{ background:var(--bg-elevated) !important; color:var(--text-primary) !important; border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; }
.ticket-title{ color:var(--primary-600) !important; border-color:var(--primary-500) !important; }

/* ================================================================
   PHASE 3B POLISH ? corrections visibilit?/contraste/responsive
   Cible les vraies classes cerulean. !important car le style.css
   legacy applique des fonds sombres via --primary-color/--form-bg-color.
   R?versible : retirer ce bloc ou le lien aura.css.
   ================================================================ */

/* ---- P1.1 Inputs / selects / textarea ---- */
.form-control, select, textarea, .dfb-input,
.app-content .form-control, .dropdown .form-control{
  background:#ffffff !important; color:#0f172a !important;
  border:2px solid #e2e8f0 !important; border-radius:10px !important;
}
.form-control::placeholder, textarea::placeholder, .dfb-input::placeholder{ color:#94a3b8 !important; }
.form-control:focus, select:focus, textarea:focus{
  border-color:#6366f1 !important; box-shadow:0 0 0 3px rgba(99,102,241,.15) !important; outline:none !important;
}
.input-group.input-style{ background:#ffffff !important; border:1px solid #e2e8f0 !important; }
.input-group.input-style .input-group-text{ background:#ffffff !important; color:#475569 !important; }

/* ---- P1.2 Labels ---- */
label, .control-label{ color:#475569 !important; font-weight:500; margin-bottom:6px; display:block; }

/* ---- P1.3 En-tete tableau Services ---- */
.table.services thead th, .table.services th{
  background:#f8fafc !important; color:#475569 !important; border-bottom:2px solid #e2e8f0 !important;
}

/* ---- P1.4/5 Zones de contenu : tuer le fond bleu (--primary-color #001958) ---- */
.app-content, #page-content-wrapper, .main-panel, .content-wrapper{ background:#f8f9fc !important; }
.app-content .table{ background:#ffffff; }
.app-content .table td{ color:#0f172a; border-color:#e2e8f0; }
.app-content .table thead th{ background:#f8fafc; color:#475569; }
.app-content .table tbody tr:hover{ background:#f8fafc; }

/* ---- P1.6 Child Panels : texte jaune + prix blanc inline ---- */
.btn-popup{ color:#4f46e5 !important; font-weight:600; }
.us-item-d.mydiv a, .us-item-d.mydiv a i{ color:#0f172a !important; }
.us-item-d.mydiv a i{ font-weight:700; }

/* ---- P1.7 Terms : texte rouge agressif -> sombre ---- */
[style*="#f50000"], [style*="f50000"], [style*="color:red"]{ color:#0f172a !important; }
.g-card-body h2, .g-card-body h3{ color:#4f46e5; }

/* ---- P1.8 Page API : tableaux + code visibles ---- */
.g-card.api{ color:#0f172a !important; }
.api .table.table-bordered th{ background:#0f172a !important; color:#ffffff !important; border-color:#0f172a; }
.api .table.table-bordered td{ color:#0f172a !important; background:#ffffff; border-color:#e2e8f0; }
.api .table.table-bordered tr:nth-child(even) td{ background:#f8fafc; }
.api pre, .api code{
  background:#1e293b !important; color:#e2e8f0 !important; border-radius:12px;
  padding:18px !important; font-family:var(--font-mono); font-size:13px; line-height:1.7; overflow-x:auto;
}

/* ---- P2.12 (copyright) handled in footer.twig ---- */

/* ---- P3.14 Stats cards : grille auto-fit ---- */
.u-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

/* ---- P3.15 Sidebar adaptatif : enleve le gap 280px et passe en drawer mobile ---- */
@media (max-width:767.98px){
  .app-content{ padding-left:16px !important; padding-right:16px !important; }
  .app-sidebar{ position:fixed; left:-280px; top:0; height:100vh; z-index:1000; transition:left .3s ease; box-shadow:4px 0 20px rgba(0,0,0,.15); }
  .app-sidebar.show, .app-sidebar.active, .app-sidebar.open{ left:0; }
}
@media (min-width:768px) and (max-width:1199.98px){
  .app-content{ padding-left:96px !important; }
  .app-sidebar{ width:84px; overflow:hidden; }
}

/* ---- P3.16/17 Tableaux + filtres scroll ---- */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:767.98px){
  .filter-chips, .filters-bar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .filter-chips::-webkit-scrollbar, .filters-bar::-webkit-scrollbar{ display:none; }
}

/* ---- P4.18 Boutons hover ---- */
.btn-primary, .btn-success, .btn-danger, .btn-accent, .btn-dark{ transition:all .2s ease; }
.btn-primary:hover, .btn-success:hover, .btn-accent:hover, .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(79,70,229,.28); }

/* ---- P4.19 Cartes hover ---- */
.g-card, .us-item, .quick-action, .testimonial{ transition:transform .2s ease, box-shadow .2s ease; }
.g-card:hover, .us-item:hover, .quick-action:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.12); }

/* ---- P4.20 Animation d'entree fadeInUp sur les stats ---- */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
.us-item{ animation:fadeInUp .5s ease forwards; }
.us-item:nth-child(1){ animation-delay:.05s; } .us-item:nth-child(2){ animation-delay:.15s; }
.us-item:nth-child(3){ animation-delay:.25s; } .us-item:nth-child(4){ animation-delay:.35s; }

/* ---- P4.21 Glassmorphism leger sur les flottants ---- */
.dropdown-content, .dropdown-menu, .app-header{ background:rgba(255,255,255,.9) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
/* ================================================================ */

/* ====================================================================
   PHASE 4B ? PREMIUM MOTION & MICRO-INTERACTIONS
   GPU-accelerated (transform/opacity), <=300ms, no JS animation libs.
   Reversible: remove this block. Honors prefers-reduced-motion (bottom).
   ==================================================================== */

/* ---- 1. Premium buttons: glow + elevation + ripple host ---- */
.btn{ position:relative; overflow:hidden; will-change:transform;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.btn-primary:hover, .btn-accent:hover, .btn-cta:hover{ transform:translateY(-2px); box-shadow:var(--glow-primary); }
.btn-accent:hover, .btn-cta:hover{ box-shadow:var(--glow-accent); }
.btn-primary:active, .btn-accent:active, .btn-success:active, .btn-danger:active{ transform:translateY(0) scale(.98); }
.btn-success:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,185,129,.28); }
.btn-danger:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(239,68,68,.26); }
/* Ripple element injected by footer.twig JS */
.lola-ripple{ position:absolute; border-radius:50%; transform:scale(0); opacity:.45;
  background:rgba(255,255,255,.6); pointer-events:none; animation:lolaRipple 600ms var(--ease-out); }
@keyframes lolaRipple{ to{ transform:scale(2.4); opacity:0; } }

/* ---- 2. Dashboard cards: lift + gradient border + glass highlight ---- */
.g-card, .us-item, .quick-action, .stat-card{ will-change:transform; }
.us-item{ position:relative; isolation:isolate; }
.us-item::before{ /* gradient border */ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--accent-gradient); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity var(--dur-3) var(--ease-out); z-index:-1; }
.us-item::after{ /* glass highlight sweep */ content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.25),rgba(255,255,255,0) 40%); opacity:0; transition:opacity var(--dur-3) var(--ease-out); pointer-events:none; }
.us-item:hover{ transform:translateY(-4px); box-shadow:var(--elevation-3); }
.us-item:hover::before, .us-item:hover::after{ opacity:1; }
.g-card:hover, .quick-action:hover{ transform:translateY(-3px); box-shadow:var(--elevation-2); }

/* ---- 3. Sidebar: animated active indicator + premium hover + collapse ---- */
.app-sidebar{ transition:width var(--dur-4) var(--ease-in-out); }
.sidebar-menu li > a.menu-link, .sidebar-menu li > a{ position:relative; display:flex; align-items:center; gap:12px;
  border-radius:10px; transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.sidebar-menu li > a .menu-icon{ transition:transform var(--dur-2) var(--ease-spring); }
.sidebar-menu li > a:hover{ background:var(--primary-50); transform:translateX(2px); }
.sidebar-menu li > a:hover .menu-icon{ transform:scale(1.12); }
.sidebar-menu li.active > a{ background:var(--primary-50); color:var(--primary-600); }
.sidebar-menu li.active > a::before{ content:""; position:absolute; left:0; top:50%; height:0; width:3px; border-radius:3px;
  background:var(--primary-500); transform:translateY(-50%); transition:height var(--dur-3) var(--ease-spring); }
.sidebar-menu li.active > a::before{ height:60%; }
/* Collapsible (consumes .is-collapsed on .app-sidebar) */
.app-sidebar.is-collapsed{ width:var(--sidebar-w-rail,72px); }
.app-sidebar.is-collapsed .menu-text, .app-sidebar.is-collapsed .nav-group__label{ opacity:0; width:0; overflow:hidden; }
.app-sidebar .menu-text{ transition:opacity var(--dur-2) var(--ease-out); }

/* ---- 4. Tables: smooth row hover + sticky headers ---- */
.table tbody tr{ transition:background var(--dur-1) var(--ease-out); }
.table tbody tr:hover{ background:var(--primary-50); }
.table thead th{ position:sticky; top:0; z-index:2; background:#f8fafc; }
.table td, .table th{ padding-top:.65rem; padding-bottom:.65rem; }

/* ---- 5. Forms: premium focus + validation + floating labels ---- */
.form-control, select, textarea{ transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.form-control:focus, select:focus, textarea:focus{ box-shadow:0 0 0 4px rgba(99,102,241,.15) !important; }
.is-invalid, .form-control.is-invalid{ border-color:var(--danger) !important; animation:lolaShake var(--dur-4) var(--ease-out); }
.is-valid, .form-control.is-valid{ border-color:var(--success) !important; }
@keyframes lolaShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
/* Floating label pattern (use .form-floating > .form-control + label) */
.form-floating{ position:relative; }
.form-floating > .form-control{ height:54px; padding:18px 14px 6px; }
.form-floating > label{ position:absolute; top:0; left:14px; height:100%; display:flex; align-items:center;
  color:var(--text-muted); pointer-events:none; transform-origin:0 0; transition:transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label{ transform:translateY(-12px) scale(.8); color:var(--primary-600); }

/* ---- 6. Loading states: skeleton + shimmer ---- */
.skeleton{ position:relative; overflow:hidden; background:var(--bg-elevated); border-radius:var(--radius-md); }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:lolaShimmer 1.2s infinite; }
.skeleton-text{ height:12px; margin:6px 0; }
.skeleton-title{ height:20px; width:40%; }
@keyframes lolaShimmer{ 100%{ transform:translateX(100%); } }

/* ---- 7. Page transitions: fade-in + slide-up (no layout shift) ---- */
.app-content, .app-container > .app-content{ animation:lolaReveal var(--dur-4) var(--ease-out) both; }
@keyframes lolaReveal{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.reveal-on-scroll{ opacity:0; transform:translateY(16px); }
.reveal-on-scroll.is-visible{ opacity:1; transform:translateY(0); transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }

/* ---- 8. Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .us-item:hover, .g-card:hover, .btn:hover, .quick-action:hover{ transform:none !important; }
  .lola-ripple{ display:none !important; }
}
/* ==================================================================== */

/* ====================================================================
   PHASE 4C ? WOW EXPERIENCE (frontend only, GPU, reduced-motion safe)
   Reversible: remove this block. Long ambient loops are disabled by the
   prefers-reduced-motion guard added in Phase 4B.
   ==================================================================== */

/* ---- Hero with animated gradient + depth ---- */
.wow-hero{ position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--wow-hero-1),var(--wow-hero-2) 55%,var(--wow-hero-3));
  background-size:180% 180%; animation:wowGradient 14s var(--ease-in-out) infinite; }
@keyframes wowGradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.wow-hero__inner{ position:relative; z-index:2; }

/* ---- Floating particles (DOM spans injected by footer.twig JS) ---- */
.wow-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.wow-particle{ position:absolute; bottom:-20px; width:10px; height:10px; border-radius:50%;
  background:var(--particle); will-change:transform,opacity; animation:wowFloat linear infinite; }
@keyframes wowFloat{ 0%{ transform:translateY(0) scale(.6); opacity:0 } 12%{ opacity:1 }
  100%{ transform:translateY(-120vh) scale(1.1); opacity:0 } }

/* ---- Floating social reactions (hearts / likes / shares) ---- */
.wow-reactions{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.wow-reaction{ position:absolute; bottom:-10%; font-size:22px; opacity:0; will-change:transform,opacity;
  animation:wowRise 7s var(--ease-out) infinite; }
.wow-reaction--like{ color:var(--primary-500) } .wow-reaction--heart{ color:var(--accent-500) } .wow-reaction--share{ color:var(--info) }
@keyframes wowRise{ 0%{ transform:translateY(0) scale(.7); opacity:0 } 15%{ opacity:.9 }
  70%{ opacity:.9 } 100%{ transform:translateY(-60vh) scale(1.05); opacity:0 } }

/* ---- Platform marquee (trending / supported services) ---- */
.wow-marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.wow-marquee__track{ display:flex; gap:var(--space-8); width:max-content; animation:wowMarquee 32s linear infinite; }
.wow-marquee:hover .wow-marquee__track{ animation-play-state:paused; }
.wow-marquee__item{ display:inline-flex; align-items:center; gap:.5rem; color:var(--text-secondary); font-weight:600; white-space:nowrap; }
.wow-marquee__item i{ font-size:24px; }
@keyframes wowMarquee{ to{ transform:translateX(-50%) } }

/* ---- Trust badges ---- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }
.trust-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:var(--radius-full);
  background:var(--bg-surface); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); font-weight:600; color:var(--text-secondary); }
.trust-badge i{ color:var(--primary-600); }
.trust-badge--pulse i{ animation:wowPulse 2.4s var(--ease-in-out) infinite; }
@keyframes wowPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.18) } }

/* ---- Live counter strip (uses [data-count] from footer JS) ---- */
.wow-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); }
.wow-stat{ text-align:center; padding:var(--space-4); }
.wow-stat__value{ font-family:var(--font-mono); font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; color:var(--text-primary); line-height:1.1; }
.wow-stat__label{ color:var(--text-secondary); font-size:var(--fs-sm); margin-top:.25rem; }

/* ---- Premium KPI on dashboard stat cards ---- */
.us-item .ui-text{ font-family:var(--font-mono); font-weight:700; }
.us-item .ui-title{ letter-spacing:.02em; }

/* ---- Activity timeline ---- */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:""; position:absolute; left:10px; top:4px; bottom:4px; width:2px; background:var(--border-subtle); }
.timeline__item{ position:relative; padding:0 0 var(--space-4) 0; }
.timeline__item::before{ content:""; position:absolute; left:-23px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--bg-surface); border:2px solid var(--primary-500); }
.timeline__item--success::before{ border-color:var(--success) } .timeline__item--warn::before{ border-color:var(--warning) }

/* ---- Empty states ---- */
.empty-state{ text-align:center; padding:var(--space-10) var(--space-4); color:var(--text-secondary); }
.empty-state__icon{ font-size:48px; color:var(--text-muted); margin-bottom:var(--space-3); }
.empty-state__title{ font-family:var(--font-heading); font-weight:600; color:var(--text-primary); margin-bottom:.25rem; }

/* ---- Smart onboarding blocks ---- */
.onboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); }
.onboard__step{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-5); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.onboard__step:hover{ transform:translateY(-3px); box-shadow:var(--elevation-2); }
.onboard__num{ width:32px; height:32px; border-radius:50%; background:var(--primary-50); color:var(--primary-600);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; margin-bottom:var(--space-3); }

/* ---- Smart quick actions ---- */
.quick-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3); }
.quick-action__tile{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:var(--space-4);
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); color:var(--text-primary);
  text-decoration:none; transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.quick-action__tile:hover{ transform:translateY(-3px); box-shadow:var(--elevation-2); color:var(--primary-600); }
.quick-action__tile i{ font-size:26px; color:var(--primary-600); }

/* ---- Provider health indicators (admin / status) ---- */
.health-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; position:relative; }
.health-dot--ok{ background:var(--health-ok) } .health-dot--warn{ background:var(--health-warn) } .health-dot--down{ background:var(--health-down) }
.health-dot--ok::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--health-ok); opacity:.5; animation:wowPing 1.8s var(--ease-out) infinite; }
@keyframes wowPing{ 0%{ transform:scale(.8); opacity:.6 } 100%{ transform:scale(1.8); opacity:0 } }

/* ---- Lightweight CSS charts (no library) ---- */
.bar-chart{ display:flex; align-items:flex-end; gap:6px; height:120px; }
.bar-chart .bar{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(var(--primary-500),var(--primary-600)); transform-origin:bottom; animation:wowGrow var(--dur-4) var(--ease-out) both; }
@keyframes wowGrow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.sparkline{ height:40px; display:block; width:100%; }

/* ---- Scroll-reveal stagger helpers ---- */
.reveal-on-scroll.d1{ transition-delay:.05s } .reveal-on-scroll.d2{ transition-delay:.12s } .reveal-on-scroll.d3{ transition-delay:.19s } .reveal-on-scroll.d4{ transition-delay:.26s }
/* ==================================================================== */

/* ====================================================================
   VISUAL POLISH PASS ? refine only (no new features/sections/animations)
   Loaded last so it overrides earlier 4A/4B/4C rules. Reversible.
   Goal: calmer, premium, 2026 SaaS. Removes cheap/dated tells, tightens
   spacing, strengthens hierarchy and readability.
   ==================================================================== */

/* 1. Remove the cheapest element entirely: floating emoji reactions */
.wow-reactions{ display:none !important; }

/* 2. Particles: keep, but barely-there ambient (less is more) */
.wow-particle{ background:rgba(99,102,241,.10) !important; }

/* 3. Hero: calmer gradient, real container, soft definition */
.wow-hero{ animation-duration:28s !important; background-size:135% 135% !important;
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem,4vw,3rem) !important; max-width:var(--container-max,1320px); margin-inline:auto !important; }

/* 4. Trust badges: drop the pulse, refine the chip */
.trust-badge--pulse i{ animation:none !important; }
.trust-badge{ padding:.5rem 1rem; color:var(--text-secondary); }
.trust-strip{ gap:var(--space-2); margin-top:var(--space-5) !important; }

/* 5. Buttons: neon glow -> clean elevation; subtler press */
.btn-primary:hover, .btn-accent:hover, .btn-cta:hover,
.btn-success:hover, .btn-danger:hover{ box-shadow:var(--elevation-2) !important; }
.lola-ripple{ background:rgba(255,255,255,.30) !important; }

/* 6. Card hover: remove rainbow border + glass sweep -> subtle, premium */
.us-item::before{ opacity:0 !important; }
.us-item:hover::before, .us-item:hover::after{ opacity:0 !important; }
.us-item::after{ display:none !important; }
.us-item:hover, .g-card:hover, .quick-action:hover{
  transform:translateY(-3px) !important; box-shadow:var(--elevation-2) !important; border-color:var(--primary-500); }

/* 7. Typographic hierarchy + readability */
.wow-stat__value{ font-size:clamp(2rem,5vw,3rem); letter-spacing:-.02em; color:var(--text-primary); }
.wow-stat__label{ color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; font-weight:600; }
.us-item .ui-title{ color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; font-weight:600; }
.us-item .ui-text{ font-size:clamp(1.25rem,2.6vw,1.6rem); letter-spacing:-.01em; }

/* 8. Marquee: quieter, evenly spaced social proof */
.wow-marquee{ margin-block:var(--space-6) !important; }
.wow-marquee__track{ gap:var(--space-10); }
.wow-marquee__item{ color:var(--text-muted); font-weight:600; }
.wow-marquee__item i{ font-size:20px; }

/* 9. Cards/tables: consistent radius, lighter borders, comfortable rows */
.g-card, .panel, .panel-default, .card{ border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.table td, .table th{ padding:.7rem .85rem; }
.table thead th{ font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; }

/* 10. Wide-screen symmetry: cap & center content (no stretched layouts) */
@media (min-width:1440px){
  .app-content > .container, .app-content > .container-fluid{ max-width:1320px; margin-inline:auto; }
}
/* ==================================================================== */

/* ====================================================================
   PHASE 6A ? FINAL UI/UX STABILIZATION (unify on the light design system)
   Loaded last. Reversible. No new features ? only consistency fixes.
   ==================================================================== */

/* ---- P0 ROOT: re-point legacy navy theme vars to light --------------
   style.css uses these for ~all dark backgrounds; the only text usage
   (.btn-dark-outline) is already overridden. This single change unifies
   the whole client side and removes the dark/light mismatch. ---------- */
:root{
  --primary-color:var(--bg-page);
  --primary-lighter-color:var(--bg-surface);
  --form-bg-color:var(--bg-surface);
}

/* Core surfaces (beat legacy specificity where needed) */
body, body:not(.home){ background:var(--bg-page) !important; color:var(--text-primary); }
.app-content{ background:var(--bg-page) !important; }
.app-sidebar, .app-header{ background:var(--bg-surface) !important; }
.footer, .footer .copyright{ background:var(--bg-elevated) !important; }
.footer, .footer p, .footer li, .footer span, .footer .text-white, .footer .text-white-50{ color:var(--text-secondary) !important; }
.footer a{ color:var(--text-secondary); } .footer a:hover{ color:var(--primary-600); }

/* Dashboard blocks / inputs / dropdowns -> readable light */
.app-content .card, .app-content .panel, .app-content .g-card, .dash-list, .order-side{ background:var(--bg-surface) !important; color:var(--text-primary); }
.form-control, select, textarea, .dropdown-menu, .dfb-input{ background:#ffffff !important; color:var(--text-primary) !important; }
.dropdown-menu a, .dropdown-menu .dropdown-item{ color:var(--text-primary) !important; }

/* Calmer brand gradient (drop the loud orange) ? used by banners + stat cards */
.bg-pattern{ background:linear-gradient(135deg, var(--primary-600) 0%, var(--accent-500) 100%) !important; }

/* ---- Sidebar: full on laptop/desktop, off-canvas drawer below 992 ---- */
@media (min-width:992px){
  .app-sidebar{ width:260px !important; }
  .app-content{ padding-left:260px !important; }
  .app-sidebar .menu-text, .app-sidebar .nav-group__label{ opacity:1 !important; width:auto !important; overflow:visible !important; }
}
@media (max-width:991.98px){
  .app-content{ padding-left:16px !important; padding-right:16px !important; }
  .app-sidebar{ position:fixed; left:-300px; top:0; width:260px; height:100vh; z-index:1000;
    transition:left .25s ease; box-shadow:4px 0 24px rgba(0,0,0,.12); overflow-y:auto; }
  .app-sidebar.show, .app-sidebar.active, .app-sidebar.open, body.sidebar-open .app-sidebar{ left:0 !important; }
}

/* ---- Marquee strictly one scrolling line (was wrapping to 2 stacked) ---- */
.wow-marquee{ overflow:hidden; }
.wow-marquee__track{ flex-wrap:nowrap !important; white-space:nowrap; }

/* ---- Remove the cheap floating reactions (reinforce) ---- */
.wow-reactions{ display:none !important; }

/* ---- Stat cards: capped row, readable values ---- */
.u-stats{ max-width:var(--container-max,1320px); margin-inline:auto; }
.u-stats .ui-title{ color:rgba(255,255,255,.9) !important; }
.u-stats .ui-text{ color:#fff !important; }

/* ---- No horizontal scroll, capped ultrawide ---- */
html, body{ max-width:100%; overflow-x:hidden; }
@media (min-width:1440px){ .app-content > .container, .app-content > .container-fluid{ max-width:1320px; margin-inline:auto; } }
@media (min-width:2560px){ .app-content > .container, .app-content > .container-fluid{ max-width:1600px; } }

/* ---- Telegram link uses the brand blue ---- */
.tg-support, .tg-support i{ color:var(--telegram) !important; }
/* ==================================================================== */

/* ===== Phase 8: theme toggle + dark surfaces + social icons (official colors) ===== */
.theme-toggle{ width:42px; height:42px; border-radius:var(--radius-md); border:1px solid var(--border-subtle);
  background:var(--bg-surface); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:19px; transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.theme-toggle:hover{ color:var(--primary-600); transform:translateY(-1px); }
.theme-toggle--fab{ position:fixed; left:18px; bottom:18px; z-index:9989; box-shadow:var(--shadow-md); }
@media(max-width:575.98px){ .theme-toggle--fab{ left:14px; bottom:14px; width:38px; height:38px; } }

/* Dark-mode: force the light !important surfaces back to tokens */
[data-theme="dark"] body,[data-theme="dark"] .app-content{ background:var(--bg-page) !important; color:var(--text-primary); }
[data-theme="dark"] .app-sidebar,[data-theme="dark"] .app-header{ background:var(--bg-surface) !important; }
[data-theme="dark"] .card,[data-theme="dark"] .g-card,[data-theme="dark"] .panel,[data-theme="dark"] .panel-default,
[data-theme="dark"] .dash-list,[data-theme="dark"] .modal-content,[data-theme="dark"] .testimonial,[data-theme="dark"] .feature{ background:var(--bg-surface) !important; color:var(--text-primary); border-color:var(--border-subtle) !important; }
[data-theme="dark"] .form-control,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .dropdown-menu,[data-theme="dark"] .dfb-input{ background:var(--bg-elevated) !important; color:var(--text-primary) !important; border-color:var(--border-subtle) !important; }
[data-theme="dark"] .footer,[data-theme="dark"] .footer .copyright{ background:var(--bg-elevated) !important; }
[data-theme="dark"] .table thead th,[data-theme="dark"] .table.services thead th{ background:var(--bg-elevated) !important; color:var(--text-secondary) !important; }
[data-theme="dark"] .table tbody tr:hover{ background:rgba(99,102,241,.14) !important; }

/* Social icons: slightly bigger + hover scale (rotation kept by .wow-marquee) + OFFICIAL colors */
.wow-marquee__item i{ font-size:26px; transition:transform var(--dur-2) var(--ease-spring); }
.wow-marquee__item:hover i{ transform:scale(1.18); }
.pf-instagram{color:#E4405F !important}.pf-tiktok{color:#010101 !important}.pf-youtube{color:#FF0000 !important}
.pf-facebook{color:#1877F2 !important}.pf-telegram{color:#26A5E4 !important}.pf-whatsapp{color:#25D366 !important}
.pf-twitter{color:#010101 !important}.pf-linkedin{color:#0A66C2 !important}.pf-twitch{color:#9146FF !important}
.pf-spotify{color:#1DB954 !important}.pf-snapchat{color:#FFC700 !important}.pf-discord{color:#5865F2 !important}
.pf-pinterest{color:#E60023 !important}.pf-reddit{color:#FF4500 !important}.pf-soundcloud{color:#FF5500 !important}.pf-threads{color:#010101 !important}
[data-theme="dark"] .pf-tiktok,[data-theme="dark"] .pf-twitter,[data-theme="dark"] .pf-threads{color:#ffffff !important}
/* ===== end Phase 8 ===== */

/* ====================================================================
   PHASE 10 — ENTERPRISE RESPONSIVE & UX FIXES
   Fixes: mobile sidebar scroll, services list overflow, button rendering,
   API docs centering, touch targets, admin back button, overall mobile UX.
   ==================================================================== */

/* ---- 1. Global: ensure scrollable body + smooth scroll ---- */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ min-height:100vh; overflow-x:hidden; }

/* ---- 2. Mobile sidebar: full-height scrollable drawer with overlay ---- */
@media (max-width:991.98px){
  .app-sidebar{
    position:fixed !important; left:-300px; top:0; width:280px !important; height:100vh !important;
    z-index:10000; overflow-y:auto !important; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    transition:left .3s var(--ease-out);
    box-shadow:6px 0 30px rgba(0,0,0,.18);
  }
  .app-sidebar.show, .app-sidebar.active, .app-sidebar.open,
  body.sidebar-open .app-sidebar{ left:0 !important; }
  .sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:9999; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  }
  body.sidebar-open .sidebar-overlay{ display:block; }
  .app-content{ padding-left:0 !important; padding-right:0 !important; }
  .app-content > .container, .app-content > .container-fluid{
    padding-left:12px; padding-right:12px;
  }
}

/* ---- 3. Services table: horizontal scroll + readable on mobile ---- */
.services-wrapper, .table-responsive{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; scrollbar-width:thin;
}
.services-wrapper::-webkit-scrollbar, .table-responsive::-webkit-scrollbar{ height:6px; }
.services-wrapper::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb{
  background:var(--border-subtle); border-radius:3px;
}
@media (max-width:767.98px){
  .table.services{ min-width:600px; }
  .table.services td, .table.services th{ white-space:nowrap; font-size:.82rem; padding:.5rem .6rem; }
}

/* ---- 4. Fix buttons rendering as small squares ---- */
.btn, button, [type="button"], [type="submit"]{
  min-width:32px; min-height:32px;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  line-height:1.4; vertical-align:middle;
}
.btn i:only-child, .btn .fa:only-child, .btn .ri:only-child{ font-size:1rem; line-height:1; }
.btn:empty, button:empty{ min-width:36px; min-height:36px; }
i.fa, i.fas, i.far, i.fab, i.ri{ font-style:normal; }

/* ---- 5. API docs: centered layout on all devices ---- */
.api-docs, .g-card.api, [class*="api-doc"]{
  max-width:900px; margin-left:auto !important; margin-right:auto !important;
}
.api-docs pre, .g-card.api pre{ max-width:100%; overflow-x:auto; word-break:break-all; }

/* ---- 6. Touch-friendly: minimum 44px tap targets ---- */
@media (max-width:991.98px){
  .btn, .nav-link, .sidebar-menu a, .dropdown-item, .chip,
  .pay-method, .method-tile, .amount-btn{ min-height:44px; min-width:44px; }
  .sidebar-menu li > a{ padding:10px 16px; }
  .navbar .nav > li > a{ padding:12px 14px; }
}

/* ---- 7. New order form: better mobile layout ---- */
@media (max-width:575.98px){
  .order-wizard{ flex-direction:column; align-items:stretch; }
  .order-wizard .bar{ height:2px; width:100%; flex:none; }
  .wizard-card{ padding:var(--space-3); }
  .form-control, select, .bootstrap-select{ width:100% !important; }
}

/* ---- 8. Admin panel: back-to-dashboard button utility ---- */
.btn-back-dashboard{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:var(--radius-md);
  background:var(--bg-elevated); color:var(--text-secondary);
  border:1px solid var(--border-subtle); font-weight:600;
  text-decoration:none; transition:all var(--dur-2) var(--ease-out);
  margin-bottom:var(--space-4);
}
.btn-back-dashboard:hover{ background:var(--primary-50); color:var(--primary-600); transform:translateX(-2px); }

/* ---- 9. Banners: responsive images ---- */
.banner-area img, .carousel img, .slider img{
  max-width:100%; height:auto; border-radius:var(--radius-lg); object-fit:cover;
}

/* ---- 10. Modal: mobile-friendly ---- */
@media (max-width:575.98px){
  .modal-dialog{ margin:8px; max-width:calc(100vw - 16px); }
  .modal-content{ border-radius:var(--radius-lg); }
  .modal-body{ padding:var(--space-3); }
}

/* ---- 11. Pagination: mobile scroll ---- */
.pagination{ flex-wrap:wrap; gap:4px; justify-content:center; }
.pagination > li > a, .pagination > li > span{
  min-width:36px; min-height:36px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--radius-sm);
}

/* ---- 12. Signup/Login forms: centered ---- */
.auth-card, .g-card.espece, .login-card, .signup-card{
  max-width:480px; margin:var(--space-8) auto !important;
  padding:var(--space-6); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
}

/* ---- 13. Admin navbar: responsive collapse ---- */
@media (max-width:767.98px){
  .navbar-fixed-top .container-fluid{ padding:0 8px; }
  .navbar-collapse{ max-height:80vh; overflow-y:auto; }
  .navbar-nav > li > a{ padding:10px 12px; font-size:.9rem; }
  .dropdown-menu{ position:static !important; float:none; box-shadow:none; }
  .dropdown-max-height{ max-height:300px; overflow-y:auto; }
}

/* ---- 14. Print styles ---- */
@media print{
  .app-sidebar, .navbar, .wa-fab, .theme-toggle, .sidebar-overlay,
  .wow-particles, .wow-marquee{ display:none !important; }
  .app-content{ padding-left:0 !important; }
  body{ background:#fff !important; }
}

/* ---- 15. Loading spinner utility ---- */
.lola-spinner{
  display:inline-block; width:20px; height:20px;
  border:2px solid var(--border-subtle); border-top-color:var(--primary-500);
  border-radius:50%; animation:lolaSpin .6s linear infinite;
}
.lola-spinner--lg{ width:40px; height:40px; border-width:3px; }
@keyframes lolaSpin{ to{ transform:rotate(360deg); } }

/* ---- 16. Toast/notification system ---- */
.lola-toast{
  position:fixed; top:20px; right:20px; z-index:99999;
  min-width:300px; max-width:420px; padding:var(--space-4);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  font-family:var(--font-body); font-weight:500;
  animation:lolaToastIn var(--dur-3) var(--ease-out) both;
  display:flex; align-items:center; gap:var(--space-3);
}
.lola-toast--success{ background:var(--success-bg); color:#065f46; border:1px solid #a7f3d0; }
.lola-toast--error{ background:var(--danger-bg); color:#991b1b; border:1px solid #fecaca; }
.lola-toast--info{ background:var(--info-bg); color:#1e40af; border:1px solid #bfdbfe; }
.lola-toast--warning{ background:var(--warning-bg); color:#92610a; border:1px solid #fde68a; }
@keyframes lolaToastIn{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:translateX(0); } }
@media (max-width:575.98px){ .lola-toast{ left:12px; right:12px; min-width:auto; top:12px; } }

/* ---- 17. Improved scrollbar styling ---- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-subtle); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-muted); }
@supports (scrollbar-width:thin){ *{ scrollbar-width:thin; scrollbar-color:var(--border-subtle) transparent; } }
/* ==================================================================== */