/* =============================================================
   Alice in Pilatesland — Foglio di stile principale
   -------------------------------------------------------------
   Design system del brand:
   - Rosa principale:   #c0637a
   - Sfondo box/sezioni: #fdf0f3
   - Font:              Georgia
   - Stile:             elegante, pulito, pace e armonia
   ============================================================= */

/* --- 1. Variabili del brand -------------------------------- */
/* Le custom properties (variabili CSS) ci permettono di
   cambiare i colori in un solo punto e propagarli ovunque. */
:root {
  --rosa-principale: #c0637a;
  --rosa-scuro:      #a44e63;   /* hover/accenti, ricavato dal rosa */
  --sfondo-box:      #fdf0f3;   /* sfondo morbido di sezioni e card */
  --bianco:          #ffffff;
  --testo:           #3a2c30;   /* testo scuro caldo, non nero puro */
  --testo-tenue:     #6b5a5f;   /* testo secondario */
  --ombra:           0 8px 30px rgba(192, 99, 122, 0.15);

  --font-base:   Georgia, 'Times New Roman', serif;
  --raggio:      18px;          /* bordi arrotondati morbidi */
  --max-width:   1080px;        /* larghezza massima del contenuto */
}

/* --- 2. Reset di base --------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;       /* padding e bordi inclusi nelle dimensioni */
  margin: 0;
  padding: 0;
}

/* Lo scroll fluido lo gestisce smooth-scroll.js con easing elegante:
   teniamo "auto" per non entrare in conflitto con l'animazione JS. */
html {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-base);
  color: var(--testo);
  background-color: var(--bianco);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Contenitore centrato e con respiro ai lati */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Variante più larga (es. checkout a due colonne) */
.container--wide {
  max-width: 1320px;
}

/* --- 3. Tipografia ------------------------------------------ */
h1, h2, h3 {
  font-weight: normal;          /* Georgia è già elegante, niente bold pesante */
  line-height: 1.25;
  color: var(--testo);
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { color: var(--testo-tenue); }

a { color: var(--rosa-principale); text-decoration: none; }
a:hover { color: var(--rosa-scuro); }

/* --- 4. Bottone principale (call to action) ---------------- */
.btn {
  display: inline-block;
  background-color: var(--rosa-principale);
  color: var(--bianco);
  font-family: var(--font-base);
  font-size: 1.1rem;
  padding: 16px 34px;
  border: none;
  border-radius: 999px;         /* pillola completamente arrotondata */
  cursor: pointer;
  box-shadow: var(--ombra);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.btn:hover {
  background-color: var(--rosa-scuro);
  color: var(--bianco);
  transform: translateY(-3px);  /* piccolo "sollevamento" al passaggio */
}

/* --- 4b. Navbar -------------------------------------------- */
.navbar {
  position: sticky;             /* resta in alto quando si scorre */
  top: 0;
  z-index: 100;                 /* sopra hero e contenuti */
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);   /* effetto vetro smerigliato */
  /* Rilievo: sottile linea rosa + ombra morbida che dà profondità */
  border-bottom: 1px solid rgba(192, 99, 122, 0.18);
  box-shadow: 0 6px 24px rgba(192, 99, 122, 0.18);
}

/* Sfumatura sotto la navbar che si fonde sulle immagini dell'hero,
   accentuando lo stacco senza una linea netta. */
.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;                    /* parte subito sotto la barra */
  height: 22px;
  pointer-events: none;         /* non blocca i click sotto */
  background: linear-gradient(
    to bottom,
    rgba(192, 99, 122, 0.12),
    rgba(192, 99, 122, 0)
  );
}

/* Griglia a 3 colonne uguali ai lati: così il menu centrale
   resta perfettamente centrato a prescindere dalla larghezza
   del brand a sinistra e del carrello a destra. */
.navbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Navbar a tutta larghezza: niente limite del contenitore,
     solo un margine ai lati per non incollarsi ai bordi. */
  max-width: 100%;
  padding: 16px 48px;
}


.navbar__brand {
  font-size: 1.35rem;
  color: var(--rosa-principale);
  letter-spacing: 0.3px;
  justify-self: start;          /* ancorato a sinistra */
}

.navbar__menu {
  display: flex;
  gap: 70px;
  list-style: none;
  justify-self: center;         /* menu al centro */
}

