/* ============================================================================
   GIFT CARD + PROFILO — traduzione delle due schermate del Figma
   (docs/figma-schermate.md, canvas largo 1512).

   COME SONO STATE TRADOTTE LE MISURE
   Ogni pagina ha, nel file di design, una colonna di contenuto:
     GIFT CARD  da x=118 a x=1384  ->  1266 px
     PROFILO    da x=64  a x=1450  ->  1386 px
   Quella colonna qui e' .container. Tutte le misure del Figma (larghezze,
   altezze, raggi, corpi dei testi, distanze) sono scritte come PERCENTUALE di
   quella colonna, in unita' "cqw" (1cqw = 1% della larghezza del contenitore,
   dichiarato con container-type: inline-size). Cosi' le proporzioni del
   disegno reggono a qualsiasi larghezza, non solo a 1512.
     esempio: titolo 70px su 1266  ->  70/1266*100 = 5.53cqw
   Ogni valore porta in commento la misura originale del file.

   I max(...) sono il pavimento per il telefono: sotto una certa larghezza le
   percentuali darebbero testi illeggibili. In coda c'e' il blocco mobile che
   manda tutto su una colonna.

   Nessun altro foglio viene toccato: i colori arrivano dalle variabili di
   brand.css (--amore-rosso, --amore-rosa, --font).
   ========================================================================= */

/* ============================================================================
   1. GIFT CARD — schermata "GIFT CARD" (1512x3074), colonna 1266
   ========================================================================= */

.gc-pagina > .container {
  container-type: inline-size;   /* 1cqw = 1% di questa colonna */
  position: relative;            /* riferimento per la foto in alto a destra */
}

.gc-pagina {
  /* titolo a y=347 (156 sotto l'header) / footer a y=2743 (184 dopo l'ultimo campo) */
  padding-top: max(1.5rem, 12.32cqw);
  padding-bottom: max(2rem, 14.53cqw);
  color: var(--amore-rosso);
}

/* --- Testa: titolo, sottotitolo, foto ----------------------------------- */

.gc-testa-testo {
  width: 56.72%;                 /* sottotitolo largo 718/1266 */
}

.gc-titolo {
  font-size: max(1.9rem, 5.53cqw);   /* 70px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--amore-rosso);
  margin: 0;
}

.gc-sottotitolo {
  font-size: max(1rem, 2.37cqw);     /* 30px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--amore-rosso);
  margin: max(.35rem, 1.03cqw) 0 0;  /* 13px sotto il titolo */
}

/* Mockup ufficiale card + cuore che la regge (PDF p.8): card a sinistra
   (~50% della pagina), cuore accostato a destra che si sovrappone un poco. */
.gc-visual {
  display: flex;
  align-items: center;
  margin-top: max(1.25rem, 3.5cqw);
}
.gc-card-img { width: 50.5%; height: auto; display: block; filter: drop-shadow(0 10px 26px rgba(0,0,0,.08)); }
.gc-cuore { width: 31%; height: auto; display: block; margin-left: -4%; }

/* L'avviso "non si compra qui" e' un avviso, ma nel giallo di sistema
   spaccherebbe la pagina: stessa lingua grafica del resto, contorno rosso. */
.gc-avviso.alert {
  width: 56.72%;
  margin-top: max(1rem, 3.16cqw);
  border: 1px solid var(--amore-rosso);
  border-radius: max(10px, 1.58cqw);
  background: #FFFFFF;
  color: var(--amore-rosso);
  font-size: max(.9rem, 1.42cqw);
  line-height: 1.35;
}







/* --- Pulsanti rossi di sezione: 413x62 r=20, testo 40px ----------------- */

.gc-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32.62%;                     /* 413/1266 */
  min-height: max(2.6rem, 4.90cqw);  /* 62px */
  padding: .3rem 1rem;
  margin: max(1.5rem, 14.77cqw) auto max(1rem, 3.32cqw);  /* 187 sopra, 42 sotto */
  border-radius: max(10px, 1.58cqw); /* r=20 */
  background: var(--amore-rosso);
  color: #FDFDFD;
  font-size: max(1.05rem, 3.16cqw);  /* 40px */
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

/* Il secondo e il terzo pulsante stanno piu' vicini al blocco precedente
   (115 e 68 nel file, contro i 187 del primo). */
.gc-pill.gc-pill-2 { margin-top: max(1.5rem, 9.08cqw); }   /* 115px */
.gc-pill.gc-pill-3 { margin-top: max(1.5rem, 5.37cqw); }   /* 68px  */
.gc-pill.gc-pill-2,
.gc-pill.gc-pill-3 { margin-bottom: max(1rem, 5.69cqw); }  /* 72px  */

