/* =====================================================
   FPV COURIER — Main Stylesheet
   Themes : Dark (default) | Light
   Fonts  : Bebas Neue (display) + Barlow Condensed (body)
   ===================================================== */
/* Fonts load from <link> tags in each page head so they download in parallel with this file. */

/* ── Brand constants (never change between themes) ── */
:root {
  /* Brand Colours */
  --gold        : #C9973A;
  --gold-light  : #E8B84B;
  --gold-dark   : #A07828;
  --gold-dim    : rgba(201,151,58,0.12);
  --gold-glow   : 0 0 30px rgba(201,151,58,0.3);

  /* Status colours */
  --danger   : #E74C3C;
  --success  : #27AE60;
  --info     : #3498db;
  --warning  : #F39C12;

  /* Typography */
  --font-d : 'Bebas Neue', sans-serif;
  --font-b : 'Barlow Condensed', sans-serif;
  --font-u : 'Rajdhani', sans-serif;
  --font-o : 'Orbitron', sans-serif;
  --font-i : 'Inter', 'Barlow Condensed', sans-serif;

  /* Motion */
  --ease   : 0.3s cubic-bezier(0.4,0,0.2,1);

  /* Shape */
  --radius : 6px;
}

/* ══════════════════════════════════════════════════════
   DARK THEME  (default — active when data-theme="dark")
   ══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Backgrounds (dark → darkest) */
  --bg-page    : #0A0A0A;
  --bg-1       : #111111;
  --bg-2       : #161616;
  --bg-3       : #1E1E1E;
  --bg-card    : #111111;
  --bg-input   : #1E1E1E;
  --bg-hover   : rgba(201,151,58,0.06);

  /* Borders */
  --border-dim : #2A2A2A;
  --border-md  : #333333;

  /* Text */
  --text-primary   : #F5F0E8;
  --text-secondary : #9a9a9a;
  --text-muted     : #555555;
  --text-heading   : #F5F0E8;
  --text-invert    : #0A0A0A;

  /* Scrollbar */
  --scrollbar-track : #111111;
  --scrollbar-thumb : #A07828;

  /* Shadows */
  --shadow-md : 0 20px 60px rgba(0,0,0,0.50);
  --shadow-lg : 0 40px 100px rgba(0,0,0,0.65);

  /* Glassmorphism overlay for light surfaces in dark mode */
  --glass-bg     : rgba(255,255,255,0.03);
  --glass-border : rgba(255,255,255,0.07);

  /* Sidebar */
  --sidebar-bg     : #111111;
  --sidebar-border : #2A2A2A;

  /* Topbar */
  --topbar-bg : #111111;

  /* Table header */
  --table-head-bg : linear-gradient(180deg,#181818 0%,#121212 100%);
  --table-row-hover : rgba(201,151,58,0.04);
  --table-border    : rgba(255,255,255,0.05);

  /* Navbar */
  --navbar-scrolled-bg : rgba(10,10,10,0.96);

  /* Aliases kept for backward compat */
  --black : #0A0A0A;
  --dark  : #111111;
  --dark2 : #161616;
  --dark3 : #1E1E1E;
  --white : #F5F0E8;
  --gray  : #9a9a9a;
  --gray-dim   : #2A2A2A;
  --gray-light : #b0b0b0;
  --bg    : #0A0A0A;
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME  (active when data-theme="light")
   ══════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Backgrounds */
  --bg-page    : #F5F3EE;
  --bg-1       : #FFFFFF;
  --bg-2       : #F9F7F4;
  --bg-3       : #F0EDE8;
  --bg-card    : #FFFFFF;
  --bg-input   : #F5F3EE;
  --bg-hover   : rgba(201,151,58,0.07);

  /* Borders */
  --border-dim : #E2DEDD;
  --border-md  : #D0CCC7;

  /* Text */
  --text-primary   : #1A1714;
  --text-secondary : #6B6560;
  --text-muted     : #A09890;
  --text-heading   : #1A1714;
  --text-invert    : #F5F0E8;

  /* Scrollbar */
  --scrollbar-track : #F0EDE8;
  --scrollbar-thumb : #C9973A;

  /* Shadows */
  --shadow-md : 0 8px 30px rgba(0,0,0,0.10);
  --shadow-lg : 0 20px 60px rgba(0,0,0,0.14);

  /* Glassmorphism */
  --glass-bg     : rgba(255,255,255,0.65);
  --glass-border : rgba(0,0,0,0.08);

  /* Sidebar */
  --sidebar-bg     : #FFFFFF;
  --sidebar-border : #E2DEDD;

  /* Topbar */
  --topbar-bg : #FFFFFF;

  /* Table */
  --table-head-bg   : linear-gradient(180deg,#F9F7F4 0%,#F5F3EE 100%);
  --table-row-hover : rgba(201,151,58,0.05);
  --table-border    : rgba(0,0,0,0.05);

  /* Navbar */
  --navbar-scrolled-bg : rgba(255,255,255,0.96);

  /* Aliases for backward compat (map light equivalents) */
  --black : #F5F3EE;
  --dark  : #FFFFFF;
  --dark2 : #F9F7F4;
  --dark3 : #F0EDE8;
  --white : #1A1714;
  --gray  : #6B6560;
  --gray-dim   : #E2DEDD;
  --gray-light : #9a9490;
  --bg    : #F5F3EE;
}



*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-i);font-size:15px;line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--ease),color var(--ease);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,select,textarea{font-family:var(--font-i);}
ul{list-style:none;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px;}

/* ── UTILS ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.text-gold{color:var(--gold);}
.text-gray{color:var(--gray);}
.text-center{text-align:center;}
.hidden{display:none!important;}
.flex{display:flex;align-items:center;}
.gap-1{gap:8px;} .gap-2{gap:16px;} .gap-3{gap:24px;}
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;}
.w-full{width:100%;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;font-family:var(--font-b);font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius);transition:var(--ease);cursor:pointer;border:2px solid transparent;white-space:nowrap;}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));color:var(--black);box-shadow:0 4px 20px rgba(201,151,58,.4);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,151,58,.6);}
.btn-outline{background:transparent;color:var(--gold);border-color:var(--gold);}
.btn-outline:hover{background:var(--gold-dim);transform:translateY(-2px);}
.btn-dark{background:var(--dark3);color:var(--white);border-color:var(--gray-dim);}
.btn-dark:hover{border-color:var(--gold);color:var(--gold);}
.btn-sm{padding:8px 18px;font-size:.8rem;}
.btn-lg{padding:16px 44px;font-size:1.05rem;}
.btn-full{width:100%;}
.btn-danger{background:var(--danger);color:white;border-color:var(--danger);}
.btn-success{background:var(--success);color:white;border-color:var(--success);}
.btn:disabled{opacity:.5;pointer-events:none;}

/* ── SECTION LABELS ── */
.eyebrow{display:block;font-size:.72rem;letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;font-family:var(--font-o);font-weight:500;opacity:0;animation:eyebrowReveal .8s ease both;}
.section-title{font-family:var(--font-d);font-size:clamp(2rem,4vw,3.5rem);letter-spacing:.05em;line-height:1.08;position:relative;}
.section-title span{color:var(--gold);}
.section-title::after{content:'';display:block;width:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light),transparent);border-radius:2px;margin-top:10px;animation:titleUnderlineGrow .9s .4s ease both;}
.section-sub{font-size:1rem;color:var(--gray);max-width:580px;margin:14px auto 0;line-height:1.75;font-family:var(--font-i);font-weight:400;}
.gold-bar{width:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));margin:14px auto;border-radius:2px;animation:goldBarGrow .7s .25s ease both;}

/* ==================== NAVBAR ==================== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:var(--ease);}
.navbar.scrolled, .navbar.menu-open{background:var(--navbar-scrolled-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-dim);padding:10px 0;}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-logo img{width:auto;height:40px;object-fit:contain;}
.nav-logo-text .brand{font-family:var(--font-d);font-size:1.3rem;letter-spacing:.1em;line-height:1.1;}
.nav-logo-text .sub{font-size:.6rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:20px;flex:1;justify-content:center;}
.nav-links a{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);transition:var(--ease);white-space:nowrap;}
.nav-links a:hover{color:var(--gold);}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;}
.hamburger span{width:22px;height:2px;background:var(--text-primary);transition:var(--ease);transform-origin:center;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}


/* ==================== HERO ==================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;}
#particles-canvas{position:absolute;inset:0;z-index:0;}
.hero-grad{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(201,151,58,.07) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(201,151,58,.04) 0%,transparent 50%);z-index:1;}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:100px;padding-bottom:60px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:var(--gold-dim);border:1px solid rgba(201,151,58,.3);border-radius:100px;font-size:.75rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:22px;}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite;}
.hero-title{font-family:var(--font-d);font-size:clamp(3rem,5.5vw,5.5rem);letter-spacing:.04em;line-height:1;margin-bottom:18px;}
.hero-title .gold-line{display:block;color:var(--gold);text-shadow:0 0 60px rgba(201,151,58,.4);}
.hero-desc{font-size:1.05rem;color:var(--gray);max-width:460px;margin-bottom:32px;line-height:1.7;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:28px;margin-top:44px;padding-top:28px;border-top:1px solid var(--gray-dim);}
.hero-stat-num{font-family:var(--font-d);font-size:1.8rem;color:var(--gold);display:block;line-height:1;}
.hero-stat-label{font-size:.72rem;letter-spacing:.2em;color:var(--gray);text-transform:uppercase;}
.hero-visual{display:flex;align-items:center;justify-content:center;position:relative;}
.logo-3d-wrapper{position:relative;width:360px;height:360px;display:flex;align-items:center;justify-content:center;}
.logo-ring{position:absolute;border-radius:50%;border:1px solid rgba(201,151,58,.18);animation:ringRot 20s linear infinite;}
.logo-ring:nth-child(1){width:100%;height:100%;}
.logo-ring:nth-child(2){width:78%;height:78%;animation-direction:reverse;animation-duration:14s;}
.logo-ring:nth-child(3){width:58%;height:58%;border-color:rgba(201,151,58,.08);}
.logo-3d-img{width:250px;height:250px;object-fit:contain;filter:drop-shadow(0 0 40px rgba(201,151,58,.5)) drop-shadow(0 20px 60px rgba(0,0,0,.8));animation:floatLogo 4s ease-in-out infinite;position:relative;z-index:1;}
.glow-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 15px var(--gold);}
.glow-dot:nth-child(4){animation:orbit1 9s linear infinite;}
.glow-dot:nth-child(5){animation:orbit1 13s linear infinite reverse;width:5px;height:5px;}
.glow-dot:nth-child(6){animation:orbit1 6s linear infinite;width:4px;height:4px;}

/* ==================== PARCEL TRACKING SECTION ==================== */
.track-section-wrap{padding:80px 0;background:var(--dark);border-top:1px solid var(--gray-dim);border-bottom:1px solid var(--gray-dim);position:relative;overflow:hidden;}
.track-section-wrap::before{content:'';position:absolute;top:-60%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(ellipse,rgba(201,151,58,.07) 0%,transparent 65%);pointer-events:none;}
.track-section-header{text-align:center;margin-bottom:44px;}
.track-section-header .eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;}
.track-section-box{max-width:760px;margin:0 auto;background:var(--dark3);border:1px solid rgba(201,151,58,.22);border-radius:14px;padding:36px 40px;position:relative;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.4),0 0 60px rgba(201,151,58,.05);}
.track-section-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.track-section-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
/* Shared input/btn/result styles (reused from old hero-tracker) */
.hero-tracker-input-wrap{flex:1;min-width:220px;position:relative;}
.hero-tracker-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.2rem;pointer-events:none;}
.hero-tracker-input{width:100%;background:var(--dark2);border:1.5px solid var(--gray-dim);border-radius:var(--radius);padding:14px 16px 14px 46px;color:var(--white);font-family:var(--font-b);font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:var(--ease);outline:none;}
.hero-tracker-input::placeholder{text-transform:none;letter-spacing:.04em;color:#555;font-weight:400;}
.hero-tracker-input:focus{border-color:var(--gold);background:rgba(201,151,58,.04);box-shadow:0 0 0 3px rgba(201,151,58,.12);}
.hero-tracker-btn{white-space:nowrap;padding:14px 30px;font-size:.92rem;}
.hero-tracker-btn:disabled{opacity:.65;pointer-events:none;}
/* Result area */
.hero-tracker-result{margin-top:24px;animation:fadeInUp .4s ease;}
.track-loading{display:flex;align-items:center;gap:14px;color:var(--gray);font-size:.95rem;padding:16px;}
.track-spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--gray-dim);border-top-color:var(--gold);animation:spin .7s linear infinite;flex-shrink:0;}
.track-result-error{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:rgba(231,76,60,.07);border:1px solid rgba(231,76,60,.22);border-radius:var(--radius);color:var(--danger);}
.track-result-error i{font-size:1.5rem;flex-shrink:0;margin-top:1px;}
.track-result-error strong{display:block;font-size:.95rem;margin-bottom:3px;}
.track-result-error p{font-size:.85rem;color:#c0392b;margin:0;}
.track-result-error code{background:rgba(231,76,60,.15);padding:1px 6px;border-radius:4px;font-family:monospace;font-size:.85em;}
/* Success card */
.track-result-card{background:var(--dark);border:1px solid var(--gray-dim);border-radius:10px;overflow:hidden;}
.track-result-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px 16px;border-bottom:1px solid var(--gray-dim);flex-wrap:wrap;}
.track-result-code{font-family:var(--font-d);font-size:1.4rem;letter-spacing:.1em;color:var(--gold);}
.track-result-dest{font-size:.82rem;color:var(--gray);margin-top:4px;display:flex;align-items:center;gap:5px;}
.track-admin-note{padding:10px 22px;background:rgba(52,152,219,.07);border-bottom:1px solid rgba(52,152,219,.15);color:#5dade2;font-size:.85rem;display:flex;gap:8px;align-items:center;}
/* Timeline */
.track-timeline{padding:20px 22px;}
.track-timeline-label{font-size:.72rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;}
.track-events{display:flex;flex-direction:column;gap:0;position:relative;}
.track-events::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:linear-gradient(to bottom,var(--gold),transparent);}
.track-event{display:flex;gap:16px;padding:10px 0;position:relative;}
.track-event-dot{width:18px;height:18px;border-radius:50%;background:var(--dark3);border:2px solid var(--gray-dim);flex-shrink:0;margin-top:2px;transition:var(--ease);}
.track-event--active .track-event-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(201,151,58,.5);}
.track-event-body{flex:1;}
.track-event-status{font-family:var(--font-d);font-size:1rem;letter-spacing:.06em;text-transform:capitalize;color:var(--white);}
.track-event--active .track-event-status{color:var(--gold);}
.track-event-loc{font-size:.8rem;color:var(--gray);margin-top:3px;display:flex;align-items:center;gap:4px;}
.track-event-note{font-size:.83rem;color:#aaa;margin-top:3px;line-height:1.5;}
.track-event-time{font-size:.75rem;color:#555;margin-top:4px;letter-spacing:.04em;}
.track-no-events{color:var(--gray);font-size:.88rem;padding:10px 0;display:flex;align-items:center;gap:8px;}


/* ==================== STATS BAR ==================== */
.stats-bar{background:var(--dark);border-top:1px solid var(--gray-dim);border-bottom:1px solid var(--gray-dim);padding:26px 0;}
.stats-bar .container{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:20px;}
.stat-item{text-align:center;}
.stat-num{font-family:var(--font-d);font-size:2.2rem;color:var(--gold);letter-spacing:.05em;display:block;}
.stat-lbl{font-size:.72rem;letter-spacing:.25em;color:var(--gray);text-transform:uppercase;}
.stat-sep{width:1px;height:44px;background:var(--gray-dim);}

/* ==================== SERVICES ==================== */
.services{padding:90px 0;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;}
.service-card{background:var(--dark);border:1px solid var(--gray-dim);border-radius:var(--radius);padding:32px 26px;position:relative;overflow:hidden;transition:var(--ease);perspective:1000px;}
.service-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gold-dim) 0%,transparent);opacity:0;transition:var(--ease);}
.service-card:hover{border-color:var(--gold);transform:translateY(-8px);box-shadow:var(--gold-glow),var(--shadow);}
.service-card:hover::before{opacity:1;}
.svc-icon{font-size:2.2rem;margin-bottom:18px;display:block;}
.service-card h3{font-family:var(--font-d);font-size:1.35rem;letter-spacing:.05em;margin-bottom:10px;}
.service-card p{font-size:.92rem;color:var(--gray);line-height:1.65;}
.svc-tag{display:inline-block;margin-top:18px;padding:3px 12px;background:var(--gold-dim);border:1px solid rgba(201,151,58,.3);border-radius:100px;font-size:.7rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;}

/* ==================== HOW IT WORKS ==================== */
.how-it-works{padding:90px 0;background:var(--dark);}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px;position:relative;}
.steps-grid::before{content:'';position:absolute;top:28px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));opacity:.25;}
.step-it{text-align:center;position:relative;z-index:1;}
.step-num{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.4rem;color:var(--black);margin:0 auto 18px;box-shadow:0 0 25px rgba(201,151,58,.4);}
.step-it h3{font-family:var(--font-d);font-size:1.15rem;letter-spacing:.05em;margin-bottom:8px;}
.step-it p{font-size:.88rem;color:var(--gray);}

/* ==================== COVERAGE ==================== */
.coverage{padding:90px 0;}
.coverage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px;}
.zone-card{background:var(--dark);border:1px solid var(--gray-dim);border-radius:var(--radius);padding:22px 18px;transition:var(--ease);}
.zone-card:hover{border-color:var(--gold);transform:translateY(-4px);}
.zone-name{font-family:var(--font-d);font-size:1.05rem;letter-spacing:.05em;color:var(--gold);margin-bottom:10px;}
.zone-cities{font-size:.82rem;color:var(--gray);line-height:1.9;}

/* ==================== CTA ==================== */
.cta-sec{padding:90px 0;background:linear-gradient(135deg,var(--dark),var(--black));position:relative;overflow:hidden;}
.cta-sec::before{content:'';position:absolute;top:-50%;left:-20%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(201,151,58,.06) 0%,transparent 70%);}
.cta-sec .container{position:relative;z-index:1;text-align:center;}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;}

/* ==================== FOOTER ==================== */
.footer{background:var(--dark);border-top:1px solid var(--gray-dim);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:52px;}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-logo img{width:auto;height:44px;object-fit:contain;}
.footer-logo .brand{font-family:var(--font-d);font-size:1.5rem;letter-spacing:.1em;}
.footer-desc{font-size:.88rem;color:var(--gray);line-height:1.75;max-width:270px;}
.footer-col h4{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:700;}
.footer-col a,.footer-col p{display:block;font-size:.88rem;color:var(--gray);margin-bottom:9px;transition:var(--ease);}
.footer-col a:hover{color:var(--gold);padding-left:5px;}
.footer-bottom{padding-top:26px;border-top:1px solid var(--gray-dim);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-bottom p{font-size:.76rem;color:#444;letter-spacing:.08em;}
.footer-bottom a{color:var(--gold);transition:var(--ease);}
.footer-bottom a:hover{color:var(--gold-light);}

/* ==================== AUTH PAGES ==================== */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 20px 40px;background:radial-gradient(ellipse at 30% 50%,rgba(201,151,58,.05) 0%,transparent 60%);}
.auth-card{background:var(--dark);border:1px solid var(--gray-dim);border-radius:12px;padding:44px;width:100%;max-width:440px;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.6);}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark));border-radius:12px 12px 0 0;}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo img{display:block;width:auto;height:64px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 0 20px rgba(201,151,58,.4));}
.auth-logo h2{font-family:var(--font-d);font-size:1.8rem;letter-spacing:.1em;}
.auth-logo p{font-size:.8rem;color:var(--gray);letter-spacing:.1em;}
.auth-title{font-family:var(--font-d);font-size:1.6rem;letter-spacing:.05em;margin-bottom:24px;text-align:center;}
.divider-or{display:flex;align-items:center;gap:10px;margin:18px 0;}
.divider-or span{font-size:.75rem;color:var(--gray);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:var(--gray-dim);}
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;background:var(--dark3);border:1px solid var(--gray-dim);border-radius:var(--radius);color:var(--white);font-family:var(--font-b);font-size:.95rem;font-weight:600;letter-spacing:.05em;transition:var(--ease);cursor:pointer;}
.google-btn:hover{border-color:var(--gold);}
.google-icon{width:22px;height:22px;flex-shrink:0;}
.auth-footer-link{text-align:center;margin-top:22px;font-size:.88rem;color:var(--gray);}
.auth-footer-link a{color:var(--gold);transition:var(--ease);}
.auth-footer-link a:hover{color:var(--gold-light);}

