@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --font-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-fa: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Default Palette: Cyber Indigo (Linear / Raycast style) */
  --color-primary: #4F46E5;
  --color-primary-light: #6366F1;
  --color-primary-dark: #3730A3;
  --color-accent: #38BDF8;
  --color-bg-dark: #08090D;
  --color-surface-dark: #0E1017;
  --color-card-dark: rgba(15, 17, 26, 0.88);
  --color-border-dark: rgba(99, 102, 241, 0.20);
  --color-glow: rgba(99, 102, 241, 0.35);

  /* Day / Light Mode Palette */
  --color-bg-light: #F8FAFC;
  --color-surface-light: #FFFFFF;
  --color-card-light: rgba(255, 255, 255, 0.98);
  --color-border-light: #E2E8F0;
  --color-text-light: #0F172A;
  --color-text-muted-light: #475569;
}

/* Fintech Emerald Theme Override (Selectable from Admin) */
html.theme-fintech_emerald {
  --color-primary: #10B981;
  --color-primary-light: #34D399;
  --color-primary-dark: #047857;
  --color-accent: #14B8A6;
  --color-bg-dark: #060A08;
  --color-surface-dark: #0C1310;
  --color-card-dark: rgba(12, 20, 16, 0.88);
  --color-border-dark: rgba(16, 185, 129, 0.20);
  --color-glow: rgba(16, 185, 129, 0.35);
}

/* Typography per Language */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-en);
  background-color: var(--color-bg-dark);
  color: #F8FAFC;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html[dir="rtl"] body,
html[lang="fa"] body {
  font-family: var(--font-fa);
}

.en-font {
  font-family: var(--font-en) !important;
}

/* Glass Panels & Modern Shadows */
.glass-panel {
  background: var(--color-card-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-dark);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.theme-glow-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 16px 36px -8px var(--color-glow);
  transform: translateY(-4px);
}

.theme-glow-sm {
  box-shadow: 0 0 20px -3px var(--color-glow);
}

.theme-glow {
  box-shadow: 0 0 40px -6px var(--color-glow);
}

.bg-theme-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.text-theme-gradient {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--color-primary-light) 50%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   LIGHT (DAY) MODE HIGH-CONTRAST ENGINE
   ========================================================================== */

html.light body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Headers & Glass Panels */
html.light .glass-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
  color: #0F172A !important;
}

html.light header.glass-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* Typography Hierarchy */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light label {
  color: #1E293B !important;
  font-weight: 700 !important;
}

html.light div.text-white,
html.light span.text-white,
html.light p.text-white,
html.light td.text-white {
  color: #0F172A !important;
}

html.light .text-slate-100,
html.light .text-slate-200 {
  color: #0F172A !important;
}

html.light .text-slate-300 {
  color: #1E293B !important;
}

html.light .text-slate-400 {
  color: #475569 !important;
}

html.light .text-slate-500 {
  color: #64748B !important;
}

/* Distinct Semantic Accent Colors */
html.light .text-indigo-400,
html.light .text-indigo-300,
html.light .text-indigo-200 {
  color: #4F46E5 !important;
}

html.light .text-emerald-400,
html.light .text-emerald-300 {
  color: #059669 !important;
}

html.light .text-amber-400,
html.light .text-amber-300 {
  color: #D97706 !important;
}

html.light .text-rose-400,
html.light .text-rose-300 {
  color: #E11D48 !important;
}

html.light .text-sky-400,
html.light .text-sky-300 {
  color: #0284C7 !important;
}

html.light .text-purple-400,
html.light .text-purple-300 {
  color: #7C3AED !important;
}

/* ==========================================================================
   BUTTONS: MAXIMUM CONTRAST & READABILITY IN LIGHT MODE
   ========================================================================== */

/* 1. SOLID VIBRANT PRIMARY BUTTONS: Always Crisp PURE WHITE Text */
html.light button.bg-indigo-600,
html.light button.bg-indigo-500,
html.light a.bg-indigo-600,
html.light a.bg-indigo-500,
html.light .bg-indigo-600,
html.light .bg-indigo-500,
html.light button.bg-rose-600,
html.light button.bg-emerald-600,
html.light button.bg-amber-600,
html.light button.bg-theme-primary,
html.light a.bg-theme-primary,
html.light .bg-theme-primary {
  background-color: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #4338CA !important;
}