/* --- Chip degli importi: 133x48 r=14 (l'ultimo 229) --------------------- */

.gc-importi {
  position: relative;                /* aggancio dei radio nascosti */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.84%;                        /* 36px fra un chip e l'altro */
}

.gc-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gc-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10.51%;                 /* 133/1266 */
  min-height: max(2.2rem, 3.79cqw);  /* 48px */
  padding: .2rem 1.2%;
  border: 1px solid var(--amore-rosso);
  border-radius: max(9px, 1.11cqw);  /* r=14 */
  background: transparent;
  color: var(--amore-rosso);
  font-size: max(.95rem, 2.37cqw);   /* 30px */
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-veloce, .14s), color var(--dur-veloce, .14s);
}

.gc-chip-largo { min-width: 18.09%; }              /* 229/1266 */

.gc-chip:hover { background: var(--amore-rosa); }

.gc-radio:checked + .gc-chip {
  background: var(--amore-rosso);
  color: #FDFDFD;
}

.gc-radio:focus-visible + .gc-chip {
  outline: 2px solid var(--amore-rosso);
  outline-offset: 3px;
}

/* L'importo libero compare solo quando e' selezionato: nessun JavaScript,
   solo il selettore di fratello. */
.gc-libero { display: none; flex-basis: 100%; margin-top: max(.6rem, 1.9cqw); }
#gc-imp-libero:checked ~ .gc-libero { display: block; }
.gc-libero input { width: 40%; }

/* --- Campi: h=60 r=11, riga doppia 592+616, riga piena 1244 ------------- */

.gc-campi {
  margin-left: 1.74%;                /* i campi partono da x=140 */
  width: 98.26%;                     /* fino a x=1384 */
}

.gc-riga-doppia {
  display: grid;
  grid-template-columns: 592fr 616fr;  /* le due larghezze del file */
  gap: 2.89%;                          /* 36px */
}

.gc-campo { margin: 0 0 max(.8rem, 5.13cqw); }   /* 65px fra una riga e l'altra */
.gc-riga-doppia .gc-campo { margin-bottom: 0; }
.gc-riga-doppia { margin-bottom: max(.8rem, 5.13cqw); }

.gc-campi input,
.gc-campi textarea,
.gc-libero input {
  display: block;
  width: 100%;
  min-height: max(2.9rem, 4.74cqw);    /* 60px */
  padding: .4rem 3%;
  border: 1px solid transparent;
  border-radius: max(7px, .87cqw);     /* r=11 */
  background: #FDFDFD;
  color: var(--amore-rosso);
  font-family: inherit;
  /* 1rem di pavimento: sotto i 16px iOS ingrandisce la pagina al tocco del
     campo (era .95rem = 15.2px). */
  font-size: max(1rem, 2.37cqw);       /* 30px */
}

.gc-campi textarea {
  min-height: max(7rem, 17.69cqw);     /* 224px */
  resize: vertical;
  line-height: 1.3;
  padding-top: .8rem;
}

.gc-campi input::placeholder,
.gc-campi textarea::placeholder,
.gc-libero input::placeholder {
  color: var(--amore-rosso);
  opacity: .85;
}

.gc-campi input:focus,
.gc-campi textarea:focus,
.gc-libero input:focus {
  outline: 2px solid var(--amore-rosso);
  outline-offset: 1px;
}

.gc-campi input:disabled { opacity: .6; }

/* Il messaggio e' l'ultimo campo: 143px prima del pulsante (2335+224 -> ...) */
.gc-campi textarea { margin-top: max(1rem, 11.30cqw); }

/* Etichette vere per lettori di schermo: nel disegno il testo sta dentro al
   campo (placeholder), ma un campo senza <label> non e' accessibile. */
.gc-etichetta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Pulsante finale + riepilogo onesto --------------------------------- */

.gc-invia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32.62%;
  min-height: max(2.6rem, 4.90cqw);
  margin: max(1.5rem, 5.37cqw) auto 0;
  padding: .3rem 1rem;
  border: 0;
  border-radius: max(10px, 1.58cqw);
  background: var(--amore-rosso);
  color: #FDFDFD;
  font-family: inherit;
  font-size: max(1.05rem, 3.16cqw);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-veloce, .14s);
}

.gc-invia:hover { background: var(--amore-rosso-scuro); }
.gc-invia-link { margin-top: 0; }

