/*
  CAPRI BLU TOTEM v0.3.2
  VIDEO GLASS FIX
  Rimuove i fondi opachi che stanno coprendo il video.
*/

/* =========================================================
   1. IL VIDEO DEVE ESSERE IL VERO SFONDO DELL'APP
   ========================================================= */

html,
body,
.app-shell,
.screen,
.screen.active {
  background: transparent !important;
}

.app-shell {
  position: relative !important;
  min-height: 100vh !important;
}

/* il video resta dietro a tutto */
#capri-brand-video,
.capri-brand-video,
#capri-blu-background-video {
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;

  width: 100vw !important;
  height: 100vh !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  object-fit: cover !important;
  pointer-events: none !important;
}

/* overlay leggero, non una lastra bianca */
body.capri-brand-ui-active::before {
  z-index: -9 !important;
  background:
    linear-gradient(
      180deg,
      rgba(2,18,31,.13),
      rgba(2,18,31,.26)
    ) !important;
}

/* =========================================================
   2. SCHERMATE OPERATIVE: NIENTE FONDO PIENO
   ========================================================= */

#screen-language,
#screen-people,
#screen-zone,
#screen-table,
#screen-confirm,
#screen-allergens,
#screen-categories,
#screen-products,
#screen-cart {
  background: transparent !important;
}

/* =========================================================
   3. CARD PRINCIPALI IN VETRO
   ========================================================= */

#screen-language > .card,
#screen-people > .card,
#screen-zone > .card,
#screen-table > .card,
#screen-confirm > .card,
#screen-allergens > .card {
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 24px !important;

  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(5,38,63,.68),
      rgba(4,27,45,.46)
    ) !important;

  box-shadow:
    0 24px 64px rgba(0,18,32,.30),
    inset 0 1px 0 rgba(255,255,255,.14) !important;

  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

/* testi */
#screen-language .brand,
#screen-language h1,
#screen-language h2,
#screen-language .intro,
#screen-language .screen-description,
#screen-people .brand,
#screen-people h1,
#screen-people h2,
#screen-people .intro,
#screen-people .screen-description,
#screen-zone .brand,
#screen-zone h1,
#screen-zone h2,
#screen-zone .intro,
#screen-zone .screen-description,
#screen-table .brand,
#screen-table h1,
#screen-table h2,
#screen-table .intro,
#screen-table .screen-description,
#screen-confirm .brand,
#screen-confirm h1,
#screen-confirm h2,
#screen-confirm .intro,
#screen-confirm .screen-description,
#screen-allergens .brand,
#screen-allergens h1,
#screen-allergens h2,
#screen-allergens .intro,
#screen-allergens .screen-description {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.28) !important;
}

/* =========================================================
   4. SCELTA LINGUA: NIENTE CARD BIANCHE
   ========================================================= */

#screen-language .language-button {
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 18px !important;

  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(8,55,88,.70),
      rgba(5,38,63,.55)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 26px rgba(0,18,32,.18) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#screen-language .language-button strong,
#screen-language .language-button span {
  color: #fff !important;
}

#screen-language .language-button:not(:disabled):hover,
#screen-language .language-button:not(:disabled):focus-visible {
  border-color: rgba(242,217,159,.72) !important;
  background:
    linear-gradient(
      145deg,
      rgba(11,79,125,.86),
      rgba(7,55,88,.72)
    ) !important;
}

#screen-language .language-button:disabled {
  opacity: .50 !important;
  color: rgba(255,255,255,.72) !important;
  background: rgba(5,38,63,.36) !important;
}

/* =========================================================
   5. RIMUOVE I RESIDUI CHIARI DAI PANNELLI
   ========================================================= */

body.capri-brand-ui-active .gallery-shell,
body.capri-brand-ui-active .panel,
body.capri-brand-ui-active .cart-shell {
  background:
    linear-gradient(
      145deg,
      rgba(5,38,63,.62),
      rgba(4,27,45,.40)
    ) !important;
}

/* evita il vecchio tema crema */
body.capri-blu-themed {
  background: transparent !important;
}

/* tablet */
@media (max-width: 900px) {
  #screen-language > .card,
  #screen-people > .card,
  #screen-zone > .card,
  #screen-table > .card,
  #screen-confirm > .card,
  #screen-allergens > .card {
    width: min(92vw, 920px) !important;
    padding: 34px 26px !important;
  }
}


/* v0.4.11: fallback video/overlay esplicito per Tablet */
#capri-blu-background-video {
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  pointer-events: none !important;
}
#capri-blu-background-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: -9 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(2,18,31,.16), rgba(2,18,31,.30)) !important;
}
body, .app-shell, .screen, .screen.active { background-color: transparent !important; }

/* =========================================================
   v0.4.12 - TESTI DIRETTI SU SFONDO SCURO
   Rimuove le sotto-card chiare che creavano testo bianco
   su fondo crema. Le informazioni restano leggibili
   direttamente sul pannello scuro principale.
   ========================================================= */

#screen-allergens .allergen-notice,
#screen-review .allergen-notice {
  max-width: 760px !important;
  margin: 12px auto 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  text-align: left !important;
}

#screen-allergens .allergen-notice p,
#screen-review .allergen-notice p {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}

#screen-allergens .checkbox-row {
  max-width: 760px !important;
  margin: 0 auto 28px !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

#screen-allergens .checkbox-row span {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}

/* Stesso principio per i riquadri puramente informativi
   nelle schermate iniziali: niente crema sopra il vetro scuro. */
#screen-confirm .selection-summary,
#screen-people .selection-summary,
#screen-people .coperto-box,
#screen-confirm .takeaway-wait-card {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

#screen-confirm .selection-summary,
#screen-people .selection-summary,
#screen-people .coperto-box {
  border-color: rgba(255,255,255,.28) !important;
}

#screen-confirm .selection-summary span,
#screen-confirm .selection-summary strong,
#screen-people .selection-summary span,
#screen-people .selection-summary strong,
#screen-people .coperto-box span,
#screen-people .coperto-box strong,
#screen-people .coperto-box small,
#screen-confirm .takeaway-wait-card span,
#screen-confirm .takeaway-wait-card strong,
#screen-confirm .takeaway-wait-card small {
  color: #fff !important;
}