/* Force ALL child elements, labels, spans, and icons inside solid buttons to be pure white */
html.light button.bg-indigo-600 *,
html.light a.bg-indigo-600 *,
html.light .bg-indigo-600 *,
html.light button.bg-rose-600 *,
html.light button.bg-emerald-600 *,
html.light button.bg-theme-primary *,
html.light a.bg-theme-primary *,
html.light .bg-theme-primary * {
  color: #FFFFFF !important;
}

/* Pills and badges inside active solid buttons: White on translucent white */
html.light button.bg-indigo-600 span.rounded,
html.light button.bg-indigo-600 span.rounded-full,
html.light button.bg-indigo-600 span.rounded-md,
html.light button.bg-indigo-600 span.rounded-lg,
html.light button.bg-theme-primary span.rounded,
html.light button.bg-theme-primary span.rounded-full,
html.light button.bg-theme-primary span.rounded-md {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
}

/* 2. PRODUCT CARD CTA BUTTONS (Home Page) */
/* Featured card button: solid indigo gradient with white text */
html.light .glass-panel button.bg-theme-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Non-featured card button: solid dark slate-900 with pure white text */
html.light button.bg-slate-800.hover\:bg-indigo-600 {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
}

html.light button.bg-slate-800.hover\:bg-indigo-600:hover {
  background-color: #4F46E5 !important;
  border-color: #4F46E5 !important;
  color: #FFFFFF !important;
}

html.light button.bg-slate-800.hover\:bg-indigo-600 * {
  color: #FFFFFF !important;
}

/* Sold out disabled button */
html.light button[disabled].bg-slate-800\/80 {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #64748B !important;
}

html.light button[disabled].bg-slate-800\/80 * {
  color: #64748B !important;
}

