/* ============================================================
   RIVIERA — OVERRIDE COOKIE BANNER (cookie-law-info / CookieYes)
   Obiettivo:
   1. Banner/notice (.cky-consent-container) -> BARRA FISSA in basso,
      compatta, larghezza piena, NON centrata, NON copre il contenuto.
      Sta SOPRA la bottom-nav mobile (z-index tra bottomnav e toast).
   2. Preference-center -> niente overflow orizzontale a 390px:
      max-width 100%, box-sizing, overflow-x hidden, elementi interni fluidi.
   3. Touch target bottoni >= 44px. Brand-coherent, contrasto AA.

   Selettori .cky-* — il plugin applica colori inline (style="..."),
   quindi qui serve specificity adeguata (e in alcuni punti !important
   per sovrascrivere gli inline-style del plugin, dove inevitabile).
   ============================================================ */

/* ---- z-index dedicato: sopra bottom-nav (200), sotto toast (1100) ---- */
:root {
  --rn-z-cookie: 250;
}

/* ============================================================
   1) NOTICE / CONSENT BAR -> barra fissa in basso, full-width
   ============================================================ */

/* Container: forza barra in basso, larghezza piena, non centrato */
.cky-consent-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none !important;       /* il plugin centra via translate */
  z-index: var(--rn-z-cookie);
  box-sizing: border-box;
}

/* Barra vera e propria: compatta, full-width, superficie chiara brand */
.cky-consent-container .cky-consent-bar {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--rn-border) !important;
  background-color: var(--rn-color-surface) !important;
  color: var(--rn-color-text);
  box-shadow: var(--rn-shadow-md);
  padding: var(--rn-space-4) var(--rn-gutter);
  /* lascia respiro sotto su device con safe-area (iPhone home indicator) */
  padding-bottom: calc(var(--rn-space-4) + env(safe-area-inset-bottom, 0px));
}

/* Layout interno: testo + bottoni su riga, wrap su mobile */
.cky-consent-container .cky-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-3) var(--rn-space-5);
  max-width: var(--rn-container);
  margin: 0 auto;
  box-sizing: border-box;
}

.cky-consent-container .cky-notice-group {
  flex: 1 1 320px;
  min-width: 0;            /* consenti shrink sotto i 390px senza overflow */
}

.cky-consent-container .cky-title {
  font-family: var(--rn-font-display);
  font-size: var(--rn-fs-lg);
  font-weight: var(--rn-fw-semibold);
  color: var(--rn-color-text);
  margin: 0 0 var(--rn-space-1);
  line-height: var(--rn-lh-snug);
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des * {
  font-family: var(--rn-font-sans);
  font-size: var(--rn-fs-sm);
  line-height: var(--rn-lh-base);
  color: var(--rn-color-text-muted) !important;
  margin: 0;
}
.cky-consent-container .cky-notice-des a {
  color: var(--rn-gold-600) !important;
  text-decoration: underline;
}

/* Gruppo bottoni */
.cky-consent-container .cky-notice-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-3);
  align-items: center;
  flex: 0 1 auto;
  padding: 0;
}

/* Tutti i bottoni del notice -> stile .rn-btn, touch target >= 44px */
.cky-consent-container .cky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.3rem;
  margin: 0;
  font-family: var(--rn-font-sans);
  font-size: var(--rn-fs-sm);
  font-weight: var(--rn-fw-semibold);
  line-height: 1;
  border-radius: var(--rn-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--rn-dur) var(--rn-ease),
              color var(--rn-dur) var(--rn-ease),
              border-color var(--rn-dur) var(--rn-ease);
}

/* Accept -> primary oro */
.cky-consent-container .cky-btn-accept {
  background-color: var(--rn-gold) !important;
  color: var(--rn-color-on-gold) !important;
  border-color: var(--rn-gold) !important;
}
.cky-consent-container .cky-btn-accept:hover {
  background-color: var(--rn-gold-600) !important;
  border-color: var(--rn-gold-600) !important;
  color: var(--rn-white) !important;
}

/* Reject -> dark */
.cky-consent-container .cky-btn-reject {
  background-color: var(--rn-dark) !important;
  color: var(--rn-color-on-dark) !important;
  border-color: var(--rn-dark) !important;
}
.cky-consent-container .cky-btn-reject:hover {
  background-color: var(--rn-dark-800) !important;
  color: var(--rn-white) !important;
}