/* ── FORM ELEMENTS ── */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase;margin-bottom:7px;}
.form-label .req{color:var(--gold);}
.form-control{width:100%;padding:13px 15px;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-b);font-size:.95rem;transition:var(--ease);outline:none;-webkit-appearance:none;appearance:none;}
.form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,151,58,.1);}
.form-control::placeholder{color:var(--text-muted);}
select.form-control option{background:var(--bg-input);color:var(--text-primary);}
.form-control-file{width:100%;padding:18px;background:var(--bg-input);border:2px dashed var(--border-dim);border-radius:var(--radius);color:var(--text-secondary);font-family:var(--font-b);font-size:.88rem;text-align:center;transition:var(--ease);cursor:pointer;}
.form-control-file:hover{border-color:var(--gold);color:var(--gold);}
.form-hint{font-size:.76rem;color:var(--text-muted);margin-top:5px;}
.form-error{font-size:.76rem;color:var(--danger);margin-top:5px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;}
.check-chip{display:flex;align-items:center;gap:6px;padding:7px 13px;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:100px;cursor:pointer;transition:var(--ease);font-size:.88rem;user-select:none;color:var(--text-primary);}
.check-chip:hover{border-color:var(--gold);}
.check-chip.selected{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);}
.check-chip input{display:none;}

/* ==================== REGISTER PAGE ==================== */
.register-page{min-height:100vh;padding:90px 20px 60px;background:radial-gradient(ellipse at 70% 30%,rgba(201,151,58,.04) 0%,transparent 60%);}
.register-container{max-width:720px;margin:0 auto;}
.register-header{text-align:center;margin-bottom:36px;}
.register-header img{display:block;width:auto;height:60px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 0 20px rgba(201,151,58,.4));}
.register-header h1{font-family:var(--font-d);font-size:2rem;letter-spacing:.08em;margin-bottom:6px;}
.register-header p{font-size:.88rem;color:var(--gray);}
.reg-account-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;background:var(--dark3);border:1px solid var(--gray-dim);border-radius:var(--radius);padding:12px 16px;margin-bottom:28px;font-size:.84rem;color:var(--gray);}
.reg-account-bar strong{color:var(--text-primary);word-break:break-all;}
.reg-account-bar a{color:var(--gold);font-weight:600;white-space:nowrap;}
.step-progress{display:flex;align-items:flex-start;justify-content:center;margin-bottom:40px;position:relative;}
.step-progress::before{content:'';position:absolute;top:21px;left:50%;transform:translateX(-50%);width:calc(75% - 30px);height:2px;background:var(--gray-dim);}
.step-prog-fill{position:absolute;top:21px;left:50%;transform:translateX(-50%);height:2px;background:var(--gold);transition:width .5s ease;width:0;}
.step-prog-item{text-align:center;flex:1;position:relative;z-index:1;}
.step-bubble{width:42px;height:42px;border-radius:50%;border:2px solid var(--gray-dim);background:var(--dark);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:700;font-size:.95rem;color:var(--gray);transition:var(--ease);}
.step-prog-item.active .step-bubble{border-color:var(--gold);background:var(--gold);color:var(--black);box-shadow:0 0 20px rgba(201,151,58,.4);}
.step-prog-item.done .step-bubble{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);}
.step-lbl{font-size:.7rem;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;font-weight:700;}
.step-prog-item.active .step-lbl{color:var(--gold);}
.form-step{background:var(--dark);border:1px solid var(--gray-dim);border-radius:12px;padding:36px;position:relative;}
.form-step::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark));border-radius:12px 12px 0 0;}
.step-hd{font-family:var(--font-d);font-size:1.5rem;letter-spacing:.05em;margin-bottom:4px;}
.step-sd{font-size:.88rem;color:var(--gray);margin-bottom:28px;}
.step-actions{display:flex;gap:10px;justify-content:space-between;margin-top:28px;padding-top:22px;border-top:1px solid var(--gray-dim);}
.gen-id-box{background:var(--dark3);border:2px solid var(--gold);border-radius:var(--radius);padding:18px;text-align:center;margin-bottom:22px;}
.gen-id-box .lbl{font-size:.72rem;color:var(--gray);letter-spacing:.2em;text-transform:uppercase;}
.gen-id-box .id-val{font-family:var(--font-d);font-size:2.2rem;letter-spacing:.2em;color:var(--gold);margin-top:4px;}
.gen-id-box .id-note{font-size:.78rem;color:var(--gray);margin-top:6px;}

/* ==================== DASHBOARD / APP ==================== */
.app-layout{display:flex;min-height:100vh;}
.sidebar{width:255px;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;overflow-y:auto;transition:background var(--ease),border-color var(--ease);}
.sidebar-logo{padding:22px 18px;border-bottom:1px solid var(--sidebar-border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sidebar-logo-brand{display:flex;align-items:center;gap:10px;min-width:0;}
.sidebar-close-btn{display:none;}
.sidebar-logo img{width:auto;height:34px;object-fit:contain;}
.sidebar-logo .nm{font-family:var(--font-d);font-size:1.15rem;letter-spacing:.08em;line-height:1.1;}
.sidebar-logo .sb{font-size:.62rem;color:var(--gold);letter-spacing:.2em;}
.sidebar-nav{flex:1;padding:18px 10px;}
.nav-sec-lbl{font-size:.65rem;letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase;padding:0 8px;margin:14px 0 6px;}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:var(--radius);font-size:.92rem;font-weight:600;letter-spacing:.04em;color:var(--text-secondary);transition:var(--ease);margin-bottom:3px;}
.sidebar-nav a:hover{background:var(--bg-3);color:var(--text-primary);}
.sidebar-nav a.active{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(201,151,58,.2);}
.nav-icon{font-size:1rem;width:18px;text-align:center;}
.sidebar-bottom{padding:18px 10px;border-top:1px solid var(--sidebar-border);}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius);background:var(--bg-3);}
.s-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.95rem;color:var(--black);flex-shrink:0;}
.s-name{font-size:.88rem;font-weight:600;}
.s-id{font-size:.72rem;color:var(--gray);}
.main-content{flex:1;margin-left:255px;min-height:100vh;transition:var(--ease);min-width:0;}
.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--sidebar-border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;transition:background var(--ease),border-color var(--ease);}
.menu-toggle{display:none;background:transparent;border:none;color:var(--text-primary);font-size:1.6rem;cursor:pointer;padding:4px;}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:90;opacity:0;pointer-events:none;transition:var(--ease);}
.sidebar-overlay.active{opacity:1;pointer-events:all;}
.topbar-title{font-family:var(--font-o);font-size:1.1rem;letter-spacing:.08em;font-weight:700;background:linear-gradient(135deg,var(--white),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.page-content{padding:28px;}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:28px;}
.dash-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);padding:22px;transition:var(--ease);cursor:default;}
.dash-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.dash-icon{font-size:1.6rem;margin-bottom:10px;}
.dash-val{font-family:var(--font-d);font-size:1.8rem;color:var(--gold);letter-spacing:.05em;}
.dash-lbl{font-size:.7rem;color:var(--gray);letter-spacing:.12em;text-transform:uppercase;margin-top:3px;font-family:var(--font-o);font-weight:500;}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:28px;}
.q-btn{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);cursor:pointer;transition:var(--ease);text-align:left;color:var(--text-primary);width:100%;}
.q-btn:hover{border-color:var(--gold);background:var(--gold-dim);}
.q-icon{font-size:1.8rem;}
.q-lbl{font-family:var(--font-d);font-size:1.05rem;letter-spacing:.04em;}
.q-sub{font-size:.78rem;color:var(--gray);}
.panel{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius);overflow:hidden;margin-bottom:24px;transition:background var(--ease),border-color var(--ease);}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-dim);gap:15px;flex-wrap:wrap;}
.panel-head h3{font-family:var(--font-o);font-size:1rem;letter-spacing:.06em;font-weight:700;display:flex;align-items:center;gap:8px;}
.panel-head h3::before{content:'';display:inline-block;width:3px;height:14px;background:var(--gold);border-radius:2px;animation:panelBarSlide .5s ease both;}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(201,151,58,0.3);
  border-radius: 4px;
  transition: background 0.2s ease;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ── Sticky top scrollbar for wide admin tables ────────────────────
   .table-scroll-top      — the actual overflowing table wrapper
   .sticky-hscroll        — the scrollbar strip pinned to the top
   .sticky-hscroll-spacer — spacer to prevent jump when stuck
   ─────────────────────────────────────────────────────────────── */
.table-scroll-top {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Momentum scrolling on mobile */
  touch-action: pan-x pan-y;         /* Ensure natural touch dragging */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* hide native scrollbar — we use sticky one */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  transform: translateZ(0);
}
.table-scroll-top::-webkit-scrollbar {
  display: none;
}
.data-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: 0 48px;
}

/* The scrollbar strip rendered below the table */
.sticky-hscroll {
  position: relative;
  z-index: 20;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  box-sizing: border-box;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(201,151,58,0.7) rgba(255,255,255,0.05);
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.sticky-hscroll.is-fixed-stuck {
  border-radius: 0;
  border-top: 1px solid rgba(201,151,58,0.45);
  border-bottom: none;
  background: rgba(20, 20, 22, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .sticky-hscroll.is-fixed-stuck {
  background: rgba(247, 247, 249, 0.96);
  border-top: 1px solid rgba(201,151,58,0.45);
  border-bottom: none;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}
.sticky-hscroll::-webkit-scrollbar {
  height: 9px;
}
.sticky-hscroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
[data-theme="light"] .sticky-hscroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
}
.sticky-hscroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(201,151,58,0.7), rgba(229,190,106,0.85));
  border-radius: 4px;
  transition: background 0.2s ease;
}
.sticky-hscroll::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}
/* phantom inner div — JS sets its width to match the table scrollWidth */
.sticky-hscroll-inner {
  height: 1px;
  pointer-events: none;
}
/* Spacer to prevent layout shift when scrollbar switches to fixed */
.sticky-hscroll-spacer {
  height: 14px;
  box-sizing: border-box;
}

.data-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  text-align: left;
}
.data-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(201,151,58,.2);
  background: var(--table-head-bg);
  font-family: var(--font-o);
  white-space: nowrap;
}
.data-table td {
  padding: 14px 16px;
  font-size: .88rem;
  border-bottom: 1px solid var(--table-border);
  font-family: var(--font-i);
  line-height: 1.5;
  vertical-align: middle;
  transition: background .18s ease;
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table tr:hover td {
  background: var(--table-row-hover);
}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:.75rem;font-weight:700;letter-spacing:.04em;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;}
.badge-received{background:rgba(52,152,219,.1);color:var(--info);border:1px solid rgba(52,152,219,.2);}
.badge-received::before{background:var(--info);}
.badge-pending{background:rgba(201,151,58,.1);color:var(--gold);border:1px solid rgba(201,151,58,.2);}
.badge-pending::before{background:var(--gold);}
.badge-blue{background:rgba(52,152,219,.1);color:var(--info);border:1px solid rgba(52,152,219,.2);}
.badge-blue::before{background:var(--info);}
.badge-delivered{background:rgba(39,174,96,.1);color:var(--success);border:1px solid rgba(39,174,96,.2);}
.badge-delivered::before{background:var(--success);}
.badge-cancelled{background:rgba(231,76,60,.1);color:var(--danger);border:1px solid rgba(231,76,60,.2);}
.badge-cancelled::before{background:var(--danger);}
.badge-indigo{background:rgba(99,102,241,.1);color:#818cf8;border:1px solid rgba(99,102,241,.2);}
.badge-indigo::before{background:#818cf8;}
.badge-orange{background:rgba(249,115,22,.12);color:#fb923c;border:1px solid rgba(249,115,22,.25);}
.badge-orange::before{background:#fb923c;}
.badge-teal{background:rgba(20,184,166,.12);color:#2dd4bf;border:1px solid rgba(20,184,166,.25);}
.badge-teal::before{background:#2dd4bf;}
.tracking-code{font-family:monospace;font-size:.82rem;color:var(--gold);background:var(--gold-dim);padding:2px 7px;border-radius:4px;}
.empty-state{text-align:center;padding:52px 20px;}
.empty-state .e-icon{font-size:2.8rem;margin-bottom:14px;opacity:.35;}
.empty-state p{color:var(--gray);}

/* ==================== DASHBOARD VISUAL REFRESH ==================== */
.user-welcome {
  background: radial-gradient(circle at 92% 10%, rgba(201,151,58,.14), transparent 34%), linear-gradient(135deg, #171717 0%, #0d0d0d 100%);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
}
.user-welcome h2 { font-size: clamp(1.55rem, 4vw, 2.2rem) !important; }
.user-stat-grid .dash-card,
.admin-stat-grid .dash-card {
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 95% 70% at 100% 0%, rgba(201,151,58,0.22), transparent 70%),
    radial-gradient(circle at 0% 100%, rgba(201,151,58,0.08), transparent 50%),
    linear-gradient(145deg, #231c13 0%, #181510 50%, #0d0c0a 100%);
  border: 1px solid rgba(201,151,58,0.42);
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 12px 34px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,225,145,0.28), 0 0 24px -6px rgba(201,151,58,0.22);
  transition: all .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.user-stat-grid .dash-card::before,
.admin-stat-grid .dash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,151,58,0.8) 25%, rgba(255,225,150,1) 50%, rgba(201,151,58,0.8) 75%, transparent 100%);
  opacity: 0.85;
  transition: opacity .3s ease;
}
.user-stat-grid .dash-card:hover,
.admin-stat-grid .dash-card:hover {
  border-color: rgba(235,192,115,0.85);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -4px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,240,175,0.5), 0 0 36px -2px rgba(201,151,58,0.4);
}
.user-stat-grid .dash-card:hover::before,
.admin-stat-grid .dash-card:hover::before {
  opacity: 1;
  height: 3.5px;
}
.user-stat-grid .dash-card::after,
.admin-stat-grid .dash-card::after {
  content: '';
  position: absolute;
  right: -25px;
  bottom: -28px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,151,58,0.22), transparent 68%);
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.user-stat-grid .dash-card:hover::after,
.admin-stat-grid .dash-card:hover::after {
  transform: scale(1.25);
  opacity: 1;
}
.user-stat-grid .dash-card .dash-icon,
.admin-stat-grid .dash-card .dash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,151,58,0.24), rgba(201,151,58,0.06));
  border: 1px solid rgba(201,151,58,0.4);
  color: #ebc073;
  font-size: 1.55rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(201,151,58,0.18);
  transition: all .28s ease;
}
.user-stat-grid .dash-card:hover .dash-icon,
.admin-stat-grid .dash-card:hover .dash-icon {
  background: linear-gradient(135deg, rgba(201,151,58,0.36), rgba(201,151,58,0.14));
  border-color: rgba(235,192,115,0.8);
  color: #ffe699;
  transform: scale(1.08);
}
.user-stat-grid .dash-card .dash-val,
.admin-stat-grid .dash-card .dash-val {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 3.2vw, 2.35rem);
  letter-spacing: .02em;
  line-height: 1.1;
  margin-bottom: 6px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff 45%, #ebc073 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.user-stat-grid .dash-card .dash-lbl,
