/* =============================================================================
   PROBAR - REGISTRAZIONE IMMERSIVA v2 ("La Serratura")
   -----------------------------------------------------------------------------
   Percorso: [child]/css/registrati-immersivo.css
   Caricato SOLO sul template "Registrazione Immersiva" (vedi functions.php).

   PRINCIPI
   1. LA PROFONDITA', NON LA LARGHEZZA. I layer stanno tutti nello stesso
      punto dello schermo, impilati sull'asse Z: lo scroll e' la camera che
      avanza (zoom nella serratura, poi ogni tappa arriva da lontano).
      Niente binari orizzontali: nessun elemento supera mai i 100vw.
      (La v1 a binario allargava i wrapper flessibili di Astra a N x 100vw
      spingendo tutta la scena fuori dallo schermo - da qui la riscrittura.)
   2. IL MOVIMENTO LO GUIDA GSAP. Qui solo scena, posizioni e aspetto;
      le trasformazioni allo scroll vivono nel JS.
   3. DEGRADO ELEGANTE. Senza GSAP / su mobile / con "riduci animazioni",
      la classe .pbr-static impila i layer in verticale: tutto visibile.
   4. STESSA CASA. Nero, oro, Playfair.
   ============================================================================= */

:root {
  --pbr-gold: #FFCE53;
  --pbr-gold-line: rgba(255, 206, 83, 0.18);
  --pbr-gold-hover: rgba(255, 206, 83, 0.75);
  --pbr-panel: #0a0a0a;
  --pbr-field: #0f0f0f;
  --pbr-line: rgba(255, 255, 255, 0.10);
  --pbr-text: #ffffff;
  --pbr-muted: rgba(255, 255, 255, 0.55);
  --pbr-ease: cubic-bezier(0.16, 1, 0.30, 1);
}

/* ==========================================================================
   1. IMPIANTO GENERALE + BLINDATURA DEI CONTENITORI ASTRA
   -------------------------------------------------------------------------
   I wrapper di Astra (#content, .ast-container, #primary...) possono
   essere flessibili e assecondare la larghezza dei figli. Qui vengono
   inchiodati al 100%: qualunque cosa accada dentro, la colonna della
   pagina resta larga quanto lo schermo.
   ========================================================================== */
/* Niente background sul body: lo sfondo resta quello del tema (il raso
   nero di Astra), come nel resto del sito. I neri pieni della scena
   vivono DENTRO le sezioni dell'esperienza, non sulla pagina. */
body.page-template-page-registrati-immersivo {
  overflow-x: hidden;
}

/* ATTENZIONE ALLA SCOPE: .ast-container esiste anche NELL'HEADER di
   Astra (e' il wrapper che centra menu e icone). La blindatura vale solo
   per i contenitori del CONTENUTO (#content in giu'), mai per l'header:
   una versione precedente di questa regola lo colpiva e scentrava
   megamenu e icona account. */
body.page-template-page-registrati-immersivo #content,
body.page-template-page-registrati-immersivo #content .ast-container,
body.page-template-page-registrati-immersivo #primary,
body.page-template-page-registrati-immersivo .site-main,
body.page-template-page-registrati-immersivo .ast-article-single,
body.page-template-page-registrati-immersivo .entry-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-template-page-registrati-immersivo .entry-header {
  display: none !important;
}

/* Nessun fondo proprio: tra una sezione e l'altra respira lo sfondo del
   tema. I neri di scena stanno su .pbr-zoom e sui layer, che ne hanno
   bisogno (la porta DEVE essere opaca per coprire le tappe dietro). */
.pbr-experience {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--pbr-text);
}