/* 3. SECONDARY & NEUTRAL BUTTONS: Clean White Background + Dark Charcoal Text */
html.light button.bg-slate-800,
html.light a.bg-slate-800,
html.light .bg-slate-800,
html.light button.bg-slate-900,
html.light a.bg-slate-900 {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

html.light button.bg-slate-800:hover,
html.light a.bg-slate-800:hover,
html.light button.bg-slate-900:hover,
html.light a.bg-slate-900:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

html.light button.bg-slate-800 *,
html.light a.bg-slate-800 *,
html.light button.bg-slate-900 *,
html.light a.bg-slate-900 * {
  color: #0F172A !important;
}

/* 4. TRANSLUCENT TABLE ACTION BUTTONS (Edit, Delete, Toggle, Test) */
/* Edit Button */
html.light button.bg-indigo-600\/20,
html.light .bg-indigo-600\/20 {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

html.light button.bg-indigo-600\/20:hover {
  background-color: #EEF2FF !important;
  border-color: #4F46E5 !important;
  color: #4338CA !important;
}

html.light button.bg-indigo-600\/20 i {
  color: #4F46E5 !important;
}

/* Delete Button */
html.light button.bg-rose-500\/20,
html.light .bg-rose-500\/20 {
  background-color: #FFFFFF !important;
  color: #BE123C !important;
  border: 1px solid #FDA4AF !important;
}

html.light button.bg-rose-500\/20:hover {
  background-color: #BE123C !important;
  color: #FFFFFF !important;
  border-color: #BE123C !important;
}

html.light button.bg-rose-500\/20:hover * {
  color: #FFFFFF !important;
}

/* Toggle / Plan Status Buttons */
html.light button.bg-amber-500\/15,
html.light button.bg-amber-500\/20 {
  background-color: #FFFFFF !important;
  color: #92400E !important;
  border: 1px solid #FCD34D !important;
}

html.light button.bg-amber-500\/15:hover,
html.light button.bg-amber-500\/20:hover {
  background-color: #92400E !important;
  color: #FFFFFF !important;
}

html.light button.bg-amber-500\/15:hover *,
html.light button.bg-amber-500\/20:hover * {
  color: #FFFFFF !important;
}

html.light button.bg-emerald-500\/15,
html.light button.bg-emerald-500\/20 {
  background-color: #FFFFFF !important;
  color: #047857 !important;
  border: 1px solid #6EE7B7 !important;
}

html.light button.bg-emerald-500\/15:hover,
html.light button.bg-emerald-500\/20:hover {
  background-color: #047857 !important;
  color: #FFFFFF !important;
}

html.light button.bg-emerald-500\/15:hover *,
html.light button.bg-emerald-500\/20:hover * {
  color: #FFFFFF !important;
}

/* 5. INACTIVE DURATION SWITCHER, AUTH TABS & SIDEBAR */
/* Home Page Duration Switcher Container */
html.light div.bg-slate-900.border.border-slate-800 {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* Inactive Buttons */
html.light aside button.text-slate-400,
html.light #tabLoginBtn.text-slate-400,
html.light #tabRegisterBtn.text-slate-400,
html.light #tabOrderBtn.text-slate-400,
html.light #btn-m1.text-slate-400,
html.light #btn-m3.text-slate-400,
html.light #btn-m6.text-slate-400,
html.light #btn-m12.text-slate-400 {
  color: #0F172A !important;
  background-color: transparent !important;
}

html.light aside button.text-slate-400:hover,
html.light #tabLoginBtn.text-slate-400:hover,
html.light #tabRegisterBtn.text-slate-400:hover,
html.light #tabOrderBtn.text-slate-400:hover,
html.light #btn-m1.text-slate-400:hover,
html.light #btn-m3.text-slate-400:hover,
html.light #btn-m6.text-slate-400:hover,
html.light #btn-m12.text-slate-400:hover {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Prevent hover:text-white from turning text white on light background */
html.light .hover\:text-white:hover {
  color: #0F172A !important;
}

html.light .bg-indigo-600 .hover\:text-white:hover,
html.light .bg-theme-primary .hover\:text-white:hover {
  color: #FFFFFF !important;
}

/* ==========================================================================
   BOXES, CARDS & SMALL BADGE CHIPS IN LIGHT MODE
   ========================================================================== */

/* Outer Containers (Cards, Telemetry boxes, Modals) */
html.light .bg-slate-900,
html.light .bg-slate-950,
html.light .bg-[#08090D],
html.light .bg-[#060A08] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

/* Inner Enclosures & Sub-boxes (Credentials, Quota, Summaries, Features) */
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/90,
html.light .bg-slate-950\/40,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/80 {
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light .border-slate-800,
html.light .border-slate-700,
html.light .border-slate-800\/60,
html.light .border-slate-800\/80 {
  border-color: #E2E8F0 !important;
}

/* Small Badge Chips: Clean, Crisp Background + High-Contrast Dark Text */
html.light span.rounded,
html.light span.rounded-full,
html.light span.rounded-lg,
html.light span.rounded-md {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Specific Badge Chips in Light Mode */
html.light span.bg-indigo-500\/20,
html.light span.bg-indigo-500\/15,
html.light span.bg-indigo-500\/10,
html.light div.bg-indigo-500\/15,
html.light #mQuotaPreviewBadge,
html.light #eQuotaPreviewBadge,
html.light #aQuotaPreviewBadge {
  background-color: #EEF2FF !important;
  border: 1px solid #C7D2FE !important;
  color: #312E81 !important; /* Bold Indigo 900 */
}

html.light span.bg-emerald-500\/20,
html.light span.bg-emerald-500\/15,
html.light span.bg-emerald-500\/10 {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #064E3B !important; /* Bold Emerald 900 */
}

html.light span.bg-amber-500\/20,
html.light span.bg-amber-500\/15,
html.light span.bg-amber-500\/10 {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #78350F !important; /* Bold Amber 900 */
}

html.light span.bg-rose-500\/20,
html.light span.bg-rose-500\/15,
html.light span.bg-rose-500\/10,
html.light span.bg-rose-950\/40 {
  background-color: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
  color: #881337 !important; /* Bold Rose 900 */
}

html.light span.bg-sky-500\/10,
html.light span.bg-sky-500\/20 {
  background-color: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
  color: #0C4A6E !important; /* Bold Sky 900 */
}

html.light span.bg-purple-500\/10,
html.light span.bg-purple-500\/20 {
  background-color: #FAF5FF !important;
  border: 1px solid #E9D5FF !important;
  color: #581C87 !important; /* Bold Purple 900 */
}

/* Neutral Tier Badge (e.g. Basic on Plan Card) */
html.light span.bg-slate-800\/80 {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* Emoji Square Container on Plan Cards */
html.light div.w-12.h-12.rounded-2xl {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* Hero Top Badge */
html.light div.bg-slate-900\/90.border-indigo-500\/40 {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

/* Telemetry Stat Sub-labels in Hero */
html.light .glass-panel div.text-\[11px\] {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Client Apps Chips in #apps */
html.light #apps .glass-panel {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.light #apps .glass-panel span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Order Modal Pills (Unselected State) */
html.light #modalDurationContainer button:not(.bg-indigo-600),
html.light #modalTrafficContainer button:not(.bg-indigo-600) {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600):hover,
html.light #modalTrafficContainer button:not(.bg-indigo-600):hover {
  border-color: #4F46E5 !important;
  background-color: #F8FAFC !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600) span,
html.light #modalTrafficContainer button:not(.bg-indigo-600) span {
  color: #0F172A !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600) span.text-slate-500,
html.light #modalTrafficContainer button:not(.bg-indigo-600) span.text-slate-500 {
  color: #64748B !important;
}

/* Radio Option Cards (Locations & Gateways) */
html.light #dynamicLocationsContainer label,
html.light #checkoutGatewaysList label {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html.light #dynamicLocationsContainer label:hover,
html.light #checkoutGatewaysList label:hover {
  border-color: #4F46E5 !important;
  background-color: #F8FAFC !important;
}

html.light #dynamicLocationsContainer label span,
html.light #checkoutGatewaysList label span {
  color: #0F172A !important;
}

/* Inputs & Form Controls in Light Mode */
html.light input,
html.light select,
html.light textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94A3B8 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.20) !important;
}

/* Comparison Table in Light Mode */
html.light thead tr {
  background-color: #F1F5F9 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

html.light th {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light th.text-indigo-400 {
  background-color: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #312E81 !important;
}

html.light tr:hover {
  background-color: #F8FAFC !important;
}

html.light tr {
  border-color: #E2E8F0 !important;
}

/* Modals in Light Mode */
html.light #addServerModal > div,
html.light #editServerModal > div,
html.light #planModal > div,
html.light #editGatewayModal > div,
html.light #orderModal > div,
html.light #qrModal > div {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
}

/* Gradient Text in Light Mode */
html.light .text-theme-gradient {
  background: linear-gradient(135deg, #1E1B4B 0%, #4338CA 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   HOME PAGE SPECIFIC LIGHT MODE OPTIMIZATIONS
   ========================================================================== */

/* 1. Hero Announcement & Top Pill Badges */
html.light div.bg-slate-900\/90.border-indigo-500\/40 {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.light div.bg-slate-900\/90.border-indigo-500\/40 span {
  color: #0F172A !important;
}

html.light div.bg-slate-900\/90.border-indigo-500\/40 .bg-indigo-500 {
  background-color: #4F46E5 !important;
}

/* 2. Duration Switcher on Home Page */
html.light #btn-m1.bg-indigo-600,
html.light #btn-m3.bg-indigo-600,
html.light #btn-m6.bg-indigo-600,
html.light #btn-m12.bg-indigo-600 {
  background-color: #4F46E5 !important;
  color: #FFFFFF !important;
}

html.light #btn-m1.bg-indigo-600 *,
html.light #btn-m3.bg-indigo-600 *,
html.light #btn-m6.bg-indigo-600 *,
html.light #btn-m12.bg-indigo-600 * {
  color: #FFFFFF !important;
}

html.light #btn-m3.bg-indigo-600 span.rounded-md,
html.light #btn-m6.bg-indigo-600 span.rounded-md,
html.light #btn-m12.bg-indigo-600 span.rounded-md {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
}

/* Inactive duration buttons */
html.light #btn-m1:not(.bg-indigo-600),
html.light #btn-m3:not(.bg-indigo-600),
html.light #btn-m6:not(.bg-indigo-600),
html.light #btn-m12:not(.bg-indigo-600) {
  color: #0F172A !important;
  background-color: transparent !important;
}

html.light #btn-m1:not(.bg-indigo-600) *,
html.light #btn-m3:not(.bg-indigo-600) *,
html.light #btn-m6:not(.bg-indigo-600) *,
html.light #btn-m12:not(.bg-indigo-600) * {
  color: #0F172A !important;
}

html.light #btn-m3:not(.bg-indigo-600) span.rounded-md,
html.light #btn-m6:not(.bg-indigo-600) span.rounded-md,
html.light #btn-m12:not(.bg-indigo-600) span.rounded-md {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
  font-weight: 800 !important;
}

/* 3. Product Cards in Home Page */
html.light .glass-panel.border-2.border-indigo-500 {
  border-color: #4F46E5 !important;
  box-shadow: 0 16px 36px -8px rgba(79, 70, 229, 0.18) !important;
}

/* Tier pill next to emoji on card */
html.light .glass-panel span.bg-indigo-500\/20 {
  background-color: #EEF2FF !important;
  border: 1px solid #C7D2FE !important;
  color: #312E81 !important;
  font-weight: 800 !important;
}

html.light .glass-panel span.bg-slate-800\/80 {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* 4. Order Modal Variation Pills & Summary in Light Mode */
html.light #modalDurationContainer button.bg-indigo-600,
html.light #modalTrafficContainer button.bg-indigo-600 {
  background-color: #4F46E5 !important;
  border: 2px solid #3730A3 !important;
  color: #FFFFFF !important;
}

html.light #modalDurationContainer button.bg-indigo-600 *,
html.light #modalTrafficContainer button.bg-indigo-600 * {
  color: #FFFFFF !important;
}

html.light #modalDurationContainer button.bg-indigo-600 span.text-emerald-400 {
  color: #FEF08A !important; /* High-contrast gold on indigo */
  font-weight: 800 !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600),
