/* ==========================================================================
   FASTONLINESERVICES.IN - Liquid Glass + Dark Mode (glass.css)
   Loaded last on every customer page. The theme is chosen by a tiny script
   in <head> that sets <html data-theme="light|dark"> (saved choice, else
   the device setting). Without JavaScript the site stays in light mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens
   -------------------------------------------------------------------------- */
:root {
  --g-fill: rgba(255, 255, 255, .58);
  --g-fill-strong: rgba(255, 255, 255, .78);
  --g-fill-soft: rgba(255, 255, 255, .38);
  --g-stroke: rgba(255, 255, 255, .75);
  --g-stroke-soft: rgba(15, 23, 60, .08);
  --g-hi: rgba(255, 255, 255, .95);
  --g-hi-soft: rgba(255, 255, 255, .45);
  --g-shade: rgba(22, 32, 90, .16);
  --g-blur: 22px;
  --g-sat: 185%;
  --g-spot: rgba(255, 255, 255, .55);
  --g-solid: #ffffff;
  --g-solid-2: #f4f6fb;

  --aurora-1: #8ea8ff;
  --aurora-2: #c4a8ff;
  --aurora-3: #7ee0ff;
  --aurora-4: #ffd29a;
  --aurora-opacity: .55;
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;

  --g-fill: rgba(22, 28, 58, .52);
  --g-fill-strong: rgba(24, 30, 62, .78);
  --g-fill-soft: rgba(30, 38, 78, .34);
  --g-stroke: rgba(255, 255, 255, .12);
  --g-stroke-soft: rgba(255, 255, 255, .08);
  --g-hi: rgba(255, 255, 255, .22);
  --g-hi-soft: rgba(255, 255, 255, .06);
  --g-shade: rgba(0, 0, 0, .45);
  --g-spot: rgba(140, 160, 255, .22);
  --g-solid: #121833;
  --g-solid-2: #0e142b;

  --aurora-1: #2b45ff;
  --aurora-2: #7b2cff;
  --aurora-3: #0891b2;
  --aurora-4: #b45309;
  --aurora-opacity: .42;

  /* redesign.css tokens */
  --rd-ink: #eef1ff;
  --rd-ink-2: #cfd5ee;
  --rd-muted: #9aa3c4;
  --rd-faint: #6f7899;
  --rd-line: rgba(255, 255, 255, .1);
  --rd-bg: #070b1a;
  --rd-card: #121833;
  --rd-blue: #7c9bff;
  --rd-blue-600: #6b8cff;
  --rd-blue-50: rgba(92, 124, 255, .16);
  --rd-violet: #a78bfa;
  --rd-saffron-50: rgba(245, 158, 11, .14);
  --rd-green: #34d399;
  --rd-green-50: rgba(52, 211, 153, .14);
  --rd-rose: #fb7185;
  --rd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --rd-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -10px rgba(0, 0, 0, .55);
  --rd-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .7);

  /* theme.css tokens */
  --bg-canvas: #070b1a;
  --bg-card: #121833;
  --ink-primary: #eef1ff;
  --ink-secondary: #cfd5ee;
  --ink-muted: #9aa3c4;
  --ink-faint: #6f7899;
  --border-hairline: rgba(255, 255, 255, .1);
  --accent-blue: #7c9bff;
  --accent-blue-soft: rgba(92, 124, 255, .16);
  --accent-green-soft: rgba(52, 211, 153, .14);
  --accent-amber-soft: rgba(245, 158, 11, .14);

  /* style.css tokens: slate scale flipped so var()-based inline styles adapt */
  --slate-900: #eef1ff;
  --slate-800: #dde2f5;
  --slate-700: #c3cae3;
  --slate-600: #a7afcc;
  --slate-500: #8c95b5;
  --slate-400: #6f7899;
  --slate-200: rgba(255, 255, 255, .12);
  --slate-100: rgba(255, 255, 255, .07);
  --slate-50: rgba(255, 255, 255, .04);
  --white: #121833;
  --primary-900: #c7d2ff;
  --primary-800: #b3c1ff;
  --primary-700: #9db0ff;
  --primary-600: #7c9bff;
  --primary-100: rgba(92, 124, 255, .22);
  --primary-50: rgba(92, 124, 255, .12);
  --success-50: rgba(52, 211, 153, .12);
  --danger-50: rgba(248, 113, 113, .12);
  --accent-amber-light: rgba(245, 158, 11, .16);
}

html { background: var(--rd-bg) !important; transition: background-color .4s ease; }
html body { background: transparent !important; transition: color .3s ease; }

/* --------------------------------------------------------------------------
   2. Animated aurora behind everything (glass needs colour to refract)
   -------------------------------------------------------------------------- */