/* --- Tipografia condivisa --- */
.pbr-kicker {
  margin: 0 0 14px;
  color: var(--pbr-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.pbr-title {
  margin: 0 0 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--pbr-text);
}

.pbr-title--xl { font-size: clamp(2.4rem, 6vw, 4.4rem); }

.pbr-body {
  margin: 0 auto 10px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.75;
}

.pbr-extra {
  margin: 14px 0 0;
  color: var(--pbr-muted);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   2. LA SCENA DELLO ZOOM
   -------------------------------------------------------------------------
   .pbr-zoom viene pinnata da ScrollTrigger (100vh). I layer sono tutti
   position:absolute sullo stesso rettangolo; l'ordine di impilamento fa
   parte della regia: la porta sta SOPRA e, essendo su fondo nero pieno,
   copre i layer retrostanti finche' lo zoom non la attraversa.
   ========================================================================== */
.pbr-zoom {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.pbr-layer {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  will-change: transform, opacity;
}

/* Il contenitore delle tappe: su desktop occupa la scena intera (i layer
   dentro sono impilati sull'asse Z); su mobile diventa il carosello. */
.pbr-steps {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* La porta sopra tutti; i layer-tappa sotto, nell'ordine del DOM */
.pbr-layer--door { z-index: 5; background: #000; }
.pbr-layer--step { position: absolute; inset: 0; padding: 80px 6vw 40px; }

/* Le tappe 4-6 (confronto e ultimo passo) fanno parte del viaggio in
   entrambe le modalita'; solo nel fallback statico restano spente perche'
   duplicano la sezione di conversione qui sotto. */

/* --- Layer 1: la porta ---
   Colonna di lettura: occhiello, titolo, descrizione, invito, e sotto la
   porta PER INTERO. Il testo sta sempre sul nero, mai sopra il legno. */
.pbr-layer--door {
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(22px, 3.5vh, 44px) 5vw clamp(14px, 2.5vh, 30px);
  gap: clamp(8px, 1.4vh, 16px);
}

.pbr-door-copy {
  width: min(720px, 92vw);
}

.pbr-door-copy .pbr-body { margin-bottom: 0; }

/* Il palco della porta: prende TUTTO lo spazio che resta sotto i testi
   (flex: 1), su qualunque schermo. La porta ci si adatta dentro. */
.pbr-door-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  /* Il centro dello zoom = la serratura. Le variabili arrivano dal
     template (coordinate percentuali DENTRO l'immagine; l'immagine
     riempie in altezza il palco e sta centrata, quindi le percentuali
     del palco coincidono con quelle dell'immagine). */
  transform-origin: var(--pbr-hole-x, 50%) var(--pbr-hole-y, 37%);
  will-change: transform, opacity;
}

/* LA PORTA E' SEMPRE INTERA, SU QUALUNQUE SCHERMO: riempie in altezza lo
   spazio che i testi le lasciano, mai un pixel oltre. Gli !important
   servono a vincere le regole generiche di Astra sulle immagini
   (width: 100% dentro entry-content), che la ingrandivano a dismisura. */
.pbr-door-img {
  display: block;
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 92vw !important;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.8));
}

/* Invito: sta TRA la descrizione e la porta, nel flusso di lettura */
.pbr-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--pbr-muted);
}

.pbr-scroll-hint__text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* Il testo dell'invito cambia con il gesto: scroll su desktop, tocco su
   mobile (dove il varco si apre toccando la porta) */
.pbr-scroll-hint__text--mobile { display: none; }

@media (max-width: 921px) {
  .pbr-scroll-hint__text--desktop { display: none; }
  .pbr-scroll-hint__text--mobile { display: inline; }
}

.pbr-scroll-hint__chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--pbr-gold);
  border-bottom: 2px solid var(--pbr-gold);
  transform: rotate(45deg);
  animation: pbr-chevron-dip 1.8s var(--pbr-ease) infinite;
}

@keyframes pbr-chevron-dip {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
  50%      { transform: rotate(45deg) translate(6px, 6px); opacity: 0.35; }
}

/* --- Il buio del passaggio: copre lo schermo nell'attimo in cui la
   camera attraversa la serratura, poi si riapre sul layer successivo. --- */
.pbr-vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* --- Layer tappa (LIBERTY, Club, Monete, Confronto, Ultimo passo) ---
   Contenuti GRANDI: il viaggio si guarda da lontano, non si legge in
   corpo 15. Titoli, testi e immagini sono ~50% piu' generosi. */
.pbr-layer__inner {
  width: min(920px, 94vw);
}

.pbr-layer--step .pbr-kicker {
  font-size: 14px;
  letter-spacing: 3.5px;
}

.pbr-layer--step .pbr-title {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
}

.pbr-layer--step .pbr-body {
  max-width: 720px;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.7;
}

.pbr-layer--step .pbr-extra {
  font-size: 16px;
}

/* Il prezzo in offerta dentro la tappa LIBERTY */
.pbr-extra--price del {
  color: var(--pbr-muted);
  margin-right: 6px;
}

.pbr-extra--price strong {
  color: var(--pbr-gold);
  font-style: normal;
  font-size: 1.25em;
}

.pbr-layer__media { margin: 0 auto 30px; }

