/* =============================================================================
   ACCESSO, REGISTRAZIONE E RECUPERO PASSWORD (moduli ProfilePress)
   File: wp-content/themes/astra-child/accesso.css
   Caricato solo nelle pagine che contengono un modulo ProfilePress.
   ProfilePress scrive i suoi stili dentro la pagina con selettori molto
   specifici: per questo qui servono molti !important.

   COLORI: si cambiano tutti nelle righe ":root" qui sotto
     --acc-blu (titoli, intestazione)  --acc-arancio (pulsante)
     --acc-testo (testo)  --acc-grigio (descrizioni sotto i campi)
   ============================================================================= */
:root {
  --acc-blu: #1a1a5e;
  --acc-arancio: #f28c00;
  --acc-arancio-chiaro: #fff3e0;
  --acc-testo: #1c1f29;
  --acc-grigio: #3d4350;
  --acc-bordo: #ccd3e0;
}

/* ---------- Scheda ---------- */
/* "#content" serve a battere la larghezza che ProfilePress imposta con l'ID del modulo */
#content .pp-form-container {
  max-width: 460px !important;
  width: 100% !important;
  margin: 28px auto 40px !important;
  padding: 0 !important;
}
#content .pp-form-container.pp-registration-form-wrapper { max-width: 540px !important; }
#content .pp-form-container,
#content .pp-form-container .ppBuildScratch,
#content .pp-form-container .ppBuildScratch * {
  font-family: inherit !important;
  box-sizing: border-box;
}
#content .pp-form-container .pp-form-wrapper.ppBuildScratch {
  background: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 40px rgba(26,26,94,.15) !important;
  overflow: hidden;
  padding: 0 24px 24px !important;
  color: var(--acc-testo) !important;
  font-size: 18px !important;
}

/* intestazione blu con sottotitolo */
#content .pp-form-container .ppBuildScratch .ppbs-headline {
  background: var(--acc-blu) !important;
  color: #fff !important;
  margin: 0 -24px 22px !important;
  padding: 22px 24px 18px !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  border: 0 !important;
}
#content .pp-form-container .ppbs-headline::after {
  display: block; margin-top: 4px;
  font-size: 18px; font-weight: 400; opacity: .8; line-height: 1.3;
}
#content .pp-login-form-wrap .ppbs-headline::after        { content: "Entra nella tua area personale"; }
#content .pp-registration-form-wrapper .ppbs-headline::after { content: "Podisti, camminatori e società"; }
#content .pp-password-reset-wrap .ppbs-headline::after    { content: "Ti inviamo per email il link per sceglierne una nuova"; }

/* ---------- Campi ---------- */
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap { margin: 0 0 16px !important; padding: 0 !important; }
#content .pp-form-container .ppBuildScratch .pp-form-label,
#content .pp-form-container .ppBuildScratch .pp-form-label-wrap label {
  display: block; margin: 0 0 5px !important;
  color: var(--acc-blu) !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.2 !important;
}
#content .pp-form-container .ppBuildScratch .pp-form-required-label { color: var(--acc-arancio) !important; }

#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input[type="text"],
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input[type="email"],
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input[type="password"],
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input[type="tel"],
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input[type="date"],
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap select,
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap textarea {
  width: 100% !important; height: 52px !important; margin: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid var(--acc-bordo) !important; border-radius: 12px !important;
  background: #fff !important; color: var(--acc-testo) !important;
  font-size: 19px !important; line-height: 1.2 !important; box-shadow: none !important;
}
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap textarea { height: auto !important; min-height: 100px; }
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input:focus,
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap select:focus,
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap textarea:focus {
  border-color: var(--acc-arancio) !important;
  box-shadow: 0 0 0 3px rgba(242,140,0,.2) !important; outline: 0 !important;
}
#content .pp-form-container .ppBuildScratch .pp-form-field-wrap input::placeholder { color: #7a808c !important; opacity: 1; }
/* le icone dentro i campi non servono */
#content .pp-form-container .pp-form-material-icons { display: none !important; }
#content .pp-form-container .field-has-icon input { padding-left: 16px !important; padding-right: 16px !important; }