/* Link del menu con sottolineatura animata al passaggio del mouse */
.nav__link {
  position: relative;           /* serve per posizionare la riga ::after */
  color: var(--rosa-principale);
  font-size: 0.95rem;
  text-transform: uppercase;    /* tutto in maiuscolo */
  letter-spacing: 1.5px;        /* respiro tra le lettere, più elegante */
  padding-bottom: 4px;
}

/* La "riga" è uno pseudo-elemento che parte da larghezza 0
   ed è ancorato al centro: crescendo si apre verso i due lati. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%;                              /* ancorata al centro */
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--rosa-principale);
  transform: translateX(-50%);            /* resta centrata mentre cresce */
  transition: width 0.3s ease;            /* l'animazione della sottolineatura */
}

/* Al passaggio del mouse la riga cresce fino a tutta la larghezza */
.nav__link:hover {
  color: var(--rosa-principale);
}

.nav__link:hover::after {
  width: 100%;
}

/* Zona destra: account + carrello */
.navbar__right {
  justify-self: end;            /* ancorata a destra nella griglia */
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.navbar__account {
  font-size: 0.95rem;
  color: var(--testo);
}

.navbar__account-link {
  font-size: 0.95rem;
  color: var(--rosa-principale);
}
.navbar__account-link:hover { color: var(--rosa-scuro); }

/* Icona account (omino), stessa resa del carrello */
.navbar__icon-link {
  display: inline-flex;
  align-items: center;
  color: var(--rosa-principale);
  transition: transform 0.2s ease, color 0.2s ease;
}
.navbar__icon-link:hover {
  color: var(--rosa-scuro);
  transform: translateY(-2px);
}

/* Omino + nome del cliente loggato (porta alla dashboard) */
.navbar__user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rosa-principale);
  font-weight: 600;
  transition: transform 0.2s ease, color 0.2s ease;
}
.navbar__user:hover {
  color: var(--rosa-scuro);
  transform: translateY(-2px);
}
.navbar__user-nome { font-size: 0.95rem; }

/* Icona "Esci" accanto al nome (stesso stile di omino/carrello) */
.navbar__logout {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--rosa-principale);
  transition: transform 0.2s ease, color 0.2s ease;
}
.navbar__logout:hover {
  color: var(--rosa-scuro);
  transform: translateY(-2px);
}

/* La voce "account" del menu si vede SOLO su mobile (nel menu a tendina) */
.navbar__menu-account { display: none; }

/* Hamburger: nascosto su desktop, mostrato su mobile */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--rosa-principale);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Animazione in "X" quando il menu è aperto */
.navbar__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle.is-open span:nth-child(2) { opacity: 0; }
.navbar__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Carrello */
.navbar__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--rosa-principale);
  transition: transform 0.2s ease;
}

.navbar__cart:hover {
  color: var(--rosa-scuro);
  transform: translateY(-2px);
}

/* Pallino con il numero di articoli nel carrello */
.navbar__cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--rosa-principale);
  color: var(--bianco);
  font-size: 0.7rem;
  line-height: 18px;
  text-align: center;
}

/* Quando si salta a una sezione con #ancora, lascia spazio
   sotto la navbar sticky così il titolo non resta nascosto. */
html {
  scroll-padding-top: 80px;
}

/* --- Navbar mobile: hamburger a sx, brand al centro, carrello a dx --- */
@media (max-width: 820px) {
  /* hamburger | brand | destra(carrello) */
  .navbar__inner {
    grid-template-columns: auto 1fr auto;
    padding: 14px 20px;
  }

  .navbar__toggle { display: flex; justify-self: start; }
  .navbar__brand  { justify-self: center; font-size: 1.2rem; }
  .navbar__right  { justify-self: end; }

  /* su mobile l'icona account sparisce: "Accedi" è nel menu */
  .navbar__icon-link { display: none; }
  .navbar__user,
  .navbar__logout { display: none; }

  /* il menu si apre a SINISTRA, esattamente dal bordo della navbar */
  .navbar__menu {
    position: absolute;
    top: 100%;                     /* parte dal bordo inferiore della navbar */
    left: 0;
    right: auto;                   /* non a tutta larghezza: ancorato a sx */
    min-width: 220px;
    z-index: 99;
    flex-direction: column;
    align-items: flex-start;       /* voci allineate a sinistra */
    gap: 0;
    padding: 6px 0;
    background-color: transparent; /* trasparente: si vede la foto sotto */

    /* Comparsa morbida: parte sollevato e trasparente, poi scende */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  }

  /* Voci in bianco, con ombra scura per leggibilità sopra la foto */
  .navbar__menu .nav__link {
    color: var(--bianco);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }
  .navbar__menu .nav__link:hover { color: var(--sfondo-box); }
  .navbar__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar__menu-account { display: block; }   /* prima voce del menu */
  .navbar__menu li { width: 100%; }
  .navbar__menu .nav__link {
    display: block;
    padding: 13px 26px;
    text-align: left;              /* testo allineato a sinistra */
  }
  /* nel menu verticale la sottolineatura centrale non serve */
  .navbar__menu .nav__link::after { display: none; }
}