.rd-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--aurora-opacity);
  transition: opacity .6s ease;
}
.rd-aurora span {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.rd-aurora span:nth-child(1) { background: var(--aurora-1); top: -18vmax; left: -10vmax; animation: rdDrift1 26s ease-in-out infinite; }
.rd-aurora span:nth-child(2) { background: var(--aurora-2); top: -12vmax; right: -16vmax; animation: rdDrift2 32s ease-in-out infinite; }
.rd-aurora span:nth-child(3) { background: var(--aurora-3); bottom: -22vmax; left: 18vw; animation: rdDrift3 30s ease-in-out infinite; }
.rd-aurora span:nth-child(4) { background: var(--aurora-4); bottom: -26vmax; right: -8vmax; width: 34vmax; height: 34vmax; opacity: .7; animation: rdDrift1 36s ease-in-out -12s infinite reverse; }
@keyframes rdDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes rdDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-22vw, 20vh) scale(.9); } }
@keyframes rdDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw, -24vh) scale(1.1); } }
html body:has(.h-hero) .rd-aurora { --aurora-opacity: .8; }
html[data-theme="dark"] body:has(.h-hero) .rd-aurora { --aurora-opacity: .55; }

/* Remove flat page backgrounds that would hide the aurora */
html body .h-hero .h-blob,
html body .h-hero .h-dots { opacity: .35; }

/* --------------------------------------------------------------------------
   3. Glass primitive
   Applied to components below; .rd-glass is available for new markup.
   --mx / --my are set by redesign.js for the pointer-following highlight.
   -------------------------------------------------------------------------- */
.rd-glass,
html body .rd-glass-auto {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), var(--g-spot), transparent 42%),
    linear-gradient(180deg, var(--g-hi-soft), transparent 38%),
    var(--g-fill) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border: 1px solid var(--g-stroke) !important;
  box-shadow:
    inset 0 1px 0 var(--g-hi),
    inset 0 -1px 0 var(--g-hi-soft),
    inset 1px 0 0 var(--g-hi-soft),
    0 1px 2px rgba(10, 17, 40, .06),
    0 18px 44px -18px var(--g-shade) !important;
}

/* Surfaces that become glass everywhere */
html body .form-card,
html body .stats-card,
html body .rd-auth-wrap,
html body .rd-svc-intro,
html body .rd-svc-toolbar,
html body .services-page-container .service-card,
html body .services-page-container .how-it-works-section,
html body .h-stat,
html body .how-step-card,
html body .h-card:not(.h-card-lg),
html body .catalog-gate-card,
html body .home-service-card,
html body .tracking-box-card,
html body .faq-item,
html body .h-pill,
html body .h-rot-window,
html body .hero-private-disclaimer,
html body .h-float,
html body .decorative-tracker-card,
html body .rd-stepper,
html body .rd-check,
html body .dashboard-card,
html body .card:not(.dashboard-wallet-bar) {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), var(--g-spot), transparent 42%),
    linear-gradient(180deg, var(--g-hi-soft), transparent 38%),
    var(--g-fill) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border: 1px solid var(--g-stroke) !important;
  box-shadow:
    inset 0 1px 0 var(--g-hi),
    inset 0 -1px 0 var(--g-hi-soft),
    0 1px 2px rgba(10, 17, 40, .05),
    0 18px 44px -18px var(--g-shade) !important;
}

/* Service cards keep their category tint on top of the glass */
html body .services-page-container .service-card::before { opacity: .55; }
html[data-theme="dark"] body .services-page-container .service-card::before { opacity: .25; }