.admin-stat-grid .dash-card .dash-lbl {
  font-size: .8rem;
  font-weight: 600;
  color: #b8ac97;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Distinct golden accents across stat cards */
.user-stat-grid .dash-card:nth-child(2) .dash-icon,
.admin-stat-grid .dash-card:nth-child(4) .dash-icon {
  color: #2ecc71;
  border-color: rgba(46,204,113,0.35);
  background: linear-gradient(135deg, rgba(46,204,113,0.18), rgba(201,151,58,0.06));
}
.user-stat-grid .dash-card:nth-child(3) .dash-icon,
.admin-stat-grid .dash-card:nth-child(3) .dash-icon {
  color: #f39c12;
  border-color: rgba(243,156,18,0.35);
  background: linear-gradient(135deg, rgba(243,156,18,0.18), rgba(201,151,58,0.06));
}
.user-stat-grid .dash-card:nth-child(4) .dash-icon,
.admin-stat-grid .dash-card:nth-child(1) .dash-icon {
  color: #ffd700;
  border-color: rgba(255,215,0,0.4);
  background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(201,151,58,0.08));
}
.user-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: -8px 0 28px;
}
.user-insight-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
}
.user-insight-card::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--gold); border-radius:3px 0 0 3px; opacity:.8; }
.insight-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:9px; color:var(--gold); background:var(--gold-dim); font-size:1.05rem; }
.insight-label,.kpi-label { color:var(--gray); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.insight-value { margin-top:3px; color:var(--white); font-family:var(--font-d); font-size:1.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.insight-value-small { font-size:1rem; }
.insight-note { grid-column:2; color:#666; font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-quick-grid .q-btn { min-height:80px; background:linear-gradient(135deg, rgba(28,28,28,.98), rgba(17,17,17,.98)); }
.user-quick-grid .q-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:11px; color:var(--gold); background:var(--gold-dim); }
.user-recent-panel { box-shadow: 0 16px 38px rgba(0,0,0,.14); }
.admin-stat-card .dash-icon { color:var(--gold); }
.admin-stat-card:nth-child(2) .dash-icon { color:var(--info); }
.admin-stat-card:nth-child(3) .dash-icon { color:#f59e0b; }
.admin-stat-card:nth-child(4) .dash-icon { color:var(--success); }
.stat-foot { display:flex; align-items:center; gap:6px; margin-top:12px; color:#666; font-size:.68rem; }
.stat-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.stat-dot-gold { background:var(--gold); box-shadow:0 0 8px rgba(201,151,58,.8); }
.stat-dot-blue { background:var(--info); box-shadow:0 0 8px rgba(52,152,219,.8); }
.stat-dot-amber { background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.8); }
.stat-dot-green { background:var(--success); box-shadow:0 0 8px rgba(39,174,96,.8); }
.admin-kpi-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:-8px 0 26px; }
.admin-kpi { min-width:0; padding:16px 18px; background:linear-gradient(145deg,rgba(31,31,31,.98),rgba(18,18,18,.98)); border:1px solid var(--gray-dim); border-radius:var(--radius); }
.admin-kpi strong { display:block; margin-top:5px; color:var(--white); font-family:var(--font-d); font-size:1.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-meta { display:block; margin-top:3px; color:#666; font-size:.7rem; }
.admin-analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:26px; }
.analytics-wide { grid-column:span 2; }
.analytics-panel { margin-bottom:0; min-width:0; }
.analytics-panel .panel-head { align-items:flex-start; }
.panel-subtitle { margin-top:4px; color:#666; font-size:.72rem; line-height:1.4; }
.analytics-period { padding:5px 9px; border:1px solid rgba(201,151,58,.25); border-radius:99px; color:var(--gold); background:var(--gold-dim); font-size:.66rem; white-space:nowrap; }
.chart-wrap { position:relative; width:100%; padding:16px 18px 18px; }
.chart-tall { height:275px; }
.chart-donut { height:235px; max-width:420px; margin:0 auto; }
.chart-wrap canvas { width:100% !important; height:100% !important; }
.chart-legend { display:flex; flex-wrap:wrap; gap:7px 14px; padding:0 20px 18px; }
.chart-legend-item { display:flex; align-items:center; gap:6px; color:var(--gray); font-size:.7rem; }
.chart-legend-item span { width:8px; height:8px; border-radius:50%; }

/* ==================== MODALS ==================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:var(--ease);}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--dark);border:1px solid var(--gray-dim);border-radius:12px;padding:36px;width:100%;max-width:540px;position:relative;transform:scale(.95) translateY(20px);transition:var(--ease);max-height:min(90vh,90dvh);overflow-y:auto;overflow-x:hidden;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--gold-dark) var(--dark);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));border-radius:12px 12px 0 0;}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--dark3);border:1px solid var(--gray-dim);color:var(--gray);font-size:.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--ease);}
.modal-close:hover{border-color:var(--danger);color:var(--danger);}
.modal-title{font-family:var(--font-o);font-size:1.15rem;letter-spacing:.06em;margin-bottom:22px;font-weight:700;display:flex;align-items:center;gap:8px;}

/* ══════════════════════════════════════════════════════════════
   UNIVERSAL STICKY MODAL HEADER SYSTEM
   .modal-sticky  →  flex-column container, no internal scroll
   .modal-sticky-header → position:sticky top:0, always visible
   .modal-sticky-body   → flex:1, overflow-y:auto, scrolls alone
   ══════════════════════════════════════════════════════════════ */

/* Override the base .modal scroll when sticky system is active */
.modal.modal-sticky {
  padding        : 0;
  display        : flex;
  flex-direction : column;
  overflow       : hidden;          /* body handles its own scroll */
  max-height     : min(90vh, 90dvh);
}

/* ── Pinned header ── */
.modal-sticky-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 12px;
  padding         : 18px 22px;
  background      : var(--bg-card);
  border-bottom   : 1px solid var(--border-dim);
  position        : sticky;
  top             : 0;
  z-index         : 10;
  flex-shrink     : 0;
  border-radius   : 12px 12px 0 0;

  /* Subtle gold accent line at very top */
  box-shadow      : inset 0 3px 0 0 var(--gold);
}

/* ── Title inside the sticky header ── */
.modal-sticky-title {
  font-family    : var(--font-o);
  font-size      : 1.05rem;
  font-weight    : 700;
  letter-spacing : .06em;
  color          : var(--text-heading);
  display        : flex;
  align-items    : center;
  gap            : 9px;
  flex           : 1;
  min-width      : 0;
}

.modal-sticky-title span {
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

/* ── Close button ── */
.modal-close-sticky {
  width           : 32px;
  height          : 32px;
  border-radius   : 50%;
  background      : var(--bg-3);
  border          : 1px solid var(--border-dim);
  color           : var(--text-secondary);
  font-size       : 1rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  transition      : all var(--ease);
  flex-shrink     : 0;
}

.modal-close-sticky:hover {
  background   : rgba(231,76,60,.12);
  border-color : var(--danger);
  color        : var(--danger);
  transform    : rotate(90deg) scale(1.12);
}

/* ── Scrollable body area ── */
.modal-sticky-body {
  flex                  : 1;
  overflow-y            : auto;
  overflow-x            : hidden;
  padding               : 24px 24px 28px;
  overscroll-behavior   : contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width       : thin;
  scrollbar-color       : var(--scrollbar-thumb) var(--scrollbar-track);
}

.modal-sticky-body::-webkit-scrollbar       { width: 5px; }
.modal-sticky-body::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.modal-sticky-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Light theme: header gets a slight shadow so it visually separates from body */
[data-theme="light"] .modal-sticky-header {
  background : var(--bg-1);
  box-shadow : inset 0 3px 0 0 var(--gold), 0 1px 6px rgba(0,0,0,.06);
}



/* ==================== TOAST ==================== */
.toast{position:fixed;bottom:22px;right:22px;background:var(--dark);border:1px solid var(--gray-dim);border-radius:var(--radius);padding:13px 18px;font-size:.88rem;z-index:9000;transform:translateX(120%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:10px;min-width:260px;box-shadow:var(--shadow);}
.toast.show{transform:translateX(0);}
.toast.t-success{border-color:var(--success);}
.toast.t-error{border-color:var(--danger);}
.toast.t-gold{border-color:var(--gold);}

/* ==================== ADMIN ==================== */
.admin-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.3);border-radius:100px;font-size:.72rem;color:var(--danger);letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.admin-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--danger);animation:pulse 1.5s infinite;}
.search-bar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap;}
.search-input{flex:1;padding:11px 15px;background:var(--dark3);border:1px solid var(--gray-dim);border-radius:var(--radius);color:var(--white);font-family:var(--font-b);font-size:.92rem;outline:none;transition:var(--ease);}
.search-input:focus{border-color:var(--gold);}
.filter-sel{padding:11px 14px;background:var(--dark3);border:1px solid var(--gray-dim);border-radius:var(--radius);color:var(--white);font-family:var(--font-b);font-size:.88rem;outline:none;cursor:pointer;}
.status-select{padding:7px 10px;background:var(--dark3);border:1px solid var(--gray-dim);border-radius:var(--radius);color:var(--white);font-family:var(--font-b);font-size:.82rem;outline:none;cursor:pointer;transition:var(--ease);}
.status-select:focus{border-color:var(--gold);}
.user-avatar-lg{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.3rem;color:var(--black);}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.detail-item .lbl{font-size:.7rem;letter-spacing:.15em;color:var(--gray);text-transform:uppercase;margin-bottom:3px;}
.detail-item .val{font-size:.92rem;color:var(--white);}

/* ==================== ANIMATIONS ==================== */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.2);}}
@keyframes floatLogo{0%,100%{transform:translateY(0) rotate(0deg);}40%{transform:translateY(-12px) rotate(1deg);}70%{transform:translateY(-6px) rotate(-1deg);}}
@keyframes ringRot{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes orbit1{from{transform:rotate(0deg) translateX(130px) rotate(0deg);}to{transform:rotate(360deg) translateX(130px) rotate(-360deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}
.anim{animation:fadeUp .7s ease both;}
.d1{animation-delay:.1s;} .d2{animation-delay:.2s;} .d3{animation-delay:.3s;} .d4{animation-delay:.4s;}
.spinner{width:22px;height:22px;border:2px solid var(--gray-dim);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;}

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
.page-header h2 {
  font-family: var(--font-o);
  font-size: 1.2rem;
  letter-spacing: .06em;
  margin: 0;
  font-weight: 700;
  background: linear-gradient(135deg, var(--white) 40%, var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1100px){
  .nav-links{gap:14px;}
  .nav-links a{font-size:.74rem;letter-spacing:.06em;}
  .nav-actions .btn{padding:7px 14px;font-size:.74rem;letter-spacing:.06em;}
}
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .coverage-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:992px){
  .page-content { overflow-x:hidden; }
  .admin-analytics-grid { grid-template-columns:1fr; }
  .analytics-wide { grid-column:span 1; }

  .sidebar {
    width: 100vw !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform .38s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease;
    opacity: 0;
    pointer-events: none;
    background: 
      radial-gradient(ellipse 90% 50% at 50% -10%, rgba(201,151,58,0.3), transparent 75%),
      radial-gradient(circle 350px at 100% 100%, rgba(201,151,58,0.16), transparent 60%),
      radial-gradient(circle 280px at 0% 50%, rgba(201,151,58,0.1), transparent 60%),
      linear-gradient(180deg, #17130b 0%, #0f0d09 45%, #060605 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: none;
    border-bottom: 2px solid rgba(201,151,58,0.3);
    box-shadow: 0 0 50px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,220,140,0.22);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  .sidebar.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
  }
  .sidebar-logo {
    padding: 20px 22px;
    border-bottom: 1px solid rgba(201,151,58,0.25);
    background: rgba(201,151,58,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(201,151,58,0.15);
    border: 1px solid rgba(201,151,58,0.45);
    color: var(--gold-light);
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .22s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }
  .sidebar-close-btn:hover,
  .sidebar-close-btn:active {
    background: rgba(201,151,58,0.32);
    border-color: var(--gold);
    color: #fff;
    transform: rotate(90deg);
  }
  .sidebar-nav {
    flex: 1;
    padding: 20px 18px;
    overflow-y: auto;
  }
  .sidebar-nav a {
    font-size: 1.05rem;
    padding: 14px 18px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all .22s ease;
    min-height: 48px;
  }
  .sidebar-nav a:hover {
    background: rgba(201,151,58,0.14);
    border-color: rgba(201,151,58,0.35);
    color: var(--white);
    transform: translateX(4px);
  }
  .sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(201,151,58,0.32), rgba(201,151,58,0.12));
    border-color: rgba(201,151,58,0.65);
    color: #ffdf88;
    box-shadow: 0 4px 18px rgba(201,151,58,0.22), inset 0 1px 0 rgba(255,230,150,0.35);
  }
  .sidebar-bottom {
    padding: 16px 18px;
    border-top: 1px solid rgba(201,151,58,0.2);
    background: rgba(0,0,0,0.35);
  }
  .main-content{margin-left:0;}
  .menu-toggle{display:block;flex-shrink:0;}
  .topbar{padding:14px 20px;}
  .topbar > div:first-child { min-width:0; } /* Allow title to truncate */
  .topbar-actions .theme-switch-btn { display: none; } /* Hide theme toggle in header on mobile */
  .page-content{padding:20px;}
  .theme-picker {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Collapse navbar to hamburger on tablets */
  .nav-links,.nav-actions{display:none;}
  .hamburger{display:flex;}
}

@media(max-width:768px){
  .hero .container{grid-template-columns:1fr;text-align:center;padding-top:110px;}
  .hero-desc{margin:0 auto 28px;}
  .hero-actions{justify-content:center;}
  .hero-stats{justify-content:center;}
  .hero-visual{display:none;}
  .services-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .coverage-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .nav-links.active, .nav-actions.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px;
    z-index: 999;
    /* GPU-accelerated slide in — no more stuck/frozen menu */
    transform: translateZ(0);
    will-change: transform, opacity;
    animation: navMenuIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  @keyframes navMenuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-links.active {
    top: 100%;
    padding-bottom: 10px;
  }
  .nav-actions.active {
    top: calc(100% + 210px);
    padding-top: 5px;
    border-bottom: 1px solid var(--gray-dim);
  }
  .hamburger{display:flex;}
  .dash-grid{gap:12px;}
  .quick-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .auth-card{padding:28px 22px;}
  .form-step{padding:24px 18px;}
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .header-actions {
    width: 100%;
  }
  .header-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.75rem;
  }
  /* Parcel tracking section mobile */
  .track-section-wrap{padding:56px 0;}
  .track-section-box{padding:24px 18px 26px;}
  .track-section-form{flex-direction:column;align-items:stretch;}
  .hero-tracker-btn{width:100%;}
  .track-result-header{flex-direction:column;gap:10px;}
}


.responsive-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.responsive-footer .right-actions {
  display: flex;
  gap: 10px;
}
.btn-danger-action {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--white);
}

@media(max-width:480px){
  .user-insight-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .user-insight-card { padding: 12px 10px; grid-template-columns: auto 1fr; gap: 8px; }
  .insight-icon { width:28px; height:28px; font-size:.9rem; }
  .insight-value { font-size:1rem; }
  .insight-value-small { font-size:.84rem; }
  .insight-note { font-size:.62rem; }
  .admin-kpi-strip { grid-template-columns:1fr 1fr; gap:9px; }
  .admin-kpi-strip .admin-kpi:last-child:nth-child(odd) { grid-column:span 2; }
  .admin-kpi { padding:13px 12px; }
  .admin-kpi strong { font-size:1.08rem; }
  .admin-analytics-grid { grid-template-columns:1fr; gap:12px; }
  .analytics-wide { grid-column:span 1; }
  .chart-wrap { padding:12px 10px 14px; }
  .chart-tall { height:235px; }
  .chart-donut { height:215px; }
  .analytics-panel .panel-head { padding:15px 14px; }
  .panel-subtitle { max-width:230px; }

  .responsive-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .responsive-footer .right-actions {
    flex-direction: column;
    width: 100%;
  }
  .responsive-footer button {
    width: 100%;
    margin-bottom: 5px;
  }
  .dash-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .dash-card{padding:15px 12px;}
  .dash-val{font-size:1.4rem;}
  .dash-icon{font-size:1.3rem; margin-bottom:6px;}
  .coverage-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .stat-sep{display:none;}
  .search-input{flex:1 1 100%;}
  .filter-sel,.btn-sm{flex:1;}
}
/* ── Timeline Styles ── */
.timeline-container {
  margin-top: 20px;
  position: relative;
}
/* ── Premium Landing Loader ── */
#app-landing-loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s cubic-bezier(0.4,0,0.2,1), visibility .6s;
}
#app-landing-loader.fade-out {
  opacity: 0;
  visibility: hidden;
}
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.loader-logo-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-logo {
  width: 66px;
  height: auto;
  object-fit: contain;
  animation: pulseLogo 2s infinite cubic-bezier(0.4,0,0.2,1);
}
.loader-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold-dim);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}
.loader-text {
  text-align: center;
}
.loader-brand {
  font-family: var(--font-d);
  font-size: 1.5rem;
  letter-spacing: .2em;
  color: var(--white);
  display: block;
  margin-bottom: 8px;
}
.loader-bar {
  width: 120px;
  height: 2px;
  background: var(--gray-dim);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}
.loader-progress {
  width: 40%;
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  animation: loaderProgress 1.5s infinite alternate ease-in-out;
}
@keyframes pulseLogo {
  0%, 100% { transform: scale(1); opacity: 1; filter: brightness(1); }
  50% { transform: scale(1.1); opacity: .8; filter: brightness(1.2); }
}
@keyframes loaderProgress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(150%); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.modal-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .modal-btn-grid { grid-template-columns: 1fr; }
}
.timeline-container {
  margin-top: 25px;
  position: relative;
  padding-left: 30px;
}
.timeline-container::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--gray-dim);
}
.timeline-item {
  position: relative;
  margin-bottom: 25px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -25px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray);
  border: 2px solid var(--dark);
  box-shadow: 0 0 0 3px var(--dark);
  z-index: 2;
}
.timeline-item.active .timeline-dot {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
.timeline-info {
  display: flex;
  flex-direction: column;
}
.timeline-title {
  font-weight: 700;
  color: var(--white);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.timeline-location {
  font-size: .78rem;
  color: var(--gold);
  margin-bottom: 2px;
}
.timeline-note {
  font-size: .78rem;
  color: var(--gray);
}
.timeline-date {
  font-size: .75rem;
  color: #a0a0a0;
  margin-top: 4px;
}

.pricing-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .pricing-tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 15px;
  }
  .pricing-tab-header h4 {
    text-align: center;
    border-bottom: 1px solid var(--gray-dim);
    padding-bottom: 5px;
  }
}

/* Pricing Tab Styles */
#pricingTabs::-webkit-scrollbar {
  display: none;
}
#pricingTabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.pricing-tab-content {
  animation: fadeInPricing .3s ease-out;
}
@keyframes fadeInPricing {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Admin User Editor Responsive Utilities ── */
.user-editor-modal {
  max-width: 960px !important;
}
#userDetailContent {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-user-edit-grid,
.admin-user-doc-grid {
  min-width: 0;
}
.admin-user-edit-grid > *,
.admin-user-doc-grid > * {
  min-width: 0;
}
.admin-user-doc-grid .btn {
  white-space: nowrap;
  margin-bottom: 8px;
}
.admin-user-actions > div {
  display: flex;
  gap: 10px;
}

@media (max-width: 600px) {
  .modal-overlay {
    padding: 10px;
  }
  .user-editor-modal {
    width: 100%;
    max-width: 100% !important;
    max-height: calc(100vh - 20px);
    padding: 28px 16px 18px;
    border-radius: 10px;
  }
  .admin-user-edit-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .admin-user-doc-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .admin-user-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-user-actions > button,
  .admin-user-actions > div,
  .admin-user-actions .btn {
    width: 100%;
  }
  .admin-user-actions > div {
    flex-direction: column;
    gap: 8px;
  }
  #userDetailContent input,
  #userDetailContent select,
  #userDetailContent textarea {
    min-width: 0;
    max-width: 100%;
  }
}

/* ── Modal Responsive Utilities ── */
.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.modal-item-full {
  grid-column: span 2;
}
.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 15px;
}
.status-header-label {
  font-size: 0.62rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .modal-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .modal-item-full {
    grid-column: span 1;
  }
  .modal-footer {
    flex-direction: column !important;
  }
  .modal-footer .btn {
    width: 100% !important;
    height: 48px !important;
    justify-content: center;
  }
}

.modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.modal-footer .btn {
  flex: 1;
}

/* ── Sticky Modal Header & Container for Status Update Modal ── */
#statusModal .modal,
.status-modal-card {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(92vh, 92dvh) !important;
  overflow: hidden !important;
  position: relative !important;
}

.status-modal-sticky-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(18, 20, 24, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.status-modal-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.status-modal-header-title {
  font-family: var(--font-o);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.status-modal-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.status-header-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.3;
}

.status-header-chip.tracking-chip {
  background: rgba(201, 151, 58, 0.12);
  color: var(--gold);
  border: 1px solid rgba(201, 151, 58, 0.3);
  font-family: monospace;
  letter-spacing: 0.5px;
}

.status-header-chip.account-chip {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gray-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-close-sticky {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dark3);
  border: 1px solid var(--gray-dim);
  color: var(--gray);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 12px;
}

.modal-close-sticky:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: var(--danger);
  color: var(--danger);
  transform: scale(1.08);
}

.status-modal-scroll-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 28px 30px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) var(--dark);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.status-snapshot-card {
  background: linear-gradient(135deg, var(--dark3), var(--dark2));
  border: 1px solid var(--gray-dim);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}

.status-info-card {
  background: rgba(255,255,255,0.02);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.status-financial-card {
  background: rgba(201,151,58,0.05);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(201,151,58,0.15);
}

.status-courier-card {
  background: rgba(201,151,58,0.05);
  border: 1px solid rgba(201,151,58,0.15);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .status-modal-sticky-header {
    padding: 12px 16px;
  }
  .status-modal-scroll-body {
    padding: 16px;
  }
  .status-header-chip.account-chip {
    max-width: 140px;
  }
}

/* ── Service Pricing Stack ── */
.svc-columns-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}
.svc-col {
  background: var(--dark3);
  border: 1px solid var(--gray-dim);
  border-radius: var(--radius);
  overflow: hidden;
}
.svc-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-dim);
  background: var(--dark2);
}
.svc-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.svc-col-body {
  max-height: 200px;
  overflow-y: auto;
}
.svc-col-body table {
  width: 100%;
  border-collapse: collapse;
}
.svc-col-body th {
  padding: 5px 7px;
  font-size: 0.62rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--gray-dim);
  background: var(--dark2);
  position: sticky;
  top: 0;
}
.svc-col-body td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.svc-col-body tr:last-child td { border-bottom: none; }
.svc-col-addbtn {
  display: block;
  width: 100%;
  padding: 6px;
  font-size: 0.72rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--gray-dim);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.2s;
}
.svc-col-addbtn:hover { background: var(--gold-dim); }
.svc-overweight-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px dashed rgba(201,151,58,0.2);
  background: rgba(201,151,58,0.03);
}
.svc-overweight-row label {
  font-size: 0.62rem;
  color: var(--gray);
  white-space: nowrap;
  flex-shrink: 0;
}
.svc-overweight-row input {
  flex: 1;
  padding: 4px 6px !important;
  height: 28px !important;
  font-size: 0.8rem !important;
}


