/* Label optimisation tool — token, base, componenti, schermate.
   Nessun colore hardcoded fuori da :root: se serve un valore nuovo, diventa un token.
   Unica eccezione, dichiarata: gli rgba di --bg nei veli sopra il fondale, che
   esistono solo lì — un token a consumatore unico direbbe meno del gradiente
   che lo usa. */

/* Montserrat variabile, self-hosted: un solo file copre Regular/Medium/Bold.
   Pesare tre file statici non serviva, e ogni richiesta in più conta sui 3 s. */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:             #0a0a0a;  /* sfondo pagina, quasi nero */
  --surface:        #1c1c1c;  /* card */
  --surface-tile:   #2f3237;  /* riquadri dei risparmi dentro le card */
  --surface-input:  #2a2e33;  /* campi del form */
  --accent:         #E64B00;  /* arancio Sidel: CTA, icone, freccia indietro, errori */
  --accent-hover:   #ff5a10;  /* CTA primaria sotto il puntatore */
  --accent-wash:    rgba(230, 75, 0, 0.16);  /* pastiglia dietro le icone arancio */
  --positive:       #4FE063;  /* verde dei risparmi */
  --text:           #ffffff;
  --text-muted:     #b9bfc6;  /* sottotitoli, label dei campi in sola lettura */
  --text-on-light:  #101010;  /* testo sopra badge bianchi e sopra lo scrim chiaro */
  --veil:           rgba(255, 255, 255, 0.08);  /* bordi sottili e fondi appena staccati */
  --veil-strong:    rgba(255, 255, 255, 0.18);  /* pista dello switch valuta */
  --border-soft:    rgba(255, 255, 255, 0.55);  /* bordo del bottone secondario */
  --scrim:          rgba(255, 255, 255, 0.65);  /* modale shape */
  --scrim-dark:     rgba(255, 255, 255, 0.20);  /* lightbox */
  --radius-card:    20px;
  --radius-field:   6px;
  --radius-pill:    999px;
  --gap:            clamp(0.75rem, 1.4vw, 1.75rem);
  --pad-screen:     clamp(1.1rem, 2vw, 2.75rem);
}

/* Il design è disegnato a 3840 px: invece di scalare misure a mano, scala la
   radice e tutto il resto è in rem. Regge da 360 px a 3840 px. */
html {
  font-size: clamp(14px, 0.52vw + 10px, 30px);
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  /* Il fondale vero sta sulle schermate (vedi .screen): qui resta solo il nero
     sotto, che si vede se una schermata non arriva a coprire il viewport. */
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
.sprite { position: absolute; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Struttura ---------- */

/* height, non min-height: senza un'altezza definita qui il `min-height: 100%`
   dell'intro non ha su cosa risolversi e il suo fondale si fermerebbe a metà
   schermo. Le schermate più alte del viewport sbordano e scrollano su body. */
.app { height: 100%; }

/* Il fondale del Figma è lo stesso export su tutte le schermate: cambia solo il
   velo che ci sta sopra. Nel Figma è un rettangolo nero al 60% sopra l'immagine
   al 100% — qui è --screen-veil, così l'intro può sostituirlo col suo senza
   duplicare il resto.
   Il .webp lo prende chi sa leggere image-set(), gli altri il .jpg: il fondale è
   fotografico e senza trasparenza, il ripiego .png delle bottiglie ritagliate
   qui peserebbe una ventina di volte tanto. Il file scartato non si scarica. */
.screen {
  display: none;
  --screen-veil: linear-gradient(rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.6));
  background-image: var(--screen-veil), url('assets/img/background.jpg');
  background-size: cover;
  background-position: center;
}
@supports (background-image: image-set(url('assets/img/background.webp') type('image/webp'))) {
  .screen {
    background-image: var(--screen-veil),
      image-set(url('assets/img/background.webp') type('image/webp'));
  }
}

.screen--active {
  display: block;
  /* Sotto il 100% il fondale finirebbe a metà schermo con un taglio netto. */
  min-height: 100%;
  padding: var(--pad-screen);
}

.screen__header {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.2vw, 1.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 3rem);
}

.screen__heading { min-width: 0; }