/* Sheen that sweeps across glass cards on hover */
html body .h-stat, html body .how-step-card, html body .h-card, html body .home-service-card,
html body .services-page-container .service-card, html body .decorative-tracker-card { isolation: isolate; }
.rd-sheen { position: relative; overflow: hidden; }
.rd-sheen > .rd-sheen-bar {
  position: absolute; inset: -40% auto -40% -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.rd-sheen:hover > .rd-sheen-bar { animation: rdSheen 1.1s var(--rd-ease); }
html[data-theme="dark"] .rd-sheen > .rd-sheen-bar { background: linear-gradient(100deg, transparent, rgba(160, 180, 255, .18), transparent); }
@keyframes rdSheen { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }

/* --------------------------------------------------------------------------
   4. Floating liquid-glass header
   -------------------------------------------------------------------------- */
html body .site-header,
html body .site-header.rd-scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 10px 0 0 !important;
  overflow: visible !important;
  overflow-x: clip !important;
  pointer-events: none;
}
html body .site-header .nav-container {
  pointer-events: auto;
  width: calc(100% - 24px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  height: 64px !important;
  padding: 0 10px 0 12px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, var(--g-hi-soft), transparent 60%),
    var(--g-fill) !important;
  border: 1px solid var(--g-stroke) !important;
  box-shadow:
    inset 0 1px 0 var(--g-hi),
    inset 0 -1px 0 var(--g-hi-soft),
    0 12px 36px -14px var(--g-shade) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
  /* Chromium: bend the backdrop slightly like Apple's liquid glass. Other
     browsers ignore this declaration and keep the plain blur above. */
  backdrop-filter: url(#rd-liquid-glass) blur(18px) saturate(190%);
  transition: box-shadow .3s ease, background .3s ease;
}
html body .site-header.rd-scrolled .nav-container {
  background:
    linear-gradient(180deg, var(--g-hi-soft), transparent 60%),
    var(--g-fill-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--g-hi),
    0 16px 40px -14px var(--g-shade) !important;
}
@media (max-width: 767px) {
  html body .site-header { padding: 8px 0 0 !important; }
  html body .site-header .nav-container {
    width: calc(100% - 16px) !important;
    height: 58px !important;
    border-radius: 18px !important;
    padding: 0 8px 0 9px !important;
  }
}
/* Nav links sit on glass: pill highlight for the active page */
html body .desktop-nav .nav-link.active,
html body .nav-menu .nav-link.active {
  background: var(--g-fill-soft) !important;
  box-shadow: inset 0 1px 0 var(--g-hi-soft), 0 0 0 1px var(--g-stroke-soft);
  border-radius: 12px !important;
}
html body .user-profile-chip {
  background: var(--g-fill-soft) !important;
  border: 1px solid var(--g-stroke-soft) !important;
  color: var(--rd-ink) !important;
}
html body .header-logout-link { color: var(--rd-muted) !important; }
html body .hamburger-btn {
  background: var(--g-fill-soft) !important;
  border: 1px solid var(--g-stroke-soft) !important;
  border-radius: 12px !important;
}
html body .hamburger-btn span { background: var(--rd-ink) !important; }

/* Theme toggle */
.rd-theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--g-stroke-soft);
  background: var(--g-fill-soft);
  color: var(--rd-ink);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--g-hi-soft);
  transition: transform .3s var(--rd-spring), background .3s;
}
.rd-theme-toggle:hover { transform: scale(1.06); }
.rd-theme-toggle:active { transform: scale(.94); }
.rd-theme-toggle:focus-visible { outline: 3px solid rgba(92, 124, 255, .45); outline-offset: 2px; }
.rd-theme-toggle svg {
  position: absolute;
  transition: transform .55s var(--rd-spring), opacity .35s ease;
}
.rd-theme-toggle .rd-ico-sun { color: #f59e0b; }
.rd-theme-toggle .rd-ico-moon { color: #a5b4fc; }
html[data-theme="light"] .rd-theme-toggle .rd-ico-moon { transform: translateY(26px) rotate(-90deg); opacity: 0; }
html[data-theme="dark"] .rd-theme-toggle .rd-ico-sun { transform: translateY(-26px) rotate(90deg); opacity: 0; }
@media (max-width: 767px) { .rd-theme-toggle { width: 38px; height: 38px; } }

/* Theme switch: briefly animate colours everywhere */
html.rd-theme-anim *,
html.rd-theme-anim *::before,
html.rd-theme-anim *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important;
}

/* Mobile drawer */
html body .mobile-nav-drawer .mobile-drawer-content {
  background: var(--g-fill-strong) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-left: 1px solid var(--g-stroke) !important;
}
html body .mobile-drawer-link {
  background: var(--g-fill-soft) !important;
  border: 1px solid var(--g-stroke-soft) !important;
  color: var(--rd-ink) !important;
}

/* --------------------------------------------------------------------------
   5. Homepage: liquid shapes and glass sections
   -------------------------------------------------------------------------- */
/* Morphing liquid blob behind the tracker card */
.h-visual::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, #2957ff, #7c3aed, #ec4899, #f59e0b, #06b6d4, #2957ff);
  filter: blur(42px);
  opacity: .5;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: rdMorph 14s ease-in-out infinite, hSpin 30s linear infinite;
  z-index: 0;
}
html[data-theme="dark"] .h-visual::before { opacity: .38; }
@keyframes rdMorph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 64% 36% 38% 62% / 55% 62% 38% 45%; }
  66% { border-radius: 36% 64% 52% 48% / 38% 36% 64% 62%; }
}
.h-visual > * { position: relative; z-index: 1; }
.h-visual > .h-float { position: absolute; z-index: 2; }
.h-visual > .h-orbit { position: absolute; }