/* ==================== FPV LANDING PAGE REFRESH ==================== */
.landing-page {
  --landing-ink: #090909;
  --landing-panel: rgba(20, 20, 20, .82);
  background:
    radial-gradient(circle at 10% 8%, rgba(201,151,58,.08), transparent 24rem),
    radial-gradient(circle at 90% 55%, rgba(52,152,219,.045), transparent 25rem),
    var(--black);
}
.landing-page .navbar { padding-top: 20px; }
.landing-page .navbar .container { max-width: 1280px; }
.landing-page .navbar:not(.scrolled) .nav-logo-text .brand { text-shadow: 0 0 22px rgba(201,151,58,.18); }
.landing-page .nav-logo img { filter: drop-shadow(0 0 16px rgba(201,151,58,.3)); }
.landing-page .nav-links a { position: relative; }
.landing-page .nav-links a::after { content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:var(--ease); }
.landing-page .nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }
.landing-page .hero {
  min-height: 760px;
  background:
    linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.72) 44%, rgba(10,10,10,.22) 100%),
    radial-gradient(circle at 74% 45%, rgba(201,151,58,.13), transparent 22rem);
}
.landing-page .hero::before {
  content: 'FPV / LOGISTICS NETWORK / PAKISTAN';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  color: rgba(245,240,232,.2);
  font-family: var(--font-u);
  font-size: .62rem;
  letter-spacing: .45em;
  z-index: 2;
  white-space: nowrap;
}
.landing-page .hero .container { max-width:1280px; gap: 48px; }
.landing-page .hero-content { position:relative; max-width: 680px; }
.landing-page .hero-badge { box-shadow: 0 8px 24px rgba(201,151,58,.12); }
.landing-page .hero-title { font-size: clamp(3.7rem, 7vw, 7.2rem); letter-spacing: .015em; text-shadow: 0 12px 40px rgba(0,0,0,.45); }
.landing-page .hero-title .gold-line { text-shadow: 0 0 70px rgba(201,151,58,.5); }
.landing-page .hero-desc { font-size: 1.12rem; max-width: 530px; }
.landing-page .hero-actions .btn { border-radius: 3px; }
.landing-page .hero-stats { gap: 38px; max-width: 560px; }
.landing-page .hero-stat-num { font-size: 2.1rem; }
.landing-page .hero-visual { min-height: 460px; }
.landing-page .logo-3d-wrapper { width: min(42vw, 470px); height: min(42vw, 470px); }
.landing-page .logo-3d-img { width: min(29vw, 310px); height: min(29vw, 310px); }
.landing-page .landing-stats-bar { background: linear-gradient(90deg, #111 0%, #181818 50%, #111 100%); box-shadow: 0 -16px 42px rgba(0,0,0,.3); }
.landing-page .landing-stats-bar .stat-item { min-width: 120px; }
.landing-page .landing-stats-bar .stat-num { font-size: 2.5rem; }
.landing-page .landing-services { padding: 112px 0 124px; background: linear-gradient(180deg, #0a0a0a, #0f0f0f); }
.landing-page .landing-services .container,
.landing-page .landing-process .container,
.landing-page .landing-coverage .container,
.landing-page .landing-cta .container { max-width: 1280px; }
.landing-page .landing-services .text-center,
.landing-page .landing-process .text-center,
.landing-page .landing-coverage .text-center { max-width: 700px; margin: 0 auto; }
.landing-page .section-title { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.landing-page .section-sub { font-size: 1.05rem; }
.landing-page .services-grid { margin-top: 64px; gap: 16px; }
.landing-page .service-card { min-height: 286px; padding: 30px; border-color: rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(31,31,31,.98), rgba(15,15,15,.98)); }
.landing-page .service-card::after { content:'↗'; position:absolute; top:22px; right:24px; color:rgba(201,151,58,.55); font-size:1.2rem; transition:var(--ease); }
.landing-page .service-card:hover::after { color:var(--gold-light); transform:translate(3px,-3px); }
.landing-page .svc-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,151,58,.3); border-radius:13px; background:var(--gold-dim); color:var(--gold-light); font-size:1.5rem; }
.landing-page .service-card h3 { font-size:1.55rem; margin-top:20px; }
.landing-page .service-card p { max-width: 280px; }
.landing-page .svc-tag { margin-top: 24px; border-radius:3px; letter-spacing:.14em; }
.landing-page .landing-process { position:relative; padding: 116px 0; background: #111; overflow:hidden; }
.landing-page .landing-process::before { content:'HOW YOUR PARCEL MOVES'; position:absolute; left:-42px; top:50%; transform:rotate(-90deg) translateY(-50%); transform-origin:left top; color:rgba(255,255,255,.08); letter-spacing:.45em; font-family:var(--font-u); font-size:.7rem; }
.landing-page .steps-grid { gap:18px; margin-top:70px; }
.landing-page .steps-grid::before { background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.38; }
.landing-page .step-it { padding: 0 16px; }
.landing-page .step-num { width:62px; height:62px; border:4px solid #111; outline:1px solid rgba(201,151,58,.45); }
.landing-page .step-it h3 { margin-top:24px; font-size:1.32rem; }
.landing-page .step-it p { line-height:1.65; }
.landing-page .landing-coverage { padding: 112px 0; background: radial-gradient(circle at 50% 20%, rgba(201,151,58,.05), transparent 28rem); }
.landing-page .coverage-grid { margin-top:64px; gap:14px; }
.landing-page .zone-card { min-height:180px; padding:24px; background:rgba(17,17,17,.8); border-color:rgba(255,255,255,.1); }
.landing-page .zone-card:hover { background:linear-gradient(145deg, rgba(33,33,33,.98), rgba(16,16,16,.98)); box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.landing-page .zone-name { font-size:1.2rem; }
.landing-page .zone-cities { line-height:1.75; }
.landing-page .landing-coverage .zone-card:last-child { background:linear-gradient(145deg, rgba(201,151,58,.18), rgba(201,151,58,.04)) !important; }
.landing-page .landing-cta { padding: 130px 0; border-top:1px solid rgba(201,151,58,.14); border-bottom:1px solid rgba(201,151,58,.14); background: radial-gradient(circle at 50% 0%, rgba(201,151,58,.13), transparent 28rem), linear-gradient(135deg, #151515, #090909); }
.landing-page .landing-cta .section-title { max-width:850px; margin:0 auto; }
.landing-page .landing-cta .section-sub { max-width:620px; }
.landing-page .landing-cta .btn-lg { min-width:220px; }
.landing-page .footer { background:#080808; }
.landing-page .footer-logo img { filter:drop-shadow(0 0 12px rgba(201,151,58,.25)); }
.landing-page .footer-desc { max-width:390px; }

@media (max-width: 900px) {
  .landing-page .hero { min-height: 720px; }
  .landing-page .hero::before { display:none; }
  .landing-page .hero .container { padding-top:120px; }
  .landing-page .hero-visual { min-height:360px; }
  .landing-page .logo-3d-wrapper { width:330px; height:330px; }
  .landing-page .logo-3d-img { width:230px; height:230px; }
  .landing-page .services-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .landing-page .navbar { padding:12px 0; }
  .landing-page .nav-logo img { width:auto; height:34px; }
  .landing-page .nav-logo-text .brand { font-size:1.1rem; }
  .landing-page .nav-logo-text .sub { font-size:.52rem; letter-spacing:.2em; }
  .landing-page .hero { min-height: 720px; align-items:flex-start; }
  .landing-page .hero .container { padding-top:126px; padding-bottom:42px; }
  .landing-page .hero-content { text-align:left; }
  .landing-page .hero-badge { font-size:.63rem; letter-spacing:.12em; margin-bottom:18px; }
  .landing-page .hero-title { font-size: clamp(3.2rem, 15vw, 5rem); line-height:.94; }
  .landing-page .hero-desc { font-size:1rem; line-height:1.55; }
  .landing-page .hero-actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .landing-page .hero-actions .btn { width:100%; }
  .landing-page .hero-stats { gap:16px; margin-top:30px; padding-top:20px; justify-content:space-between; }
  .landing-page .hero-stat-num { font-size:1.55rem; }
  .landing-page .hero-stat-label { display:block; max-width:82px; font-size:.57rem; line-height:1.3; letter-spacing:.12em; }
  .landing-page .hero-visual { display:flex; min-height:220px; margin-top:-4px; }
  .landing-page .logo-3d-wrapper { width:245px; height:245px; }
  .landing-page .logo-3d-img { width:165px; height:165px; }
  .landing-page .landing-stats-bar { padding:20px 0; }
  .landing-page .landing-stats-bar .container { display:grid; grid-template-columns:1fr 1fr; gap:18px 8px; }
  .landing-page .landing-stats-bar .stat-sep { display:none; }
  .landing-page .landing-stats-bar .stat-num { font-size:1.85rem; }
  .landing-page .landing-stats-bar .stat-lbl { font-size:.58rem; letter-spacing:.1em; }
  .landing-page .landing-services,
  .landing-page .landing-process,
  .landing-page .landing-coverage { padding:76px 0; }
  .landing-page .services-grid { grid-template-columns:1fr; margin-top:42px; }
  .landing-page .service-card { min-height:0; padding:24px; }
  .landing-page .service-card h3 { font-size:1.4rem; }
  .landing-page .landing-process::before { display:none; }
  .landing-page .steps-grid { grid-template-columns:1fr; margin-top:46px; gap:34px; }
  .landing-page .steps-grid::before { top:28px; bottom:28px; left:50%; right:auto; width:2px; height:auto; background:linear-gradient(to bottom, transparent, var(--gold), transparent); }
  .landing-page .step-it { background:#111; padding:0 8px 4px; }
  .landing-page .step-num { position:relative; z-index:1; }
  .landing-page .coverage-grid { grid-template-columns:1fr; margin-top:42px; }
  .landing-page .zone-card { min-height:0; }
  .landing-page .landing-cta { padding:80px 0; }
  .landing-page .landing-cta .cta-buttons { display:grid; grid-template-columns:1fr; }
  .landing-page .landing-cta .btn-lg { width:100%; min-width:0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .logo-ring,
  .landing-page .logo-3d-img,
  .landing-page .glow-dot,
  .landing-page .hero-badge::before { animation:none; }
}


/* ── Canonical city resolver ── */
.city-resolution-hint { min-height: 18px; transition: color .2s ease; }
.city-resolution-success { color: var(--success); }
.city-resolution-warning { color: #f0b35a; }
.city-suggestions { display:none; position:relative; z-index:8; margin-top:7px; padding:6px; background:var(--dark2); border:1px solid rgba(201,151,58,.28); border-radius:var(--radius); box-shadow:0 15px 30px rgba(0,0,0,.32); }
.city-suggestions.open { display:grid; gap:4px; }
.city-suggestion { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 11px; border:1px solid transparent; border-radius:5px; color:var(--white); text-align:left; background:transparent; transition:var(--ease); }
.city-suggestion:hover, .city-suggestion:focus-visible { border-color:rgba(201,151,58,.45); background:var(--gold-dim); outline:none; }
.city-suggestion span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.city-suggestion small { flex-shrink:0; color:var(--gold); font-size:.66rem; }


.city-suggestions-title { padding: 4px 6px 7px; color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.city-suggestions-title i { margin-right: 4px; }
@media (max-width: 640px) {
  .city-suggestions { max-height: 260px; overflow-y: auto; }
  .city-suggestion { min-height: 46px; padding: 11px 10px; }
  .city-suggestion small { font-size: .6rem; }
}


/* ── Shared backend-operation feedback ── */
.app-operation-busy { overflow: hidden !important; }
.app-operation-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 5, 5, .78); backdrop-filter: blur(13px); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.app-operation-overlay.open { opacity: 1; pointer-events: all; }
.app-operation-card { width: min(390px, 100%); padding: 31px 28px 25px; text-align: center; background: linear-gradient(145deg, rgba(30, 30, 30, .98), rgba(15, 15, 15, .98)); border: 1px solid rgba(201, 151, 58, .34); border-radius: 17px; box-shadow: 0 22px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03) inset; transform: translateY(10px) scale(.97); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.app-operation-overlay.open .app-operation-card { transform: translateY(0) scale(1); }
.app-operation-mark { display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; margin-bottom: 15px; }
.app-operation-mark span { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; animation: operationPulse 1.1s ease-in-out infinite; box-shadow: 0 0 14px rgba(201, 151, 58, .62); }
.app-operation-mark span:nth-child(2) { animation-delay: .16s; opacity: .75; }
.app-operation-mark span:nth-child(3) { animation-delay: .32s; opacity: .5; }
.app-operation-title { color: var(--white); font-family: var(--font-d); font-size: 1.35rem; letter-spacing: .035em; }
.app-operation-message { min-height: 25px; margin-top: 6px; color: var(--gray-light); font-size: .82rem; line-height: 1.55; }
.app-operation-progress { height: 4px; margin-top: 22px; overflow: hidden; background: rgba(255, 255, 255, .08); border-radius: 99px; }
.app-operation-progress span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), transparent); border-radius: inherit; animation: operationProgress 1.35s ease-in-out infinite; }
.app-operation-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 15px; color: #777; font-size: .67rem; letter-spacing: .02em; }
.app-operation-note i { color: var(--gold); font-size: .82rem; }
@keyframes operationPulse { 0%, 100% { transform: translateY(0) scale(.78); opacity: .35; } 50% { transform: translateY(-5px) scale(1.1); opacity: 1; } }
@keyframes operationProgress { 0% { transform: translateX(-145%); } 100% { transform: translateX(380%); } }
@media (max-width: 520px) {
  .app-operation-overlay { padding: 16px; }
  .app-operation-card { padding: 27px 21px 22px; border-radius: 14px; }
  .app-operation-title { font-size: 1.18rem; }
  .app-operation-message { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-operation-overlay, .app-operation-card { transition: none; }
  .app-operation-mark span, .app-operation-progress span { animation: none; }
  .app-operation-mark span { opacity: .85; }
}


/* ── Admin session restore ── */
.admin-session-boot { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 38%, rgba(201,151,58,.09), transparent 35%), #080808; opacity: 1; visibility: visible; transition: opacity .25s ease, visibility .25s ease; }
.admin-session-boot.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.admin-session-boot-card { width: min(430px, 100%); padding: 38px 30px 29px; text-align: center; background: linear-gradient(145deg, rgba(31,31,31,.98), rgba(16,16,16,.98)); border: 1px solid rgba(201,151,58,.34); border-radius: 18px; box-shadow: 0 24px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset; }
.admin-session-boot-mark { display: flex; justify-content: center; align-items: center; gap: 7px; height: 26px; margin-bottom: 19px; }
.admin-session-boot-mark span { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 13px rgba(201,151,58,.62); animation: adminBootPulse 1.15s ease-in-out infinite; }
.admin-session-boot-mark span:nth-child(2) { animation-delay: .16s; opacity: .7; }
.admin-session-boot-mark span:nth-child(3) { animation-delay: .32s; opacity: .45; }
.admin-session-boot-kicker { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .24em; }
.admin-session-boot-card h1 { margin: 8px 0 7px; color: var(--white); font-family: var(--font-d); font-size: 1.45rem; letter-spacing: .035em; }
.admin-session-boot-card p { min-height: 25px; margin: 0; color: var(--gray-light); font-size: .82rem; }
.admin-session-boot-line { height: 4px; margin: 24px 0 15px; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 99px; }
.admin-session-boot-line span { display: block; width: 36%; height: 100%; background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), transparent); animation: adminBootProgress 1.35s ease-in-out infinite; }
.admin-session-boot-card small { color: #777; font-size: .67rem; }
.admin-session-boot-card small i { margin-right: 4px; color: var(--gold); }
@keyframes adminBootPulse { 0%, 100% { transform: translateY(0) scale(.8); opacity: .3; } 50% { transform: translateY(-5px) scale(1.1); opacity: 1; } }
@keyframes adminBootProgress { 0% { transform: translateX(-150%); } 100% { transform: translateX(390%); } }
@media (max-width: 520px) {
  .admin-session-boot { padding: 16px; }
  .admin-session-boot-card { padding: 31px 21px 24px; border-radius: 15px; }
  .admin-session-boot-card h1 { font-size: 1.22rem; }
  .admin-session-boot-card p { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-session-boot, .admin-session-boot-card { transition: none; }
  .admin-session-boot-mark span, .admin-session-boot-line span { animation: none; }
  .admin-session-boot-mark span { opacity: .8; }
}


/* ── Non-admin admin-link fallback ── */
.admin-unauthorized-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 34%, rgba(201,151,58,.08), transparent 36%), var(--black); }
.admin-unauthorized-card { width: min(440px, 100%); padding: 38px 30px 29px; text-align: center; background: linear-gradient(145deg, rgba(31,31,31,.98), rgba(16,16,16,.98)); border: 1px solid var(--gray-dim); border-radius: 18px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.025) inset; }
.admin-unauthorized-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 19px; color: var(--gold); font-size: 2rem; background: rgba(201,151,58,.1); border: 1px solid rgba(201,151,58,.32); border-radius: 50%; }
.admin-unauthorized-card h1 { margin: 8px 0 8px; color: var(--white); font-family: var(--font-d); font-size: 1.55rem; letter-spacing: .035em; }
.admin-unauthorized-card p { margin: 0 auto 18px; max-width: 330px; color: var(--gray-light); font-size: .84rem; line-height: 1.65; }
.admin-unauthorized-account { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 0 auto 19px; padding: 10px 12px; overflow: hidden; color: var(--gray-light); font-size: .75rem; background: rgba(255,255,255,.035); border: 1px solid var(--gray-dim); border-radius: var(--radius); }
.admin-unauthorized-account i { flex: 0 0 auto; color: var(--gold); font-size: 1rem; }
.admin-unauthorized-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-unauthorized-card .btn { margin-top: 9px; }
.admin-unauthorized-back { display: inline-block; margin-top: 19px; color: var(--gray); font-size: .76rem; text-decoration: none; }
.admin-unauthorized-back:hover { color: var(--gold); }
@media (max-width: 520px) {
  .admin-unauthorized-gate { padding: 16px; }
  .admin-unauthorized-card { padding: 31px 21px 24px; border-radius: 15px; }
  .admin-unauthorized-card h1 { font-size: 1.28rem; }
  .admin-unauthorized-card p { font-size: .77rem; }
}

/* ── Parcel payment mode selector ── */
.payment-mode-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.payment-mode-option { display:flex; align-items:flex-start; gap:10px; min-height:78px; padding:13px; color:var(--gray-light); background:rgba(255,255,255,.025); border:1px solid var(--gray-dim); border-radius:var(--radius); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .16s ease; }
.payment-mode-option:hover { border-color:rgba(201,151,58,.55); background:rgba(201,151,58,.06); }
.payment-mode-option:active { transform:scale(.985); }
.payment-mode-option.active { border-color:var(--gold); background:rgba(201,151,58,.1); box-shadow:0 0 0 1px rgba(201,151,58,.12) inset; }
.payment-mode-option input { flex:0 0 auto; margin-top:3px; accent-color:var(--gold); }
.payment-mode-option > span:last-child { display:flex; flex-direction:column; gap:3px; }
.payment-mode-option strong { color:var(--white); font-size:.8rem; line-height:1.25; }
.payment-mode-option small { color:var(--gray); font-size:.69rem; line-height:1.4; }
.payment-mode-icon { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; color:var(--gold); font-size:1rem; background:rgba(201,151,58,.1); border-radius:50%; }
.prepaid-locked-amount { display:flex; align-items:center; gap:8px; min-height:42px; padding:10px 12px; color:var(--gray-light); background:rgba(39,174,96,.06); border:1px solid rgba(39,174,96,.3); border-radius:var(--radius); }
.prepaid-locked-amount i { color:var(--success); }
.prepaid-locked-amount strong { color:var(--success); font-size:1rem; }
.prepaid-locked-amount span { color:var(--gray); font-size:.7rem; }
.booking-charge-summary { margin:20px 0 8px; padding:15px; background:linear-gradient(145deg,rgba(201,151,58,.1),rgba(255,255,255,.025)); border:1px solid rgba(201,151,58,.25); border-radius:var(--radius); }
.booking-charge-summary-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; color:var(--gold); font-size:.78rem; font-weight:700; }
.booking-charge-status { padding:4px 8px; color:var(--success); font-size:.64rem; font-weight:600; background:rgba(39,174,96,.1); border:1px solid rgba(39,174,96,.22); border-radius:100px; white-space:nowrap; }
.booking-charge-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 0; color:var(--gray-light); font-size:.78rem; border-top:1px solid rgba(255,255,255,.07); }
.booking-charge-row:first-of-type { border-top:0; }
.booking-charge-row strong { color:var(--white); font-size:.9rem; white-space:nowrap; }
.booking-charge-row small { color:var(--gray); font-size:.68rem; }
.booking-charge-note { margin-top:7px; color:var(--gray); font-size:.68rem; line-height:1.5; }
@media (max-width:600px) {
  .payment-mode-options { grid-template-columns:1fr; }
  .payment-mode-option { min-height:0; }
  .booking-charge-summary-head { align-items:flex-start; flex-direction:column; }
  .booking-charge-row { align-items:flex-start; flex-direction:column; gap:3px; }
}
.booking-success-payment { margin:0 0 18px; padding:12px 14px; text-align:left; background:rgba(39,174,96,.06); border:1px solid rgba(39,174,96,.22); border-radius:var(--radius); color:var(--gray-light); font-size:.78rem; line-height:1.55; }
.booking-success-payment strong { color:var(--white); }
.booking-success-payment .success-payment-mode { color:var(--success); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }


/* =====================================================
   FPV COURIER — PREMIUM TYPOGRAPHY & ANIMATIONS
   Enhanced text effects, animated headings, shimmer
   ===================================================== */

/* ── NEW KEYFRAMES ── */

/* Gold shimmer sweep — for hero title */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Section title underline grows from left */
@keyframes titleUnderlineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 60px; opacity: 1; }
}

/* Gold bar width grow */
@keyframes goldBarGrow {
  from { width: 0; opacity: 0; }
  to   { width: 50px; opacity: 1; }
}

/* Eyebrow letter-spacing reveal */
@keyframes eyebrowReveal {
  from { opacity: 0; letter-spacing: .2em; }
  to   { opacity: 1; letter-spacing: .42em; }
}

/* Panel bar slide in from left */
@keyframes panelBarSlide {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Status badge pop */
@keyframes badgePop {
  0%   { transform: scale(0.75); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* Heading reveal: text fades and expands letter-spacing */
@keyframes headingReveal {
  from { opacity: 0; letter-spacing: .15em; }
  to   { opacity: 1; }
}

/* Hero title fade-up with letter tracking */
@keyframes heroTitleEnter {
  from { opacity: 0; transform: translateY(18px); letter-spacing: .12em; }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gentle glow pulse on key numbers */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(201,151,58,0); }
  50%       { text-shadow: 0 0 24px rgba(201,151,58,.5), 0 0 48px rgba(201,151,58,.18); }
}


/* ── HERO TITLE ENHANCEMENTS ── */
.hero-title {
  animation: heroTitleEnter .9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-title .gold-line {
  background: linear-gradient(90deg,
    var(--gold-dark) 0%,
    var(--gold-light) 30%,
    #fff8dc 50%,
    var(--gold-light) 70%,
    var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3.5s linear 1.2s infinite, heroTitleEnter .9s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-desc {
  font-family: var(--font-i);
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--gray);
  font-weight: 400;
}
.hero-stat-num {
  animation: glowPulse 3s ease-in-out infinite;
}
.hero-badge {
  font-family: var(--font-o);
  font-size: .65rem;
  letter-spacing: .22em;
}


/* ── SECTION HEADING ENHANCEMENTS ── */
/* Section headers in text-center blocks */
.text-center .section-title {
  animation: headingReveal .8s .1s ease both;
}
.text-center .section-title::after {
  margin: 10px auto 0;
}


/* ── SIDEBAR TYPOGRAPHY ── */
.sidebar-logo .nm {
  font-family: var(--font-d);
  font-size: 1.15rem;
  letter-spacing: .1em;
  background: linear-gradient(135deg, var(--white), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-logo .sb {
  font-family: var(--font-o);
  font-size: .52rem;
  letter-spacing: .22em;
}
.nav-sec-lbl {
  font-family: var(--font-o);
  font-size: .55rem;
  letter-spacing: .28em;
  color: rgba(255,255,255,.22);
}
.sidebar-nav a {
  font-family: var(--font-i);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.sidebar-nav a.active {
  font-weight: 600;
}


/* ── FORM LABEL ENHANCEMENT ── */
.form-label {
  font-family: var(--font-o);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}
.form-hint {
  font-family: var(--font-i);
  font-size: .77rem;
  color: #666;
  margin-top: 5px;
}
.form-error {
  font-family: var(--font-i);
  font-size: .77rem;
  color: var(--danger);
  margin-top: 5px;
}
.form-control {
  font-family: var(--font-i);
  font-size: .95rem;
}


/* ── DASHBOARD TYPOGRAPHY ── */
.insight-label, .kpi-label {
  font-family: var(--font-o);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
}
.insight-value {
  font-family: var(--font-d);
  font-size: 1.2rem;
  margin-top: 3px;
  color: var(--white);
}
.q-lbl {
  font-family: var(--font-o);
  font-size: .88rem;
  letter-spacing: .04em;
  font-weight: 700;
}
.q-sub {
  font-family: var(--font-i);
  font-size: .78rem;
  color: var(--gray);
  font-weight: 400;
  margin-top: 2px;
}


/* ── ADMIN KPI ── */
.admin-kpi strong {
  font-family: var(--font-d);
  font-size: 1.35rem;
  margin-top: 5px;
  color: var(--white);
  display: block;
}
.kpi-label, .kpi-meta {
  font-family: var(--font-o);
  font-size: .6rem;
  letter-spacing: .1em;
}


/* ── STAT NUMBERS ── */
.stat-num {
  font-family: var(--font-d);
  font-size: 2.2rem;
  color: var(--gold);
  letter-spacing: .05em;
  display: block;
}
.stat-lbl {
  font-family: var(--font-o);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--gray);
  text-transform: uppercase;
  margin-top: 3px;
}


/* ── STATUS BADGE ANIMATION ── */
.status-badge {
  animation: badgePop .35s ease both;
}


/* ── SHIMMER TEXT UTILITY ── */
/* Apply .text-shimmer to any element for animated gold shimmer */
.text-shimmer {
  background: linear-gradient(90deg,
    var(--gold-dark) 0%,
    var(--gold-light) 25%,
    #fff8dc 50%,
    var(--gold-light) 75%,
    var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}

/* Apply .heading-animated to section headings for entrance animation */
.heading-animated {
  animation: headingReveal .8s ease both;
}

/* Apply .panel-title-orb to panel h3 for orbitron with gradient */
.panel-title-orb {
  font-family: var(--font-o);
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--white) 50%, var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── REGISTER PAGE HEADINGS ── */
.register-header h1 {
  font-family: var(--font-d);
  font-size: 2rem;
  letter-spacing: .08em;
  margin-bottom: 6px;
  animation: headingReveal .7s ease both;
}
.register-header p {
  font-family: var(--font-i);
  font-size: .9rem;
  color: var(--gray);
  font-weight: 400;
  line-height: 1.65;
}
.step-hd {
  font-family: var(--font-d);
  font-size: 1.5rem;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.step-sd {
  font-family: var(--font-i);
  font-size: .9rem;
  color: var(--gray);
  margin-bottom: 28px;
  font-weight: 400;
  line-height: 1.6;
}
.step-lbl {
  font-family: var(--font-o);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
}
.step-prog-item.active .step-lbl {
  color: var(--gold);
}


/* ── AUTH PAGE HEADINGS ── */
.auth-title {
  font-family: var(--font-d);
  font-size: 1.6rem;
  letter-spacing: .07em;
  margin-bottom: 24px;
  text-align: center;
}
.auth-logo h2 {
  font-family: var(--font-d);
  font-size: 1.8rem;
  letter-spacing: .12em;
  animation: headingReveal .7s ease both;
}
.auth-logo p {
  font-family: var(--font-o);
  font-size: .65rem;
  color: var(--gray);
  letter-spacing: .18em;
}


/* ── TRACKING PAGE ── */
.track-result-code {
  font-family: var(--font-d);
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: var(--gold);
  animation: headingReveal .5s ease both;
}
.track-timeline-label {
  font-family: var(--font-o);
  font-size: .68rem;
  letter-spacing: .28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.track-event-status {
  font-family: var(--font-o);
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: capitalize;
  color: var(--white);
  font-weight: 600;
}


/* ── LANDING PAGE SECTION HEADINGS ── */
.landing-page .section-title {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  animation: headingReveal .9s .2s ease both;
}
.landing-page .eyebrow {
  animation: eyebrowReveal .7s ease both;
}
.landing-page .section-sub {
  font-size: 1.05rem;
  font-family: var(--font-i);
}

/* Service card headings */
.landing-page .service-card h3 {
  font-family: var(--font-d);
  font-size: 1.55rem;
  margin-top: 20px;
  letter-spacing: .04em;
}
.landing-page .service-card p {
  font-family: var(--font-i);
  font-size: .92rem;
  line-height: 1.7;
  font-weight: 400;
}

/* Steps / how it works headings */
.step-it h3 {
  font-family: var(--font-d);
  font-size: 1.15rem;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.step-it p {
  font-family: var(--font-i);
  font-size: .9rem;
  color: var(--gray);
  font-weight: 400;
  line-height: 1.65;
}

/* Zone cards */
.zone-name {
  font-family: var(--font-d);
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--gold);
  margin-bottom: 10px;
}
.zone-cities {
  font-family: var(--font-i);
  font-size: .84rem;
  color: var(--gray);
  line-height: 1.85;
  font-weight: 400;
}

/* Footer */
.footer-col h4 {
  font-family: var(--font-o);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 700;
}
.footer-col a, .footer-col p {
  font-family: var(--font-i);
  font-size: .88rem;
  color: var(--gray);
  margin-bottom: 9px;
  font-weight: 400;
}
.footer-desc {
  font-family: var(--font-i);
  font-size: .9rem;
  line-height: 1.8;
  font-weight: 400;
}


/* ── TOAST UPGRADE ── */
.toast {
  font-family: var(--font-i);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
}


/* ── TRACKING CODE ── */
.tracking-code {
  font-family: 'Courier New', monospace;
  font-size: .84rem;
  color: var(--gold);
  background: var(--gold-dim);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .05em;
}


/* ── ADMIN TABLE TYPOGRAPHY ── */
.admin-badge {
  font-family: var(--font-o);
  font-size: .65rem;
  letter-spacing: .12em;
}
.search-input {
  font-family: var(--font-i);
  font-size: .92rem;
}


/* ── REDUCE MOTION OVERRIDES ── */
@media (prefers-reduced-motion: reduce) {
  .eyebrow,
  .gold-bar,
  .section-title::after,
  .hero-title,
  .hero-title .gold-line,
  .status-badge,
  .panel-head h3::before,
  .register-header h1,
  .auth-logo h2,
  .track-result-code,
  .text-shimmer,
  .heading-animated,
  .landing-page .section-title,
  .landing-page .eyebrow {
    animation: none !important;
  }
  .eyebrow { opacity: 1; }
  .gold-bar { width: 50px; }
  .section-title::after { width: 60px; }
  .hero-title .gold-line {
    -webkit-text-fill-color: var(--gold);
    background: none;
  }
  .text-shimmer {
    -webkit-text-fill-color: var(--gold);
    background: none;
  }
}


/* =====================================================
   FPV COURIER — CARD GRID SYSTEM
   Replaces horizontal-scrolling tables with beautiful
   responsive card grids on user & admin sides.
   ===================================================== */

/* ── GRID LAYOUTS ── */
.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 18px;
}
#adminUsersTable {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.card-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px;
}

@media (max-width: 1100px) {
  .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .card-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .card-grid-3 { 
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 6px;
    gap: 14px;
  }
}
@media (max-width: 600px) {
  .card-grid-2, .card-grid-3, .card-grid-1 {
    padding: 10px 4px;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .card-grid-3 {
    padding: 8px 0;
    gap: 12px;
  }
}


/* ── PARCEL CARD ── */
.parcel-card {
  position: relative;
  background: linear-gradient(145deg, rgba(28,28,28,.98), rgba(16,16,16,.98));
  border: 1px solid var(--gray-dim);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  display: flex;
  flex-direction: column;
  animation: cardFadeIn .35s ease both;
}
.parcel-card:hover {
  border-color: rgba(201,151,58,.5);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(201,151,58,.08) inset;
}
.parcel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), transparent);
  opacity: 0;
  transition: opacity .22s ease;
}
.parcel-card:hover::before { opacity: 1; }

.parcel-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.parcel-card-tracking {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  color: var(--gold);
  background: rgba(201,151,58,.1);
  border: 1px solid rgba(201,151,58,.2);
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: .05em;
  font-weight: 700;
}
.parcel-card-status {
  flex-shrink: 0;
}

.parcel-card-body {
  padding: 12px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.parcel-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.parcel-card-label {
  font-family: var(--font-o);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--gray);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.parcel-card-value {
  font-family: var(--font-i);
  font-size: .88rem;
  color: var(--white);
  font-weight: 500;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parcel-card-value.gold { color: var(--gold); font-weight: 700; }
.parcel-card-value.success { color: var(--success); font-weight: 700; }
.parcel-card-value.danger { color: var(--danger); font-weight: 700; }

.parcel-card-divider {
  height: 1px;
  background: rgba(255,255,255,.05);
  margin: 2px 0;
}

.parcel-card-footer {
  padding: 10px 16px 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.05);
}
.parcel-card-footer .btn {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  padding: 8px 12px;
  white-space: nowrap;
}


/* ── USER CARD (Admin) ── */
.user-card {
  position: relative;
  background: 
    radial-gradient(ellipse 95% 70% at 100% 0%, rgba(201,151,58,0.18), transparent 70%),
    radial-gradient(circle at 0% 100%, rgba(201,151,58,0.06), transparent 50%),
    linear-gradient(145deg, #221c13 0%, #171410 45%, #0d0c0a 100%);
  border: 1px solid rgba(201,151,58,0.35);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 10px 30px -4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,225,145,0.2);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cardFadeIn .35s ease both;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.user-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,151,58,0.75) 30%, rgba(255,225,150,0.95) 50%, rgba(201,151,58,0.75) 70%, transparent 100%);
  opacity: 0.8;
}
.user-card:hover {
  border-color: rgba(235,192,115,0.75);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -4px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,235,170,0.4), 0 0 28px -2px rgba(201,151,58,0.28);
}
.user-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.user-card-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-size: 1.25rem;
  color: var(--black);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(201,151,58,.35);
}
.user-card-avatar.user-card-avatar-has-img {
  background: #141414;
  border: 1.5px solid var(--gold);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 0 18px rgba(201,151,58,.3);
}
.user-card-avatar.user-card-avatar-has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-card-name {
  font-family: var(--font-i);
  font-size: .98rem;
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.user-card-email {
  font-family: var(--font-i);
  font-size: .75rem;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  word-break: break-all;
}
.user-card-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}
.user-card-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.user-card-field-label {
  font-family: var(--font-o);
  font-size: .58rem;
  letter-spacing: .12em;
  color: #a89f8e;
  text-transform: uppercase;
}
.user-card-field-value {
  font-family: var(--font-i);
  font-size: .86rem;
  color: var(--white);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(201,151,58,.15);
  width: 100%;
  box-sizing: border-box;
}
.user-card-actions .btn {
  flex: 1 1 auto;
  font-size: .78rem;
  padding: 7px 12px;
  min-width: 0;
  white-space: nowrap;
}
.btn-approve {
  background: linear-gradient(135deg, #27ae60, #219653) !important;
  color: #fff !important;
  border: 1px solid rgba(46, 204, 113, 0.4) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3) !important;
}
.btn-approve:hover {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.45) !important;
  transform: translateY(-1px);
}
@media (max-width: 520px) {
  .user-card {
    padding: 15px 12px;
  }
  .user-card-info {
    grid-template-columns: 1fr 1fr;
    gap: 8px 6px;
  }
  .user-card-field-value {
    font-size: .8rem;
  }
  .user-card-actions {
    gap: 6px;
  }
  .user-card-actions .btn {
    font-size: .74rem;
    padding: 6px 10px;
  }
}
@media (max-width: 380px) {
  .user-card-info {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* ── PAYOUT CARD ── */
.payout-card {
  position: relative;
  background: linear-gradient(145deg, rgba(28,28,28,.98), rgba(16,16,16,.98));
  border: 1px solid var(--gray-dim);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease;
  animation: cardFadeIn .35s ease both;
}
.payout-card:hover {
  border-color: rgba(201,151,58,.4);
  transform: translateY(-2px);
}
.payout-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.payout-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.payout-card-tracking {
  font-family: 'Courier New', monospace;
  font-size: .85rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .05em;
}
.payout-card-client {
  font-family: var(--font-i);
  font-size: .78rem;
  color: var(--gray);
  margin-top: 2px;
}
.payout-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payout-card-amount {
  font-family: var(--font-d);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: .04em;
}
.payout-card-amount.prepaid {
  color: var(--success);
}
.payout-card-amount.danger {
  color: var(--danger);
}
.payout-card-meta {
  font-family: var(--font-i);
  font-size: .78rem;
  color: var(--gray);
}
.payout-card-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.payout-card-footer .btn {
  width: 100%;
  font-size: .82rem;
}


/* ── PAYMENT RECORD CARD ── */
.payment-rec-card {
  position: relative;
  background: linear-gradient(145deg, rgba(26,26,26,.98), rgba(15,15,15,.98));
  border: 1px solid var(--gray-dim);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease;
  animation: cardFadeIn .35s ease both;
}
.payment-rec-card:hover {
  border-color: rgba(201,151,58,.35);
  transform: translateY(-2px);
}
.payment-rec-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.payment-rec-card-title {
  font-family: var(--font-i);
  font-size: .9rem;
  font-weight: 700;
  color: var(--white);
}
.payment-rec-card-date {
  font-family: var(--font-i);
  font-size: .72rem;
  color: var(--gray);
  white-space: nowrap;
}
.payment-rec-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.payment-rec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.payment-rec-lbl {
  font-family: var(--font-o);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--gray);
  text-transform: uppercase;
  white-space: nowrap;
}
.payment-rec-val {
  font-family: var(--font-i);
  font-size: .88rem;
  color: var(--white);
  font-weight: 600;
  text-align: right;
}
.payment-rec-val.gold { color: var(--gold); }
.payment-rec-val.danger { color: var(--danger); }
.payment-rec-val.success { color: var(--success); }
.payment-rec-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(201,151,58,.07);
  border: 1px solid rgba(201,151,58,.15);
  border-radius: 6px;
  font-family: var(--font-i);
  font-size: .76rem;
  color: var(--gray-light, #b0b0b0);
  font-style: italic;
  line-height: 1.5;
}
.payment-rec-card-footer {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.payment-rec-method {
  font-family: var(--font-i);
  font-size: .78rem;
  color: var(--gray);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── CARD ANIMATION ── */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Stagger card animations */
.card-grid-2 > *:nth-child(1),
.card-grid-3 > *:nth-child(1),
.card-grid-1 > *:nth-child(1) { animation-delay: .04s; }
.card-grid-2 > *:nth-child(2),
.card-grid-3 > *:nth-child(2),
.card-grid-1 > *:nth-child(2) { animation-delay: .08s; }
.card-grid-2 > *:nth-child(3),
.card-grid-3 > *:nth-child(3),
.card-grid-1 > *:nth-child(3) { animation-delay: .12s; }
.card-grid-2 > *:nth-child(4),
.card-grid-3 > *:nth-child(4),
.card-grid-1 > *:nth-child(4) { animation-delay: .16s; }
.card-grid-2 > *:nth-child(5),
.card-grid-3 > *:nth-child(5),
.card-grid-1 > *:nth-child(5) { animation-delay: .20s; }
.card-grid-2 > *:nth-child(6),
.card-grid-3 > *:nth-child(6) { animation-delay: .24s; }
.card-grid-3 > *:nth-child(7) { animation-delay: .28s; }
.card-grid-3 > *:nth-child(8) { animation-delay: .32s; }
.card-grid-3 > *:nth-child(9) { animation-delay: .36s; }


/* ── ACTION REQUIRED CARD HIGHLIGHT ── */
.parcel-card.action-required {
  border-color: rgba(231,76,60,.5);
  animation: cardFadeIn .35s ease both, cardDangerPulse 2.5s ease-in-out infinite;
}
@keyframes cardDangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
  50%       { box-shadow: 0 0 18px 2px rgba(231,76,60,.15); }
}

/* ── REDUCE MOTION for cards ── */
@media (prefers-reduced-motion: reduce) {
  .parcel-card, .user-card, .payout-card, .payment-rec-card {
    animation: none !important;
    transition: none !important;
  }
  .parcel-card.action-required {
    animation: none !important;
    border-color: rgba(231,76,60,.5);
  }
}


/* =====================================================
   BOOKING SUCCESS MODAL & INNER BOXES (GOLD LUXURY THEME)
   ===================================================== */
.booking-success-modal {
  max-width: 490px !important;
  width: 94% !important;
  max-height: min(88vh, 88dvh) !important;
  background: 
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(201,151,58,0.24), transparent 75%),
    linear-gradient(165deg, #1d1810 0%, #13110d 45%, #080807 100%) !important;
  border: 1px solid rgba(201,151,58,0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 65px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,225,145,0.25), 0 0 35px -5px rgba(201,151,58,0.25) !important;
  padding: 26px 18px 22px !important;
  text-align: center;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(15, 12, 8, 0.75);
}

/* ── Custom Visible Gold Scrollbar for Booking Success Modal ── */
.booking-success-modal::-webkit-scrollbar {
  width: 7px;
}
.booking-success-modal::-webkit-scrollbar-track {
  background: rgba(12, 10, 7, 0.75);
  border-radius: 8px;
  margin: 10px 0;
}
.booking-success-modal::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-radius: 8px;
  border: 1px solid rgba(255, 225, 145, 0.3);
  box-shadow: 0 0 8px rgba(201, 151, 58, 0.35);
}
.booking-success-modal::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 12px rgba(201, 151, 58, 0.6);
}

@media (max-width: 600px) {
  .booking-success-modal {
    max-height: calc(100dvh - 24px) !important;
    padding: 22px 14px 18px !important;
    width: 96% !important;
  }
}

.success-icon-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,204,113,0.25), rgba(201,151,58,0.12));
  border: 1.5px solid rgba(46,204,113,0.5);
  box-shadow: 0 0 24px rgba(46,204,113,0.3);
  color: #2ecc71;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 14px;
}