/* --- 5. Hero (sezione di apertura a tutto schermo) --------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--bianco);
}

/* Strato delle immagini di sfondo che ruotano (gestite via JS) */
.hero__bg {
  position: absolute;
  inset: 0;                     /* top/right/bottom/left = 0 */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;  /* dissolvenza morbida */
  z-index: 0;
}

.hero__bg.is-active {
  opacity: 1;                   /* solo l'immagine attiva è visibile */
}

/* Velo rosato sopra le immagini per leggibilità del testo.
   Aggiungiamo una vignettatura (radiale) che scurisce dolcemente
   i bordi e incornicia il contenuto: dà profondità ed eleganza. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(58, 44, 48, 0) 45%,
      rgba(58, 44, 48, 0.45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(192, 99, 122, 0.45),
      rgba(58, 44, 48, 0.55)
    );
  z-index: 1;
}

/* Sfumatura morbida in alto: l'hero si fonde con la navbar
   (bianca) con la stessa transizione che usiamo in basso. */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.9)
  );
}

/* Sfumatura morbida in basso: l'hero si fonde nella sezione
   successiva (bianca) invece di tagliarsi con una linea netta. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.9)
  );
}

.hero__content {
  position: relative;
  z-index: 2;                   /* sopra immagini e velo */
  padding: 0 24px;
  max-width: 760px;
}

/* Alone luminoso e tenue dietro al testo: attira lo sguardo
   al centro e stacca il contenuto dallo sfondo con grazia. */
.hero__content::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 150%;
  z-index: -1;                  /* dietro al testo dell'hero */
  background: radial-gradient(
    ellipse at center,
    rgba(253, 240, 243, 0.18),
    rgba(253, 240, 243, 0) 70%
  );
}

.hero__content h1 {
  color: var(--bianco);
  margin-bottom: 18px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.hero__content .sottotitolo {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.25rem;
  margin-bottom: 36px;
}

/* --- 6. Sezioni generiche ---------------------------------- */
.section {
  padding: 90px 0;
}

.section--soft {
  background-color: var(--sfondo-box);
}

.section__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section__intro p {
  margin-top: 14px;
  font-size: 1.1rem;
}

/* --- 7. Griglia delle lezioni ------------------------------ */
.lezioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.lezione {
  background-color: var(--bianco);
  border-radius: var(--raggio);
  padding: 28px;
  box-shadow: var(--ombra);
  transition: transform 0.25s ease;
}

.lezione:hover {
  transform: translateY(-6px);
}

/* Numero della lezione in un cerchietto rosa */
.lezione__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--sfondo-box);
  color: var(--rosa-principale);
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.lezione h3 { margin-bottom: 8px; }

/* Call to action sotto le lezioni */
.corso__cta {
  text-align: center;
  margin-top: 48px;
}

/* --- 8. Blocco community / CTA finale ---------------------- */
.community {
  text-align: center;
}

.community h2 { margin-bottom: 16px; }

.community p {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 1.1rem;
}

/* --- 8b. Carrello / riepilogo ordine ----------------------- */
/* Contenitore più stretto: una pagina di checkout sta meglio
   raccolta al centro che larga come la landing. */
.container--stretto {
  max-width: 680px;
}

.ordine {
  background-color: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 32px;
}

/* Riga di un articolo: info a sinistra, prezzo a destra */
.ordine__riga {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sfondo-box);
}

.ordine__info h3 { margin-bottom: 6px; }

.ordine__qta {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--testo-tenue);
}

.ordine__prezzo {
  font-size: 1.2rem;
  color: var(--rosa-principale);
  white-space: nowrap;          /* il prezzo non va a capo */
}

/* Riga del totale */
.ordine__totale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 1.35rem;
}

.ordine__totale span:last-child {
  color: var(--rosa-principale);
}

/* Azioni: link indietro a sinistra, bottone acquisto a destra */
.ordine__azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.link-indietro {
  color: var(--testo-tenue);
  font-size: 0.95rem;
}

.link-indietro:hover { color: var(--rosa-principale); }

