/**
 * GU PASS Design System - 3-Layer Token Architecture
 * Layer 1: Primitives (raw design values)
 * Layer 2: Semantic Tokens (purpose-driven aliases)
 * Layer 3: Component Tokens (scoped component variables)
 */

/* ==========================================================================
   THMANYAH FONT FAMILY (@font-face declarations)
   ========================================================================== */

/* ── thmanyah Serif Display ─────────────────────────────────────────────── */
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Display';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── thmanyah Serif Text ────────────────────────────────────────────────── */
@font-face {
  font-family: 'thmanyah Serif Text';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahseriftext/woff2/thmanyahseriftext-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Text';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahseriftext/woff2/thmanyahseriftext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Text';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahseriftext/woff2/thmanyahseriftext-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Text';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahseriftext/woff2/thmanyahseriftext-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Serif Text';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahseriftext/woff2/thmanyahseriftext-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── thmanyah Sans ──────────────────────────────────────────────────────── */
@font-face {
  font-family: 'thmanyah Sans';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahsans/woff2/thmanyahsans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Sans';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahsans/woff2/thmanyahsans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Sans';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahsans/woff2/thmanyahsans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Sans';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahsans/woff2/thmanyahsans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'thmanyah Sans';
  src: url('../Thmanyah-Font-Family/thmanyah%20typeface/thmanyahsans/woff2/thmanyahsans-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     1. PRIMITIVE TOKENS (Raw values)
     ========================================================================== */
  
  /* Brand Navy & Dark Palette */
  --primitive-navy-950: #070b14;
  --primitive-navy-900: #0a0f1e;
  --primitive-navy-850: #0c1424;
  --primitive-navy-800: #0f1628;
  --primitive-navy-750: #121b33;
  --primitive-navy-700: #1a2540;
  --primitive-navy-600: #233154;

  /* Accent Blues */
  --primitive-blue-700: #1e3a8a;
  --primitive-blue-600: #2563eb;
  --primitive-blue-500: #4f7cff;
  --primitive-blue-400: #7c9bff;
  --primitive-blue-300: #93c5fd;
  --primitive-blue-200: #bfdbfe;
  --primitive-blue-100: #dbeafe;

  /* Emerald (GP Wallet & Success) */
  --primitive-emerald-950: #022c22;
  --primitive-emerald-900: #064e3b;
  --primitive-emerald-800: #0d322b;
  --primitive-emerald-700: #047857;
  --primitive-emerald-600: #059669;
  --primitive-emerald-500: #10b981;
  --primitive-emerald-400: #34d399;
  --primitive-emerald-300: #6ee7b7;

  /* Neutrals & Slates */
  --primitive-slate-900: #0f172a;
  --primitive-slate-800: #1e293b;
  --primitive-slate-700: #334155;
  --primitive-slate-600: #475569;
  --primitive-slate-500: #64748b;
  --primitive-slate-400: #94a3b8;
  --primitive-slate-300: #cbd5e1;
  --primitive-slate-200: #e2e8f0;
  --primitive-slate-100: #f1f5f9;
  --primitive-white:     #ffffff;

  /* Semantic Alerts */
  --primitive-red-500: #ef4444;
  --primitive-red-400: #f87171;
  --primitive-amber-500: #f59e0b;
  --primitive-amber-400: #fbbf24;

  /* Typography Scales (Thmanyah Font System) */
  --primitive-font-display: 'thmanyah Serif Display', serif;
  --primitive-font-body: 'thmanyah Serif Text', serif;
  --primitive-font-sans: 'thmanyah Sans', sans-serif;
  --primitive-font-arabic: 'thmanyah Serif Display', 'thmanyah Serif Text', 'thmanyah Sans', serif;
  --primitive-font-latin: 'thmanyah Sans', 'thmanyah Serif Text', sans-serif;
  --primitive-font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Radius Scale */
  --primitive-radius-xs: 4px;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 12px;
  --primitive-radius-lg: 16px;
  --primitive-radius-xl: 20px;
  --primitive-radius-2xl: 24px;
  --primitive-radius-full: 9999px;

  /* Timing & Motion */
  --primitive-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --primitive-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --primitive-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-dur-fast: 150ms;
  --primitive-dur-normal: 250ms;
  --primitive-dur-slow: 400ms;

  /* ==========================================================================
     2. SEMANTIC TOKENS (Contextual & Purpose-driven)
     ========================================================================== */

  /* Backgrounds & Surfaces (Default: Dark) */
  --color-bg-app: #0a0f1e;
  --color-bg-canvas-gradient: 
    radial-gradient(900px 500px at 50% -50px, rgba(37, 99, 235, 0.18), transparent 70%),
    radial-gradient(700px 450px at 10% 75%, rgba(16, 185, 129, 0.08), transparent 60%),
    radial-gradient(650px 400px at 90% 80%, rgba(30, 58, 138, 0.14), transparent 60%),
    #0a0f1e;
  --color-surface-base: #0f1628;
  --color-surface-subtle: #0c1424;
  --color-surface-elevated: #121b33;
  --color-surface-overlay: rgba(10, 15, 30, 0.85);

  /* Borders & Dividers */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: #1a2540;
  --color-border-interactive: rgba(79, 124, 255, 0.4);
  --color-border-focus: #7c9bff;

  /* Brand Accents */
  --color-brand-primary: #4f7cff;
  --color-brand-light: #7c9bff;
  --color-brand-dark: #1e3a8a;
  --color-brand-gp: #10b981;
  --color-brand-gp-dark: #064e3b;

  /* Text & Content */
  --color-text-primary: #ffffff;
  --color-text-secondary: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-dim: #64748b;

  /* Feedback Colors */
  --color-success: #34d399;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Elevation Shadows */
  --shadow-elevation-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-elevation-md: 0 10px 24px -4px rgba(0, 0, 0, 0.35);
  --shadow-elevation-lg: 0 20px 45px -10px rgba(0, 0, 0, 0.55);
  --shadow-glow-accent: 0 0 25px rgba(79, 124, 255, 0.35);
  /* Badge / Pill Component Tokens (Default: Dark Mode) */
  --badge-pill-bg: #16203C;
  --badge-pill-border: #2A3660;
  --badge-pill-text: #8AA3FF;
  --badge-pill-icon-bg: #5B7FFF;
  --badge-pill-icon-glyph: #FFFFFF;

  /* ==========================================================================
     3. LIGHT MODE OVERRIDES
     ========================================================================== */
}

[data-theme="light"] {
  --color-bg-app: #FFFFFF;
  --color-bg-canvas-gradient: 
    radial-gradient(900px 500px at 50% -50px, rgba(59, 95, 224, 0.05), transparent 70%),
    radial-gradient(700px 450px at 10% 75%, rgba(16, 185, 129, 0.04), transparent 60%),
    radial-gradient(650px 400px at 90% 80%, rgba(30, 58, 138, 0.04), transparent 60%),
    #FFFFFF;
  --color-surface-base: #F7F8FC;
  --color-surface-subtle: #F7F8FC;
  --color-surface-elevated: #FFFFFF;
  --color-surface-overlay: rgba(255, 255, 255, 0.94);

  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-default: #DDE2EE;
  --color-border-interactive: rgba(59, 95, 224, 0.35);
  --color-border-focus: #3B5FE0;

  --color-brand-primary: #3B5FE0;
  --color-brand-light: #4f7cff;
  --color-brand-dark: #1e3a8a;
  --color-brand-gp: #10b981;
  --color-brand-gp-dark: #064e3b;

  --color-text-primary: #12172B;
  --color-text-secondary: #3C445C;
  --color-text-muted: #64748b;
  --color-text-dim: #94a3b8;

  --badge-pill-bg: #EEF2FF;
  --badge-pill-border: #D6E0FF;
  --badge-pill-text: #3B5FE0;
  --badge-pill-icon-bg: #3B5FE0;
  --badge-pill-icon-glyph: #FFFFFF;

  --shadow-elevation-sm: 0 1px 3px rgba(18, 23, 43, 0.05);
  --shadow-elevation-md: 0 4px 16px -2px rgba(18, 23, 43, 0.08);
  --shadow-elevation-lg: 0 12px 32px -4px rgba(18, 23, 43, 0.1);

  --input-bg: #ffffff;
  --input-border: #DDE2EE;
  --input-focus-ring: rgba(59, 95, 224, 0.2);

  --stepper-dot-border: #cbd5e1;
  --stepper-track-bg: #e2e8f0;
  --stepper-track-active: #2563eb;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Light Mode Global Element & Layout Overrides */
[data-theme="light"] body {
  background-color: #f8fafc;
  background-image: none;
  color: #0f172a;
}

[data-theme="light"] body::before {
  display: none !important;
}

/* Surfaces & Containers */
[data-theme="light"] .bg-gu-surface,
[data-theme="light"] .bg-gu-surface\/90,
[data-theme="light"] .bg-gu-surface\/85,
[data-theme="light"] .bg-gu-surface\/75 {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .bg-gu-panel {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .border-gu-border,
[data-theme="light"] .border-gu-border\/70,
[data-theme="light"] .border-gu-border\/80,
[data-theme="light"] .border-gu-border\/90 {
  border-color: #e2e8f0 !important;
}

/* Typography in Light Mode */
[data-theme="light"] h1:not(.pass-card *),
[data-theme="light"] h2:not(.pass-card *),
[data-theme="light"] h3:not(.pass-card *),
[data-theme="light"] h4:not(.pass-card *) {
  color: #0f172a !important;
}

[data-theme="light"] .text-white:not(.pass-card *):not(.action-btn *):not(.pill-active):not(.rec-badge):not(.badge-recommended):not(.bg-blue-600 *):not(.bg-emerald-600 *):not(#download-btn *):not(#copy-link-btn *) {
  color: #0f172a !important;
}

[data-theme="light"] .text-slate-200:not(.pass-card *),
[data-theme="light"] .text-slate-300:not(.pass-card *) {
  color: #334155 !important;
}

[data-theme="light"] .text-slate-400:not(.pass-card *),
[data-theme="light"] .text-gu-muted:not(.pass-card *) {
  color: #64748b !important;
}

[data-theme="light"] .text-gu-accent2:not(.pass-card *) {
  color: #2563eb !important;
}

/* Form Controls & Labels in Light Mode */
[data-theme="light"] label {
  color: #12172B !important;
  font-weight: 700 !important;
}

[data-theme="light"] label span[data-i18n] {
  color: #12172B !important;
}

[data-theme="light"] label .text-gu-muted {
  color: #64748b !important;
}

[data-theme="light"] .char-count {
  color: #64748b !important;
}

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] select optgroup {
  background-color: #f1f5f9 !important;
  color: #2563eb !important;
}

/* Usage Scope Card in Light Mode */
[data-theme="light"] .border-emerald-500\/20 {
  border-color: #bbf7d0 !important;
}

[data-theme="light"] .bg-emerald-500\/\[\.05\] {
  background-color: #f0fdf4 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.06);
}

[data-theme="light"] [data-i18n="use_title"] {
  color: #166534 !important;
  font-weight: 800 !important;
}

[data-theme="light"] [data-i18n="use_title"] + ul {
  color: #1e293b !important;
}

[data-theme="light"] [data-i18n="use_title"] + ul li {
  color: #1e293b !important;
}

[data-theme="light"] [data-i18n="use_title"] + ul li.opacity-60 {
  color: #64748b !important;
  opacity: 0.9 !important;
}

[data-theme="light"] [data-i18n="use_title"] + ul svg[stroke="#4ade80"] {
  stroke: #16a34a !important;
}

[data-theme="light"] [data-i18n="use_title"] + ul svg[stroke="#f87171"] {
  stroke: #dc2626 !important;
}

/* Emerald & Mint Text in Light Mode (replaces pale #D1FAE5CC with accessible high-contrast green on light surfaces) */
[data-theme="light"] .text-emerald-100\/90:not(.pass-card *),
[data-theme="light"] .text-emerald-100\/80:not(.pass-card *),
[data-theme="light"] .text-emerald-100\/70:not(.pass-card *),
[data-theme="light"] .text-emerald-100\/60:not(.pass-card *),
[data-theme="light"] .text-emerald-100:not(.pass-card *),
[data-theme="light"] .text-emerald-200\/90:not(.pass-card *),
[data-theme="light"] .text-emerald-200\/80:not(.pass-card *),
[data-theme="light"] .text-emerald-200\/70:not(.pass-card *),
[data-theme="light"] .text-emerald-200\/60:not(.pass-card *),
[data-theme="light"] .text-emerald-200:not(.pass-card *),
[data-theme="light"] .text-emerald-300\/80:not(.pass-card *),
[data-theme="light"] .text-emerald-300\/70:not(.pass-card *),
[data-theme="light"] .text-emerald-300:not(.pass-card *) {
  color: #166534 !important;
}

[data-theme="light"] .text-emerald-400:not(.pass-card *):not(.badge-recommended) {
  color: #15803d !important;
}

[data-theme="light"] .text-emerald-500:not(.pass-card *) {
  color: #16a34a !important;
}

/* Amber Usage Scope & Warning Callout Box in Light Mode */
[data-theme="light"] .border-amber-400\/70,
[data-theme="light"] .border-amber-400\/30 {
  border-color: #f59e0b !important;
}

[data-theme="light"] .bg-amber-400\/\[\.07\] {
  background-color: #fffbeb !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

[data-theme="light"] [data-i18n="foot_usage_h"] {
  color: #92400e !important;
  font-weight: 800 !important;
}

[data-theme="light"] [data-i18n="foot_usage"] {
  color: #78350f !important;
  font-weight: 500 !important;
}

[data-theme="light"] .text-amber-100\/80,
[data-theme="light"] .text-amber-300 {
  color: #78350f !important;
}

[data-theme="light"] .text-amber-400 {
  color: #92400e !important;
}

/* FAQ Accordion Component in Light Mode */
[data-theme="light"] details.faq {
  background-color: #F7F8FC !important;
  border: 1px solid #DDE2EE !important;
  box-shadow: none !important;
  border-radius: 14px;
}

[data-theme="light"] details.faq summary {
  color: #12172B !important;
  font-weight: 700 !important;
}

[data-theme="light"] details.faq summary::after {
  color: #3B5FE0 !important;
  font-weight: 500 !important;
}

[data-theme="light"] details.faq p {
  color: #3C445C !important;
}

/* Expanded/Active Card in Light Mode: #FFFFFF with soft elevation shadow & outline */
[data-theme="light"] details.faq[open] {
  background-color: #FFFFFF !important;
  border-color: #DDE2EE !important;
  outline: 1px solid #DDE2EE !important;
  box-shadow: 0 4px 16px -2px rgba(18, 23, 43, 0.08), 0 1px 3px rgba(18, 23, 43, 0.04) !important;
}

[data-theme="light"] details.faq[open] summary {
  color: #12172B !important;
}

[data-theme="light"] details.faq[open] summary::after {
  color: #3B5FE0 !important;
}

[data-theme="light"] details.faq[open] p {
  color: #3C445C !important;
}

/* ==========================================================================
   GU PASS BADGE / PILL COMPONENT (.gu-pass-badge)
   ========================================================================== */
.gu-pass-badge {
  background-color: var(--badge-pill-bg, #16203C) !important;
  border: 1px solid var(--badge-pill-border, #2A3660) !important;
  color: var(--badge-pill-text, #8AA3FF) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gu-pass-badge .gu-pass-badge-icon {
  background-color: var(--badge-pill-icon-bg, #5B7FFF) !important;
  color: var(--badge-pill-icon-glyph, #FFFFFF) !important;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gu-pass-badge .gu-pass-badge-icon svg {
  width: 0.625rem;
  height: 0.625rem;
  fill: currentColor !important;
  color: var(--badge-pill-icon-glyph, #FFFFFF) !important;
}

.gu-pass-badge svg:not(.gu-pass-badge-icon svg) {
  color: var(--badge-pill-text, #8AA3FF) !important;
}

[data-theme="light"] .gu-pass-badge {
  background-color: var(--badge-pill-bg, #EEF2FF) !important;
  border-color: var(--badge-pill-border, #D6E0FF) !important;
  color: var(--badge-pill-text, #3B5FE0) !important;
  box-shadow: 0 1px 3px rgba(59, 95, 224, 0.06);
}

/* ==========================================================================
   MICRO-TYPOGRAPHY FORMAL TOKENS & UTILITIES
   ========================================================================== */
.text-nano {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

.text-badge-micro {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.text-card-label {
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.text-id-chip {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-family: var(--font-mono, 'Fira Code', monospace) !important;
  letter-spacing: 0.05em !important;
}

.text-caption-sm {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}

[data-theme="light"] .gu-pass-badge .gu-pass-badge-icon {
  background-color: var(--badge-pill-icon-bg, #3B5FE0) !important;
  color: var(--badge-pill-icon-glyph, #FFFFFF) !important;
}

[data-theme="light"] .gu-pass-badge svg:not(.gu-pass-badge-icon svg) {
  color: var(--badge-pill-text, #3B5FE0) !important;
}

/* ==========================================================================
   PASS CARD (PHYSICAL CARD METAPHOR - ALWAYS DARK & IMMUNE TO THEME MODES)
   ========================================================================== */
.pass-card,
.pass-card-3d,
#main-pass-card,
#demo-pass-card {
  background: linear-gradient(145deg, #2947C4 0%, #1a2e68 45%, #16203C 100%) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 20px 48px -12px rgba(15, 28, 68, 0.7), 0 0 28px -10px rgba(41, 71, 196, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Strictly enforce light/crisp colors on ALL pass card text in all modes */
.pass-card dt,
.pass-card [data-i18n="lbl_name"],
.pass-card [data-i18n="lbl_id"],
.pass-card [data-i18n="lbl_faculty"],
.pass-card [data-i18n="label_name"],
.pass-card [data-i18n="label_id"],
.pass-card [data-i18n="label_faculty"] {
  color: rgba(191, 219, 254, 0.7) !important;
}

.pass-card dd,
.pass-card #card-name,
.pass-card #card-id,
.pass-card #card-faculty,
.pass-card #res-name,
.pass-card #res-id,
.pass-card #res-faculty,
.pass-card h1,
.pass-card h2,
.pass-card h3 {
  color: #ffffff !important;
}

.pass-card [data-i18n="pass_unofficial"],
.pass-card [data-i18n="badge_unofficial"] {
  color: rgba(191, 219, 254, 0.6) !important;
}

.pass-card .nfc-waves svg {
  stroke: rgba(191, 219, 254, 0.6) !important;
}

.pass-card .pass-stripe {
  background: linear-gradient(90deg, rgba(79, 124, 255, 0.18) 0%, rgba(124, 155, 255, 0.1) 50%, rgba(79, 124, 255, 0.18) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pass-card #card-meta,
.pass-card .card-meta {
  color: rgba(191, 219, 254, 0.5) !important;
}

/* Card ID Chip at the bottom */
.pass-card .card-id-chip,
.pass-card .pass-card-chip,
.pass-card #card-serial-row,
.pass-card #res-serial-row,
.pass-card .card-serial-chip {
  background: #0C1424 !important;
  color: #C4CCDC !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pass-card .card-id-chip span,
.pass-card #card-serial,
.pass-card #res-serial {
  color: #C4CCDC !important;
}

/* Copy buttons INSIDE the card retain dark card styling */
.pass-card .copy-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #cbd5e1 !important;
}

.pass-card .copy-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(124, 155, 255, 0.6) !important;
  color: #ffffff !important;
}

/* GP Theme override */
.pass-card.gp-theme {
  background: linear-gradient(145deg, #0d322b 0%, #134e43 52%, #0a1f1c 100%) !important;
  box-shadow: 0 20px 48px -12px rgba(6, 78, 59, 0.7), 0 0 28px -10px rgba(16, 185, 129, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

.pass-card.gp-theme dt,
.pass-card.gp-theme [data-i18n="lbl_name"],
.pass-card.gp-theme [data-i18n="lbl_id"],
.pass-card.gp-theme [data-i18n="lbl_faculty"],
.pass-card.gp-theme [data-i18n="pass_unofficial"] {
  color: rgba(167, 243, 208, 0.7) !important;
}

.pass-card.gp-theme .pass-stripe {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(52, 211, 153, 0.12) 50%, rgba(16, 185, 129, 0.18) 100%) !important;
}

/* ==========================================================================
   INFO PANEL & SURROUNDING ELEMENTS (THEMED)
   ========================================================================== */
.result-info-panel,
.bg-gu-panel {
  background-color: var(--color-surface-base, #0f1628);
  border: 1px solid var(--color-border-default, #1a2540);
}

[data-theme="light"] .result-info-panel,
[data-theme="light"] .bg-gu-panel {
  background-color: #F7F8FC !important;
  border-color: #DDE2EE !important;
}

/* Status Pill */
.status-pill,
#res-status-tag {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
}

[data-theme="light"] .status-pill,
[data-theme="light"] #res-status-tag {
  background-color: #E3F7EF !important;
  color: #0E9E75 !important;
  border-color: rgba(14, 158, 117, 0.25) !important;
}

/* Success Message Text & Icon */
.result-tech-tip {
  background-color: rgba(10, 15, 30, 0.6);
  border: 1px solid var(--color-border-default, #1a2540);
  color: var(--color-text-secondary, #e2e8f0);
}

.result-tech-tip .success-icon {
  color: #4ade80;
}

[data-theme="light"] .result-tech-tip {
  background-color: #F7F8FC !important;
  border-color: #DDE2EE !important;
  color: #0E9E75 !important;
}

[data-theme="light"] .result-tech-tip .success-icon {
  color: #0E9E75 !important;
}

/* Result Wallet Link */
.result-wallet-link,
#res-wallet-link {
  color: var(--color-brand-light, #7c9bff);
  transition: color 0.2s ease;
}

.result-wallet-link:hover,
#res-wallet-link:hover {
  color: #ffffff;
}

[data-theme="light"] .result-wallet-link,
[data-theme="light"] #res-wallet-link {
  color: #3B5FE0 !important;
}

[data-theme="light"] .result-wallet-link:hover,
[data-theme="light"] #res-wallet-link:hover {
  color: #2947C4 !important;
}

/* "Open Kartuneh in browser" CTA */
#res-open-btn,
.btn-open-browser {
  background-color: #3B5FE0 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(59, 95, 224, 0.4);
  transition: background-color 0.2s ease, transform 0.14s ease, filter 0.2s ease;
}

#res-open-btn:hover,
.btn-open-browser:hover {
  background-color: #2947C4 !important;
  filter: brightness(1.05);
}

/* "Add to Apple Wallet" CTA - Intentional Black styling per Apple brand guidelines */
.apple-wallet-btn,
#res-secondary-btn {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.apple-wallet-btn:hover,
#res-secondary-btn:hover {
  background-color: #12172B !important;
  filter: brightness(1.1);
}

/* ==========================================================================
   STANDARDIZED COPY BUTTONS
   ========================================================================== */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-family: inherit;
}

.copy-btn svg {
  width: 12px;
  height: 12px;
  shrink: 0;
}

.copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(79, 124, 255, 0.5);
  color: #ffffff;
}

.copy-btn.copied {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

[data-theme="light"] .copy-btn {
  background: #FFFFFF !important;
  border: 1px solid #DDE2EE !important;
  color: #3C445C !important;
  box-shadow: 0 1px 2px rgba(18, 23, 43, 0.04);
}

[data-theme="light"] .copy-btn:hover {
  background: #F7F8FC !important;
  border-color: #3B5FE0 !important;
  color: #3B5FE0 !important;
}

[data-theme="light"] .copy-btn.copied {
  background: #E3F7EF !important;
  border-color: #0E9E75 !important;
  color: #0E9E75 !important;
}

/* Stepper & Tab Bar in Light Mode (Zero Glow & Crisp Neutral Lines) */
[data-theme="light"] .stepper-line-track {
  background: #E2E8F0 !important;
}

[data-theme="light"] .stepper-line-fill {
  background: #2563eb !important;
}

[data-theme="light"] .step-node {
  color: #64748B !important;
}

[data-theme="light"] .step-node:hover:not(.active):not(.done) {
  color: #334155 !important;
}

[data-theme="light"] .step-node-dot {
  background-color: #ffffff !important;
  border: 2px solid #CBD5E1 !important;
  color: #64748B !important;
  box-shadow: none !important;
}

[data-theme="light"] .step-node:hover:not(.active):not(.done) .step-node-dot {
  border-color: #94A3B8 !important;
  color: #334155 !important;
}

[data-theme="light"] .step-node.active {
  color: #0F172A !important;
  font-weight: 700 !important;
}

[data-theme="light"] .step-node.active .step-node-dot {
  background-color: #2563eb !important;
  border-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(37, 99, 235, 0.2) !important;
  transform: scale(1.08) !important;
}

[data-theme="light"] .step-node.done {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .step-node.done .step-node-dot {
  background-color: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
}

/* Privacy Alert Box in Light Mode */
[data-theme="light"] #pass-privacy-alert {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

[data-theme="light"] #pass-privacy-alert summary {
  color: #166534 !important;
}

[data-theme="light"] #pass-privacy-alert p {
  color: #3C445C !important;
}

[data-theme="light"] #pass-privacy-alert a {
  color: #16a34a !important;
}

/* Segmented Controls in Light Mode */
[data-theme="light"] .segmented-control {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .segmented-control button {
  color: #64748b;
}

[data-theme="light"] .segmented-control button:hover {
  color: #0f172a;
}

[data-theme="light"] .segmented-control .pill-active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
}

/* Demo Page: Wallet Choice Cards & Logos */
[data-theme="light"] .wallet-choice-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .wallet-choice-card .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .wallet-choice-card svg.fill-current {
  fill: #0f172a !important;
}

[data-theme="light"] .wallet-choice-card:hover {
  border-color: #2563eb !important;
  background: #f8fafc !important;
}

[data-theme="light"] .wallet-choice-card.active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(37, 99, 235, 0.12) !important;
}

[data-theme="light"] .wallet-choice-card.active .text-xs {
  color: #1d4ed8 !important;
}

[data-theme="light"] .wallet-choice-card[data-wallet="gp"] .text-emerald-400 {
  color: #059669 !important;
}

[data-theme="light"] .wallet-choice-card[data-wallet="gp"] .text-emerald-300\/70 {
  color: #047857 !important;
}

[data-theme="light"] .wallet-choice-card.active-gp {
  border-color: #059669 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2), 0 2px 8px rgba(5, 150, 105, 0.12) !important;
}

/* Feature & Recommendation Badges in Light Mode */
[data-theme="light"] .rec-badge,
[data-theme="light"] .badge-recommended {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

[data-theme="light"] .bg-blue-500\/10,
[data-theme="light"] .bg-blue-500\/20 {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

[data-theme="light"] .bg-emerald-500\/10,
[data-theme="light"] .bg-emerald-500\/20 {
  background-color: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}

/* Demo Page: Pipeline Node Boxes */
[data-theme="light"] .node-ring {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .node-ring .w-10,
[data-theme="light"] .node-ring .w-9 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .node.active .node-ring {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), 0 4px 16px rgba(37, 99, 235, 0.15) !important;
  border-color: #2563eb !important;
}

[data-theme="light"] .node.done .node-ring {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3), 0 4px 16px rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
}

[data-theme="light"] .dot-idle {
  background-color: #94a3b8 !important;
}

/* Demo Page: Terminal Console & Code Blocks */
[data-theme="light"] #log-terminal {
  background-color: #0f172a !important;
  border-color: #e2e8f0 !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] #log-terminal .log-text {
  color: #e2e8f0 !important;
}

[data-theme="light"] .code-block {
  background-color: #0f172a !important;
  border-color: #e2e8f0 !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .schema-tab {
  color: #64748b;
  background: transparent;
}

[data-theme="light"] .schema-tab:hover {
  color: #0f172a;
}

[data-theme="light"] .schema-tab.active {
  color: #2563eb !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Timeline in Light Mode */
[data-theme="light"] .tl-bullet {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .tl-bullet svg {
  color: #64748b !important;
}

[data-theme="light"] .tl-step.done .tl-bullet {
  border-color: #16a34a !important;
  background-color: #f0fdf4 !important;
}

[data-theme="light"] .tl-step.done .tl-bullet svg {
  color: #16a34a !important;
}

[data-theme="light"] .tl-step.active .tl-bullet {
  border-color: #2563eb !important;
  background-color: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .tl-step.active .tl-bullet svg {
  color: #2563eb !important;
}

/* Tooltips, Copy Buttons & Modals in Light Mode */
[data-theme="light"] .copy-btn {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
}

[data-theme="light"] .copy-btn:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
  background: #eff6ff !important;
}

[data-theme="light"] .info-tip {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

[data-theme="light"] .info-tip:hover,
[data-theme="light"] .info-tip:focus {
  background: #2563eb;
  color: #ffffff;
}

[data-theme="light"] [role="tooltip"],
[data-theme="light"] .tooltip-bubble,
[data-theme="light"] .info-tip-bubble {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Toasts in Light Mode */
[data-theme="light"] .toast-msg,
[data-theme="light"] .demo-toast {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Details & Summaries / Accordions */
[data-theme="light"] details {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] summary {
  color: #0f172a !important;
}

:root {
  /* ==========================================================================
     4. COMPONENT TOKENS
     ========================================================================== */

  /* Pass Card */
  --pass-radius: var(--primitive-radius-2xl);
  --pass-bg-gradient-standard: linear-gradient(145deg, #13224b 0%, #1a3070 50%, #0e1b3d 100%);
  --pass-bg-gradient-gp: linear-gradient(145deg, #0d322b 0%, #134e43 50%, #0a1f1c 100%);
  --pass-shadow-standard: 0 24px 60px -12px rgba(15, 28, 68, 0.8), 0 0 48px -10px rgba(79, 124, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --pass-shadow-gp: 0 24px 60px -12px rgba(6, 78, 59, 0.8), 0 0 48px -10px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Form Elements */
  --input-bg: var(--primitive-navy-900);
  --input-border: var(--primitive-navy-700);
  --input-radius: var(--primitive-radius-md);
  --input-focus-ring: rgba(79, 124, 255, 0.25);
  --input-height: 48px;

  /* Buttons */
  --btn-radius: var(--primitive-radius-md);
  --btn-height: 48px;
  --btn-primary-bg: var(--primitive-blue-500);
  --btn-primary-hover: #3d6ef8;
  --btn-gp-bg: var(--primitive-emerald-600);
  --btn-gp-hover: var(--primitive-emerald-500);

  /* Stepper */
  --stepper-dot-size: 28px;
  --stepper-dot-border: #334155;
  --stepper-track-bg: rgba(255, 255, 255, 0.12);
  --stepper-track-active: #3b82f6;
}

/* ==========================================================================
   GLOBAL UTILITIES & ENHANCED SYSTEM STYLES
   ========================================================================== */

/* Ambient atmosphere - tinted radial glows behind all content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56rem 30rem at 88% -12%, rgba(79, 124, 255, 0.10), transparent 62%),
    radial-gradient(44rem 26rem at -8% 108%, rgba(16, 185, 129, 0.05), transparent 58%);
}

/* Grain overlay - breaks digital flatness */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Skip-to-content link (keyboard users) */
.skip-link {
  position: fixed;
  top: -64px;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--primitive-radius-md);
  background: var(--color-brand-primary);
  color: var(--primitive-white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-elevation-lg);
  transition: top var(--primitive-dur-normal) var(--primitive-ease-standard);
}
.skip-link:focus {
  top: 12px;
}

/* Balanced heading wraps - no orphaned words */
h1, h2, h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Visible keyboard focus for radio-card groups (inputs are sr-only) */
.wallet-choice-card:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* 3D Tilt Container */
.pass-perspective {
  perspective: 1200px;
}

.pass-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.25s ease;
  will-change: transform;
}

/* Glassmorphism Surface */
.glass-panel {
  background: rgba(15, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-subtle);
}

/* Segmented Language Switcher */
.segmented-control {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--primitive-radius-md);
  background: var(--primitive-navy-900);
  border: 1px solid var(--color-border-default);
  isolation: isolate;
}

.segmented-control button {
  position: relative;
  z-index: 2;
  font-weight: 600;
  transition: color var(--primitive-dur-fast) var(--primitive-ease-standard);
}

.segmented-control .pill-active {
  background: var(--color-brand-primary);
  color: var(--primitive-white) !important;
  box-shadow: 0 2px 8px rgba(79, 124, 255, 0.4);
}

/* Progress Stepper with Active Track Fill */
.stepper-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 320px;
  width: 100%;
  margin: 1.5rem auto 0.75rem;
  padding: 0;
}

.stepper-line-track {
  position: absolute;
  top: 13px;
  left: 36px;
  right: 36px;
  height: 2px;
  background: var(--stepper-track-bg);
  border-radius: var(--primitive-radius-full);
  z-index: 1;
  overflow: hidden;
}

.stepper-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--primitive-dur-slow) var(--primitive-ease-smooth);
  border-radius: var(--primitive-radius-full);
}

html[dir="rtl"] .stepper-line-fill {
  left: 0;
  right: 0;
  transform-origin: right center;
}

.step-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  gap: 6px;
  color: var(--color-text-muted, #94a3b8);
  transition: color var(--primitive-dur-normal) var(--primitive-ease-standard);
  cursor: default;
  padding: 0;
  text-align: center;
  background: transparent;
  user-select: none;
}

.step-node.done {
  cursor: pointer;
}

.step-node:hover:not(.active):not(.done) {
  color: var(--color-text-secondary, #cbd5e1);
}

.step-node-dot {
  width: var(--stepper-dot-size);
  height: var(--stepper-dot-size);
  border-radius: var(--primitive-radius-full);
  border: 2px solid var(--stepper-dot-border);
  background: #0b1120;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #64748b;
  transition: all var(--primitive-dur-normal) var(--primitive-ease-bounce);
  flex-shrink: 0;
}

.step-node.active {
  color: #ffffff;
  font-weight: 700;
}

.step-node.active .step-node-dot {
  border-color: #60a5fa;
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 0 16px rgba(59, 130, 246, 0.4);
  transform: scale(1.08);
}

.step-node.done {
  color: #cbd5e1;
}

.step-node.done .step-node-dot {
  border-color: #34d399;
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* Wallet Card Enhancements */
.wallet-choice-card {
  position: relative;
  transition: all 0.22s var(--primitive-ease-smooth);
  cursor: pointer;
  border: 1px solid var(--color-border-default);
  background: var(--primitive-navy-900);
}

.wallet-choice-card:hover {
  border-color: rgba(79, 124, 255, 0.4);
  transform: translateY(-2px);
}

.wallet-choice-card.selected {
  border-color: var(--color-brand-primary);
  background: rgba(79, 124, 255, 0.12);
  box-shadow: 0 8px 24px -4px rgba(79, 124, 255, 0.35);
  transform: translateY(-2px);
}

.wallet-choice-card.selected.gp-selected {
  border-color: var(--primitive-emerald-500);
  background: rgba(16, 185, 129, 0.12);
  box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.35);
}

/* Recommended badge tag */
.rec-badge {
  position: absolute;
  top: -10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--primitive-radius-full);
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
  animation: rec-pop 0.3s var(--primitive-ease-bounce) both;
}

@keyframes rec-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Contactless Wireless Waves Icon */
.nfc-waves {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

/* Base Body Ambient Canvas */
body {
  background-color: var(--primitive-navy-900, #0a0f1e);
  background-image: var(--color-bg-canvas-gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Tactile Button feedback */
.action-btn {
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
  cursor: pointer;
}
.action-btn:active {
  transform: scale(0.975);
}
@media (hover: hover) {
  .action-btn:hover {
    filter: brightness(1.08);
  }
}

/* Dropdown optgroup styling */
select optgroup {
  background: var(--primitive-navy-800);
  color: var(--primitive-blue-300);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 0;
}

select option {
  background: var(--primitive-navy-900);
  color: var(--primitive-slate-200);
  font-weight: 500;
  font-size: 14px;
  padding: 8px;
}

/* Smart Navbar & Floating Pill Transitions */
.smart-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, padding;
}

.smart-nav-wrapper.nav-hidden {
  transform: translateY(-115%);
}

.smart-nav-wrapper.nav-floating {
  padding-top: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

.smart-nav-bar {
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.3s ease, 
              border-color 0.3s ease,
              padding 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--color-surface-base);
  border-bottom: 1px solid var(--color-border-default);
}

.smart-nav-wrapper.nav-floating .smart-nav-bar {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--primitive-radius-full);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-border-subtle);
  background-color: rgba(15, 22, 40, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: scale(0.995);
}

[data-theme="light"] .smart-nav-bar {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom-color: #DDE2EE;
}

[data-theme="light"] .smart-nav-wrapper.nav-floating .smart-nav-bar {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: #DDE2EE;
  box-shadow: 0 16px 36px -6px rgba(18, 23, 43, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Nav Link Hover & Active Animations */
.nav-link-item {
  position: relative;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
}

.nav-link-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

[data-theme="light"] .nav-link-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-link-item.active-link {
  color: var(--color-brand-primary, #4f7cff) !important;
  font-weight: 700;
  background-color: rgba(79, 124, 255, 0.1);
}

[data-theme="light"] .nav-link-item.active-link {
  color: #3B5FE0 !important;
  background-color: #EEF2FF;
}

.brand-logo-link {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.brand-logo-link:hover {
  transform: scale(1.05);
}

.brand-logo-link:active {
  transform: scale(0.96);
}

/* Slide-Over Drawer / Sidebar */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-drawer-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 85%;
  max-width: 340px;
  background-color: var(--color-surface-base);
  border-left: 1px solid var(--color-border-default);
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html[dir="rtl"] .nav-drawer-panel {
  right: 0;
  left: auto;
  border-left: none;
  border-right: 1px solid var(--color-border-default);
  transform: translateX(100%);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
}

html[dir="ltr"] .nav-drawer-panel {
  left: 0;
  right: auto;
  border-right: 1px solid var(--color-border-default);
  border-left: none;
  transform: translateX(-100%);
}

.nav-drawer-overlay.open .nav-drawer-panel {
  transform: translateX(0);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--primitive-radius-md);
  color: var(--color-text-muted);
  transition: color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.theme-toggle-btn:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-subtle);
}

/* Intentional Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  html, html.scroll-smooth {
    scroll-behavior: auto !important;
  }
  .smart-nav-wrapper {
    transition: none !important;
  }
  .smart-nav-bar {
    transition: none !important;
  }
  .nav-drawer-overlay, .nav-drawer-panel {
    transition: opacity 0.05s ease !important;
  }
  .pass-card-3d, .pass-card::before, .pass-card.gp-theme::before {
    animation: none !important;
    transform: none !important;
  }
  .confetti-piece, .packet {
    animation: none !important;
    display: none !important;
  }
  .skel::after {
    animation: none !important;
  }
  .badge-recommended {
    animation: none !important;
  }
  .action-btn {
    transition: none !important;
  }
}

/* ==========================================================================
   ARABIC EDITORIAL TYPOGRAPHY & KASHIDA EXTENSIONS
   ========================================================================== */
.kashida-title,
.font-display {
  font-family: 'thmanyah Serif Display', 'thmanyah Serif Text', serif;
  font-feature-settings: "calt" 1, "liga" 1, "dlig" 1, "swsh" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
}

.kashida-title-subtle {
  font-family: 'thmanyah Serif Display', serif;
  font-feature-settings: "calt" 1, "liga" 1;
  letter-spacing: normal;
}