/* Floating glass bubbles drifting up the hero */
.rd-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.rd-bubbles i {
  position: absolute;
  bottom: -80px;
  width: var(--s, 40px);
  height: var(--s, 40px);
  left: var(--x, 50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 22%, transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(124, 58, 237, .25), transparent 60%),
    rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(41, 87, 255, .35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: rdRise var(--t, 18s) linear var(--d, 0s) infinite;
  opacity: 0;
}
html[data-theme="dark"] .rd-bubbles i { border-color: rgba(255, 255, 255, .18); background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .45), transparent 40%), rgba(120, 140, 255, .06); }
@keyframes rdRise {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(30px, -45vh) scale(1); }
  90% { opacity: .8; }
  100% { transform: translate(-20px, -95vh) scale(1.1); opacity: 0; }
}

html body .h-hero { background: transparent !important; }
html body .h-title { color: var(--rd-ink) !important; }
html body .h-marquee {
  background: var(--g-fill-soft) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: var(--g-stroke) !important;
}
html body .h-marquee-list li::after { color: var(--rd-faint); }
html body .h-card-lg {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(140, 160, 255, .25), transparent 45%),
    linear-gradient(160deg, rgba(11, 20, 53, .88), rgba(27, 31, 94, .82)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 50px -20px rgba(10, 17, 60, .6) !important;
}
html body .h-final-card {
  background:
    radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(140, 160, 255, .28), transparent 45%),
    linear-gradient(160deg, rgba(11, 20, 53, .9), rgba(27, 31, 94, .85)) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 40px 80px -30px rgba(10, 17, 60, .6);
}
html body .tracking-input-row { background: var(--g-fill-soft) !important; }
html body .tracking-input-row:focus-within { background: var(--g-fill-strong) !important; }
html body .tracker-progress-track { background: var(--g-fill-soft) !important; }
html body .step-icon-indicator { background: var(--g-fill-soft); }
html body .tracker-id-badge { background: var(--g-fill-soft) !important; }
html body .gate-icon { background: var(--g-fill-soft) !important; }
html body .faq-trigger svg { background: var(--g-fill-soft); }
html body .faq-item.is-open .faq-trigger svg { background: var(--rd-blue); }

/* --------------------------------------------------------------------------
   6. Liquid-glass buttons
   -------------------------------------------------------------------------- */
html body .btn-outline {
  background: var(--g-fill) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--g-stroke) !important;
  color: var(--rd-ink) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), 0 6px 18px -10px var(--g-shade) !important;
}
html body .btn-outline:hover { color: var(--rd-blue) !important; }
html body .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 6px rgba(20, 20, 80, .25),
    0 10px 24px -10px rgba(41, 87, 255, .7) !important;
}

/* --------------------------------------------------------------------------
   7. Forms on glass
   -------------------------------------------------------------------------- */
html body .form-control,
html body .form-input,
html body .form-control-custom,
html body .rd-svc-search input,
html body .catalog-search-input {
  background: var(--g-fill-soft) !important;
  border-color: var(--g-stroke-soft) !important;
  color: var(--rd-ink) !important;
}
html body .form-control:focus,
html body .form-control-custom:focus,
html body .rd-svc-search input:focus,
html body .catalog-search-input:focus { background: var(--g-fill-strong) !important; border-color: var(--rd-blue) !important; }
html body .rd-prefix > span { background: var(--g-fill-soft); border-color: var(--g-stroke-soft); }
html body .rd-svc-search kbd { background: var(--g-fill-soft); border-color: var(--g-stroke-soft); }
html body .rd-stepper .st.is-on { background: var(--g-fill-strong); }
html body .rd-auth-main { background: transparent; }

/* --------------------------------------------------------------------------
   8. Dark mode coverage for legacy styles and inline styles in views
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body p,
html[data-theme="dark"] body li,
html[data-theme="dark"] body td,
html[data-theme="dark"] body label { color: var(--rd-ink-2); }
html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4, html[data-theme="dark"] body h5, html[data-theme="dark"] body h6 { color: var(--rd-ink) !important; }
html[data-theme="dark"] body a:not(.btn) { color: #9db0ff; }
html[data-theme="dark"] body .serif-accent.rd-grad-text,
html[data-theme="dark"] body .h-accent.serif-accent { background-image: linear-gradient(135deg, #8ea8ff, #c4a8ff 55%, #f0abfc); }
html[data-theme="dark"] body .rd-grad-text { background-image: linear-gradient(135deg, #8ea8ff, #c4a8ff 55%, #f0abfc); }
html[data-theme="dark"] body .h-stat strong { background-image: linear-gradient(135deg, #8ea8ff, #c4a8ff 55%, #f0abfc); }
html[data-theme="dark"] body .form-label,
html[data-theme="dark"] body .form-label-custom { color: var(--rd-ink-2) !important; }
html[data-theme="dark"] body ::placeholder { color: #6f7899 !important; }
html[data-theme="dark"] body select option { background: #121833; color: #eef1ff; }

/* Generic legacy surfaces */
html[data-theme="dark"] body .page-header-box,
html[data-theme="dark"] body .modal-content-card,
html[data-theme="dark"] body .auth-card,
html[data-theme="dark"] body .tracking-card,
html[data-theme="dark"] body .review-card,
html[data-theme="dark"] body .timeline-step-card,
html[data-theme="dark"] body .wallet-card,
html[data-theme="dark"] body .service-fee-box,
html[data-theme="dark"] body .compact-upload-box,
html[data-theme="dark"] body .upload-card,
html[data-theme="dark"] body .dropzone,
html[data-theme="dark"] body .checkbox-container,
html[data-theme="dark"] body .modal-notice-box,
html[data-theme="dark"] body table,
html[data-theme="dark"] body thead,
html[data-theme="dark"] body tbody,
html[data-theme="dark"] body tr,
html[data-theme="dark"] body th,
html[data-theme="dark"] body .table-responsive {
  background-color: transparent !important;
  border-color: var(--rd-line) !important;
  color: var(--rd-ink-2);
}
html[data-theme="dark"] body th { color: var(--rd-muted) !important; background: rgba(255, 255, 255, .03) !important; }
html[data-theme="dark"] body td { border-color: var(--rd-line) !important; }
html[data-theme="dark"] body hr { border-color: var(--rd-line); }