.pbr-layer__media img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Il logo LIBERTY ha fondo argento pieno: vive in una card ritagliata,
   non appoggiato nudo sul nero */
.pbr-layer__media--card img {
  width: min(470px, 74vw);
  border-radius: 16px;
  border: 1px solid var(--pbr-gold-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 206, 83, 0.10);
}

/* La moneta singola del club */
.pbr-layer__media--coin img {
  height: min(42vh, 380px);
  width: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 206, 83, 0.18));
}

/* Il gruppo di monete + contatore */
.pbr-layer__media--coins { position: relative; }

.pbr-layer__media--coins img {
  height: min(38vh, 350px);
  width: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 206, 83, 0.18));
}

/* --- Le card del confronto (tappe "Senza/Con LIBERTY") ---
   Stessa veste del cartellino prezzo: una riga per vantaggio. */
.pbr-plan-list {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 30px;
  text-align: left;
  background: var(--pbr-panel);
  border: 1px solid var(--pbr-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.pbr-plan-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pbr-line);
  font-size: clamp(14px, 1.5vw, 17px);
}

.pbr-plan-list li:last-child { border-bottom: none; }

.pbr-plan-list li span { color: var(--pbr-muted); }

.pbr-plan-list li strong {
  color: var(--pbr-text);
  font-weight: 600;
  text-align: right;
}

.pbr-plan-list--gold {
  border-color: rgba(255, 206, 83, 0.35);
  background:
    linear-gradient(160deg, rgba(255, 206, 83, 0.07), rgba(255, 206, 83, 0.015) 55%),
    var(--pbr-panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 206, 83, 0.07);
}

.pbr-plan-list--gold li strong { color: var(--pbr-gold); }

.pbr-coin-counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.pbr-coin-counter__value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 700;
  color: var(--pbr-gold);
  line-height: 1;
  text-shadow: 0 0 34px rgba(255, 206, 83, 0.35);
  font-variant-numeric: tabular-nums;
}