.success-info-box {
  background: linear-gradient(135deg, rgba(28,23,14,0.95), rgba(16,14,10,0.98));
  border: 1px solid rgba(201,151,58,0.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,225,145,0.15);
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}

.success-info-box .box-sublabel {
  font-family: var(--font-o);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.success-info-box .box-sublabel.leopard-label {
  color: #2ecc71;
}

.success-info-box .leopard-code {
  font-family: monospace;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
}

.success-info-box.leopard-tracking-box {
  background: linear-gradient(135deg, rgba(20,32,24,0.95), rgba(14,22,17,0.98));
  border-color: rgba(46,204,113,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(46,204,113,0.2);
}

.success-info-box.leopard-error-box {
  background: linear-gradient(135deg, rgba(34,18,18,0.95), rgba(22,12,12,0.98));
  border-color: rgba(231,76,60,0.4);
  flex-direction: column;
  align-items: flex-start;
}

.btn-leopard-copy {
  background: rgba(46,204,113,0.15) !important;
  color: #2ecc71 !important;
  border: 1px solid rgba(46,204,113,0.45) !important;
  font-weight: 700;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-leopard-copy:hover {
  background: #27ae60 !important;
  color: #fff !important;
}

.booking-success-payment {
  background: linear-gradient(135deg, rgba(28,24,16,0.9), rgba(18,15,11,0.95)) !important;
  border: 1px solid rgba(201,151,58,0.3) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,225,145,0.12) !important;
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}

.payment-summary-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201,151,58,0.18);
}