html.light #modalTrafficContainer button:not(.bg-indigo-600) {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600) span.en-font,
html.light #modalTrafficContainer button:not(.bg-indigo-600) span.en-font {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600) span.text-emerald-400 {
  color: #047857 !important;
  font-weight: 800 !important;
}

html.light #modalDurationContainer button:not(.bg-indigo-600) span.text-slate-500,
html.light #modalTrafficContainer button:not(.bg-indigo-600) span.text-slate-500 {
  color: #64748B !important;
  font-weight: 600 !important;
}

/* Summary Box in Order Modal */
html.light #summaryPlanName,
html.light #summaryDuration,
html.light #summaryTraffic {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #summaryTotalAmount {
  color: #4F46E5 !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
}

html.light #summaryCouponRow,
html.light #summaryCouponRow * {
  color: #047857 !important;
  font-weight: 800 !important;
}

/* Coupon Input & Button */
html.light #couponCodeInput {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.light #btnValidateCoupon {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
}

html.light #btnValidateCoupon:hover {
  background-color: #4F46E5 !important;
  border-color: #4F46E5 !important;
}

/* Submit Button in Order Modal */
html.light #btnSubmitOrder {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}

html.light #btnSubmitOrder * {
  color: #FFFFFF !important;
}

/* ==========================================================================
   FOOTER HIGH-CONTRAST ENGINE (DARK & LIGHT MODES)
   ========================================================================== */

