/* 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;
}

/* 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 */
[data-theme="dark"] .sectionthree {
background: var(--bg);
}

[data-theme="dark"] .glass-card-item {
border-color: var(--border);
}

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

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

/* Brand primary accent — landing buttons & links
   Classes verified in index.html, en/index.html, ur/index.html */
.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;
}

.cta-btn.cta-btn-primary {
background: var(--brand-primary) !important;
color: var(--n0) !important;
}
[data-theme="dark"] .cta-btn.cta-btn-primary {
color: var(--n900) !important;
}
.cta-btn.cta-btn-primary:hover {
background: var(--brand-primary-hover) !important;
}

.cards-cta-btn {
background: var(--brand-primary) !important;
color: var(--n0) !important;
}
[data-theme="dark"] .cards-cta-btn {
color: var(--n900) !important;
}
.cards-cta-btn:hover {
background: var(--brand-primary-hover) !important;
}

/* Footer contact section (for static landing pages)
   Sourced from landing.css to keep parity with Blazor FooterSection */
.footer-contact {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}

.footer-contact h4 {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin: 0 0 4px;
}

.footer-contact__item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
}

.footer-contact__item:hover {
color: var(--brand-primary, var(--brand-primary));
}

.footer-contact__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}

.qr-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}

[data-theme="dark"] .footer-contact h4 {
color: var(--text, var(--n70));
}

[data-theme="dark"] .footer-contact__item {
color: var(--text-muted, var(--footer-muted));
}

[data-theme="dark"] .footer-contact__item:hover {
color: var(--brand-primary-lighter, var(--brand-primary-lighter));
}

[data-theme="dark"] .qr-label {
color: var(--text-muted, var(--footer-muted));
}

/* Licensed card — tokenized background override (replaces 8-layer blue gradient
   in design-landing.css with landing-theme tokens via color-mix) */
.licensed-insurance-static-card {
  background: radial-gradient(ellipse 77% 78% at 125% 28%,
      var(--bg) 0, var(--surface) 18%, var(--surface) 32%,
      var(--surface) 46%, transparent 78%),
    radial-gradient(ellipse 80% 65% at 100% 18%,
      color-mix(in srgb, var(--landing-300) 65%, transparent) 0,
      color-mix(in srgb, var(--landing-300) 45%, transparent) 30%,
      color-mix(in srgb, var(--landing-300) 28%, transparent) 50%,
      color-mix(in srgb, var(--landing-300) 12%, transparent) 65%,
      transparent 78%),
    radial-gradient(ellipse 80% 65% at 100% 18%,
      color-mix(in srgb, var(--landing-300) 65%, transparent) 0,
      color-mix(in srgb, var(--landing-300) 45%, transparent) 30%,
      color-mix(in srgb, var(--landing-300) 28%, transparent) 50%,
      color-mix(in srgb, var(--landing-300) 12%, transparent) 65%,
      transparent 78%),
    radial-gradient(ellipse 60% 70% at 50% 55%,
      color-mix(in srgb, var(--landing-theme-base) 38%, transparent) 0,
      color-mix(in srgb, var(--landing-theme-base) 28%, transparent) 30%,
      color-mix(in srgb, var(--landing-theme-base) 16%, transparent) 50%,
      color-mix(in srgb, var(--landing-theme-base) 8%, transparent) 62%,
      transparent 72%),
    linear-gradient(to left,
      color-mix(in srgb, var(--landing-300) 28%, transparent) 0,
      color-mix(in srgb, var(--landing-300) 18%, transparent) 20%,
      color-mix(in srgb, var(--landing-300) 8%, transparent) 40%,
      transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 0,
      color-mix(in srgb, var(--landing-300) 45%, transparent) 0,
      color-mix(in srgb, var(--landing-300) 25%, transparent) 35%,
      color-mix(in srgb, var(--landing-300) 12%, transparent) 55%,
      transparent 70%),
    radial-gradient(ellipse 140% 55% at 50% 100%,
      var(--landing-theme-base) 0, var(--landing-theme-base) 35%,
      var(--landing-400) 55%,
      color-mix(in srgb, var(--landing-400) 35%, transparent) 70%,
      transparent 82%),
    linear-gradient(to bottom,
      var(--landing-200) 0, var(--landing-300) 35%,
      var(--landing-400) 65%, var(--landing-theme-base) 100%);
}