.screen__title {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.screen__subtitle {
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- Componenti ---------- */

.button {
  border: 0;
  border-radius: var(--radius-field);
  padding: 0.9rem 1.6rem;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.button--primary { background: var(--accent); color: var(--text); }
.button--primary:hover:not(:disabled) { background: var(--accent-hover); }

.button--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-soft);
}
.button--ghost:hover { background: var(--veil); }

.button:disabled { opacity: 0.45; cursor: not-allowed; }

.icon-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text);
  cursor: pointer;
}
.icon-button--close { border-radius: var(--radius-pill); }
.icon-button--expand {
  width: 2.2rem;
  height: 2.2rem;
  background: transparent;
  color: var(--accent);
}

.icon { width: 1.35rem; height: 1.35rem; }

.badge {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--text-on-light);
  padding: 0.35rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.badge--angle {
  align-self: center;
  color: var(--accent);
  font-weight: 700;
}

.card {
  background: var(--surface);
  border: 1px solid var(--veil);
  border-radius: var(--radius-card);
  padding: clamp(0.9rem, 1.2vw, 1.5rem);
}

.card--pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card--pick:hover, .card--pick:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.grid { display: grid; gap: var(--gap); }
.grid--pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--shapes { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.grid--results { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Le bottiglie hanno larghezze diverse: fisso l'altezza e lascio libera la larghezza. */
.bottle { display: block; }
.bottle img { display: block; width: auto; height: 100%; }

.card--pick .bottle {
  /* --rel tiene i tre formati in proporzione fra loro (lo imposta il render). */
  height: calc(var(--rel, 1) * var(--bottle-size, 17rem));
}
.grid--shapes { --bottle-size: 13rem; }

/* ---------- 1 · Intro ---------- */

/* L'intro è l'unica schermata senza il velo piatto: il fondale resta pieno a
   destra, dietro la bottiglia, e si scurisce a sinistra sotto la colonna di
   testo. Nel Figma il taglio è netto a metà frame, anche sopra la bottiglia;
   qui sfuma, perché un bordo secco in mezzo alla bottiglia si legge come un
   difetto, non come una scelta. */
.screen--intro {
  --screen-veil: linear-gradient(to right,
      rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.72) 34%, rgba(10, 10, 10, 0) 62%);
}

.screen--active.screen--intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
}

.intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.4vw, 1.6rem);
  max-width: 34rem;
}

.logo { display: block; }
.logo img { width: auto; height: clamp(2.2rem, 3vw, 3.4rem); }

.intro__title {
  font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.intro__title strong { font-weight: 700; }

.plus-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.plus {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--veil);
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
}

.plus__icon, .tile__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent);
}

.intro__subtitle { color: var(--text-muted); }

.intro__stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottle--intro { height: clamp(16rem, 42vw, 34rem); }

@keyframes bottle-spin {
  0%, 100% { transform: perspective(1400px) rotateY(-13deg); }
  50%      { transform: perspective(1400px) rotateY(13deg); }
}
/* Segnaposto della rotazione: i render definitivi (più viste della bottiglia)
   non esistono ancora, quindi la bottiglia oscilla invece di girare davvero. */
.bottle--intro img { animation: bottle-spin 9s ease-in-out infinite; }

/* ---------- 4 · Form ---------- */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: start;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem clamp(1rem, 1.6vw, 2rem);
}

/* Colonna 1 forzata: è così che il Figma lascia vuota la cella accanto. */
.field--new-row { grid-column: 1; }

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.field__label { color: var(--text); font-size: 0.9rem; }

.field__control {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  background: var(--surface-input);
  padding: 0.8rem 1rem;
  color: var(--text);
  font: inherit;
  font-weight: 500;
}

