/* ============================================================
   HOWAR MIRROR — pagine auth (login / forgot / imposta password)
   Modellate sulla login di ecosystem: card a due colonne, sfondo navy
   con accenti verde HOWAR, pannello brandizzato + form.
   ============================================================ */
:root {
  --primary: #57A035; --primary-dark: #468729;
  --white: #fff; --light-gray: #E9ECF3; --gray: #6E7A8A; --dark-gray: #2E3A59;
  --radius: 8px; --shadow-lg: 0 10px 25px rgba(0,0,0,.15);
}
* { box-sizing: border-box; }
body.mirror-authpage {
  margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #223B57;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(87,160,53,.20), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(87,160,53,.10), transparent 52%);
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-container { width: 100%; max-width: 880px; }
.login-card {
  display: flex; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--white);
  /* 660px, identico alla login professionale: i due riquadri devono avere la
     stessa misura. Il valore sta sopra l'altezza naturale di entrambe (che
     differiscono di ~50px perché il sottotitolo business va su due righe), così
     nessuna delle due "cresce" oltre l'altra. */
  min-height: 660px; border-top: 4px solid var(--primary);
}
/* Pannello brandizzato (sinistra).
   Velo VERDE: stesso impianto della login professionale (ecosystem/login.php),
   che pero' ha il velo navy. Il colore e' il segno che distingue le due aree a
   colpo d'occhio, prima ancora di leggere: verde = area personale. */
.login-image {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  color: #fff; padding: 32px;
  background: linear-gradient(160deg, rgba(70,135,41,.88), rgba(45,95,28,.94)), url('../images/login-bg.jpg') center/cover;
}
.login-image-content { position: relative; z-index: 2; text-align: center; max-width: 300px; }

/* Nome dell'area, NON del singolo test: qui dentro arriveranno altri test
   personali oltre a MIRROR, e questa pagina non deve piu' essere toccata. */
.area-label {
  font-size: 15px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #eaf6e3; margin-bottom: 14px;
}
.brand-tag { margin: 14px auto 26px; font-size: 15px; line-height: 1.55; color: #eaf6e3; max-width: 270px; }
.security-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 10px 18px; border-radius: 50px; backdrop-filter: blur(8px);
  font-weight: 600; font-size: 14px;
}
/* form (destra) */
.login-form-container { flex: 1; display: flex; flex-direction: column; padding: 32px; }  /* 32px come la login professionale */
.login-header { text-align: center; margin-bottom: 26px; }
.login-logo-img { max-width: 140px; height: auto; }
.login-form-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 340px; margin: 0 auto; width: 100%; }
.login-title { font-size: 25px; font-weight: 700; margin: 0 0 6px; color: var(--dark-gray); text-align: center; }
.login-subtitle { font-size: 13px; color: var(--gray); text-align: center; margin: 0 0 24px; }
.login-alert { padding: 12px 15px; border-radius: var(--radius); margin-bottom: 16px; font-size: 12.5px; font-weight: 500; }
.login-alert.danger { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.login-alert.info { background: #cfe2ff; color: #084298; border: 1px solid #b6d4fe; }
.login-alert.success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--dark-gray); font-size: 12px; }
.form-control {
  width: 100%; padding: 12px 15px; font-size: 14px; color: var(--dark-gray);
  border: 2px solid var(--light-gray); border-radius: var(--radius); background: #fff; transition: all .2s ease;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(87,160,53,.12); }
.btn-login {
  width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: var(--radius);
  color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); transition: all .2s ease;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(87,160,53,.28); }
.form-links { text-align: center; margin-top: 16px; }
.link-forgot {
  display: inline-block; color: #2D4B9A; font-size: 12.5px; font-weight: 500; text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius); background: rgba(45,75,154,.08); border: 1px solid rgba(45,75,154,.15);
}
.link-forgot:hover { color: var(--primary); background: rgba(87,160,53,.1); border-color: rgba(87,160,53,.2); }
/* Invito all'acquisto sotto il modulo: e' un rimando secondario, non un'azione.
   Sta piu' in basso di "Password dimenticata?" e pesa meno, ma resta leggibile. */
.link-acquista {
  text-align: center; margin: 14px 0 0; font-size: 12.5px; color: #6b7280;
}
.link-acquista a {
  color: var(--primary); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(87,160,53,.35); padding-bottom: 1px;
}
.link-acquista a:hover { border-bottom-color: var(--primary); }

.login-footer { margin-top: auto; text-align: center; padding-top: 18px; }
/* Copyright: stessa resa della login professionale (10px, grigio). */
.login-footer p { font-size: 10px; color: var(--gray); margin: 0; }
.security-info { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 11px; font-weight: 600; padding: 5px 12px; background: rgba(87,160,53,.1); border-radius: 20px; }