/* Dark Mode Footer */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

footer h4 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

footer p {
  color: #94A3B8 !important;
}

footer a {
  color: #CBD5E1;
  transition: color 0.15s ease, border-color 0.15s ease;
}

footer a:hover {
  color: #A5B4FC !important;
}

footer .footer-status-pill {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
}

/* Light (Day) Mode Footer Overhaul */
html.light footer {
  background-color: #F8FAFC !important;
  border-top: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light footer h4 {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
}

html.light footer p {
  color: #334155 !important;
  line-height: 1.65 !important;
}

html.light footer a {
  color: #1E293B !important;
  font-weight: 600 !important;
}

html.light footer a:hover {
  color: #4F46E5 !important;
}

/* Social Icon Buttons in Footer */
html.light footer a.w-9 {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html.light footer a.w-9:hover {
  background-color: #4F46E5 !important;
  border-color: #4F46E5 !important;
  color: #FFFFFF !important;
}

html.light footer a.w-9 i {
  color: #0F172A !important;
}

html.light footer a.w-9:hover i {
  color: #FFFFFF !important;
}

/* Operational Status Pill in Light Mode Footer */
html.light footer .footer-status-pill {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #064E3B !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(6, 78, 59, 0.05) !important;
}

/* Bottom Bar (Copyright & Legal Terms) */
html.light footer .footer-bottom-bar {
  border-top: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

html.light footer .footer-bottom-bar span {
  color: #475569 !important;
}

html.light footer .footer-bottom-bar a {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.light footer .footer-bottom-bar a:hover {
  color: #4F46E5 !important;
}

/* ==========================================================================
   GLOBAL TOAST NOTIFICATION
   ========================================================================== */
#toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  background: rgba(15, 23, 42, 0.95);
  color: #F8FAFC;
  border: 1px solid rgba(99, 102, 241, 0.35);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

#toast span {
  color: #F8FAFC !important;
}

#toast.toast-success {
  border-color: rgba(16, 185, 129, 0.45) !important;
}

#toast.toast-error {
  border-color: rgba(244, 63, 94, 0.45) !important;
}

/* Light (Day) Mode Toast: Crisp White with Dark Text */
html.light #toast {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
}

html.light #toast span {
  color: #0F172A !important;
}

html.light #toast.toast-success {
  border-color: #10B981 !important;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.18), 0 4px 6px -4px rgba(16, 185, 129, 0.1) !important;
}

html.light #toast.toast-error {
  border-color: #F43F5E !important;
  box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.18), 0 4px 6px -4px rgba(244, 63, 94, 0.1) !important;
}