#content .pp-form-container .ppBuildScratch .pp-form-field-description {
  margin: 5px 2px 0 !important; color: var(--acc-grigio) !important;
  font-size: 16px !important; font-style: normal !important; line-height: 1.3 !important;
}

/* ricordami */
#content .pp-form-container .ppform-remember-me label { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; margin: 0 !important; }
#content .pp-form-container .ppform-remember-me input[type="checkbox"] { width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: var(--acc-blu); }
#content .pp-form-container .ppform-remember-label { font-size: 18px !important; color: var(--acc-testo) !important; }

/* indicatore sicurezza password */
#content .pp-form-container #pp-pass-strength-result {
  display: block !important; height: auto !important; margin: -6px 0 0 !important;
  padding: 6px 14px !important; border: 0 !important; border-radius: 999px !important;
  background: #eef0f5 !important; color: var(--acc-grigio) !important;
  font-size: 16px !important; text-align: center !important; line-height: 1.3 !important;
}
#content .pp-form-container #pp-pass-strength-result.short,
#content .pp-form-container #pp-pass-strength-result.bad    { background: #fdeaea !important; color: #c62828 !important; }
#content .pp-form-container #pp-pass-strength-result.good   { background: #fff6dc !important; color: #8a5a00 !important; }
#content .pp-form-container #pp-pass-strength-result.strong { background: #e6f6ec !important; color: #1e9e4a !important; }

/* reCAPTCHA al centro */
#content .pp-form-container #pp_recaptcha_container { display: flex; justify-content: center; margin: 4px 0 16px; }

/* ---------- Pulsante ---------- */
#content .pp-form-container .ppBuildScratch .pp-form-submit-button-wrap { margin: 6px 0 0 !important; padding: 0 !important; }
#content .pp-form-container .ppBuildScratch input.pp-submit-form,
#content .pp-form-container .ppBuildScratch .ppform-submit-button {
  display: block !important; width: 100% !important; height: 54px !important; margin: 0 !important;
  position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  padding: 0 24px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--acc-arancio) !important; color: #fff !important;
  font-size: 22px !important; font-weight: 400 !important; letter-spacing: .02em; line-height: 1 !important;
  cursor: pointer; box-shadow: 0 4px 14px rgba(242,140,0,.35) !important; transition: background .15s, transform .15s;
}
#content .pp-form-container .ppBuildScratch input.pp-submit-form:hover:not([disabled]) { background: #e07f00 !important; transform: translateY(-1px); }
#content .pp-form-container .ppBuildScratch input.pp-submit-form[disabled] { cursor: not-allowed; box-shadow: none !important; }

/* ---------- Link sotto la scheda ---------- */
#content .pp-form-container .ppress-form-bottom-links {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 16px 0 0 !important; padding: 0 !important; background: none !important;
  font-size: 0 !important; /* nasconde il separatore "|" */
}
#content .pp-form-container .ppress-form-bottom-links a {
  display: inline-block; font-size: 19px !important; line-height: 1.3;
  padding: 6px 14px !important; margin: 0 !important; border-radius: 999px !important;
  background: rgba(255,255,255,.75) !important; border: 1px solid rgba(26,26,94,.12) !important;
  color: var(--acc-blu) !important; text-decoration: none !important; box-shadow: none !important;
}
#content .pp-form-container .ppress-form-bottom-links a:hover { background: #fff !important; color: var(--acc-arancio) !important; }