/* Customize / preferences -> ghost (bordo) */
.cky-consent-container .cky-btn-customize,
.cky-consent-container .cky-btn-preferences {
  background-color: transparent !important;
  color: var(--rn-color-text) !important;
  border-color: var(--rn-border) !important;
}
.cky-consent-container .cky-btn-customize:hover,
.cky-consent-container .cky-btn-preferences:hover {
  border-color: var(--rn-dark) !important;
  color: var(--rn-dark) !important;
  background-color: var(--rn-color-surface-2) !important;
}

/* ============================================================
   2) PREFERENCE CENTER -> niente overflow orizzontale a 390px
   ============================================================ */

/* Overlay dim: usa lo z dell'overlay del design system */
.cky-overlay {
  z-index: var(--rn-z-overlay);
}

/* Il preference-center resta un modale centrato MA fluido e contenuto */
.cky-modal {
  z-index: var(--rn-z-sheet);
  max-width: 100vw;
  box-sizing: border-box;
}

.cky-preference-center {
  max-width: min(560px, calc(100vw - 2 * var(--rn-space-4)));
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;            /* elimina lo scroll orizzontale */
  border-radius: var(--rn-radius-lg);
  background-color: var(--rn-color-surface) !important;
  color: var(--rn-color-text) !important;
}

/* Tutti i discendenti: rientrano nella larghezza, niente overflow */
.cky-preference-center *,
.cky-preference-center *::before,
.cky-preference-center *::after {
  box-sizing: border-box;
  max-width: 100%;
}

/* Elementi che tendono a sforare: immagini, tabelle audit, contenitori */
.cky-preference-center img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.cky-preference-body-wrapper,
.cky-preference-content-wrapper,
.cky-preference-header,
.cky-accordion-wrapper,
.cky-accordion,
.cky-accordion-item,
.cky-accordion-header-wrapper,
.cky-accordion-body,
.cky-footer-wrapper,
.cky-prefrence-btn-wrapper {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Header accordion: testo lungo va a capo, niente push orizzontale */
.cky-accordion-header,
.cky-accordion-header-des,
.cky-preference-title,
.cky-title {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Tabella audit (cookie list): tipico colpevole dell'overflow.
   La rendiamo scrollabile DENTRO il box invece di sforare il viewport. */
.cky-audit-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Switch toggle: dimensione fissa, non deve forzare l'allargamento */
.cky-switch {
  flex: 0 0 auto;
}

/* Bottoni del preference-center -> touch target >= 44px, stile coerente */
.cky-preference-center .cky-btn,
.cky-prefrence-btn-wrapper .cky-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.3rem;
  font-family: var(--rn-font-sans);
  font-size: var(--rn-fs-sm);
  font-weight: var(--rn-fw-semibold);
  border-radius: var(--rn-radius-pill);
  box-sizing: border-box;
}

/* Bottone chiudi (X): touch target adeguato */
.cky-btn-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pulsante "revisit" (riapri preferenze): sopra la bottom-nav mobile */
.cky-btn-revisit-wrapper {
  z-index: var(--rn-z-cookie);
}

/* ============================================================
   3) RESPONSIVE — mobile (<= 768px): bottoni full-width, stack
   ============================================================ */
@media (max-width: 768px) {
  .cky-consent-container .cky-notice {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rn-space-3);
  }
  .cky-consent-container .cky-notice-btn-wrapper {
    width: 100%;
  }
  /* bottoni a riga piena, equi-spaziati */
  .cky-consent-container .cky-btn {
    flex: 1 1 auto;
  }
}

/* Phone stretto (<= 420px): impila i bottoni per evitare overflow */
@media (max-width: 420px) {
  .cky-consent-container .cky-notice-btn-wrapper {
    flex-direction: column;
  }
  .cky-consent-container .cky-btn {
    width: 100%;
  }
}

/* Revisit "gestisci consenso": ricolora in palette brand (era blu default) */
.cky-btn-revisit-wrapper .cky-btn-revisit {
  background-color: var(--rn-dark, #1A1A1A) !important;
  color: var(--rn-gold, #C9A84C) !important;
  border: 1px solid var(--rn-gold, #C9A84C) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}
.cky-btn-revisit-wrapper .cky-btn-revisit img,
.cky-btn-revisit-wrapper .cky-btn-revisit svg { filter: none !important; }

/* Una volta che l'utente ha già risposto al banner cookie, nascondi il badge
   flottante "gestisci consenso" (lo riattiva la classe via JS in functions.php). */
html.rn-cky-consented .cky-btn-revisit-wrapper,
html.rn-cky-consented .cky-btn-revisit { display: none !important; }