.gc-nota {
  color: var(--ink-soft);
  font-size: max(.8rem, 1.26cqw);
  text-align: center;
  margin: .6rem auto 0;
  max-width: 60%;
}

.gc-esito {
  background: #FFFFFF;
  border-radius: max(14px, 3.48cqw);
  padding: max(1.2rem, 3.5cqw);
  margin-top: max(1.5rem, 5.37cqw);
  color: var(--ink);
}

.gc-esito h2 {
  color: var(--amore-rosso);
  font-size: max(1.2rem, 2.37cqw);
  margin: 0 0 .6rem;
}

.gc-esito p { margin: 0 0 .7rem; }
.gc-esito a { color: var(--amore-rosso); }
.gc-esito a.gc-invia-link { color: #FDFDFD; }   /* dentro .gc-esito vincerebbe il rosso */
.gc-esito-azioni { margin-top: 1.2rem; }
.gc-esito .gc-nota { text-align: left; max-width: none; margin-left: 0; }

/* ============================================================================
   2. PROFILO — schermata "PROFILO" (1512x2909), colonna 1386
   ========================================================================= */

.pf-apertura > .container,
.pf-club > .container,
.pf-promo > .container,
.pf-dati > .container {
  container-type: inline-size;       /* 1cqw = 1% della colonna (1386 nel file) */
}

/* --- Apertura: "Ciao <nome>" + benvenuto + foto ------------------------- */

.pf-apertura {
  padding-top: max(1.5rem, 15.44cqw);   /* titolo a y=405 */
  padding-bottom: max(1.5rem, 2.60cqw); /* fascia bianca a y=797 */
  color: var(--amore-rosso);
}

.pf-apertura-inner {
  display: grid;
  grid-template-columns: 64.79% 35.21%;  /* la foto parte a x=962 */
  align-items: start;
  gap: 0;
}

.pf-ciao {
  font-size: max(2.1rem, 6.49cqw);       /* 90px */
  line-height: 1;
  color: var(--amore-rosso);
  margin: 0;
}

.pf-benvenuto {
  width: 88.9%;                          /* 580 su 653 di colonna */
  margin: max(.5rem, 1.59cqw) 0 0 5.12%; /* rientro di 71px come nel file */
  font-size: max(1.05rem, 3.61cqw);      /* 50px */
  font-weight: 500;
  line-height: 1.15;
}

.pf-apertura-foto {
  width: 55.3%;                          /* 270 su 488 di colonna */
  height: auto;                          /* annulla l'attributo height dell'<img> */
  aspect-ratio: 270 / 366;
  object-fit: cover;
  display: block;
}

/* --- Navigazione area cliente (non e' nel Figma, ma non si perde) ------- */

.pf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1.2rem 0 0;
}

.pf-nav a,
.pf-nav button {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1.1rem;
  border: 1px solid var(--amore-rosso);
  border-radius: 999px;
  background: transparent;
  color: var(--amore-rosso);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pf-nav a:hover,
.pf-nav button:hover { background: var(--amore-rosa); }

.pf-nav a.is-attiva {
  background: var(--amore-rosso);
  color: #FDFDFD;
}

.pf-nav-esci { margin-left: auto; }

/* --- Fascia bianca: "Cosa ti rende parte del nostro club" --------------- */

.pf-club {
  background: #FDFDFD;
  color: var(--amore-rosso);
  padding-top: max(1.2rem, 3.32cqw);     /* titolo 46px sotto il bordo */
  padding-bottom: max(1.5rem, 4.26cqw);
  margin-top: max(1.2rem, 4cqw);
}

.pf-club-titolo {
  width: 38.46%;                         /* 533/1386 */
  margin: 0 0 0 1.59%;                   /* testo a x=86 */
  font-size: max(1rem, 2.17cqw);         /* 30px */
  font-weight: 600;
  line-height: 1.15;
}

.pf-numeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 71.5%;                          /* centri a 419 / 747 / 1082 */
  margin: max(.6rem, 1.23cqw) 0 0 13.8%;
  text-align: center;
}