html[data-theme="dark"] body .alert { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .12) !important; color: var(--rd-ink-2) !important; }
html[data-theme="dark"] body .alert-danger, html[data-theme="dark"] body .alert-error { background: rgba(248, 113, 113, .12) !important; border-color: rgba(248, 113, 113, .35) !important; color: #fecaca !important; }
html[data-theme="dark"] body .alert-success { background: rgba(52, 211, 153, .12) !important; border-color: rgba(52, 211, 153, .35) !important; color: #bbf7d0 !important; }
html[data-theme="dark"] body .alert-warning { background: rgba(245, 158, 11, .12) !important; border-color: rgba(245, 158, 11, .35) !important; color: #fde68a !important; }
html[data-theme="dark"] body .alert-info { background: rgba(92, 124, 255, .12) !important; border-color: rgba(92, 124, 255, .35) !important; color: #c7d2fe !important; }
html[data-theme="dark"] body .rd-fee-note { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #fde68a; }
html[data-theme="dark"] body .rd-fee-note .amt { background: rgba(0, 0, 0, .25); color: #fbbf24; }
html[data-theme="dark"] body .rd-fee-note.is-free { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .3); color: #a7f3d0; }
html[data-theme="dark"] body .service-chip { background: rgba(255, 255, 255, .05) !important; }
html[data-theme="dark"] body .service-icon-box { background: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] body .rd-chip.is-on { background: #eef1ff; color: #0a1128; }
html[data-theme="dark"] body .rd-chip .c { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] body .rd-chip.is-on .c { background: rgba(10, 17, 40, .12); }
html[data-theme="dark"] body .btn-primary { color: #fff !important; }
html[data-theme="dark"] body .btn[disabled], html[data-theme="dark"] body .btn.btn-unavailable { background: rgba(255, 255, 255, .06) !important; color: #6f7899 !important; }

/* Inline style="" backgrounds and text colours used across the view files */
html[data-theme="dark"] body [style*="background:white"],
html[data-theme="dark"] body [style*="background: white"],
html[data-theme="dark"] body [style*="background-color:white"],
html[data-theme="dark"] body [style*="background-color: white"],
html[data-theme="dark"] body [style*="background:#fff;"],
html[data-theme="dark"] body [style*="background: #fff;"],
html[data-theme="dark"] body [style*="background:#ffffff"],
html[data-theme="dark"] body [style*="background: #ffffff"],
html[data-theme="dark"] body [style*="background-color:#ffffff"],
html[data-theme="dark"] body [style*="background-color: #ffffff"],
html[data-theme="dark"] body [style*="background:#f8fafc"],
html[data-theme="dark"] body [style*="background: #f8fafc"],
html[data-theme="dark"] body [style*="background-color:#f8fafc"],
html[data-theme="dark"] body [style*="background-color: #f8fafc"],
html[data-theme="dark"] body [style*="background:#f1f5f9"],
html[data-theme="dark"] body [style*="background: #f1f5f9"],
html[data-theme="dark"] body [style*="background:#fafbfc"],
html[data-theme="dark"] body [style*="background:#f9fafb"] {
  background: rgba(255, 255, 255, .04) !important;
}
html[data-theme="dark"] body [style*="background:#eff6ff"],
html[data-theme="dark"] body [style*="background: #eff6ff"],
html[data-theme="dark"] body [style*="background-color:#eff6ff"],
html[data-theme="dark"] body [style*="background:#f0f9ff"],
html[data-theme="dark"] body [style*="background:#e0f2fe"],
html[data-theme="dark"] body [style*="background:#dbeafe"],
html[data-theme="dark"] body [style*="background:#eef2ff"] { background: rgba(92, 124, 255, .12) !important; }
html[data-theme="dark"] body [style*="background:#f0fdf4"],
html[data-theme="dark"] body [style*="background: #f0fdf4"],
html[data-theme="dark"] body [style*="background-color:#f0fdf4"],
html[data-theme="dark"] body [style*="background:#ecfdf5"],
html[data-theme="dark"] body [style*="background:#dcfce7"] { background: rgba(52, 211, 153, .12) !important; }
html[data-theme="dark"] body [style*="background:#fffbeb"],
html[data-theme="dark"] body [style*="background: #fffbeb"],
html[data-theme="dark"] body [style*="background:#fef3c7"],
html[data-theme="dark"] body [style*="background:#fff7ed"],
html[data-theme="dark"] body [style*="background:#ffedd5"] { background: rgba(245, 158, 11, .12) !important; }
html[data-theme="dark"] body [style*="background:#fef2f2"],
html[data-theme="dark"] body [style*="background: #fef2f2"],
html[data-theme="dark"] body [style*="background:#fee2e2"] { background: rgba(248, 113, 113, .12) !important; }

html[data-theme="dark"] body [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] body [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] body [style*="border:2px solid #e2e8f0"],
html[data-theme="dark"] body [style*="border-color:#e2e8f0"],
html[data-theme="dark"] body [style*="border:1px solid #cbd5e1"],
html[data-theme="dark"] body [style*="border: 1px solid var(--slate-200)"],
html[data-theme="dark"] body [style*="border:1px solid var(--slate-200)"] { border-color: rgba(255, 255, 255, .1) !important; }
html[data-theme="dark"] body [style*="border-top:1px dashed #e2e8f0"],
html[data-theme="dark"] body [style*="border-bottom:1px solid #e2e8f0"],
html[data-theme="dark"] body [style*="border-top:1px solid #e2e8f0"] { border-color: rgba(255, 255, 255, .1) !important; }

html[data-theme="dark"] body [style*="color:#0f172a"],
html[data-theme="dark"] body [style*="color: #0f172a"],
html[data-theme="dark"] body [style*="color:#1e293b"],
html[data-theme="dark"] body [style*="color: #1e293b"],
html[data-theme="dark"] body [style*="color:#0f2b5c"],
html[data-theme="dark"] body [style*="color:#111827"] { color: var(--rd-ink) !important; }
html[data-theme="dark"] body [style*="color:#334155"],
html[data-theme="dark"] body [style*="color: #334155"],
html[data-theme="dark"] body [style*="color:#475569"],
html[data-theme="dark"] body [style*="color: #475569"] { color: var(--rd-ink-2) !important; }
html[data-theme="dark"] body [style*="color:#64748b"],
html[data-theme="dark"] body [style*="color: #64748b"],
html[data-theme="dark"] body [style*="color:#94a3b8"] { color: var(--rd-muted) !important; }
html[data-theme="dark"] body [style*="color:#1e40af"],
html[data-theme="dark"] body [style*="color:#1d4ed8"],
html[data-theme="dark"] body [style*="color: #1e40af"] { color: #a5b4fc !important; }
html[data-theme="dark"] body [style*="color:#166534"],
html[data-theme="dark"] body [style*="color: #166534"],
html[data-theme="dark"] body [style*="color:#15803d"] { color: #86efac !important; }
html[data-theme="dark"] body [style*="color:#92400e"],
html[data-theme="dark"] body [style*="color:#b45309"],
html[data-theme="dark"] body [style*="color:#9a3412"] { color: #fcd34d !important; }

/* Footer: deeper glass */
html body .site-footer {
  background:
    linear-gradient(160deg, rgba(11, 20, 53, .92), rgba(27, 31, 94, .9)) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
html[data-theme="dark"] body .site-footer {
  background: linear-gradient(160deg, rgba(8, 12, 30, .9), rgba(18, 20, 60, .88)) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] body .site-footer a { color: #c3cae0 !important; }

/* Dashboard hero keeps its own dark gradient in both themes */
html[data-theme="dark"] body .citizen-hero-card { border: 1px solid rgba(255, 255, 255, .1) !important; }

/* --------------------------------------------------------------------------
   9. Motion and performance safeguards
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --g-blur: 16px; }
  .rd-bubbles i:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-aurora span, .h-visual::before, .rd-bubbles i { animation: none !important; }
  .rd-bubbles { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root, html[data-theme="dark"] { --g-fill: var(--g-solid); --g-fill-soft: var(--g-solid-2); --g-fill-strong: var(--g-solid); }
}

/* Small fixes */
html body .tracking-input-row input { background: transparent !important; border: 0 !important; color: var(--rd-ink) !important; box-shadow: none !important; }
html body .avatar-circle {
  background: var(--rd-grad) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   10. Legacy components (style.css) moved onto glass, both themes
   -------------------------------------------------------------------------- */
html body .service-form-card,
html body .dash-card,
html body .citizen-card,
html body .stat-card,
html body .contact-info-card,
html body .popular-service-card,
html body .service-review-box,
html body .service-consent-card,
html body .service-file-card,
html body .voter-subcard,
html body .dashboard-notice-bar,
html body .mobile-app-card,
html body .modal-dialog,
html body .review-card {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), var(--g-spot), transparent 42%),
    linear-gradient(180deg, var(--g-hi-soft), transparent 38%),
    var(--g-fill) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-color: var(--g-stroke) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), 0 16px 40px -18px var(--g-shade) !important;
}
html body .contact-section,
html body .services-section,
html body .trust-features-section { background: transparent !important; }
html body .app-id-pill,
html body .app-id-pill-sm,
html body .step-badge,
html body .service-card-badge,
html body .service-header-fee,
html body .upload-card-wrapper,
html body .compact-uploader .uploader-box,
html body .uploader-btn-action,
html body .uploader-preview-thumb,
html body .upload-icon-circle,
html body .btn-replace-file,
html body .voter-services-tabs,
html body .tracking-input,
html body .modal-header,
html body .modal-footer,
html body .citizen-table thead th,
html body .trust-feature-card {
  background-color: var(--g-fill-soft) !important;
  border-color: var(--g-stroke-soft) !important;
}
html body .citizen-table tbody tr:hover { background: var(--g-fill-soft) !important; }
html body .mobile-card-divider { background: var(--g-stroke-soft) !important; }

/* Buttons that carry inline white backgrounds keep them (they sit on dark gradients) */
html[data-theme="dark"] body .btn[style*="background:#ffffff"],
html[data-theme="dark"] body .btn[style*="background: #ffffff"],
html[data-theme="dark"] body .btn[style*="background:white"],
html[data-theme="dark"] body .btn[style*="background: white"] { background: #ffffff !important; color: #1e293b !important; }
html body .rd-wallet .services-wallet-btn { color: #0a1128 !important; }

/* LIVE / unavailable badges */
html[data-theme="dark"] body .service-status-badge.status-live { background: rgba(52, 211, 153, .14) !important; color: #6ee7b7 !important; border-color: rgba(52, 211, 153, .3) !important; }
html[data-theme="dark"] body .service-status-badge.status-unavailable { background: rgba(255, 255, 255, .06) !important; color: #9aa3c4 !important; border-color: rgba(255, 255, 255, .12) !important; }
html[data-theme="dark"] body .service-unavailable-help { color: #9aa3c4 !important; }

/* Tablet widths: the inline nav links move into the hamburger drawer so the
   logo, account chips and theme toggle never overlap. */
@media (max-width: 1180px) {
  html body .site-header .nav-container > nav { display: none !important; }
  html body .site-header .nav-container { justify-content: space-between !important; }
}

/* --------------------------------------------------------------------------
   11. Site name beside the logo
   The name may only use leftover space: nav links and account actions never
   shrink, the name does. If it would be cut off, redesign.js hides it
   (.rd-brand-compact), so it can never overlap anything.
   -------------------------------------------------------------------------- */
html body .site-header .rd-brand-mark {
  flex: 0 1 auto !important;
  min-width: 44px !important;
  gap: .6rem;
  text-decoration: none !important;
}
html body .site-header .nav-container > nav { flex: 1 0 auto !important; min-width: max-content; }
html body .rd-brand-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  line-height: 1;
}
html body .site-header.rd-brand-compact .nav-container > .rd-brand-mark .rd-brand-name { display: none; }
html body .mobile-drawer-header .rd-brand-mark { gap: .55rem; text-decoration: none; }
html body .mobile-drawer-header .rd-brand-name { font-size: .95rem; }

/* Below 1400px the account chips go compact (avatar + amount) so the site
   name keeps its room; the full name stays in the chip's tooltip. */
@media (max-width: 1399px) {
  html body .site-header .wallet-label-desktop,
  html body .site-header .profile-name-desktop,
  html body .site-header .user-status-dot { display: none !important; }
}
html[data-theme="dark"] body .rd-meter i { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   12. Phone menu (drawer)
   -------------------------------------------------------------------------- */
html body .mobile-nav-drawer {
  background: rgba(6, 10, 28, .32) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  transition: opacity .35s ease !important;
}
html body .mobile-nav-drawer .mobile-drawer-content.rd-drawer {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  left: auto !important;
  height: auto !important;
  width: min(86vw, 340px) !important;
  max-width: none !important;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, var(--g-hi-soft), transparent 30%),
    var(--g-fill-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--g-stroke) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), 0 30px 70px -20px rgba(6, 10, 40, .5) !important;
  transform: translateX(calc(100% + 16px)) !important;
  transition: transform .5s var(--rd-ease) !important;
}
html body .mobile-nav-drawer.open .mobile-drawer-content.rd-drawer { transform: none !important; }

/* Head */
html body .rd-drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  margin: 0 !important;
  padding: 4px 2px 12px 4px !important;
  border-bottom: 1px solid var(--g-stroke-soft) !important;
}
html body .rd-drawer-head .rd-brand-mark { min-width: 0; }
html body .rd-drawer-head .rd-brand-name { overflow: hidden; text-overflow: ellipsis; }
html body .rd-drawer-close {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid !important; place-items: center;
  border-radius: 12px !important;
  background: var(--g-fill-soft) !important;
  border: 1px solid var(--g-stroke-soft) !important;
  color: var(--rd-ink) !important;
  cursor: pointer;
  transition: transform .3s var(--rd-spring);
}
html body .rd-drawer-close:hover { transform: rotate(90deg); }

/* Signed-in profile card */
.rd-drawer-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: var(--g-fill-soft);
  border: 1px solid var(--g-stroke-soft);
  text-decoration: none !important;
  color: var(--rd-ink) !important;
}
.rd-drawer-user .avatar-circle { width: 42px !important; height: 42px !important; border-radius: 13px !important; display: grid; place-items: center; flex-shrink: 0; font-size: .9rem; }
.rd-drawer-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-drawer-user-text strong { font-size: .95rem; color: var(--rd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-drawer-user-text small { font-size: .75rem; color: var(--rd-muted); }
.rd-drawer-balance {
  flex-shrink: 0;
  font-weight: 800; font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 10px;
  color: var(--rd-green);
  background: var(--rd-green-50);
}

/* Links */
.rd-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.rd-drawer-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 8px 10px 8px 8px;
  border-radius: 16px;
  color: var(--rd-ink) !important;
  font-weight: 650; font-size: .98rem;
  text-decoration: none !important;
  transition: background .2s ease, transform .2s ease;
}
.rd-drawer-link:hover, .rd-drawer-link:focus-visible { background: var(--g-fill-soft); }
.rd-drawer-link:active { transform: scale(.98); }
.rd-drawer-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--g-fill-soft);
  border: 1px solid var(--g-stroke-soft);
  color: var(--rd-blue);
}
.rd-drawer-text { flex: 1; min-width: 0; }
.rd-drawer-chev { color: var(--rd-faint); flex-shrink: 0; transition: transform .2s ease; }
.rd-drawer-link:hover .rd-drawer-chev { transform: translateX(3px); }
.rd-drawer-link.is-active { background: var(--rd-blue-50); color: var(--rd-blue) !important; }
.rd-drawer-link.is-active .rd-drawer-ico { background: var(--rd-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(41, 87, 255, .6); }

/* Staggered entrance */
html body .mobile-nav-drawer.open .rd-drawer-link,
html body .mobile-nav-drawer.open .rd-drawer-user,
html body .mobile-nav-drawer.open .rd-drawer-foot {
  animation: rdDrawerIn .5s var(--rd-ease) both;
  animation-delay: calc(var(--i, 0) * 45ms + 120ms);
}
html body .mobile-nav-drawer.open .rd-drawer-foot { --i: 8; }
@keyframes rdDrawerIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Footer: theme switch + auth buttons */
.rd-drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--g-stroke-soft); }
.rd-drawer-theme {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  border: 1px solid var(--g-stroke-soft);
  background: var(--g-fill-soft);
  color: var(--rd-ink);
  font: inherit; font-weight: 650; font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.rd-drawer-theme .rd-drawer-ico { color: #818cf8; }
.rd-switch {
  position: relative;
  width: 46px; height: 28px; flex-shrink: 0;
  border-radius: 999px;
  background: rgba(120, 130, 160, .35);
  transition: background .3s ease;
}
.rd-switch i {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .35s var(--rd-spring);
}
html[data-theme="dark"] .rd-switch { background: var(--rd-grad); }
html[data-theme="dark"] .rd-switch i { transform: translateX(18px); }
.rd-drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body .rd-drawer-auth .btn,
html body .rd-drawer-logout { min-height: 48px; justify-content: center; display: inline-flex; align-items: center; width: 100%; }
html body .rd-drawer-logout {
  background: rgba(225, 29, 72, .08) !important;
  border: 1px solid rgba(225, 29, 72, .25) !important;
  color: #e11d48 !important;
}
html[data-theme="dark"] body .rd-drawer-logout { color: #fb7185 !important; }
.rd-drawer-note { margin: 2px 0 0; text-align: center; font-size: .72rem; color: var(--rd-faint); }

html.rd-drawer-open, html.rd-drawer-open body { overflow: hidden !important; }