/* theme.overrides.css — Post-design-landing overrides
   Load order: theme.tokens.css -> design-landing.css -> theme.overrides.css */

/* MudBlazor snackbar — render above wizard popups (.info-popup-overlay z=2000)
   and modal overlays. Default --mud-zindex-snackbar is 1400, which is below
   our wizard popups. */
:root {
  --mud-zindex-snackbar: 3000;
}

.mud-snackbar-provider,
.mud-snackbar {
  z-index: 3000;
}

/* MudAlert content follows the reading direction.
   MudAlert.ContentAlignment defaults to HorizontalAlignment.Left — a PHYSICAL direction. In
   RTL, MudBlazor honours that literally and emits `.mud-alert-position.justify-end`, pinning
   the icon and message to the physical left of a full-width alert and leaving the rest empty.
   This site is Arabic-first, so every one of its alerts was affected. LTR is untouched: there
   the default already resolves to the start. Same rule as the Control Panel's cp-style.css.
   `!important` is required: MudBlazor's own `.justify-end` utility carries it. */
[dir="rtl"] .mud-alert > .mud-alert-position.justify-end {
  justify-content: flex-start !important;
}

/* Hero — fill viewport height */
.hero {
min-height: 100vh;
min-height: 100dvh;
}

/* Dark mode surface overrides (higher specificity than design-landing.css) */
[data-theme="dark"] body {
background: var(--bg);
color: var(--text);
}

[data-theme="dark"] .footer {
background: var(--navbar-bg);
}

[data-theme="dark"] .navbar {
background: var(--navbar-bg);
}

/* Dark mode — "After Insurance Services" glass-card section */

/* Brand primary accent — landing buttons & links */
.btn-primary {
background: var(--brand-primary) !important;
color: var(--n0) !important;
}
[data-theme="dark"] .btn-primary {
color: var(--n900) !important;
}
.btn-primary:hover {
background: var(--brand-primary-hover) !important;
}

/* Footer contact section (for static landing pages)
   Sourced from landing.css to keep parity with Blazor FooterSection */

/* Licensed card — tokenized background override (replaces 8-layer blue gradient
   in design-landing.css with landing-theme tokens via color-mix) */

/* CTA decorative SVGs — loaded as <img>, so use CSS filter for theme shift.
   Default: none (blue). Set --landing-svg-filter in theme.tokens.css to shift hue. */

/* Landing social icons — consistent sizing */

/* Hero button height — consistent across landing CTA buttons */
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
}

/* Dark mode — Insurance carousel section ("ط­ظ…ط§ظٹط© ظ„ظƒظ„ ط¬ط§ظ†ط¨ ظ…ظ† ط¬ظˆط§ظ†ط¨ ط§ظ„ط­ظٹط§ط©") */

[data-theme="dark"] .info-box-content h3,
[data-theme="dark"] .mobile-info-title {
color: var(--text);
}

[data-theme="dark"] .info-box-content p,
[data-theme="dark"] .mobile-info-description {
color: var(--text-muted);
}

/* Dark mode — Cards section ("طھط£ظ…ظٹظ†ظƒطŒ ظ…ط¯ط¹ظˆظ… ط¨ط§ظ„ظƒط§ظ…ظ„") */
[data-theme="dark"] .cards {
background: var(--bg);
}

[data-theme="dark"] .cards > .p {
color: var(--text-muted);
}

[data-theme="dark"] .lis-nav-btn {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}

/* Dark mode — FAQ section */

[data-theme="dark"] .faq-chip {
background: var(--surface);
color: var(--text-muted);
border-color: var(--border);
}

[data-theme="dark"] .faq-chip.active {
color: var(--n900);
}

[data-theme="dark"] .faq-answer-text {
color: var(--text);
}

/* Dark mode — Licensed insurance section header */

/* Dark mode — CTA section */

/* Dark mode — Footer links text */

/* ── Task #27: Insurance carousel bg — tokenize hardcoded gradient ── */
/* .bg-1 in design-landing.css uses hardcoded #065f46 → #0b1d52.
   Override with landing-theme tokens so it follows --landing-theme-base. */

/* Dark mode: .bg-3 fades to #fafbff (white). Override to fade to dark bg.
   Must override the general .bg opacity: 0.15 rule above. */

/* ── Task #28: FAQ — center chips area + answer bg token ── */

/* ── Task #29: Licensed certificate — align card to start ── */

/* ── Task #30: Cards — RTL button alignment to end ── */

/* ── Task #31: Social icons — dark mode color inversion ── */

/* Stage4 Batch1: inline style/svg normalization */

.page-banner .banner-icon {
color: var(--n0);
}

.steps-bar .step-check,
.steps-bar .substep-check {
color: var(--n0);
}

.security-badge svg,
.checkout-promo-badge.text-green svg {
color: var(--brand-primary-light);
}

/* Landing Wizard Header Compatibility */

/* ── Grey mode ────────────────────────────────────────────── */
html[data-theme="grey"] {
    filter: grayscale(100%);
}