/**
 * Karl Lux Cookie Consent — design override a lux brand tokenekhez.
 *
 * A CookieConsent (vanilla-cookieconsent v3) saját --cc-* változóit írjuk felül,
 * így a sáv automatikusan a Karl Lux Residence designjába olvad: burgundi #7a2035,
 * meleg travertine felszínek (#faf8f5 / #f0ebe1), Hanken Grotesk szöveg +
 * Cormorant Garamond címek, pill gombok, a brand árnyékai/radiusai.
 * A --brand-* / --color-* tokeneket a root-variables.css szolgáltatja, fallback
 * értékekkel, ha esetleg nem állnának rendelkezésre.
 */

#cc-main {
  /* Tipográfia */
  --cc-font-family: var( --font-text, "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif );

  /* Felületek / szövegek */
  --cc-bg: var( --color-background, #faf8f5 );
  --cc-primary-color: var( --color-text-primary, #1a1a1a );
  --cc-secondary-color: var( --color-text-secondary, #4f4943 );

  /* Fő gomb — burgundi, pill */
  --cc-btn-primary-bg: var( --color-primary, #7a2035 );
  --cc-btn-primary-color: #f7ede9;
  --cc-btn-primary-border-color: var( --cc-btn-primary-bg );
  --cc-btn-primary-hover-bg: var( --brand-burgundy-deep, #5c1727 );
  --cc-btn-primary-hover-color: #f7ede9;
  --cc-btn-primary-hover-border-color: var( --cc-btn-primary-hover-bg );

  /* Másodlagos gomb — meleg beige felszín, sötét szöveg */
  --cc-btn-secondary-bg: var( --brand-surface-elevated, #e7dfd3 );
  --cc-btn-secondary-color: var( --color-text-primary, #1a1a1a );
  --cc-btn-secondary-border-color: var( --color-border, #c9bcae );
  --cc-btn-secondary-hover-bg: color-mix( in srgb, var( --color-primary, #7a2035 ) 12%, var( --color-background, #faf8f5 ) );
  --cc-btn-secondary-hover-border-color: var( --color-primary, #7a2035 );
  --cc-btn-secondary-hover-color: var( --color-primary, #7a2035 );

  /* Pill gombok + lágyabb dobozsarkok */
  --cc-btn-border-radius: var( --radius-pill, 999px );
  --cc-modal-border-radius: var( --radius-lg, 14px );

  /* Linkek a sávban — burgundi */
  --cc-link-color: var( --color-primary, #7a2035 );

  /* Elválasztók / kategóriablokkok */
  --cc-separator-border-color: var( --color-border-soft, color-mix( in srgb, #c9bcae 55%, #faf8f5 ) );
  --cc-cookie-category-block-bg: var( --brand-surface, #f0ebe1 );
  --cc-cookie-category-block-hover-bg: color-mix( in srgb, var( --color-primary, #7a2035 ) 7%, var( --color-background, #faf8f5 ) );
  --cc-cookie-category-expanded-block-bg: var( --brand-surface-elevated, #e7dfd3 );
  --cc-cookie-category-expanded-block-hover-bg: color-mix( in srgb, var( --color-primary, #7a2035 ) 12%, var( --color-background, #faf8f5 ) );
  --cc-section-category-border: var( --color-border, #c9bcae );

  /* Footer (sáv alsó sávja) */
  --cc-footer-bg: var( --brand-surface, #f0ebe1 );
  --cc-footer-border-color: var( --color-border, #c9bcae );
  --cc-footer-color: var( --color-text-secondary, #4f4943 );

  /* Kapcsolók (toggle) — a bekapcsolt állapot burgundi */
  --cc-toggle-on-bg: var( --color-primary, #7a2035 );
  --cc-toggle-on-knob-bg: #f7ede9;
  --cc-toggle-off-bg: var( --color-border, #c9bcae );
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: var( --brand-surface, #f0ebe1 );
  --cc-toggle-readonly-knob-bg: var( --color-border, #c9bcae );

  /* Overlay a modal mögött */
  --cc-overlay-bg: color-mix( in srgb, var( --brand-secondary, #1a1a1a ) 45%, transparent );
}

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

#cc-main .cm {
  box-shadow: var( --shadow-lg, 0 24px 60px color-mix( in srgb, #1a1a1a 14%, transparent ) );
  border: 1px solid var( --color-border, #c9bcae );
}

/* Fő cím — Cormorant Garamond, a brand display tipográfiája */
#cc-main .cm__title {
  font-family: var( --font-display, "Cormorant Garamond", Georgia, serif );
  font-weight: var( --fw-semibold, 600 );
  letter-spacing: -0.01em;
  color: var( --brand-secondary, #1a1a1a );
}

/* Leírás — jobb olvashatóság */
#cc-main .cm__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var( --color-text-secondary, #4f4943 );
}

/* A sávban lévő linkek — burgundi */
#cc-main .cc__link,
#cc-main a {
  color: var( --color-primary, #7a2035 );
  font-weight: var( --fw-semibold, 600 );
}

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

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var( --font-text, "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif );
  font-weight: var( --fw-semibold, 600 );
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  min-height: 48px;
  padding: 12px 26px;
  transition: background-color var( --dur-fast, 160ms ) var( --ease-out, ease ),
              transform var( --dur-fast, 160ms ) var( --ease-out, ease ),
              box-shadow var( --dur-fast, 160ms ) var( --ease-out, ease );
}

/* A „másodlagos” gombok (Csak szükségesek / Beállítások) kevésbé kiemelkedők. */
#cc-main .cm__btn.cm__btn--secondary,
#cc-main .pm__btn.pm__btn--secondary {
  font-weight: var( --fw-medium, 500 );
}

/* 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: 0 12px 30px color-mix( in srgb, var( --color-primary, #7a2035 ) 22%, transparent );
  }
}

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

#cc-main .pm {
  box-shadow: var( --shadow-lg, 0 24px 60px color-mix( in srgb, #1a1a1a 14%, transparent ) );
}

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

#cc-main .pm__title {
  font-family: var( --font-display, "Cormorant Garamond", Georgia, serif );
  font-weight: var( --fw-semibold, 600 );
  letter-spacing: -0.01em;
  color: var( --brand-secondary, #1a1a1a );
}

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

#cc-main .pm__section-desc {
  color: var( --color-text-secondary, #4f4943 );
  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 color-mix( in srgb, #1a1a1a 10%, transparent );
  }

  #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;
  }
}