/* Bottone disabilitato (pagamento non ancora attivo) */
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn:disabled:hover {
  background-color: var(--rosa-principale);
  transform: none;
}

.ordine__nota {
  margin-top: 18px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--testo-tenue);
}

.carrello-vuoto {
  text-align: center;
}

.carrello-vuoto p { margin-bottom: 20px; }

/* --- 9. Footer --------------------------------------------- */
.footer {
  position: relative;           /* per la sfumatura in cima (::before) */
  background-color: var(--rosa-principale);
  color: var(--bianco);
  padding: 110px 0 40px;        /* più spazio in alto: il testo resta sul rosa pieno */
  text-align: center;
}

/* Sfumatura in alto: parte dal rosa tenue (#fdf0f3) della sezione
   sovrastante e svanisce gradualmente nel rosa del footer.
   Transizione lunga e con più tappe = dissolvenza totale, senza
   alcuna riga netta tra i due colori. */
.footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--sfondo-box) 0%,
    rgba(253, 240, 243, 0.85) 18%,
    rgba(253, 240, 243, 0.5) 45%,
    rgba(253, 240, 243, 0.2) 72%,
    rgba(253, 240, 243, 0) 100%
  );
}

/* Il contenuto resta sopra la sfumatura */
.footer .container {
  position: relative;
  z-index: 1;
}

.footer a {
  position: relative;           /* per posizionare la riga ::after */
  display: inline-flex;         /* icona + testo sulla stessa riga */
  align-items: center;
  gap: 8px;
  color: var(--bianco);
  padding-bottom: 3px;
}

/* Icona di contatto (busta, Instagram, WhatsApp) */
.footer__icon {
  flex-shrink: 0;               /* l'icona non si schiaccia */
}

.footer a:hover { color: var(--sfondo-box); }

/* Sottolineatura animata dal centro (come la navbar), in bianco */
.footer a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--bianco);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.footer a:hover::after { width: 100%; }

.footer__brand {
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.footer__contatti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin-bottom: 24px;
  list-style: none;
}

/* Link legali (Privacy, Cookie, Termini) */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 20px;
  list-style: none;
  font-size: 0.92rem;
}

.footer__copyright {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* --- Pagine legali (Privacy / Cookie / Termini) ------------ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 8px;
}

.legal__aggiornamento {
  color: var(--testo-tenue);
  font-size: 0.9rem;
  margin-bottom: 36px;
}

.legal h2 {
  font-size: 1.4rem;
  color: var(--rosa-principale);
  margin: 32px 0 12px;
}

.legal p,
.legal li {
  color: var(--testo-tenue);
  margin-bottom: 10px;
}

.legal ul {
  padding-left: 22px;
  margin-bottom: 10px;
}

/* --- Pagine account (login / registrazione) ---------------- */
.auth-box {
  max-width: 460px;
  margin: 0 auto;
  background: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 40px;
}

.auth-box h1 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 6px;
}

.auth-box .auth-sub {
  text-align: center;
  margin-bottom: 26px;
  font-size: 0.95rem;
}

.auth-box .input-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.auth-box label {
  font-size: 0.8rem;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--testo-tenue);
}

.auth-box input {
  background: var(--bianco);
  border: 1px solid #e7cdd5;
  padding: 12px;
  border-radius: 10px;
  color: var(--testo);
  font-size: 0.95rem;
  font-family: var(--font-base);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.auth-box input:focus {
  border-color: var(--rosa-principale);
  box-shadow: 0 0 0 3px rgba(192, 99, 122, 0.12);
}

.auth-box .btn {
  width: 100%;
  margin-top: 8px;
}

/* Riga "due campi affiancati" (es. nome + cognome) */
.auth-row {
  display: flex;
  gap: 14px;
}
.auth-row .input-group { flex: 1; }

/* Consenso (checkbox) */
.auth-consenso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--testo-tenue);
  margin-bottom: 18px;
  text-align: left;
}
.auth-consenso input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--rosa-principale);
  flex-shrink: 0;
}

/* Link alternativo sotto il form (es. "Hai già un account?") */
.auth-alt {
  text-align: center;
  margin-top: 20px;
  font-size: 0.92rem;
  color: var(--testo-tenue);
}

/* Messaggio di errore del form */
.form-error {
  background: #f8e0e5;
  color: #b23a52;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 0.92rem;
}

/* --- 10. Adattamento mobile -------------------------------- */
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .hero__content .sottotitolo { font-size: 1.1rem; }
}