.payment-summary-body {
  font-size: 0.82rem;
  color: var(--gray-light);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.booking-success-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
}

.booking-success-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: normal !important;
  word-break: break-word !important;
  border-radius: 9px !important;
  cursor: pointer;
  transition: all .2s ease;
}
/* The display:flex !important above would otherwise override .hidden */
.booking-success-actions .btn.hidden { display: none !important; }

#successLeopardWaybillBtn {
  background: linear-gradient(135deg, #27ae60, #219653) !important;
  color: #fff !important;
  border: 1px solid rgba(46,204,113,0.55) !important;
  box-shadow: 0 4px 16px rgba(39,174,96,0.35) !important;
}
#successLeopardWaybillBtn:hover {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  box-shadow: 0 6px 20px rgba(39,174,96,0.5) !important;
  transform: translateY(-1px);
}

/* ── Admin Delete Action Modals (Fully Responsive & Overflow-Proof) ── */
.admin-delete-modal {
  width: 100% !important;
  max-width: 460px !important;
  text-align: center;
  padding: 30px 24px;
  box-sizing: border-box !important;
  position: relative;
}

@media (max-width: 480px) {
  .admin-delete-modal {
    padding: 24px 16px 18px !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }
}

.admin-delete-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.12);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  margin: 0 auto 16px;
  border: 1px solid rgba(231, 76, 60, 0.28);
  box-shadow: 0 4px 18px rgba(231, 76, 60, 0.15);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .admin-delete-icon {
    width: 50px;
    height: 50px;
    font-size: 1.55rem;
    margin-bottom: 12px;
  }
}

.admin-delete-title {
  font-family: var(--font-d);
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--white);
  letter-spacing: 0.04em;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .admin-delete-title {
    font-size: 1.15rem;
  }
}

.admin-delete-desc {
  color: var(--gray);
  font-size: 0.85rem;
  margin-bottom: 6px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
}

.admin-delete-warning {
  color: rgba(231, 76, 60, 0.9);
  font-size: 0.77rem;
  margin-bottom: 20px;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

@media (max-width: 480px) {
  .admin-delete-warning {
    margin-bottom: 16px;
    font-size: 0.74rem;
  }
}

.admin-delete-choice-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.admin-delete-choice-btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  padding: 13px 15px !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: normal !important;
  background: var(--dark3);
  border: 1px solid rgba(231, 76, 60, 0.35);
  min-width: 0 !important;
}

.admin-delete-choice-btn:hover,
.admin-delete-choice-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.admin-delete-choice-btn.choice-parcel-only {
  border-color: rgba(201, 151, 58, 0.45);
  background: linear-gradient(145deg, rgba(30, 26, 20, 0.95), rgba(20, 18, 14, 0.95));
}
.admin-delete-choice-btn.choice-parcel-only:hover {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(42, 36, 26, 1), rgba(28, 24, 18, 1));
}

.admin-delete-choice-btn.choice-parcel-payments {
  border-color: rgba(231, 76, 60, 0.55);
  background: linear-gradient(145deg, rgba(38, 18, 18, 0.95), rgba(24, 14, 14, 0.95));
}
.admin-delete-choice-btn.choice-parcel-payments:hover {
  border-color: var(--danger);
  background: linear-gradient(145deg, rgba(54, 22, 22, 1), rgba(35, 16, 16, 1));
}

.admin-delete-choice-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-delete-choice-body {
  flex: 1;
  min-width: 0;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-align: left;
}

.admin-delete-choice-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 3px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
}

.admin-delete-choice-sub {
  font-size: 0.76rem;
  color: var(--gray);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
  letter-spacing: normal;
  text-transform: none;
}

.admin-delete-info-card {
  background: var(--dark2);
  border: 1px solid var(--gray-dim);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 15px;
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}

.admin-delete-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  min-width: 0;
}
.admin-delete-info-row:last-child {
  margin-bottom: 0;
}

.admin-delete-info-label {
  color: var(--gray);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.admin-delete-info-val {
  font-size: 0.84rem;
  color: var(--white);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  flex: 1;
}

.admin-delete-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}

.admin-delete-actions-row .btn {
  flex: 1;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.04em !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  justify-content: center !important;
  line-height: 1.3 !important;
}