/* ---------- Messaggi (errore / conferma) ---------- */
#content .pp-form-container .profilepress-login-status,
#content .pp-form-container .profilepress-reg-status,
#content .pp-form-container .profilepress-reset-status,
#content .pp-form-container .profilepress-edit-profile-status,
#content .pp-form-container .profilepress-myaccount-status {
  margin: 0 0 14px !important; padding: 12px 16px !important; border-radius: 12px !important;
  background: #fdeaea !important; color: #c62828 !important; border: 1px solid #f5c2c2 !important;
  font-size: 18px !important; line-height: 1.35 !important; text-align: left !important;
}
#content .pp-form-container .profilepress-login-status.success,
#content .pp-form-container .profilepress-reg-status.success,
#content .pp-form-container .profilepress-reset-status.success {
  background: #e6f6ec !important; color: #1e9e4a !important; border-color: #bfe5cc !important;
}
#content .pp-form-container [class*="-status"] a { color: inherit !important; text-decoration: underline !important; }

/* ---------- Scelta del tipo di account (registrazione) ---------- */
.gtia-ruoli { display: grid; gap: 8px; }
.gtia-ruolo {
  display: grid !important; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 10px;
  width: 100%; margin: 0 !important; padding: 10px 14px !important; text-align: left;
  background: #fff !important; border: 2px solid #e6e9f0 !important; border-radius: 14px !important;
  color: var(--acc-testo) !important; cursor: pointer; box-shadow: none !important;
  transition: border-color .15s, background .15s;
}
.gtia-ruolo:hover { border-color: var(--acc-arancio) !important; }
.gtia-ruolo .ic { font-size: 26px; text-align: center; line-height: 1; }
.gtia-ruolo b { display: block; font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--acc-blu); }
.gtia-ruolo small { display: block; font-size: 16px; line-height: 1.25; color: var(--acc-grigio); }
.gtia-ruolo .ok {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--acc-bordo);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px;
}
.gtia-ruolo.on { border-color: var(--acc-arancio) !important; background: var(--acc-arancio-chiaro) !important; }
.gtia-ruolo.on .ok { background: var(--acc-arancio); border-color: var(--acc-arancio); }
.gtia-ruolo.on .ok::before { content: "✓"; }
.gtia-ruolo:focus-visible { outline: 3px solid rgba(242,140,0,.4) !important; outline-offset: 2px; }
/* la tendina originale resta (serve al modulo) ma non si vede */
.gtia-ruoli-pronto select[name="reg_select_role"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; padding: 0 !important; border: 0 !important;
}
.gtia-ruoli-pronto .pp-form-field-description { display: none !important; }

/* ---------- Testo sopra il modulo di registrazione (blocco HTML nell'editor) ---------- */
.entry-content .gtia-acc-intro {
  max-width: 540px !important; margin: 24px auto 0 !important; padding: 16px 20px;
  background: #fff; border-radius: 16px; border-left: 5px solid var(--acc-arancio);
  box-shadow: 0 6px 24px rgba(26,26,94,.1); color: var(--acc-testo);
}
.gtia-acc-intro p { margin: 0 0 10px; font-size: 19px; line-height: 1.35; }
.gtia-acc-link { display: flex; flex-wrap: wrap; gap: 8px; }
.gtia-acc-link a {
  display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: 18px; line-height: 1.2;
  background: var(--acc-arancio-chiaro); color: var(--acc-blu) !important; text-decoration: none !important;
  border: 1px solid rgba(242,140,0,.35);
}
.gtia-acc-link a:hover { background: var(--acc-arancio); color: #fff !important; }
#content .gtia-acc-intro ~ .pp-form-container { margin-top: 16px !important; }

/* ---------- Smartphone ---------- */
@media (max-width: 600px) {
  #content .pp-form-container { margin: 16px 0 32px !important; }
  #content .pp-form-container .pp-form-wrapper.ppBuildScratch { padding: 0 18px 20px !important; }
  #content .pp-form-container .ppBuildScratch .ppbs-headline { margin: 0 -18px 18px !important; padding: 18px 18px 14px !important; font-size: 30px !important; }
  .entry-content .gtia-acc-intro { margin: 16px 0 0 !important; padding: 14px 16px; }
  #content .pp-form-container #pp_recaptcha_container { transform: scale(.92); transform-origin: center; }
}