@media (max-width: 768px) {
  .login-card { flex-direction: column; }
  .login-image { min-height: 150px; padding: 22px; }
  .brand-badge { font-size: 24px; } .brand-tag { display: none; }
  .login-form-container { padding: 26px 18px; }
}

/* ============================================================
   Acquista — HERO brand in cima + card form centrata (no due colonne)
   ============================================================ */
body.mirror-authpage.acquista-page { align-items: flex-start; padding: 34px 20px 48px; }
.acq-shell { width: 100%; max-width: 620px; margin: 0 auto; }
/* Hero: brand su sfondo navy della pagina (testo bianco).
   Ordine deciso da Eugenio (30/08): logo in cima, nome del test grande da
   titolo, sottotitolo. Le regole stanno sotto .acq-hero per non toccare la
   .brand-badge delle pagine di login, che resta com'e'. */
.acq-hero { text-align: center; color: #fff; padding: 4px 16px 24px; }
.acq-hero .acq-logo { display: block; margin: 2px auto 22px; max-width: 170px; height: auto; }
.acq-hero .brand-badge { font-size: 44px; font-weight: 800; letter-spacing: 1px; }
/* La tagline su UNA riga (Eugenio, 30/08): niente max-width che la spezzi.
   Sotto i 768px il nowrap sborderebbe dallo schermo: li' torna a capo. */
.acq-hero .brand-tag { max-width: none; white-space: nowrap; margin: 12px auto 18px; font-size: 16px; }
@media (max-width: 768px) {
  /* La regola generale qui sopra rimpicciolisce la badge e NASCONDE la tagline
     su mobile: su questa pagina la tagline e' la spiegazione del prodotto e
     deve restare. */
  .acq-hero .brand-badge { font-size: 30px; }
  .acq-hero .brand-tag { display: block; white-space: normal; max-width: 460px; }
}
/* Card bianca col form */
.acq-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--primary); padding: 28px 36px 34px; }
/* Cliente di ritorno e intestazione dei dati: PRIMA del modulo (30/08). */
.acq-card .acq-login-top { text-align: center; font-size: 13.5px; color: var(--gray); margin: 2px 0 16px; width: 100%; display: block; }
.acq-login-top a { color: var(--primary); font-weight: 600; text-decoration: none; }
.acq-login-top a:hover { text-decoration: underline; }
.acq-sez { font-size: 16px; font-weight: 700; color: var(--dark-gray); margin: 0 0 10px; }
/* I tre passi dopo il pagamento: stessi cerchi verdi numerati delle schermate
   di esito del checkout professionale (ecosystem, .ckb-passi). */