.pf-numero-cifra {
  font-size: max(2.2rem, 7.22cqw);       /* 100px */
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.pf-numero-label {
  font-size: max(1.3rem, 4.33cqw);       /* 60px */
  font-weight: 500;
  line-height: 1;
  margin: max(.2rem, .6cqw) 0 0;
}

.pf-linea {
  width: 45.89%;                         /* filetto 636px centrato */
  margin: max(1.2rem, 3.97cqw) auto 0;
  border: 0;
  border-top: 1px solid var(--amore-rosso);
}

/* --- Barra di avanzamento punti ----------------------------------------- */

.pf-avanzamento { margin-top: max(1.2rem, 4.11cqw); }

.pf-avanzamento-titolo {
  width: 26.41%;                         /* 366/1386 */
  margin: 0 0 0 2.60%;                   /* testo a x=100 */
  font-size: max(1rem, 3.25cqw);         /* 45px */
  font-weight: 600;
  line-height: 1.1;
}

.pf-barra {
  position: relative;
  width: 94.88%;                         /* da x=135 a x=1450 */
  height: max(8px, 1.44cqw);             /* 20px */
  margin: max(1rem, 4.47cqw) 0 0 5.12%;
  border: 1px solid var(--amore-rosso);
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
}

.pf-barra-pieno {
  display: block;
  height: 100%;
  background: var(--amore-rosso);
  border-radius: 999px;
}

/* Senza una soglia configurata la barra resta una traccia rosa piatta: si
   vede che e' decorativa e non sta misurando la strada verso uno sconto. */
.pf-barra.is-neutra {
  border-color: var(--amore-rosa);
  background: var(--amore-rosa);
}

.pf-barra-valore {
  width: 94.88%;
  margin: max(.4rem, 1.15cqw) 0 0 5.12%;
  font-size: max(1rem, 3.25cqw);         /* 45px */
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

.pf-barra-valore-unita { font-size: .55em; font-weight: 500; }

.pf-nota {
  color: var(--ink-soft);
  font-size: max(.85rem, 1.3cqw);
  line-height: 1.4;
  margin: max(.6rem, 1.5cqw) 0 0 5.12%;
  max-width: 46rem;
}

.pf-movimenti {
  list-style: none;
  width: 94.88%;
  margin: max(.8rem, 2cqw) 0 0 5.12%;
  padding: 0;
}

.pf-movimenti li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .45rem 0;
  border-top: 1px solid var(--amore-rosa);
  font-size: max(.85rem, 1.3cqw);
}

.pf-mov-delta {
  flex: 0 0 auto;
  min-width: 3.2rem;
  font-weight: 700;
}

.pf-mov-delta.is-piu  { color: var(--amore-rosso); }
.pf-mov-delta.is-meno { color: var(--ink-soft); }
.pf-mov-testo { flex: 1 1 auto; color: var(--ink); }
.pf-mov-data  { flex: 0 0 auto; color: var(--ink-soft); }

.pf-avanzamento-link {
  margin: max(.8rem, 2cqw) 0 0 5.12%;
  font-size: max(.85rem, 1.3cqw);
}

.pf-avanzamento-link a { color: var(--amore-rosso); }

/* --- "Piu' punti, piu' promozioni" + foto ------------------------------- */

.pf-promo {
  padding-top: max(1.5rem, 4.47cqw);     /* titolo a y=1514 */
  color: var(--amore-rosso);
}

.pf-promo-inner {
  display: grid;
  grid-template-columns: 48.48% 51.52%;  /* la foto parte a x=666 */
  align-items: center;
  gap: 0;
}

.pf-promo-titolo {
  margin: 0 0 0 2.60%;
  font-size: max(1.8rem, 5.77cqw);       /* 80px */
  font-weight: 600;
  line-height: 1.05;
}

.pf-promo-foto {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Moduli (dati + password): stessa lingua grafica dei pulsanti ------- */

.pf-dati {
  padding-top: max(1.5rem, 4cqw);
  padding-bottom: max(2rem, 8cqw);
  color: var(--amore-rosso);
}

.pf-form { margin: 0 0 max(1.5rem, 5cqw); }

.pf-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29.80%;                         /* 413/1386 */
  min-height: max(2.6rem, 4.47cqw);      /* 62px */
  padding: .3rem 1rem;
  margin: 0 auto max(1rem, 3.5cqw);
  border-radius: max(10px, 1.44cqw);     /* r=20 */
  background: var(--amore-rosso);
  color: #FDFDFD;
  font-size: max(1.05rem, 2.89cqw);      /* 40px */
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.pf-riga-doppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6%;
}

.pf-campo { margin: 0 0 max(.8rem, 2.6cqw); }
.pf-riga-doppia .pf-campo { margin-bottom: 0; }
.pf-riga-doppia { margin-bottom: max(.8rem, 2.6cqw); }

.pf-campo label {
  display: block;
  font-size: max(.85rem, 1.3cqw);
  font-weight: 600;
  margin-bottom: .3rem;
}

.pf-campo input {
  display: block;
  width: 100%;
  min-height: max(2.9rem, 4.33cqw);      /* 60px */
  padding: .4rem 3%;
  border: 1px solid transparent;
  border-radius: max(7px, .79cqw);       /* r=11 */
  background: #FDFDFD;
  color: var(--amore-rosso);
  font-family: inherit;
  font-size: max(.95rem, 2.17cqw);
}

.pf-campo input:focus {
  outline: 2px solid var(--amore-rosso);
  outline-offset: 1px;
}

.pf-campo input:disabled { opacity: .6; }

.pf-invia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29.80%;
  min-height: max(2.6rem, 4.47cqw);
  margin: max(1rem, 3cqw) auto 0;
  padding: .3rem 1rem;
  border: 0;
  border-radius: max(10px, 1.44cqw);
  background: var(--amore-rosso);
  color: #FDFDFD;
  font-family: inherit;
  font-size: max(1.05rem, 2.89cqw);
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background var(--dur-veloce, .14s);
}