/* 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. */
.cta-img.layer-1,
.cta-plus {
filter: var(--landing-svg-filter, none);
}

/* Landing social icons — consistent sizing */
.social-link-icon {
width: 20px;
height: 20px;
}

/* 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"] .insurance-section {
background: var(--bg);
}

[data-theme="dark"] .insurance-section .bg {
opacity: 0.15;
}

[data-theme="dark"] .insurance-section .section-header h1,
[data-theme="dark"] .insurance-section .section-header h2 {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: var(--text);
color: var(--text);
}

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

[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-h1 {
color: var(--text);
}

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

[data-theme="dark"] .lis-card-content h3 {
color: var(--text);
}

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

[data-theme="dark"] .features-pills {
color: var(--text-muted);
border-color: var(--border);
}

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

/* Dark mode — FAQ section */
[data-theme="dark"] .faq-section h2 {
color: var(--text);
}

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

[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 {
background: var(--surface);
color: var(--text);
}

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

/* Dark mode — Licensed insurance section header */
[data-theme="dark"] .licensed-insurance-header h1 {
color: var(--text);
}

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

/* Dark mode — CTA section */
[data-theme=”dark”] .cta {
  background: var(--surface);
}

[data-theme=”dark”] .mask-wrap::before {
  background: linear-gradient(to right, var(--surface) 20%, transparent 100%);
}

[data-theme=”dark”] [dir=”rtl”] .mask-wrap::before {
  background: linear-gradient(to left, var(--surface) 20%, transparent 100%);
}

/* Dark mode — Footer links text */
[data-theme="dark"] .footer-column h3 {
color: var(--text);
}

[data-theme="dark"] .footer-links a {
color: var(--text-muted);
}

[data-theme="dark"] .footer-links a:hover {
color: var(--text);
}

[data-theme="dark"] .footer-bottom {
border-color: var(--border);
}

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

[data-theme="dark"] .footer-legal a {
color: var(--text-muted);
}

/* ── 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. */
.bg-1 {
  background: linear-gradient(180deg, var(--landing-600) 0%, var(--landing-900) 100%);
}

/* Dark mode: .bg-3 fades to #fafbff (white). Override to fade to dark bg.
   Must override the general .bg opacity: 0.15 rule above. */
[data-theme="dark"] .insurance-section .bg-3 {
opacity: 1;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--surface) 54.51%,
    var(--bg) 100%);
}

/* ── Task #28: FAQ — center chips area + answer bg token ── */
.faq-carousel {
display: flex;
justify-content: center;
}

.faq-answer {
background: var(--bg);
}

/* ── Task #29: Licensed certificate — align card to start ── */
.parent-static-card {
justify-content: flex-start;
}

/* ── Task #30: Cards — RTL button alignment to end ── */
.lis-card-content .buttons {
display: flex;
align-items: center;
gap: 12px;
}

[dir="rtl"] .lis-card-content .buttons,
html[lang="ar"] .lis-card-content .buttons {
justify-content: flex-end;
}

/* ── Task #31: Social icons — dark mode color inversion ── */
[data-theme="dark"] .social-link-icon {
filter: none;
}


/* Stage4 Batch1: inline style/svg normalization */
.inline-link-reset {
text-decoration: none;
}

.inline-link-inverse {
color: var(--n0);
}
[data-theme="dark"] .inline-link-inverse {
color: var(--n900);
}

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

.auth-search-select__arrow {
color: var(--text-muted);
}

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

.info-btn .info-icon-svg {
color: var(--brand-primary);
}

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

/* Landing Wizard Header Compatibility */
.topbar .nav-btnss .lang-toggle {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid color-mix(in srgb, var(--n0) 20%, transparent);
border-radius: 999px;
padding: 2px;
min-height: 28px;
}

.topbar .nav-btnss .lang-toggle__pill {
display: none;
}

.topbar .nav-btnss .lang-toggle__option {
background: transparent;
border: 0;
border-radius: 999px;
padding: 4px 8px;
cursor: pointer;
font-size: 0.75rem;
}

.topbar .nav-btnss .lang-toggle__option--active {
background: color-mix(in srgb, var(--n0) 18%, transparent);
}

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