@media (max-width: 440px) {
  .admin-delete-actions-row {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .admin-delete-actions-row .btn {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   THEME SWITCHER COMPONENT
   Used in Settings panel (dashboard + admin) and topbar quick toggle
   ══════════════════════════════════════════════════════════════ */

/* ── Settings panel: Appearance card ── */
.appearance-card {
  background   : var(--bg-2);
  border       : 1px solid var(--border-dim);
  border-radius: 14px;
  padding      : 28px;
  margin-bottom: 24px;
}

.appearance-card-title {
  font-family   : var(--font-o);
  font-size     : .82rem;
  font-weight   : 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color         : var(--gold);
  margin-bottom : 6px;
  display       : flex;
  align-items   : center;
  gap           : 8px;
}

.appearance-card-desc {
  font-size    : .85rem;
  color        : var(--text-secondary);
  margin-bottom: 20px;
  line-height  : 1.5;
}

/* ── Three-way segment control ── */
.theme-picker {
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr;
  gap                   : 10px;
}

.theme-option {
  position      : relative;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 10px;
  padding       : 18px 12px 14px;
  border-radius : 12px;
  border        : 2px solid var(--border-dim);
  background    : var(--bg-card);
  cursor        : pointer;
  transition    : all var(--ease);
  user-select   : none;
  -webkit-user-select: none;
  overflow      : hidden;
  text-align    : center;
}

.theme-option:hover {
  border-color: var(--gold);
  transform   : translateY(-2px);
  box-shadow  : 0 6px 20px rgba(201,151,58,.12);
}

.theme-option--active {
  border-color: var(--gold) !important;
  background  : linear-gradient(135deg, rgba(201,151,58,.08), rgba(201,151,58,.03));
  box-shadow  : 0 0 0 3px rgba(201,151,58,.18), 0 6px 24px rgba(201,151,58,.14) !important;
}

.theme-option--active::after {
  content        : '\2713';
  position       : absolute;
  top            : 8px;
  right          : 10px;
  width          : 18px;
  height         : 18px;
  border-radius  : 50%;
  background     : var(--gold);
  color          : #000;
  font-size      : .7rem;
  font-weight    : 900;
  line-height    : 18px;
  text-align     : center;
}

/* Mini preview swatch */
.theme-preview {
  width        : 100%;
  height       : 52px;
  border-radius: 8px;
  overflow     : hidden;
  display      : flex;
  border       : 1px solid var(--border-dim);
  flex-shrink  : 0;
}

.theme-preview-dark {
  background: linear-gradient(135deg, #111 0%, #1e1e1e 100%);
  flex      : 1;
  position  : relative;
}
.theme-preview-dark::after {
  content      : '';
  position     : absolute;
  bottom       : 6px;
  left         : 6px;
  right        : 6px;
  height       : 3px;
  border-radius: 2px;
  background   : #C9973A;
  opacity      : .7;
}

.theme-preview-light {
  background: linear-gradient(135deg, #fff 0%, #f5f3ee 100%);
  flex      : 1;
  position  : relative;
}
.theme-preview-light::after {
  content      : '';
  position     : absolute;
  bottom       : 6px;
  left         : 6px;
  right        : 6px;
  height       : 3px;
  border-radius: 2px;
  background   : #C9973A;
  opacity      : .6;
}

.theme-preview-system {
  background: linear-gradient(to right, #111 0%, #888 50%, #f5f3ee 100%);
  flex      : 2;
}

.theme-option-icon {
  font-size : 1.4rem;
  color     : var(--text-secondary);
  transition: color var(--ease);
}
.theme-option--active .theme-option-icon { color: var(--gold); }

.theme-option-label {
  font-family   : var(--font-o);
  font-size     : .7rem;
  font-weight   : 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color         : var(--text-secondary);
  transition    : color var(--ease);
}
.theme-option--active .theme-option-label { color: var(--gold); }

.theme-option-sub {
  font-size  : .68rem;
  color      : var(--text-muted);
  text-align : center;
  line-height: 1.3;
}

/* ── Topbar quick-toggle icon button ── */
.theme-quick-toggle {
  width          : 36px;
  height         : 36px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--bg-2);
  border         : 1px solid var(--border-dim);
  color          : var(--text-secondary);
  font-size      : 1.1rem;
  cursor         : pointer;
  transition     : all var(--ease);
  flex-shrink    : 0;
}
.theme-quick-toggle:hover {
  background  : var(--gold-dim);
  border-color: var(--gold);
  color       : var(--gold);
  transform   : rotate(20deg);
}

/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT THEME BOXES, CARDS & POPUPS SYSTEM
   ══════════════════════════════════════════════════════════════ */

/* ── 1. DASHBOARD & ADMIN STAT CARDS ── */
[data-theme="light"] .user-stat-grid .dash-card,
[data-theme="light"] .admin-stat-grid .dash-card {
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid rgba(201,151,58,0.42) !important;
  box-shadow: 0 10px 28px -4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(201,151,58,0.08) !important;
}

[data-theme="light"] .user-stat-grid .dash-card::before,
[data-theme="light"] .admin-stat-grid .dash-card::before {
  background: linear-gradient(90deg, transparent 0%, rgba(201,151,58,0.8) 25%, #C9973A 50%, rgba(201,151,58,0.8) 75%, transparent 100%) !important;
  opacity: 0.9 !important;
}

[data-theme="light"] .user-stat-grid .dash-card::after,
[data-theme="light"] .admin-stat-grid .dash-card::after {
  background: radial-gradient(circle, rgba(201,151,58,0.12), transparent 70%) !important;
}

[data-theme="light"] .user-stat-grid .dash-card:hover,
[data-theme="light"] .admin-stat-grid .dash-card:hover {
  background: #ffffff !important;
  border-color: var(--gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 38px -4px rgba(201,151,58,0.2), inset 0 1px 0 rgba(255,255,255,1), 0 4px 12px rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .user-stat-grid .dash-card .dash-icon,
[data-theme="light"] .admin-stat-grid .dash-card .dash-icon {
  background: linear-gradient(135deg, rgba(201,151,58,0.18), rgba(201,151,58,0.05)) !important;
  border: 1px solid rgba(201,151,58,0.38) !important;
  color: #9a6e18 !important;
  box-shadow: 0 3px 12px rgba(201,151,58,0.14) !important;
}

[data-theme="light"] .user-stat-grid .dash-card:hover .dash-icon,
[data-theme="light"] .admin-stat-grid .dash-card:hover .dash-icon {
  background: linear-gradient(135deg, rgba(201,151,58,0.28), rgba(201,151,58,0.12)) !important;
  border-color: var(--gold) !important;
  color: #7d5407 !important;
}

[data-theme="light"] .user-stat-grid .dash-card:nth-child(2) .dash-icon,
[data-theme="light"] .admin-stat-grid .dash-card:nth-child(4) .dash-icon {
  color: #27ae60 !important;
  border-color: rgba(39,174,96,0.4) !important;
  background: linear-gradient(135deg, rgba(39,174,96,0.16), rgba(39,174,96,0.04)) !important;
  box-shadow: 0 3px 12px rgba(39,174,96,0.12) !important;
}

[data-theme="light"] .user-stat-grid .dash-card:nth-child(3) .dash-icon,
[data-theme="light"] .admin-stat-grid .dash-card:nth-child(3) .dash-icon {
  color: #d97706 !important;
  border-color: rgba(217,119,6,0.4) !important;
  background: linear-gradient(135deg, rgba(217,119,6,0.16), rgba(217,119,6,0.04)) !important;
  box-shadow: 0 3px 12px rgba(217,119,6,0.12) !important;
}

[data-theme="light"] .user-stat-grid .dash-card:nth-child(4) .dash-icon,
[data-theme="light"] .admin-stat-grid .dash-card:nth-child(1) .dash-icon {
  color: #b48318 !important;
  border-color: rgba(201,151,58,0.45) !important;
  background: linear-gradient(135deg, rgba(201,151,58,0.2), rgba(201,151,58,0.06)) !important;
  box-shadow: 0 3px 12px rgba(201,151,58,0.14) !important;
}

[data-theme="light"] .user-stat-grid .dash-card .dash-val,
[data-theme="light"] .admin-stat-grid .dash-card .dash-val {
  background: linear-gradient(135deg, #1A1714 65%, #9a6e18 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] .user-stat-grid .dash-card .dash-lbl,
[data-theme="light"] .admin-stat-grid .dash-card .dash-lbl {
  color: #6B6560 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .stat-foot {
  color: #7A7269 !important;
}

/* ── 2. DASHBOARD WELCOME BANNER ── */
[data-theme="light"] .user-welcome {
  background: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid rgba(201,151,58,0.38) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05), inset 0 2px 0 var(--gold) !important;
}

[data-theme="light"] .user-welcome h2 {
  color: #1A1714 !important;
}

[data-theme="light"] .user-welcome p {
  color: #6B6560 !important;
}

/* ── 3. USER INSIGHT CARDS & ADMIN KPI STRIP ── */
[data-theme="light"] .user-insight-card {
  background: #ffffff !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .user-insight-card::before {
  background: var(--gold) !important;
  opacity: 1 !important;
}

[data-theme="light"] .user-insight-card .insight-value {
  color: #1A1714 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .user-insight-card .insight-label {
  color: #8C8275 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .user-insight-card .insight-note {
  color: #6B6560 !important;
}

[data-theme="light"] .insight-icon {
  background: rgba(201,151,58,0.14) !important;
  color: #9a6e18 !important;
  border: 1px solid rgba(201,151,58,0.25) !important;
}

[data-theme="light"] .admin-kpi {
  background: #ffffff !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .admin-kpi strong {
  color: #1A1714 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .admin-kpi .kpi-label {
  color: #8C8275 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .admin-kpi .kpi-meta {
  color: #6B6560 !important;
}

/* ── 4. QUICK ACTION BUTTONS ── */
[data-theme="light"] .user-quick-grid .q-btn,
[data-theme="light"] .quick-grid .q-btn {
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
  color: #1A1714 !important;
}

[data-theme="light"] .user-quick-grid .q-btn:hover,
[data-theme="light"] .quick-grid .q-btn:hover {
  background: #ffffff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 8px 24px rgba(201,151,58,0.16) !important;
  transform: translateY(-2px) !important;
}

[data-theme="light"] .q-lbl {
  color: #1A1714 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .q-sub {
  color: #6B6560 !important;
}

[data-theme="light"] .q-icon,
[data-theme="light"] .user-quick-grid .q-icon {
  background: rgba(201,151,58,0.14) !important;
  color: #9a6e18 !important;
  border: 1px solid rgba(201,151,58,0.25) !important;
}

/* ── 5. ALL USER CARDS (ADMIN "ALL USERS" TAB) ── */
[data-theme="light"] .user-card {
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid rgba(201,151,58,0.4) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,1), 0 2px 6px rgba(201,151,58,0.08) !important;
}

[data-theme="light"] .user-card::before {
  background: linear-gradient(90deg, transparent 0%, rgba(201,151,58,0.75) 30%, #C9973A 50%, rgba(201,151,58,0.75) 70%, transparent 100%) !important;
  opacity: 1 !important;
}

[data-theme="light"] .user-card:hover {
  background: #ffffff !important;
  border-color: var(--gold) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(201,151,58,0.2), inset 0 1px 0 rgba(255,255,255,1) !important;
}

[data-theme="light"] .user-card-name {
  color: #1A1714 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .user-card-email {
  color: #6B6560 !important;
}

[data-theme="light"] .user-card-field-label {
  color: #8C8275 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .user-card-field-value {
  color: #1A1714 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .user-card-actions {
  border-top: 1px solid rgba(201,151,58,0.22) !important;
}

[data-theme="light"] .user-card-avatar {
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  color: #1A1714 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(201,151,58,0.25) !important;
}

[data-theme="light"] .user-card-avatar.user-card-avatar-has-img {
  background: #FFFFFF !important;
  border-color: var(--gold) !important;
}

/* ── 6. ALL PARCEL CARDS (USER & ADMIN LISTS) ── */
[data-theme="light"] .parcel-card {
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .parcel-card:hover {
  background: #ffffff !important;
  border-color: rgba(201,151,58,0.65) !important;
  box-shadow: 0 12px 30px rgba(201,151,58,0.15) !important;
  transform: translateY(-3px) !important;
}

[data-theme="light"] .parcel-card-header {
  border-bottom: 1px solid #F0EDE8 !important;
}

[data-theme="light"] .parcel-card-tracking {
  background: rgba(201,151,58,0.1) !important;
  color: #9a6e18 !important;
  border: 1px solid rgba(201,151,58,0.3) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .parcel-card-label {
  color: #8C8275 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .parcel-card-value {
  color: #1A1714 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .parcel-card-divider {
  background: #F0EDE8 !important;
}

[data-theme="light"] .parcel-card-footer {
  border-top: 1px solid #F0EDE8 !important;
}

/* ── 7. PAYOUT & PAYMENT RECORD CARDS ── */
[data-theme="light"] .payout-card {
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .payout-card:hover {
  border-color: rgba(201,151,58,0.6) !important;
  box-shadow: 0 12px 30px rgba(201,151,58,0.14) !important;
  transform: translateY(-2px) !important;
}

[data-theme="light"] .payout-card-head {
  border-bottom: 1px solid #F0EDE8 !important;
}

[data-theme="light"] .payout-card-client,
[data-theme="light"] .payout-card-meta {
  color: #6B6560 !important;
}

[data-theme="light"] .payout-card-footer {
  border-top: 1px solid #F0EDE8 !important;
}

[data-theme="light"] .payment-rec-card {
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .payment-rec-card:hover {
  border-color: rgba(201,151,58,0.6) !important;
  box-shadow: 0 12px 30px rgba(201,151,58,0.14) !important;
  transform: translateY(-2px) !important;
}

[data-theme="light"] .payment-rec-card-head {
  border-bottom: 1px solid #F0EDE8 !important;
}

[data-theme="light"] .payment-rec-card-title {
  color: #1A1714 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .payment-rec-card-date,
[data-theme="light"] .payment-rec-method {
  color: #6B6560 !important;
}

[data-theme="light"] .payment-rec-lbl {
  color: #8C8275 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .payment-rec-val {
  color: #1A1714 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .payment-rec-note {
  background: rgba(201,151,58,0.08) !important;
  border: 1px solid rgba(201,151,58,0.2) !important;
  color: #5A5248 !important;
}

[data-theme="light"] .payment-rec-card-footer {
  border-top: 1px solid #F0EDE8 !important;
}

/* ── 8. PARCEL STATUS / EDIT MODAL & STICKY HEADER ── */
[data-theme="light"] #statusModal .modal,
[data-theme="light"] .status-modal-card {
  background: #ffffff !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .status-modal-sticky-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #E2DEDD !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06), inset 0 3px 0 0 var(--gold) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

[data-theme="light"] .status-modal-header-title {
  color: #1A1714 !important;
}

[data-theme="light"] .status-modal-header-meta .status-header-chip.tracking-chip {
  background: rgba(201, 151, 58, 0.12) !important;
  color: #9a6e18 !important;
  border: 1px solid rgba(201, 151, 58, 0.35) !important;
}

[data-theme="light"] .status-modal-header-meta .status-header-chip.account-chip {
  background: #F0EDE8 !important;
  color: #4A4540 !important;
  border: 1px solid #E2DEDD !important;
}

[data-theme="light"] .status-modal-sticky-header .modal-close-sticky {
  background: #F0EDE8 !important;
  border: 1px solid #E2DEDD !important;
  color: #6B6560 !important;
}

[data-theme="light"] .status-modal-sticky-header .modal-close-sticky:hover {
  background: rgba(231,76,60,.12) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

[data-theme="light"] .status-modal-scroll-body {
  background: #ffffff !important;
  color: #1A1714 !important;
  scrollbar-color: var(--gold) #F0EDE8 !important;
}

/* Inner status modal boxes */
[data-theme="light"] .status-snapshot-card,
[data-theme="light"] #statusModalContent div[style*="linear-gradient(135deg, var(--dark3)"],
[data-theme="light"] #statusModalContent div[style*="background:linear-gradient"] {
  background: #faf8f5 !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .status-info-card,
[data-theme="light"] #statusModalContent div[style*="background:rgba(255,255,255,0.02)"] {
  background: #ffffff !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

[data-theme="light"] .status-financial-card,
[data-theme="light"] #statusModalContent div[style*="background:rgba(201,151,58,0.05)"],
[data-theme="light"] #statusModalContent div[style*="background:rgba(201,151,58,.05)"] {
  background: rgba(201,151,58,0.08) !important;
  border: 1px solid rgba(201,151,58,0.25) !important;
}

[data-theme="light"] .status-courier-card {
  background: rgba(201,151,58,0.06) !important;
  border: 1px solid rgba(201,151,58,0.2) !important;
}

[data-theme="light"] #statusModalContent b[style*="color:var(--white)"],
[data-theme="light"] #statusModalContent span[style*="color:var(--white)"],
[data-theme="light"] #statusModalContent div[style*="color:var(--white)"] {
  color: #1A1714 !important;
}

[data-theme="light"] #statusModalContent span.tracking-code {
  color: #9a6e18 !important;
}

[data-theme="light"] #timelineHistory {
  background: #faf8f5 !important;
  border: 1px solid #E2DEDD !important;
}

/* ── 9. ALL UNIVERSAL STICKY MODALS & HEADERS ── */
[data-theme="light"] .modal,
[data-theme="light"] .modal.modal-sticky {
  background: #ffffff !important;
  color     : #1A1714 !important;
  border    : 1px solid #E2DEDD !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14) !important;
}

[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,0.30);
}

[data-theme="light"] .modal-sticky-header {
  background: #ffffff !important;
  border-bottom: 1px solid #E2DEDD !important;
  box-shadow: inset 0 3px 0 0 var(--gold), 0 2px 10px rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .modal-sticky-title {
  color: #1A1714 !important;
}

[data-theme="light"] .modal-close-sticky {
  background: #F0EDE8 !important;
  border: 1px solid #E2DEDD !important;
  color: #6B6560 !important;
}

[data-theme="light"] .modal-close-sticky:hover {
  background: rgba(231,76,60,.12) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

[data-theme="light"] .modal-sticky-body {
  background: #ffffff !important;
  color: #1A1714 !important;
}

[data-theme="light"] .modal-title  { color: #1A1714 !important; }
[data-theme="light"] .modal-close  { color: #6B6560 !important; }
[data-theme="light"] .modal-close:hover {
  color     : var(--danger) !important;
  background: rgba(231,76,60,.08) !important;
}

/* ── 10. BOOKING SUCCESS MODAL BOXES ── */
[data-theme="light"] .booking-success-modal {
  background: #ffffff !important;
  border: 1px solid rgba(201,151,58,0.45) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.15) !important;
  scrollbar-color: var(--gold) #F0EDE8 !important;
}

[data-theme="light"] .booking-success-modal::-webkit-scrollbar-track {
  background: #F0EDE8 !important;
}

[data-theme="light"] .success-info-box {
  background: #faf8f5 !important;
  border: 1px solid rgba(201,151,58,0.3) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .success-info-box.leopard-tracking-box {
  background: rgba(46,204,113,0.08) !important;
  border-color: rgba(46,204,113,0.35) !important;
}

[data-theme="light"] .success-info-box .leopard-code {
  color: #1A1714 !important;
}

[data-theme="light"] .booking-success-payment {
  background: #faf8f5 !important;
  border: 1px solid rgba(201,151,58,0.25) !important;
}

[data-theme="light"] .payment-summary-body {
  color: #4A4540 !important;
}

/* ── 11. ADMIN DELETE ACTION MODALS ── */
[data-theme="light"] .admin-delete-modal {
  background: #ffffff !important;
  border: 1px solid #E2DEDD !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .admin-delete-title {
  color: #1A1714 !important;
}

[data-theme="light"] .admin-delete-desc {
  color: #6B6560 !important;
}

[data-theme="light"] .admin-delete-choice-btn {
  background: #faf8f5 !important;
  border: 1px solid #E2DEDD !important;
}

[data-theme="light"] .admin-delete-choice-btn.choice-parcel-only {
  background: linear-gradient(145deg, #ffffff, #faf8f5) !important;
  border-color: rgba(201, 151, 58, 0.4) !important;
}

[data-theme="light"] .admin-delete-choice-btn.choice-parcel-only:hover {
  background: #ffffff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 6px 20px rgba(201,151,58,0.15) !important;
}

[data-theme="light"] .admin-delete-choice-btn.choice-parcel-payments {
  background: linear-gradient(145deg, #fff8f8, #feecec) !important;
  border-color: rgba(231, 76, 60, 0.35) !important;
}

[data-theme="light"] .admin-delete-choice-btn.choice-parcel-payments:hover {
  background: #ffffff !important;
  border-color: var(--danger) !important;
  box-shadow: 0 6px 20px rgba(231,76,60,0.15) !important;
}

[data-theme="light"] .admin-delete-info-card {
  background: #faf8f5 !important;
  border: 1px solid #E2DEDD !important;
}

[data-theme="light"] .admin-delete-info-label {
  color: #6B6560 !important;
}

[data-theme="light"] .admin-delete-info-val {
  color: #1A1714 !important;
}

/* ── 12. PROVIDER & FPV CITY PRICING MODAL BOXES ── */
[data-theme="light"] .svc-col {
  background: #faf8f5 !important;
  border: 1px solid #E2DEDD !important;
}

[data-theme="light"] .svc-col-header {
  border-bottom: 1px solid #E2DEDD !important;
}

[data-theme="light"] #providerUniversalOwWrap,
[data-theme="light"] #fpvCityModal .pricing-manager > div {
  background: #faf8f5 !important;
  border: 2px solid rgba(201,151,58,0.3) !important;
}

/* ── 13. SETTLEMENT / PAYOUT & CLEAR NEGATIVE MODALS ── */
[data-theme="light"] #payoutModal div[style*="background:var(--dark2)"],
[data-theme="light"] #clearNegativeModal div[style*="background:var(--dark2)"] {
  background: #faf8f5 !important;
  border: 1px solid #E2DEDD !important;
}

[data-theme="light"] #payoutModal div[style*="background:rgba(255,255,255,0.03)"] {
  background: #f0ede8 !important;
  border: 1px solid #E2DEDD !important;
}

/* ── 14. AUTH, TOAST & TRACKING ── */
[data-theme="light"] .auth-card {
  background: #FFFFFF;
  border    : 1px solid #E2DEDD;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}
[data-theme="light"] .google-btn {
  background: #F5F3EE;
  border    : 1px solid #E2DEDD;
  color     : #1A1714;
}
[data-theme="light"] .toast {
  background: #FFFFFF;
  color     : #1A1714;
  border    : 1px solid #E2DEDD;
}
[data-theme="light"] .track-section-box {
  background: #FFFFFF;
  border    : 1px solid rgba(201,151,58,.22);
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
[data-theme="light"] .track-result-card {
  background: #F9F7F4;
  border    : 1px solid #E2DEDD;
}
[data-theme="light"] .hero-tracker-input {
  background: #F5F3EE;
  border    : 1.5px solid #E2DEDD;
  color     : #1A1714;
}
[data-theme="light"] .nav-sec-lbl { color: #A09890; }
[data-theme="light"] .sidebar-nav a { color: #6B6560; }
[data-theme="light"] .sidebar-nav a:hover {
  background: #F0EDE8;
  color     : #1A1714;
}
[data-theme="light"] .topbar-title {
  background            : linear-gradient(135deg, #1A1714, #A07828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
}

/* ── 15. LANDING PAGE OVERRIDES ── */
[data-theme="light"] .landing-page {
  background: #F5F3EE;
  color: #1A1714;
}
[data-theme="light"] .landing-page .navbar {
  background: rgba(245, 243, 238, 0.9);
  border-bottom: 1px solid rgba(201, 151, 58, 0.2);
}
[data-theme="light"] .landing-page .navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
[data-theme="light"] .landing-page .nav-links.active,
[data-theme="light"] .landing-page .nav-actions.active {
  background: rgba(255, 255, 255, 0.98);
}
[data-theme="light"] .landing-page .nav-logo-text .brand {
  color: #1A1714;
  text-shadow: none;
}
[data-theme="light"] .landing-page .nav-links a {
  color: #1A1714;
}
[data-theme="light"] .landing-page .hero {
  background: linear-gradient(90deg, #F5F3EE 0%, #FAFAF7 60%, rgba(201,151,58,0.06) 100%);
}
[data-theme="light"] .landing-page .hero::before {
  color: rgba(26,23,20,0.08);
}
[data-theme="light"] .landing-page .hero-title {
  color: #1A1714;
  text-shadow: none;
}
[data-theme="light"] .landing-page .hero-desc {
  color: #6B6560;
}
[data-theme="light"] .landing-page .hero-stat-lbl {
  color: #6B6560;
}
[data-theme="light"] .landing-page .landing-stats-bar {
  background: #FFFFFF;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.05);
  border-top: 1px solid rgba(201,151,58,0.2);
  border-bottom: 1px solid rgba(201,151,58,0.2);
}
[data-theme="light"] .landing-page .landing-stats-bar .stat-num {
  color: #1A1714;
}
[data-theme="light"] .landing-page .landing-stats-bar .stat-lbl {
  color: #6B6560;
}
[data-theme="light"] .landing-page .landing-services {
  background: #FFFFFF;
}
[data-theme="light"] .landing-page .section-title {
  color: #1A1714;
}
[data-theme="light"] .landing-page .section-sub {
  color: #6B6560;
}
[data-theme="light"] .landing-page .service-card {
  background: #F9F7F4;
  border-color: #E2DEDD;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
[data-theme="light"] .landing-page .service-card:hover {
  background: #FFFFFF;
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(201,151,58,0.12);
}
[data-theme="light"] .landing-page .service-card h3 {
  color: #1A1714;
}
[data-theme="light"] .landing-page .service-card p {
  color: #6B6560;
}
[data-theme="light"] .landing-page .landing-process {
  background: #F5F3EE;
}
[data-theme="light"] .landing-page .landing-process::before {
  color: rgba(26,23,20,0.04);
}
[data-theme="light"] .landing-page .step-num {
  background: #FFFFFF;
  border-color: #F5F3EE;
  color: #1A1714;
}
[data-theme="light"] .landing-page .step-it h3 {
  color: #1A1714;
}
[data-theme="light"] .landing-page .step-it p {
  color: #6B6560;
}
[data-theme="light"] .landing-page .landing-coverage {
  background: #FFFFFF;
}
[data-theme="light"] .landing-page .zone-card {
  background: #F9F7F4;
  border-color: #E2DEDD;
}
[data-theme="light"] .landing-page .zone-card:hover {
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
[data-theme="light"] .landing-page .zone-name {
  color: #1A1714;
}
[data-theme="light"] .landing-page .zone-cities {
  color: #6B6560;
}
[data-theme="light"] .landing-page .landing-coverage .zone-card:last-child {
  background: #FAFAFA !important;
  border-color: var(--gold);
}
[data-theme="light"] .landing-page .landing-cta {
  background: linear-gradient(135deg, #FAFAFA, #F0EDE8);
  border-color: rgba(201,151,58,0.2);
}
[data-theme="light"] .landing-page .footer {
  background: #FFFFFF;
  border-top: 1px solid #E2DEDD;
}
[data-theme="light"] .landing-page .footer-desc,
[data-theme="light"] .landing-page .footer-col ul li a,
[data-theme="light"] .landing-page .footer-bottom p,
[data-theme="light"] .landing-page .footer-social a {
  color: #6B6560;
}
[data-theme="light"] .landing-page .footer-col h4 {
  color: #1A1714;
}

/* ── 16. LOADING ANIMATIONS OVERRIDES ── */
[data-theme="light"] #app-landing-loader {
  background: #F5F3EE;
}
[data-theme="light"] #app-landing-loader .loader-brand {
  color: #1A1714;
}
[data-theme="light"] #app-landing-loader .loader-bar {
  background: #E2DEDD;
}
[data-theme="light"] #app-landing-loader .loader-progress {
  background: var(--gold);
}
[data-theme="light"] .spinner,
[data-theme="light"] .spinner-sm,
[data-theme="light"] .track-spinner {
  border-color: #E2DEDD;
  border-top-color: var(--gold);
}

/* ── 17. BACKEND OPERATION & ADMIN BOOT LOADERS OVERRIDES ── */
[data-theme="light"] .app-operation-overlay { background: rgba(255, 255, 255, .85); }
[data-theme="light"] .app-operation-card {
  background: #FFFFFF;
  border-color: #E2DEDD;
  box-shadow: 0 22px 80px rgba(0, 0, 0, .08);
}
[data-theme="light"] .app-operation-title { color: #1A1714; }
[data-theme="light"] .app-operation-message { color: #6B6560; }
[data-theme="light"] .app-operation-progress { background: #E2DEDD; }

[data-theme="light"] .admin-session-boot { background: radial-gradient(circle at 50% 38%, rgba(201,151,58,.06), transparent 35%), #F5F3EE; }
[data-theme="light"] .admin-session-boot-card {
  background: #FFFFFF;
  border-color: #E2DEDD;
  box-shadow: 0 24px 90px rgba(0,0,0,.08);
}
[data-theme="light"] .admin-session-boot-card h1 { color: #1A1714; }
[data-theme="light"] .admin-session-boot-card p { color: #6B6560; }
[data-theme="light"] .admin-session-boot-line { background: #E2DEDD; }

[data-theme="light"] .sidebar-user { background: #FFFFFF !important; border: 1px solid #E2DEDD; }
[data-theme="light"] .sidebar-bottom .btn-dark { background: #FFFFFF !important; color: #1A1714 !important; border: 1px solid #E2DEDD !important; }
[data-theme="light"] .sidebar-bottom .btn-dark:hover { background: #F0EDE8 !important; border-color: #D0CCC7 !important; }

@media(max-width: 992px) {
  [data-theme="light"] .sidebar {
    background: 
      radial-gradient(ellipse 90% 50% at 50% -10%, rgba(201,151,58,0.1), rgba(201,151,58,0) 75%),
      radial-gradient(circle 350px at 100% 100%, rgba(201,151,58,0.06), rgba(201,151,58,0) 60%),
      radial-gradient(circle 280px at 0% 50%, rgba(201,151,58,0.04), rgba(201,151,58,0) 60%),
      linear-gradient(180deg, #FFFFFF 0%, #F5F3EE 45%, #EBE7E0 100%) !important;
  }
  [data-theme="light"] .sidebar-nav a {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.04) !important;
    color: #6B6560 !important;
  }
  [data-theme="light"] .sidebar-nav a:hover {
    background: rgba(201,151,58,0.08) !important;
    border-color: rgba(201,151,58,0.2) !important;
    color: #1A1714 !important;
  }
  [data-theme="light"] .sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(201,151,58,0.15), rgba(201,151,58,0.05)) !important;
    border-color: rgba(201,151,58,0.3) !important;
    color: #b48318 !important;
    box-shadow: 0 4px 18px rgba(201,151,58,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  }
  [data-theme="light"] .sidebar-bottom {
    background: rgba(255,255,255,0.6) !important;
    border-top-color: rgba(201,151,58,0.15) !important;
  }
}

/* Smooth global transition for theme switching */
*,
*::before,
*::after {
  transition-property       : background-color, border-color, color, box-shadow;
  transition-duration       : 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Exclude animations from the above blanket rule */
@keyframes pulse, @keyframes spin, @keyframes fadeInUp { transition: none; }

/* ══════════════════════════════════════════════════════════════════
   FPV LUXURY ANIMATED THEME SWITCH
   ══════════════════════════════════════════════════════════════════ */
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  padding: 4px 10px 4px 5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.theme-switch-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(201, 151, 58, 0.25);
  transform: translateY(-1px);
}
.theme-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: #141416;
  border-radius: 999px;
  border: 1px solid rgba(201, 151, 58, 0.3);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
[data-theme="light"] .theme-switch-track {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: rgba(201, 151, 58, 0.5);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9973a, #e6be6a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
[data-theme="light"] .theme-switch-thumb {
  transform: translateX(19px);
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.45);
}
.theme-icon-dark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: all 0.3s ease;
}
[data-theme="light"] .theme-icon-dark {
  display: none;
}
.theme-icon-light {
  display: none;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition: all 0.3s ease;
}
[data-theme="light"] .theme-icon-light {
  display: block;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.theme-switch-label {
  font-size: 0.74rem;
  font-family: var(--font-o);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}
.theme-switch-btn:hover .theme-switch-label {
  color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════
   3D ANIMATED EAGLE FLIGHT STAGE & HERO BANNERS
   ══════════════════════════════════════════════════════════════════ */
.eagle-flight-card {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 20, 24, 0.9) 0%, rgba(12, 12, 14, 0.98) 100%);
  border: 1px solid rgba(201, 151, 58, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  align-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  transition: all 0.35s ease;
}
[data-theme="light"] .eagle-flight-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 246, 240, 0.92) 100%);
  border-color: rgba(201, 151, 58, 0.3);
  box-shadow: 0 10px 30px rgba(201, 151, 58, 0.12);
}
.eagle-flight-card:hover {
  border-color: rgba(201, 151, 58, 0.45);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}
.eagle-card-content {
  padding: 24px 28px;
  position: relative;
  z-index: 2;
}
.eagle-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201, 151, 58, 0.12);
  border: 1px solid rgba(201, 151, 58, 0.35);
  font-size: 0.68rem;
  font-family: var(--font-o);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.eagle-status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: eaglePulse 1.8s infinite;
}
@keyframes eaglePulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--gold); }
  100% { transform: scale(0.9); opacity: 0.6; }
}
.eagle-card-title {
  font-family: var(--font-d);
  font-size: 1.85rem;
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}
.eagle-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 480px;
}
.eagle-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 3D Stage Container */
.eagle-3d-stage {
  position: relative;
  width: 100%;
  height: 280px;              /* taller so wings don't clip */
  min-height: 240px;
  display: block;             /* canvas fills it via width/height:100% */
  overflow: hidden;           /* clip canvas to card bounds */
  touch-action: pan-y;        /* vertical swipes still scroll the page on phones */
  will-change: transform;     /* hint GPU layer */
  contain: layout paint;      /* isolate paint for performance */
}
.eagle-3d-stage.eagle-skipped .eagle-interactive-hint { display: none; }
.eagle-stage-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 60% 50%, rgba(201, 151, 58, 0.14) 0%, transparent 68%);
}
[data-theme="light"] .eagle-stage-backdrop {
  background: radial-gradient(circle at 60% 50%, rgba(201, 151, 58, 0.2) 0%, transparent 68%);
}
.eagle-interactive-hint {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 0.64rem;
  font-family: var(--font-o);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-transform: uppercase;
}
[data-theme="light"] .eagle-interactive-hint {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-secondary);
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .eagle-flight-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .eagle-3d-stage {
    height: 240px;
    min-height: 200px;
  }
  .eagle-card-content {
    padding: 20px 18px 4px;
  }
}
@media (max-width: 600px) {
  .eagle-card-title {
    font-size: 1.45rem;
  }
  .eagle-3d-stage {
    height: 200px;
    min-height: 180px;
  }
  .theme-switch-label {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════
   COD SETTLEMENT BREAKDOWN (dashboard + admin)
   COD amount − COD tax − delivery charge = payout
   ══════════════════════════════════════════════════════ */
.settle-breakdown{display:flex;flex-direction:column;padding:4px 14px;background:var(--bg-2);border:1px solid var(--border-dim);border-radius:10px;font-family:var(--font-i);}
.settle-breakdown .settle-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;font-size:.84rem;color:var(--text-secondary);border-top:1px dashed var(--border-dim);}
.settle-breakdown .settle-row:first-child{border-top:0;}
.settle-row strong{color:var(--text-primary);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.settle-row small{color:var(--text-muted);font-size:.72rem;}
.settle-row.is-deduction strong{color:var(--danger);}
.settle-breakdown .settle-row.is-total{border-top:1px solid var(--border-md);margin-top:2px;padding-top:11px;color:var(--text-primary);font-weight:700;}
.settle-row.is-total strong{color:var(--success);font-size:1.02rem;}
.settle-row.is-total.is-debit strong{color:var(--danger);}
.settle-breakdown.compact{padding:2px 10px;margin-top:6px;}
.settle-breakdown.compact .settle-row{padding:6px 0;font-size:.78rem;}
.booking-success-payment .settle-breakdown{margin-top:8px;}
.booking-charge-row.is-deduction strong{color:var(--danger);}
.booking-charge-row.is-total{border-top:1px solid rgba(201,151,58,.35);margin-top:4px;padding-top:11px;color:var(--text-primary);font-weight:700;font-size:.84rem;}
.booking-charge-row.is-total strong{color:var(--success);font-size:1.05rem;}
.booking-charge-row.is-total.is-debit strong{color:var(--danger);}

/* ── Parcel slip (rendered to PDF): same layout, cleaner print styling ── */
#invoiceTemplate{color:#111 !important;-webkit-font-smoothing:antialiased;}
#invoiceTemplate .slip-section-head{background:#111 !important;color:#fff !important;letter-spacing:.14em;font-weight:700 !important;}
#invoiceTemplate table td{color:#111;}
#invoiceTemplate table td:first-child:not(:last-child){background:#f6f6f6;color:#4a4a4a !important;font-weight:600 !important;}
#invoiceTemplate table tr td.slipCollectionLabel:first-child,
#invoiceTemplate table tr td.slipCod{background:#fff2c2 !important;color:#000 !important;}
#invoiceTemplate table tr td.slipCollectionLabel:first-child{font-weight:800 !important;}
#invoiceTemplate .slipCod{font-size:1.45rem !important;letter-spacing:.02em;}
#invoiceTemplate .slipPaymentMode{letter-spacing:.06em;}
#invoiceTemplate .slipTrackingTop{letter-spacing:.12em !important;}

.dash-grid.balance-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:1200px){.dash-grid.balance-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){
  .dash-grid.balance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-grid.balance-grid .dash-card:last-child{grid-column:span 2;}
}
.payment-summary-header{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.success-payment-provider{padding:3px 9px;border-radius:100px;border:1px solid rgba(201,151,58,.35);color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;}

/* ══════════════════════════════════════════════════════
   ADMIN RATE EDITOR (3rd-party providers + FPV Hub cities)
   ══════════════════════════════════════════════════════ */
.modal.modal-sticky.modal-rates{max-width:1080px;}
.rate-editor{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-dim);font-family:var(--font-i);}
.rate-formula{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;margin-bottom:14px;border-radius:10px;background:var(--gold-dim);border:1px solid rgba(201,151,58,.28);color:var(--text-secondary);font-size:.8rem;line-height:1.5;}
.rate-formula i{color:var(--gold);font-size:1.05rem;margin-top:1px;}
.rate-formula b{color:var(--text-primary);}
.rate-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.rate-setting{padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border-dim);}
.rate-setting-label{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.rate-setting-input{display:flex;align-items:center;gap:8px;}
.rate-setting-input .form-control{padding:9px 12px;font-weight:700;}
.rate-setting-input > span{color:var(--text-secondary);font-weight:700;font-size:.85rem;}
.rate-setting-input .btn{white-space:nowrap;}
.rate-setting p{margin:8px 0 0;font-size:.72rem;color:var(--text-muted);line-height:1.45;}
.rate-zone-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.rate-zone-tabs{display:flex;gap:6px;max-width:100%;padding:4px;overflow-x:auto;border-radius:12px;background:var(--bg-2);border:1px solid var(--border-dim);}
.rate-zone-tab{display:flex;align-items:center;gap:7px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font:600 .82rem var(--font-i);white-space:nowrap;cursor:pointer;transition:var(--ease);}
.rate-zone-tab:hover{color:var(--text-primary);background:var(--bg-hover);}
.rate-zone-tab.is-active{background:var(--gold);color:#111;box-shadow:0 4px 14px rgba(201,151,58,.3);}
.rate-zone-tab b{min-width:22px;padding:1px 7px;border-radius:100px;background:rgba(0,0,0,.18);font-size:.7rem;text-align:center;}
.rate-zone-tab:not(.is-active) b{background:var(--gold-dim);color:var(--gold);}
.rate-zone-tab b.is-empty{opacity:.55;}
.rate-zone-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.72rem;color:var(--text-muted);}
.rate-copy-btn{padding:5px 10px;border-radius:100px;border:1px dashed var(--border-md);background:transparent;color:var(--text-secondary);font:600 .72rem var(--font-i);cursor:pointer;transition:var(--ease);}
.rate-copy-btn:hover{border-color:var(--gold);color:var(--gold);}
.rate-zone-panel{display:none;}
.rate-zone-panel.is-active{display:block;animation:rateFade .2s ease;}
@keyframes rateFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.rate-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.rate-card{display:flex;flex-direction:column;padding-bottom:2px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border-dim);overflow:hidden;transition:border-color .2s ease;}
.rate-card:focus-within{border-color:rgba(201,151,58,.55);}
.rate-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--border-dim);background:linear-gradient(180deg,var(--gold-dim),transparent);}
.rate-card-title{display:flex;align-items:center;gap:9px;min-width:0;}
.rate-card-icon{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:var(--gold-dim);color:var(--gold);font-size:1.05rem;}
.rate-card-title strong{display:block;color:var(--text-primary);font-size:.92rem;}
.rate-card-title small{display:block;color:var(--text-muted);font-size:.68rem;}
.rate-tax-field{display:flex;flex-shrink:0;align-items:center;gap:4px;padding:3px 4px 3px 9px;border-radius:9px;background:var(--bg-input);border:1px solid var(--border-md);cursor:text;}
.rate-tax-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,151,58,.12);}
.rate-tax-field span{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);white-space:nowrap;}
.rate-tax-field input{width:52px;padding:5px 2px;border:0;background:transparent;color:var(--text-primary);font:700 .9rem var(--font-i);text-align:right;outline:none;-moz-appearance:textfield;}
.rate-tax-field input.is-invalid{color:var(--danger);}
.rate-tax-field em{padding-right:5px;font-style:normal;font-weight:700;font-size:.82rem;color:var(--text-secondary);}
.rate-rows-head,.rate-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;gap:6px;align-items:center;}
.rate-rows-head{padding:9px 12px 4px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.rate-rows{display:flex;flex-direction:column;gap:6px;padding:4px 12px;}
.rate-rows:empty::before{content:"No weights yet";padding:10px 0;font-size:.75rem;color:var(--text-muted);text-align:center;}
.rate-editor .form-control{padding:8px 10px;font-size:.86rem;}
.rate-price-wrap{position:relative;display:flex;align-items:center;}
.rate-price-wrap > span{position:absolute;left:9px;font-size:.72rem;color:var(--text-muted);pointer-events:none;}
.rate-editor .rate-price-wrap .form-control{padding-left:28px;}
.rate-row-remove{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--ease);}
.rate-row-remove:hover{background:rgba(231,76,60,.12);color:var(--danger);}
.rate-editor .form-control.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(231,76,60,.12);}
.rate-editor .form-control.is-warning{border-color:rgba(243,156,18,.7);}
.rate-add-row{margin:8px 12px 0;padding:8px;border:1px dashed var(--border-md);border-radius:9px;background:transparent;color:var(--gold);font:600 .8rem var(--font-i);cursor:pointer;transition:var(--ease);}
.rate-add-row:hover{background:var(--gold-dim);border-color:var(--gold);}
.rate-ow-field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 12px 0;padding-top:10px;border-top:1px dashed var(--border-dim);font-size:.74rem;color:var(--text-secondary);}
.rate-ow-field > span{display:flex;align-items:center;gap:5px;white-space:nowrap;}
.rate-ow-field .rate-price-wrap{max-width:120px;}
.rate-card-foot{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding:10px 12px;font-size:.7rem;color:var(--success);}
.rate-card-foot span:last-child{color:var(--gold);}
.rate-card-foot .is-empty{color:var(--text-muted);}
.rate-modal-footer{position:sticky;bottom:-28px;z-index:3;display:flex;justify-content:flex-end;gap:10px;margin:20px -24px -28px;padding:14px 24px;background:var(--bg-card);border-top:1px solid var(--border-dim);box-shadow:0 -8px 20px rgba(0,0,0,.12);}
.rate-modal-footer .btn{min-width:120px;justify-content:center;}

@media (max-width:980px){
  .rate-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.rate-label-short{display:none;}
@media (max-width:680px){
  .rate-settings,.rate-cards{grid-template-columns:1fr;}
  .rate-zone-bar{flex-direction:column;align-items:stretch;}
  .rate-zone-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .rate-zone-tab{justify-content:center;gap:5px;padding:9px 6px;font-size:.78rem;}
  .rate-zone-tab i{display:none;}
  .rate-label-full{display:none;}
  .rate-label-short{display:inline;}
  .rate-zone-tools{flex-wrap:nowrap;}
  .rate-setting-input{flex-wrap:wrap;}
  .rate-setting-input .form-control{flex:1;min-width:0;}
  .rate-modal-footer .btn{flex:1;min-width:0;}
}

/* ── Provider / FPV Hub cards ── */
.provider-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:16px;}
.provider-card{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border-dim);font-family:var(--font-i);transition:var(--ease);}
.provider-card:hover{border-color:rgba(201,151,58,.45);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.provider-card.is-inactive{opacity:.72;}
.provider-card-head{display:flex;align-items:center;gap:12px;}
.provider-avatar{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#111;font-size:1.3rem;}
.provider-card-name{flex:1;min-width:0;}
.provider-card-name strong{display:block;overflow:hidden;color:var(--text-primary);font-size:1.02rem;text-overflow:ellipsis;white-space:nowrap;}
.provider-card-name span{display:block;color:var(--text-muted);font-size:.74rem;}
.provider-status{flex-shrink:0;padding:4px 10px;border-radius:100px;background:var(--bg-3);color:var(--text-secondary);font-size:.68rem;font-weight:700;}
.provider-status.is-active{background:rgba(39,174,96,.14);color:var(--success);}
.provider-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.provider-card-stats div{padding:10px 6px;border-radius:10px;background:var(--bg-3);text-align:center;}
.provider-card-stats b{display:block;color:var(--text-primary);font-size:1.02rem;}
.provider-card-stats span{display:block;margin-top:2px;color:var(--text-muted);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;}
.provider-zone-chips{display:flex;flex-wrap:wrap;gap:6px;}
.provider-zone-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:100px;border:1px dashed var(--border-md);color:var(--text-muted);font-size:.7rem;}
.provider-zone-chip.is-priced{border:1px solid rgba(39,174,96,.35);background:rgba(39,174,96,.08);color:var(--success);}
.provider-card-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;margin-top:auto;}
.provider-card-actions .btn{min-width:0;justify-content:center;padding-left:10px;padding-right:10px;white-space:nowrap;}
@media (max-width:480px){
  .provider-cards{grid-template-columns:1fr;padding:12px;}
}

/* ══════════════════════════════════════════════════════
   WHATSAPP SUPPORT (number + messages in ts/whatsapp.ts)
   ══════════════════════════════════════════════════════ */
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:8000;display:flex;align-items:center;gap:8px;padding:11px 18px 11px 13px;border-radius:100px;background:#25D366;color:#fff !important;font:700 .86rem var(--font-i);text-decoration:none;box-shadow:0 10px 26px rgba(37,211,102,.38);transition:transform .2s ease, box-shadow .2s ease;}
.whatsapp-float i{font-size:1.55rem;}
body[data-whatsapp-float] .footer{padding-bottom:84px;}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.5);}
@media (max-width:640px){
  .whatsapp-float{right:16px;bottom:16px;padding:13px;}
  .whatsapp-float span{display:none;}
}
.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#25D366 !important;border-color:#25D366 !important;color:#fff !important;text-decoration:none;}
.btn-whatsapp:hover{background:#1ebe5b !important;border-color:#1ebe5b !important;}
.footer-whatsapp{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border-radius:12px;border:1px solid rgba(37,211,102,.45);background:rgba(37,211,102,.08);color:var(--text-primary);text-decoration:none;transition:var(--ease);}
.footer-whatsapp i{font-size:1.65rem;color:#25D366;}
.footer-whatsapp small{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.footer-whatsapp b{display:block;font-size:.98rem;letter-spacing:.04em;}
.footer-whatsapp:hover{border-color:#25D366;background:rgba(37,211,102,.14);}
.whatsapp-card{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:14px 16px;border-radius:12px;border:1px solid rgba(37,211,102,.45);background:rgba(37,211,102,.08);color:var(--text-primary);text-decoration:none;transition:var(--ease);}
.whatsapp-card:hover{border-color:#25D366;background:rgba(37,211,102,.14);transform:translateY(-1px);}
.whatsapp-card-icon{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#25D366;color:#fff;font-size:1.5rem;}
.whatsapp-card-text{flex:1;min-width:0;}
.whatsapp-card-text b{display:block;font-size:.98rem;}
.whatsapp-card-text small{display:block;margin-top:2px;color:var(--text-secondary);font-size:.82rem;}
.whatsapp-card > i{color:#25D366;font-size:1.2rem;}
.sidebar-whatsapp{display:flex;align-items:center;gap:8px;white-space:nowrap;margin:-6px 0 15px;padding:8px 10px;border-radius:9px;border:1px solid rgba(37,211,102,.35);background:rgba(37,211,102,.08);color:#25D366 !important;font-size:.78rem;font-weight:600;text-decoration:none;transition:var(--ease);}
.sidebar-whatsapp:hover{background:rgba(37,211,102,.16);}
.sidebar-whatsapp i{font-size:1.05rem;}
.sidebar-whatsapp span{margin-left:auto;color:var(--text-secondary);font-weight:500;font-size:.7rem;white-space:nowrap;}

/* Brand emblem: gold on the dark theme, brown on the light theme (same artwork, same size). */
:root:not([data-theme="light"]) .logo-on-light,
[data-theme="light"] .logo-on-dark{display:none !important;}