.pbr-coin-counter__label {
  color: var(--pbr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* --- Puntini di avanzamento --- */
.pbr-progress {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 7;
}

.pbr-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.3s var(--pbr-ease), transform 0.3s var(--pbr-ease);
}

.pbr-progress__dot.is-active {
  background: var(--pbr-gold);
  transform: scale(1.3);
}

/* ==========================================================================
   2b. MODALITA' MOBILE (html.pbr-mobile, aggiunta dal JS)
   -------------------------------------------------------------------------
   Stessa scena d'ingresso del desktop (testi sopra, porta intera sotto),
   ma il varco si apre TOCCANDO la porta: parte lo zoom nella serratura e
   si atterra su un carosello a scorrimento orizzontale (scroll-snap CSS):
   LIBERTY -> monete del club -> contatore -> adesione.
   ========================================================================== */
.pbr-mobile .pbr-door-wrap { cursor: pointer; }

/* Prima del tocco: solo la porta; niente tappe, niente puntini */
.pbr-mobile .pbr-steps { display: none; }
.pbr-mobile .pbr-progress { display: none; }

/* Su mobile la pagina FINISCE con la porta: la sezione di conversione
   sotto non esiste (i suoi contenuti vivono nelle tappe 4-6 del
   carosello). Solo in modalita' mobile attiva, mai nel fallback statico. */
.pbr-mobile .pbr-final { display: none; }

/* Dopo il varco (html.pbr-entered): via la porta, dentro il carosello.
   Lo scorrimento NON e' nativo: overflow bloccato, e' il JS a spostare
   il binario di UNA slide per gesto (niente snap capriccosi, niente
   doppi swipe). */
.pbr-mobile.pbr-entered .pbr-layer--door { display: none; }

.pbr-mobile.pbr-entered .pbr-steps {
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.pbr-mobile.pbr-entered .pbr-layer--step {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  width: 100%;
  overflow-y: auto;
  padding: 56px 7vw 64px;
  /* qualunque residuo di trasformazione/opacita' non deve nascondere
     una slide del carosello */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.pbr-mobile.pbr-entered .pbr-progress { display: flex; }

/* Il link "registrati gratis" nella slide finale */
.pbr-join-free {
  color: var(--pbr-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 206, 83, 0.4);
}

/* Il cartellino prezzo dentro la slide: piu' compatto */
.pbr-price--slide {
  max-width: 300px;
  margin: 18px auto 22px;
  padding: 20px 24px 16px;
}

/* ==========================================================================
   3. SEZIONE FINALE - LA CONVERSIONE (scroll classico)
   ========================================================================== */
/* Sfondo trasparente: la sezione di conversione poggia sul raso del
   tema, esattamente come la pagina Carrello - le card scure fanno da
   contrasto da sole. */
.pbr-final {
  position: relative;
  padding: 90px 6vw 100px;
}

.pbr-final__inner {
  max-width: 920px;
  margin: 0 auto;
}

.pbr-final__head {
  text-align: center;
  margin-bottom: 40px;
}

/* --- Tabella comparativa Standard / LIBERTY ---
   Stessa veste del cartellino prezzo: bordo dorato, velo caldo, bagliore.
   Tabella e prezzo sono un'unica famiglia visiva. */
.pbr-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 36px;
  border: 1px solid rgba(255, 206, 83, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(255, 206, 83, 0.07), rgba(255, 206, 83, 0.015) 55%),
    var(--pbr-panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 206, 83, 0.07);
}

/* Gli !important qui sotto disinnescano gli stili generici che Astra
   applica a OGNI tabella dentro il contenuto (bordi di colonna, sfondi
   alternati sulle righe, margini): erano loro a sporcare la tabella su
   desktop sovrapponendosi ai nostri. Resta solo la nostra veste dorata. */
.pbr-compare {
  width: 100%;
  min-width: 560px;
  margin: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  background: none !important;
  font-size: 14px;
}

.pbr-compare tr {
  background: none !important;
}

.pbr-compare th,
.pbr-compare td {
  padding: 16px 18px !important;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid var(--pbr-line) !important;
  background: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.pbr-compare thead th {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px !important;
  color: var(--pbr-text) !important;
  border-bottom: 1px solid rgba(255, 206, 83, 0.35) !important;
}

.pbr-compare tbody tr:last-child th,
.pbr-compare tbody tr:last-child td { border-bottom: none !important; }

.pbr-compare .pbr-compare__gold { color: var(--pbr-gold) !important; }
.pbr-compare thead .pbr-compare__gold { font-weight: 700; }

/* --- Il cartellino del prezzo LIBERTY ---
   L'unica cifra della pagina: grande, dorata, senza asterischi nascosti.
   Una card stretta e centrata, con la stessa grammatica delle altre card
   del sito (bordo dorato tenue, angoli morbidi, fondo panel). */
.pbr-price {
  max-width: 360px;
  margin: 0 auto 26px;
  padding: 26px 30px 22px;
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255, 206, 83, 0.07), rgba(255, 206, 83, 0.015) 55%),
    var(--pbr-panel);
  border: 1px solid rgba(255, 206, 83, 0.35);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 206, 83, 0.07);
}

.pbr-price__name {
  margin: 0 0 10px;
  color: var(--pbr-gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.pbr-price__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0;
  line-height: 1;
}

.pbr-price__amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.8rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--pbr-text);
  font-variant-numeric: tabular-nums;
}

.pbr-price__currency {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pbr-gold);
}

.pbr-price__period {
  color: var(--pbr-muted);
  font-size: 14px;
}

/* Il listino barrato accanto al prezzo lancio */
.pbr-price__full {
  color: var(--pbr-muted);
  font-size: 1.15rem;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  margin-right: 4px;
}

.pbr-price__vat {
  margin: 8px 0 0;
  color: var(--pbr-muted);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.pbr-price__promo {
  margin: 10px 0 0;
  color: var(--pbr-gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pbr-price__note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--pbr-line);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.6;
}

/* --- CTA LIBERTY --- */
.pbr-final__cta {
  text-align: center;
  margin-bottom: 50px;
}

.pbr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 34px;
  border-radius: 12px;
  background: var(--pbr-gold);
  color: #111 !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform 0.4s var(--pbr-ease), box-shadow 0.4s var(--pbr-ease), background-color 0.3s ease;
}

.pbr-cta:hover {
  background: #ffd977;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 206, 83, 0.2);
}

/* --- Il form innestato (WooCommerce o membership) --- */
.pbr-form-embed {
  max-width: 640px;
  margin: 0 auto;
  padding: 30px 28px;
  background: var(--pbr-panel);
  border: 1px solid var(--pbr-line);
  border-radius: 16px;
}

