/**
 * vad034 téma-réteg (light override).
 * A default (dark) a product_page_vad034.css változóiban él.
 * Itt csak a html[data-theme="light"] felülírások vannak.
 *
 * Általános szelektorok: data-theme, .theme-toggle
 * A landing scope (.autoguard-landing) csak a hatókört adja.
 */

/* ---------- light: változó-felülírás ---------- */

html[data-theme="light"] .autoguard-landing {
  --ag-surface-dark: #f3f4f6;
  --ag-surface-light: #ffffff;
  --ag-surface-yellow: var(--autoguard-yellow);
  --ag-surface-card: #ffffff;

  --ag-ink: #252830;
  --ag-ink-muted: rgba(37, 40, 48, 0.62);
  --ag-ink-on-light: #252830;
  --ag-ink-soft: rgba(37, 40, 48, 0.72);
  --ag-ink-faint: rgba(37, 40, 48, 0.55);

  --ag-glass: rgba(37, 40, 48, 0.05);
  --ag-overlay-dark-strong: rgba(255, 255, 255, 0.78);
  --ag-overlay-dark-mid: rgba(243, 244, 246, 0.62);
  --ag-overlay-light-strong: rgba(255, 255, 255, 0.82);
  --ag-overlay-light-mid: rgba(255, 255, 255, 0.65);

  --ag-shadow: rgba(37, 40, 48, 0.1);
  --ag-shadow-icon: rgba(37, 40, 48, 0.14);
  --ag-shadow-strong: rgba(37, 40, 48, 0.16);
  --ag-border-soft: rgba(37, 40, 48, 0.14);
  --ag-hover-shadow-a: rgb(33 37 41 / 18%);
  --ag-hover-shadow-b: rgb(33 37 41 / 4%);

  /* sötét felületű szekciókban light módban a kicker zöld marad */
  --ag-kicker: var(--autoguard-green);
}

html[data-theme="light"] .autoguard-landing .autoguard-dark {
  --ag-section-ink: var(--ag-ink);
  --ag-section-ink-muted: var(--ag-ink-muted);
  --ag-kicker: var(--autoguard-green);
}

html[data-theme="light"] .autoguard-landing .autoguard-bg-light {
  --ag-kicker: var(--autoguard-green);
}

html[data-theme="light"] .autoguard-landing .autoguard-yellow {
  --ag-section-ink: var(--autoguard-dark);
  --ag-section-ink-muted: var(--ag-ink-soft);
  --ag-kicker: var(--autoguard-dark);
}

html[data-theme="light"] .autoguard-landing.gray-bg,
html[data-theme="light"] .autoguard-landing .gray-bg {
  --ag-section-ink: var(--ag-ink);
  --ag-section-ink-muted: var(--ag-ink-muted);
  --ag-kicker: var(--autoguard-green);
}

/* sötét BG-kép helyett a világos textúra + világos overlay */
html[data-theme="light"] .autoguard-landing section.autoguard-dark {
  background-image:
    linear-gradient(
      120deg,
      var(--ag-overlay-dark-strong),
      var(--ag-overlay-dark-mid)
    ),
    url(https://www.vadalarm.hu/img/product/vad034/light-bg-autoguard.webp);
  background-image:
    linear-gradient(
      120deg,
      var(--ag-overlay-dark-strong),
      var(--ag-overlay-dark-mid)
    ),
    image-set(
      url("https://www.vadalarm.hu/img/product/vad034/light-bg-autoguard.webp")
        type("image/webp"),
      url("https://www.vadalarm.hu/img/product/vad034/light-bg-autoguard.jpg")
        type("image/jpeg")
    );
}

/* dark kártyák lightban is világos felületűek legyenek */
html[data-theme="light"] .autoguard-landing .autoguard-card.autoguard-dark {
  background: var(--ag-surface-card);
  color: var(--ag-ink);
  --ag-section-ink: var(--ag-ink);
  --ag-section-ink-muted: var(--ag-ink-muted);
  border: 1px solid var(--ag-border-soft);
}

html[data-theme="light"] .autoguard-reviews-wrap,
html[data-theme="light"] .autoguard-whybuy-wrap {
  background-color: var(--ag-surface-dark);
  color: var(--ag-ink);
  --ag-section-ink: var(--ag-ink);
  --ag-section-ink-muted: var(--ag-ink-muted);
  --ag-kicker: var(--autoguard-green);
}

/* A white-header-* osztályok darkban fehérek; light felületen sötét tinta */
html[data-theme="light"] .autoguard-landing .autoguard-dark .white-header-1,
html[data-theme="light"] .autoguard-landing .autoguard-dark .white-header-2,
html[data-theme="light"] .autoguard-landing .gray-bg .white-header-1,
html[data-theme="light"] .autoguard-landing .gray-bg .white-header-2,
html[data-theme="light"] .autoguard-reviews-wrap .white-header-1,
html[data-theme="light"] .autoguard-reviews-wrap .white-header-2,
html[data-theme="light"] .autoguard-landing .autoguard-card.autoguard-dark .white-header-2 {
  color: var(--ag-ink, #252830);
}

/* sárga számok / brand kiemelések lightban a zöld felé tolódnak a sötét felületeken */
html[data-theme="light"] .autoguard-landing .autoguard-dark .autoguard-number,
html[data-theme="light"] .autoguard-landing .autoguard-dark .autoguard-price-display,
html[data-theme="light"] .autoguard-landing .autoguard-dark .autoguard-brand,
html[data-theme="light"] .autoguard-landing .autoguard-dark .autoguard-steps .white-header-2 {
  color: var(--autoguard-green);
}

html[data-theme="light"] .autoguard-landing .autoguard-dark .autoguard-order-copy .autoguard-check,
html[data-theme="light"]
  .autoguard-landing
  .autoguard-dark
  .autoguard-order-benefits
  .autoguard-check {
  color: var(--autoguard-green) !important;
  background: rgba(51, 130, 43, 0.12);
}

html[data-theme="light"]
  .autoguard-landing
  .autoguard-dark
  .autoguard-order-benefits
  li {
  border-color: rgba(51, 130, 43, 0.22);
  box-shadow: inset 3px 0 0 var(--autoguard-green);
}

html[data-theme="light"] .autoguard-landing .autoguard-dark .autoguard-hero-divider {
  background: var(--autoguard-green);
}

html[data-theme="light"] .autoguard-landing .autoguard-faq-image {
  box-shadow: 18px 18px 0 var(--autoguard-yellow);
}

@media (max-width: 767.98px) {
  html[data-theme="light"] .autoguard-landing .autoguard-faq-image {
    box-shadow: 12px 12px 0 var(--autoguard-yellow);
  }
}