/* =========================================================================
   [NEW-13] Form registrazione "Entra nel Club" — vista dell'offcanvas Club.
   Artboard XD CLUB_DESKTOP – 5/6 (desktop), – 9/15 (mobile).

   Riusa il markup di bb_account_field() (.bb-account-field*) ma quegli stili
   vivono in account.css, caricato SOLO su is_account_page(). Qui li ridichiaro
   scoped su #bb-club-register cosi' il form ha lo stesso look "etichetta
   incassata" ovunque si apra l'offcanvas Club, senza dipendere da account.css.
   ========================================================================= */

#bb-club-register {
  display: flex;
  flex-direction: column;
}

/* Il PHP stampa questa vista con l'attributo `hidden`, e offcanvas.css la
   spegne con `.bb-club-view[hidden]` (0,2,0). Ma la regola qui sopra parte da
   un ID (1,0,0) e vince: risultato, il form di registrazione restava SEMPRE
   aperto sotto i bottoni della vista introduttiva, appena si apriva il Club.
   Va rispento a pari specificita'. */
#bb-club-register[hidden] {
  display: none;
}

/* ── Testata ─────────────────────────────────────────────────────────────── */

/* [NEW-254] Qui c'era .bb-club-register__title, il titolo scritto "Entra nel
   Club". Non c'e' piu': gli artboard vogliono il lockup, che usa le regole di
   .bb-club-title--logo in offcanvas.css (CLUB-07). La regola e' stata tolta
   invece che lasciata a invecchiare: una regola senza elemento e' una trappola
   per chi domani la legge e la crede viva. */

.bb-club-register__intro {
  margin: 0 0 clamp(20px, 2vw, 32px);
  font-family: var(--bb-font-editorial, "Playfair Display"), serif;
  font-size: var(--bb-body);
  line-height: 1.5;
  color: var(--bb-fg);
}

/* ── Campi (clone del pattern account, scoped) ───────────────────────────── */

#bb-club-register .bb-account-field {
  position: relative;
  margin-bottom: clamp(18px, 1.7vw, 30px);
}

#bb-club-register .bb-account-field__label {
  position: absolute;
  top: 0;
  left: 12px;
  transform: translateY(-50%);
  z-index: 1;
  padding: 0 6px;
  background: var(--bb-bg);
  font-size: var(--bb-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

#bb-club-register .bb-account-field__input {
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  background: var(--bb-bg);
  border: var(--bb-line-width) solid var(--bb-black);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--bb-body);
  line-height: 1.3;
  color: var(--bb-fg);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;

  /* Shoptimizer impone height:40px fisso su input/select → testo tagliato.
     L'altezza la decide il contenuto. */
  height: auto;
  min-height: 0;
}

#bb-club-register select.bb-account-field__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--bb-fg) 50%),
                    linear-gradient(135deg, var(--bb-fg) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

#bb-club-register .bb-account-field__input:focus {
  outline: none;
  border-color: var(--bb-black);
  box-shadow: 0 0 0 1px var(--bb-black) inset;
}

#bb-club-register .bb-account-field__hint {
  margin: 6px 0 0;
  font-size: var(--bb-tiny);
  line-height: 1.4;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
}

/* occhio mostra/nascondi password */
#bb-club-register button.bb-account-field__eye {
  position: absolute;
  top: 0;
  right: 0;
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background: transparent !important;
  color: var(--bb-fg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 0.55;
  cursor: pointer;
}

#bb-club-register button.bb-account-field__eye:hover,
#bb-club-register button.bb-account-field__eye.is-visible {
  opacity: 1;
}

/* ── Honeypot: fuori schermo, non focusabile visivamente ─────────────────── */

.bb-club-register__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Messaggio d'errore ──────────────────────────────────────────────────── */

.bb-club-register__error {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--bb-bg);
  border: var(--bb-line-width) solid var(--bb-black);
  font-size: var(--bb-small);
  line-height: 1.4;
  color: var(--bb-black);
}

/* ── Consenso ────────────────────────────────────────────────────────────── */

.bb-club-register__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: clamp(6px, 1vw, 14px) 0 clamp(20px, 2vw, 30px);
  font-size: var(--bb-small);
  line-height: 1.45;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
  cursor: pointer;
}

.bb-club-register__consent input[type="checkbox"] {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  accent-color: var(--bb-black);
}

/* ── Bottone "Entra nel Club" (nero, full-width) ─────────────────────────── */

.bb-club-register__submit {
  width: 100%;
  padding: 15px 20px;
  background: var(--bb-black);
  color: var(--bb-bg);
  border: var(--bb-line-width) solid var(--bb-black);
  border-radius: 0;
  font-family: var(--bb-font, "Jost"), sans-serif;
  font-size: var(--bb-small);
  font-weight: 500;
  letter-spacing: var(--bb-ls-wide, 0.08em);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.bb-club-register__submit:hover { opacity: 0.85; }
.bb-club-register__submit:disabled { opacity: 0.5; cursor: default; }

/* ── Link "Hai gia' un account? ACCEDI" ──────────────────────────────────── */

.bb-club-register__login-link {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  text-align: center;
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

.bb-club-register__login-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 500;
  letter-spacing: var(--bb-ls-wide, 0.08em);
  color: var(--bb-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}