.pbr-form-embed h2 {
  margin: 0 0 20px;
  color: var(--pbr-text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pbr-form-embed form .form-row { margin: 0 0 16px; padding: 0; }

.pbr-form-embed form label {
  display: block;
  margin: 0 0 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.pbr-form-embed form input.input-text,
.pbr-form-embed form input[type="text"],
.pbr-form-embed form input[type="email"],
.pbr-form-embed form input[type="password"] {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  box-sizing: border-box;
  background: var(--pbr-field);
  border: 1px solid var(--pbr-line);
  border-radius: 10px;
  color: var(--pbr-text);
  font-size: 16px;
  transition: border-color 0.35s var(--pbr-ease), box-shadow 0.35s var(--pbr-ease);
}

.pbr-form-embed form input:focus {
  outline: none;
  border-color: var(--pbr-gold-hover);
  box-shadow: 0 0 0 3px rgba(255, 206, 83, 0.12);
}

.pbr-form-embed form .button {
  width: 100%;
  min-height: 50px;
  padding: 13px 28px;
  background: var(--pbr-gold) !important;
  border: none;
  border-radius: 10px;
  color: #111 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.pbr-form-embed .woocommerce-privacy-policy-text {
  margin-top: 14px;
  color: var(--pbr-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Colonne login/registrati dello shortcode Woo: impilate, senza cornici
   (stesse regole anti-clearfix del fix in account-ui.css) */
.pbr-form-embed #customer_login.u-columns { display: block; border: none; }
.pbr-form-embed #customer_login.u-columns::before,
.pbr-form-embed #customer_login.u-columns::after { content: none !important; }
.pbr-form-embed #customer_login .u-column1.col-1,
.pbr-form-embed #customer_login .u-column2.col-2 {
  float: none !important;
  width: 100% !important;
  padding: 0 0 26px !important;
  border: none !important;
  background: none !important;
}

.pbr-already-in { color: rgba(255, 255, 255, 0.82); font-size: 15px; margin: 0; }
.pbr-already-in a { color: var(--pbr-gold); }

/* ==========================================================================
   4. FALLBACK STATICO (.pbr-static sull'<html>)
   -------------------------------------------------------------------------
   Lo aggiunge il JS su mobile, con "riduci animazioni", o senza GSAP.
   La scena si srotola in verticale: porta (ferma), poi le tappe una
   sotto l'altra, poi la conversione. Nessun contenuto dipende dal JS.
   ========================================================================== */
.pbr-static .pbr-zoom {
  height: auto;
  overflow: visible;
}

.pbr-static .pbr-layer,
.pbr-static .pbr-steps {
  position: static;
  will-change: auto;
}

.pbr-static .pbr-layer--door {
  padding-bottom: 40px;
}

.pbr-static .pbr-scroll-hint { display: none; }

.pbr-static .pbr-layer--step {
  padding: 60px 6vw;
}

/* Le tappe 4-6 restano spente in statico: duplicano tabella, prezzo e
   CTA della sezione di conversione qui sotto */
.pbr-static .pbr-layer--dup { display: none; }

.pbr-static .pbr-vignette,
.pbr-static .pbr-progress { display: none; }

/* Entrata dolce in verticale (IntersectionObserver nel JS aggiunge
   .is-inview; la classe .pbr-io "arma" i nascondimenti, cosi' senza
   observer non si nasconde mai nulla) */
.pbr-static .pbr-layer__inner {
  transition: opacity 0.8s var(--pbr-ease), translate 0.8s var(--pbr-ease);
}

.pbr-static.pbr-io .pbr-layer--step .pbr-layer__inner { opacity: 0; translate: 0 34px; }
.pbr-static.pbr-io .pbr-layer--step.is-inview .pbr-layer__inner { opacity: 1; translate: 0 0; }

/* ==========================================================================
   5. RESPONSIVE E ACCESSIBILITA'
   ========================================================================== */
@media (max-width: 640px) {
  .pbr-final { padding: 60px 5vw 70px; }
  .pbr-form-embed { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pbr-scroll-hint__chevron { animation: none; }
}

.pbr-cta:focus-visible {
  outline: 2px solid var(--pbr-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   CAROSELLO MOBILE: le tappe si alzano
   --------------------------------------------------------------------------
   I contenuti delle slide (Account Standard, Account LIBERTY, Prendi
   posto...) stavano centrati con un vuoto nero sopra: ora si accostano
   alla barra di ricerca, con un respiro minimo.
   ========================================================================== */
.pbr-mobile.pbr-entered .pbr-layer--step {
  justify-content: flex-start !important;
  padding-top: 18px !important;
}

.pbr-mobile.pbr-entered .pbr-layer--step .pbr-layer__inner {
  margin-top: 0;
}