.field__control--select {
  appearance: none;
  cursor: pointer;
  /* Il chevron è un data-uri: nessuna richiesta di rete, funziona da file://. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E64B00' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
}

.field__control--readonly {
  display: block;
  color: var(--text-muted);
  min-height: 2.9rem;
}

.field__control--invalid { border-color: var(--accent); }

.field__error {
  min-height: 1rem;
  color: var(--accent);
  font-size: 0.78rem;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.25rem, 2vw, 2.5rem);
}
.form__actions .button--primary { flex: 1 1 18rem; }

.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.preview__spin { color: var(--accent); }
.preview__bottle { height: clamp(15rem, 30vw, 28rem); }
.preview__bottle .bottle { height: 100%; }
.preview__caption { color: var(--text-muted); font-size: 0.9rem; }

.segmented {
  display: inline-flex;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--veil);
  padding: 0.25rem;
}

.segmented__option {
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 0.45rem 1.3rem;
  color: var(--text-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.segmented__option--active { background: var(--text); color: var(--accent); font-weight: 700; }

/* ---------- 5 · Risultati ---------- */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-input);
  padding: 0.4rem 0.8rem;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.switch__track {
  position: relative;
  width: 2.6rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--veil-strong);
}

.switch__knob {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--text);
  transition: transform 0.15s ease;
}
.switch--on .switch__knob { transform: translateX(1.2rem); }
.switch__symbol { color: var(--text-muted); }
.switch:not(.switch--on) .switch__symbol:first-child,
.switch--on .switch__symbol:last-child { color: var(--text); }

.card--result {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.card__bottle {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 2rem) 0;
}
.card__bottle .bottle { height: clamp(11rem, 18vw, 20rem); }

.icon-button--expand { position: absolute; right: 0; bottom: 0; }

.tile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 12px;
  background: var(--surface-tile);
  padding: 0.8rem 1rem;
}

.tile--cost {
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1rem;
}
.tile--cost .tile__label { color: var(--text-muted); font-size: 0.9rem; }
.tile--cost .tile__value {
  color: var(--positive);
  font-size: clamp(1.6rem, 0.8rem + 2vw, 2.6rem);
  font-weight: 700;
  white-space: nowrap;
}

.tile__label { font-weight: 700; }
.tile--co2 .tile__label { font-size: 0.85rem; }

.tile__amount { margin-left: auto; text-align: right; }
.tile__value { font-size: clamp(1.1rem, 0.7rem + 1vw, 1.7rem); font-weight: 700; }
.tile--co2 .tile__value { font-size: clamp(1rem, 0.7rem + 0.7vw, 1.4rem); }
.tile__unit { display: block; color: var(--text-muted); font-size: 0.72rem; }

/* ---------- 3 e 6 · Modali ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-screen);
  background: var(--scrim);
}
.modal[hidden] { display: none; }

.modal__panel { width: 100%; max-width: 110rem; max-height: 100%; overflow-y: auto; }

.modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 2.5rem);
}
/* Titolo scuro: sullo scrim chiaro il bianco del Figma è illeggibile. */
.modal__header .screen__title { color: var(--text-on-light); }
.modal__header .icon-button { margin-left: auto; }

.modal--lightbox { background: var(--scrim-dark); }
/* Altezza percentuale, non 100vh: dentro un iframe il viewport non è la finestra. */
.lightbox__bottle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.lightbox__bottle .bottle { display: flex; align-items: center; height: 100%; }
.lightbox__bottle img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.modal--lightbox .icon-button--close {
  position: absolute;
  top: var(--pad-screen);
  right: var(--pad-screen);
}

/* ---------- Sotto i 900 px il kiosk diventa una colonna ---------- */

@media (max-width: 900px) {
  .screen--active.screen--intro,
  .form-layout,
  .form__grid,
  .grid--pick,
  .grid--results {
    grid-template-columns: minmax(0, 1fr);
  }

  .field--new-row { grid-column: auto; }

  /* A una colonna il testo occupa tutta la larghezza: il velo dell'intro smette
     di essere laterale e scende verso il basso, dove sta il testo. */
  .screen--intro {
    --screen-veil: linear-gradient(rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.88));
  }

  .intro__content { max-width: none; }
  .intro__stage { order: -1; }
  .bottle--intro { height: clamp(12rem, 45vw, 20rem); }

  /* La preview della bottiglia va sotto il form, non a fianco. */
  .preview { order: 2; }
  .form__actions .button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bottle--intro img { animation: none; }
  * { transition-duration: 0.01ms !important; }
}