/* =====================================================================
   PLAYBCN - CREAR CUENTA (31-10-2026)
   Formulario "Crear cuenta" en la página de acceso (login) y en create_account.
   Solo diseño: no cambia campos ni validaciones. Para quitarlo, borrar el archivo.
===================================================================== */
#loginDefault #uniquename,
#createAcctDefault #createAccountForm {
  background: #fff !important; border: 1px solid #e7e5e0 !important; border-radius: 12px !important;
  padding: 22px 20px !important; margin-top: 10px !important; box-sizing: border-box;
  font-family: 'Lato','Helvetica Neue',Arial,sans-serif; color: #111;
}
#uniquename:before, #createAcctDefault #createAccountForm:before {
  content: "Crea tu cuenta"; display: block; font-size: 22px; font-weight: 900; margin-bottom: 4px;
}
#createAccountForm { display: flex !important; flex-direction: column; }
#createAccountForm .information,
#createAccountForm > .alert.forward,
#createAccountForm br { display: none !important; }
#createAccountForm fieldset { order: 2; border: 0 !important; margin: 14px 0 0 !important; padding: 0 !important; min-width: 0; background: transparent !important; }
#createAccountForm fieldset:has(#email-address) { order: 1; margin-top: 8px !important; }
#createAccountForm fieldset:has(.g-recaptcha) { order: 3; }
#createAccountForm .newsletterBox { order: 4; }
#createAccountForm .buttonRow { order: 5; }
#createAccountForm legend { font-size: 0 !important; padding: 0 !important; margin: 0 0 4px !important; border: 0 !important; width: 100%; }
#createAccountForm legend:before { font-size: 16px; font-weight: 900; color: #111; letter-spacing: 0; text-transform: none; }
#createAccountForm fieldset:has(#email-address) legend:before { content: "1. Tus datos de acceso"; }
#createAccountForm fieldset:has(#firstname) legend:before { content: "2. Dirección de envío"; }
#createAccountForm fieldset:has(#firstname) legend:after {
  content: "La usaremos para tus pedidos. Podrás cambiarla cuando quieras."; display: block;
  font-size: 13px; font-weight: 400; color: #5f5f5f; margin-top: 2px; text-transform: none !important; letter-spacing: 0 !important;
}
#createAccountForm label.inputLabel {
  display: block !important; float: none !important; width: auto !important; clear: both;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #111 !important; margin: 14px 0 6px !important; padding: 0 !important; text-align: left !important;
}
#createAccountForm label.inputLabel::first-letter { text-transform: uppercase; }
#createAccountForm label.inputLabel:has(+ #password-new):after { content: "  (mínimo 7 caracteres)"; font-weight: 400; color: #8a8780; }
#createAccountForm input[type=text], #createAccountForm input[type=password],
#createAccountForm input[type=email], #createAccountForm input[type=tel], #createAccountForm select {
  display: block !important; float: none !important; width: 100% !important; max-width: none !important; height: 52px !important;
  box-sizing: border-box !important; border: 1px solid #cfccc6 !important; border-radius: 8px !important; background: #fff !important;
  padding: 0 14px !important; margin: 0 !important; font-size: 16px !important; letter-spacing: 0 !important; color: #111 !important; box-shadow: none !important;
}
#createAccountForm select { text-align: left !important; text-align-last: left !important; }
#createAccountForm input:focus, #createAccountForm select:focus { border-color: #111 !important; outline: none; }
#createAccountForm span.alert { display: none !important; }
#createAccountForm #CAAS,
#createAccountForm label[for=suburb], #createAccountForm #suburb { display: none !important; }
#createAccountForm .g-recaptcha { margin-top: 6px; }
#createAccountForm .newsletterBox {
  display: flex !important; align-items: center; gap: 10px; margin: 18px 0 0 !important; padding: 14px !important;
  background: #f6f5f2; border-radius: 10px; border: 0 !important; float: none !important; width: auto !important;
}
#createAccountForm .newsletterBox input[type=checkbox] { width: 20px; height: 20px; accent-color: #111; margin: 0 !important; flex: 0 0 20px; }
#createAccountForm .newsletterBox label.checkboxLabel { font-size: 0 !important; margin: 0 !important; float: none !important; letter-spacing: 0 !important; }
#createAccountForm .newsletterBox label.checkboxLabel:before { content: "Quiero recibir novedades y ofertas exclusivas por email"; font-size: 14px; color: #111; text-transform: none; letter-spacing: 0; font-weight: 400; }
#createAccountForm .buttonRow { float: none !important; width: 100% !important; margin: 18px 0 0 !important; padding: 0 !important; text-align: center !important; }
#createAccountForm .buttonRow input[type=submit], #createAccountForm .buttonRow button {
  display: block !important; width: 100% !important; height: 56px !important; margin: 0 !important;
  background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 8px !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.16) !important; cursor: pointer !important; padding: 0 !important;
}
#createAccountForm .buttonRow input[type=submit]:hover { background: #333 !important; }
@media only screen and (max-width: 767px) {
  #loginDefault #uniquename, #createAcctDefault #createAccountForm { padding: 18px 14px !important; }
}