/* ============================================================
   ZENTUS — Consent banner (bal alsó lebegő kártya).
   A zentus.css tokenjeire épül; nem vezet be új színt/betűtípust.
   Nincs side-stripe, nincs gradient. Logika: consent.js.
   ============================================================ */

.consent-banner {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 100;                       /* a "vissza a tetejére" (90) fölött */
  width: min(400px, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--sh-lg);           /* navy-alapú lágy árnyék, nem fekete */
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* fade + slide-up, csak festési/transzform property — ease-out */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}
.consent-banner.is-visible { opacity: 1; transform: translateY(0); }
/* A .consent-banner display:flex felülírná a böngésző [hidden]-jét, ezért explicit. */
.consent-banner[hidden] { display: none; }

.consent-text { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; }

.consent-link {
  color: var(--blue-link);            /* sötétebb kék — AA ≥4.5:1 a fehér kártyán */
  border-radius: 4px; white-space: nowrap;
}
.consent-link:hover { text-decoration: underline; }
.consent-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Két egyenrangú gomb — sem méretben, sem hangsúlyban nincs eldugva. */
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn {
  flex: 1 1 0; min-height: 44px;       /* azonos szélesség + touch target */
  padding-inline: 12px; text-align: center;
}
.consent-accept:focus-visible,
.consent-necessary:focus-visible { outline: none; box-shadow: var(--glow-blue), var(--focus-ring); }

/* Mobil: teljes szélesség alul, safe-area insettel. */
@media (max-width: 480px) {
  .consent-banner {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: none; transform: none; }
  .consent-banner.is-visible { transform: none; }
}