/**
 * Telked Cookie Consent — design override a brand tokenekhez.
 *
 * A CookieConsent (vanilla-cookieconsent v3) saját --cc-* változóit írjuk felül,
 * így a sáv automatikusan az oldal designjébe olvad (Schibsted Grotesk, zöld #01bf60,
 * pill gombok, a brand árnyékai/radiusai). A hivatkozott --brand-* tokeneket a
 * brand-tokens CSS szolgáltatja (oldalanként töltődik), ezért fallback értékeket is
 * megadunk, ha esetleg nem állnak rendelkezésre.
 */

#cc-main {
  /* Tipográfia */
  --cc-font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Felületek / szövegek */
  --cc-bg: #ffffff;
  --cc-primary-color: var(--brand-text-primary, #333333);
  --cc-secondary-color: var(--brand-text-secondary, #5f6663);

  /* Fő gomb — zöld, pill */
  --cc-btn-primary-bg: var(--brand-primary, #01bf60);
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
  --cc-btn-primary-hover-bg: var(--brand-primary-deep, #00a350);
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);

  /* Másodlagos gomb — halványzöld felszín, sötét szöveg */
  --cc-btn-secondary-bg: var(--brand-surface-soft, #ebfff5);
  --cc-btn-secondary-color: var(--brand-text-primary, #333333);
  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
  --cc-btn-secondary-hover-bg: color-mix(in srgb, var(--brand-primary, #01bf60) 12%, #ffffff);
  --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg);
  --cc-btn-secondary-hover-color: var(--brand-text-primary, #333333);

  /* Pill gombok + lágyabb dobozsarkok */
  --cc-btn-border-radius: 999px;
  --cc-modal-border-radius: 18px;

  /* Linkek a sávban — zöldek */
  --cc-link-color: var(--brand-primary, #01bf60);

  /* Elválasztók / kategóriablokkok */
  --cc-separator-border-color: var(--brand-border, #dfe5e2);
  --cc-cookie-category-block-bg: var(--brand-surface-sunken, #f1f3f2);
  --cc-cookie-category-block-hover-bg: color-mix(in srgb, var(--brand-primary, #01bf60) 7%, #ffffff);
  --cc-cookie-category-expanded-block-bg: var(--brand-surface-soft, #ebfff5);
  --cc-cookie-category-expanded-block-hover-bg: color-mix(in srgb, var(--brand-primary, #01bf60) 12%, #ffffff);
  --cc-section-category-border: var(--brand-border, #dfe5e2);

  /* Footer (sáv alsó sávja) */
  --cc-footer-bg: var(--brand-surface-sunken, #f1f3f2);
  --cc-footer-border-color: var(--brand-border, #dfe5e2);
  --cc-footer-color: var(--brand-text-secondary, #5f6663);

  /* Kapcsolók (toggle) — a bekapcsolt állapot zöld */
  --cc-toggle-on-bg: var(--brand-primary, #01bf60);
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-bg: var(--brand-border-strong, #c8d0cc);
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: var(--brand-surface-sunken, #f1f3f2);
  --cc-toggle-readonly-knob-bg: var(--brand-border-strong, #c8d0cc);

  /* Overlay a modal mögött */
  --cc-overlay-bg: rgba(23, 26, 24, 0.45);
}

/* ==========================================================================
   Sáv (consent modal) — árnyék és finomítás
   ========================================================================== */

#cc-main .cm {
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(23, 26, 24, 0.10));
  border: 1px solid var(--brand-border, #dfe5e2);
}

/* Fő cím vastagabb, feszesebb */
#cc-main .cm__title {
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-snug, -0.01em);
  color: var(--brand-dark, #171a18);
}

/* Leírás kissé nagyobb, jobb olvashatóság */
#cc-main .cm__text {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* A sávban lévő linkek aláhúzás-animációja maradjon finom, zöld */
#cc-main .cc__link,
#cc-main a {
  color: var(--brand-primary, #01bf60);
  font-weight: var(--fw-semibold, 600);
}

/* ==========================================================================
   Gombok — méret, súlly, a fő gomb zöld árnyéka
   ========================================================================== */

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: var(--fw-bold, 700);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  min-height: 48px;
  padding: 12px 26px;
  transition: background-color var(--dur-fast, 140ms) ease,
              transform var(--dur-fast, 140ms) ease,
              box-shadow var(--dur-fast, 140ms) ease;
}

/* A „másodlagos” gombok (Csak szükségesek / Beállítások) kevésbé kiemelkedők.
   A v3-ban az elsődleges gomb egyszerű .cm__btn / .pm__btn (modifier nélkül),
   a másodlagos kapja a --secondary osztályt. */
#cc-main .cm__btn.cm__btn--secondary,
#cc-main .pm__btn.pm__btn--secondary {
  font-weight: var(--fw-semibold, 600);
}

/* Asztali gépen az ELSŐDLEGES gomb (Elfogad minden / Mentés) megemelkedik hoverre.
   Kizárjuk a --secondary és --close variánsokat. */
@media (hover: hover) {
  #cc-main .cm__btn:not(.cm__btn--secondary):not(.cm__btn--close):hover,
  #cc-main .pm__btn:not(.pm__btn--secondary):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary, 0 12px 30px rgba(1, 191, 96, 0.22));
  }
}

/* ==========================================================================
   Részletes beállítások modal (preferences modal)
   ========================================================================== */

#cc-main .pm {
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(23, 26, 24, 0.10));
}

#cc-main .pm__header {
  border-bottom: 1px solid var(--brand-border, #dfe5e2);
}

#cc-main .pm__title {
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-snug, -0.01em);
  color: var(--brand-dark, #171a18);
}

#cc-main .pm__section--toggle .pm__section-title {
  font-weight: var(--fw-semibold, 600);
  color: var(--brand-text-primary, #333333);
}

#cc-main .pm__section-desc {
  color: var(--brand-text-secondary, #5f6663);
  line-height: 1.6;
}

/* A lenyitható szekciók dobozainál a pill radius (999px) nem illik: a CookieConsent
   ugyanazt a --cc-btn-border-radius változót használja a szekciókon/címeken, mint a
   gombokon. Itt szögletes (0px) sarkokat használunk, így a kinyíló „szükséges /
   analitikai sütik” blokk nem lesz túlkerekített. */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section-title,
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border-radius: 0;
}

/* ==========================================================================
   Mobil finomítások — a sáv lent ne takarja ki a tartalmat
   ========================================================================== */

@media (max-width: 640px) {
  #cc-main .cm {
    border-radius: 16px 16px 0 0;
  }

  #cc-main .cm--bar.cm--bottom {
    box-shadow: 0 -10px 30px rgba(23, 26, 24, 0.10);
  }

  #cc-main .cm__btn,
  #cc-main .pm__btn {
    min-height: 50px;
    font-size: 0.95rem;
  }
}

/* Tiszteletben tartjuk a „mozgáscsökkentés” beállítást */
@media (prefers-reduced-motion: reduce) {
  #cc-main .cm__btn,
  #cc-main .pm__btn {
    transition: none;
  }
}