/* Banner dei cookie (components/cookie_banner.html) e avvisi di consenso che gli script del portale
   mettono nelle pagine: mappe (shared/maps-consent.js) e video incorporati (portal/js/consenso.js).
   Niente display sul banner: lo apre e chiude l'attributo hidden. */

@layer components {
  #cookie-consent-banner, .cookie-consent-reload {
    position: fixed;
    inset: auto 16px 16px;
    z-index: var(--z-consent);
    max-width: 760px;
    margin-inline: auto;
    padding: 20px;
    border-radius: var(--r-md);
    background: var(--ground);
    color: var(--ink);
    box-shadow: var(--shadow-menu);
    font-size: var(--step-small);
  }
  #cookie-consent-banner { max-height: calc(100dvh - 32px); overflow-y: auto; }

  #cookie-consent-title { margin-bottom: 8px; font-size: var(--step-lead); }
  .cookie-consent-lead { color: var(--ink-soft); }

  #cookie-consent-options {
    display: grid;
    gap: 10px;
    margin-top: 14px;
  }

  .cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
  }
  .cookie-consent-details-link { margin-right: auto; }

  #cookie-consent-error {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 2px var(--heart);
    font-weight: 500;
  }

  .cookie-consent-reload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 14px;
  }

  /* Telefono: il collegamento su una riga sua, i bottoni a tutta larghezza */
  @media (max-width: 640px) {
    #cookie-consent-banner, .cookie-consent-reload { inset: auto 8px 8px; padding: 16px; }
    .cookie-consent-details-link { flex: 1 1 100%; margin: 0 0 4px; }
    .cookie-consent-actions .btn { flex: 1 1 auto; }
  }

  /* ---------- Mappa senza consenso "Preferenze": OpenStreetMap e la scelta di usare Google Maps ---------- */
  .rec-maps-consent {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--ground);
    box-shadow: var(--shadow-pin);
    color: var(--ink);
    font-size: var(--step-small);
  }
  :is(.maplibre-3d-head, .portal-map-3d-head) .rec-maps-consent { position: static; margin-top: 6px; box-shadow: none; }
  .rec-maps-consent__btn {
    padding: 2px 10px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--ink);
    font: 500 var(--step-small) var(--font);
    cursor: pointer;
  }

  /* ---------- Video incorporato senza consenso "Marketing": copertina dal nostro dominio e due scelte ---------- */
  .portal-consent-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--ink);

    & iframe { width: 100%; height: 100%; border: 0; }
  }
  .portal-consent-video__cover { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
  .portal-consent-video__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--on-ink);
    text-align: center;

    & p { margin-bottom: 4px; font-size: var(--step-small); }
  }
  .portal-consent-video__btn {
    padding: 8px 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ground);
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
  }
}