.acq-passi { text-align: left; max-width: 440px; margin: 18px auto 6px; padding: 0; list-style: none; counter-reset: passo; }
.acq-passi li { position: relative; padding: 9px 0 9px 42px; counter-increment: passo; color: var(--dark-gray); font-size: 14px; line-height: 1.55; }
.acq-passi li::before { content: counter(passo); position: absolute; left: 0; top: 9px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.acq-card .login-header { text-align: center; margin-bottom: 14px; }
.acq-card .login-title { text-align: center; }
.acq-card .login-subtitle { margin-bottom: 22px; }
.acq-card .form-row { display: flex; gap: 12px; }
.acq-card .form-row .form-group { flex: 1; margin-bottom: 18px; }
.acq-card .pay-fieldset { border: 2px solid var(--light-gray); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 16px; }
.acq-card .pay-fieldset legend { font-size: 12px; font-weight: 600; color: var(--dark-gray); padding: 0 6px; }
.acq-card .pay-opt { display: inline-flex; align-items: center; gap: 6px; margin-right: 20px; font-size: 13.5px; color: var(--dark-gray); }
.acq-card .legal-consents { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 9px; }
/* La label NON dev'essere un contenitore flex: in flex ogni tratto di testo e ogni
   <b> diventa un elemento a se', e la frase si spezza in colonne. Si vedeva bene
   sul consenso all'avvio immediato, che di grassetti ne ha quattro.
   La casella si toglie dal flusso e si appoggia nel margine sinistro: il testo
   torna a scorrere normalmente, con grassetti e collegamenti al posto giusto. */
.acq-card .legal-consents label {
  font-size: 12px; line-height: 1.5; color: #4b5563;
  display: block; position: relative; padding-left: 24px;
}
.acq-card .legal-consents input {
  width: auto; position: absolute; left: 0; top: 2px; margin: 0;
}
.acq-card .legal-consents a { color: #2D4B9A; }
/* Riquadro legale del checkout (01/09): la riga di accettazione col bottone e
   la casella unica stanno in UN blocco visivo, con l'elenco degli articoli in
   tono minore: il testo resta tutto (e' cio' che si approva), ma la gerarchia
   visiva dice subito cosa e' la frase e cosa e' il dettaglio. */
.acq-card .acq-legal { background: #f7f9fb; border: 1px solid #e3e8ee; border-radius: 10px;
  padding: 13px 15px; margin: 16px 0 14px; }
.acq-card .acq-legal .acq-clickwrap { font-size: 12.5px; color: var(--gray);
  margin: 0 0 10px; line-height: 1.55; }
.acq-card .acq-legal .legal-consents { margin: 0; }
/* Un unico blocco di testo, corpo piccolo e giustificato (scelta di Eugenio,
   01/09): l'elenco degli articoli scorre in linea con la frase, senza
   stacchi. Lo span .acq-clausole resta nel markup per poterlo ristilizzare,
   ma qui eredita tutto. */
.acq-card .acq-legal .legal-consents label { font-size: 11.5px; color: #4b5563;
  line-height: 1.6; text-align: justify; }
.acq-card .acq-clausole { display: inline; font-size: inherit; color: inherit; margin: 0; }
/* La nota pagamento sta sotto il bottone: centrata, respiro sopra */
.acq-card .acq-pay-note { text-align: center; margin: 10px 0 0; }
/* Cassa in una pagina (10/09/2026): il totale sta subito sopra i pulsanti di
   PayPal, dove si decide. Lo dice gia' la pillola in cima, ma a fine modulo
   quella e' due schermate piu' su. */
.acq-card .acq-totale { text-align: center; font-size: 15px; color: #2E3A59; margin: 18px 0 12px; }
.acq-card #paypal-button-container { min-height: 48px; }
.acq-card #pp-errore, .acq-card #pp-assente { margin-top: 12px; }
.acq-card .acq-login-link { text-align: center; margin: 14px 0 0; font-size: 12.5px; }
.acq-card .acq-login-link a { color: #2D4B9A; text-decoration: none; }
/* FAQ dentro la card: senza doppio bordo/box */
.acq-card .wiz-faq { border: 0; padding: 0; margin-top: 22px; border-top: 1px solid var(--light-gray); padding-top: 18px; }
@media (max-width: 560px) {
  .acq-card { padding: 22px 18px 26px; }
  .acq-card .form-row { flex-direction: column; gap: 0; }
}

/* Acquista — toggle privato/azienda + campi obbligatori */
.acq-req-note { font-size: 12.5px; color: var(--gray); margin: 0 0 14px; }
.req { color: #d03b3b; font-weight: 700; }
.acq-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
.acq-toggle label { flex: 1; text-align: center; padding: 10px 8px; border: 2px solid var(--light-gray);
  border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dark-gray); transition: all .15s ease; }
.acq-toggle label.on { border-color: var(--primary); background: rgba(87,160,53,.08); color: var(--primary-dark); }
.acq-toggle label input { display: none; }
/* Le due scelte al centro anche quando una va a capo e l'altra no: al
   telefono «Azienda / Partita IVA» occupa due righe e «Privato» restava
   in alto (16/09/2026). */
.acq-toggle label { display: flex; align-items: center; justify-content: center; line-height: 1.3; }
.tipo-box[hidden] { display: none; }
.acq-hint { font-size: 11.5px; color: var(--gray); margin: 2px 0 8px; }

/* Acquista — casella "Voglio la fattura" (il privato la fattura la CHIEDE:
   regime dei corrispettivi, la richiesta vale solo prima del pagamento) */
.acq-fatt-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--dark-gray); padding: 10px 12px; border: 2px solid var(--light-gray);
  border-radius: var(--radius); cursor: pointer; margin-bottom: 4px; }
.acq-fatt-chk input { accent-color: var(--primary); width: 16px; height: 16px; flex: none; }
/* Il testo in un solo blocco: senza lo span, «Voglio la», «fattura» e «per
   questo acquisto» erano tre elementi della riga flessibile e al telefono
   andavano in tre colonne (16/09/2026). */
.acq-fatt-chk > span { flex: 1; min-width: 0; }

/* Acquista — pill "prezzo di lancio" (sottile, centrato) */
.acq-launch { text-align: center; margin: 2px 0 20px; }
.acq-launch-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600;
  color: #8a6d00; background: #fff8e1; border: 1px solid #f3e0a0; border-radius: 999px; padding: 10px 22px; }
.acq-launch-pill strong { color: #6a4e00; font-size: 16px; }

/* Acquista — nota metodo di pagamento (bonifico rimosso) */
.acq-pay-note { font-size: 12.5px; color: var(--gray); margin: 2px 0 16px; }

/* Credenziali giuste, ma di un account professionale: non e' un errore e non e'
   un semplice avviso — e' un bivio, e ha bisogno di spazio per il pulsante che
   porta dall'altra parte. */
.login-alert.warning { background:#fff8e1; color:#7a5b00; border:1px solid #ffe08a; }
.login-altrove { text-align:left; font-size:13px; line-height:1.55; }
.login-altrove p { margin:0 0 12px; }
.login-altrove .btn-login { display:block; width:100%; text-align:center; text-decoration:none; }
.login-altrove-nota { margin:10px 0 0; font-size:12px; opacity:.85; }