.pf-invia:hover { background: var(--amore-rosso-scuro); }

.pf-dati .pf-nota { margin-left: 0; }
.pf-nota-cliente-dal { text-align: center; }

/* ============================================================================
   3. Schermi stretti — tutto su una colonna, testi a misura di pollice
   ========================================================================= */

@media (max-width: 900px) {

  /* --- Gift card --- */
  .gc-testa-testo,
  .gc-avviso { width: 100%; }

  .gc-visual {
    position: static;
    width: 62%;
    margin: 1.2rem 0 0;
  }

  .gc-card-img { width: 100%; }

  .gc-pill,
  .gc-invia { width: 100%; }

  .gc-campi { width: 100%; margin-left: 0; }

  .gc-riga-doppia { grid-template-columns: 1fr; gap: .8rem; }
  .gc-riga-doppia .gc-campo { margin-bottom: 0; }

  .gc-chip { min-width: 30%; flex: 1 1 30%; }
  .gc-chip-largo { min-width: 46%; flex-basis: 46%; }
  .gc-importi { gap: .6rem; }
  .gc-libero input { width: 100%; }

  .gc-nota { max-width: none; }

  /* --- Profilo --- */
  .pf-apertura-inner,
  .pf-promo-inner { grid-template-columns: 1fr; }

  .pf-apertura-foto {
    width: 60%;
    margin: 1.2rem 0 0;
  }

  .pf-benvenuto { width: 100%; margin-left: 0; }

  .pf-club-titolo,
  .pf-avanzamento-titolo { width: 100%; margin-left: 0; }

  .pf-numeri { width: 100%; margin-left: 0; }

  .pf-barra,
  .pf-barra-valore,
  .pf-movimenti,
  .pf-avanzamento-link,
  .pf-nota { width: 100%; margin-left: 0; }

  .pf-promo-titolo { margin-left: 0; }
  .pf-promo-foto { margin-top: 1.2rem; }

  .pf-pill,
  .pf-invia { width: 100%; }

  .pf-riga-doppia { grid-template-columns: 1fr; gap: .8rem; }
  .pf-riga-doppia .pf-campo { margin-bottom: 0; }
}

@media (max-width: 560px) {
  .gc-chip,
  .gc-chip-largo { min-width: 46%; flex-basis: 46%; }

  .pf-movimenti li { flex-wrap: wrap; }
}

/* Solo sui telefoni piu' stretti i tre numeri si mettono in colonna: fin
   dove ci stanno restano affiancati come nel disegno. */
@media (max-width: 420px) {
  .pf-numeri { grid-template-columns: 1fr; gap: 1rem; }
}

/* Chi ha chiesto meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce) {
  .gc-chip,
  .gc-invia,
  .pf-invia { transition: none; }
}

/* --- Coming soon (interruttore gift_coming_soon in impostazioni_sito) ----- */

.gc-coming {
  margin: max(1.5rem, 4.5cqw) 0 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: max(2.2rem, 7.5cqw);
  line-height: 1;
  color: var(--amore-rosso, #DC0C21);
}
.gc-coming-testo {
  max-width: min(100%, 44.875rem);
  margin: max(.6rem, 1.6cqw) 0 0;
  font-size: max(1rem, 2.05cqw);
  font-weight: 500;
  line-height: 1.3;
  color: var(--amore-rosso, #DC0C21);
}
.gc-coming-azioni { margin: max(1.2rem, 3.2cqw) 0 0; }