/**
 * Darkcoon · Registro (normal y PRO) e inicio de sesión rediseñados — Clearis, 11/11/2026
 * Inicio de sesión: todo bajo .cle-login-page (lo crea templates/customer/authentication.tpl).
 * Solo en la página de registro: todo va bajo .cle-reg-wrap (el checkout y Mis datos usan
 * el mismo formulario y no cambian). El tema ordena los campos con «order» (custom.css);
 * aquí se reordenan en secciones. El aviso de VIES debajo del NIF es del módulo cle_vies.
 */
.cle-reg-wrap { max-width: 760px; margin: 8px auto 40px; }
#registration #content.page-content:has(.cle-reg-wrap) { border: 0; padding: 0; }
.cle-reg-head { margin: 0 0 18px; }
.cle-reg-head h1 { font-size: 28px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; padding: 0; letter-spacing: .01em; }
.cle-reg-head p { margin: 0; color: #555; font-size: 14px; }
.cle-reg-card { border: 1px solid #e4e4e4; background: #fff; padding: 28px 32px 30px; }
.cle-reg-wrap #customer-form { margin: 0 !important; }

/* rejilla: todo a lo ancho, algunos campos en dos columnas */
.cle-reg-wrap #customer-form .row-mod { display: flex; flex-wrap: wrap; column-gap: 16px; align-items: flex-start; padding: 0 !important; max-width: none !important; }
.cle-reg-wrap #customer-form .row-mod > *, .cle-reg-wrap #customer-form #ajax-register-section > * { flex: 0 0 100%; max-width: 100%; }
/* al cambiar de país, Deluxe Validación de usuario vuelve a pintar la dirección dentro de
   #ajax-register-section: sus campos pasan a ordenarse con el resto */
.cle-reg-wrap #customer-form #ajax-register-section { display: contents !important; }
.cle-reg-wrap #customer-form .row-mod .class-firstname, .cle-reg-wrap #customer-form .row-mod .class-lastname,
.cle-reg-wrap #customer-form .row-mod .class-postcode, .cle-reg-wrap #customer-form .row-mod .class-city,
.cle-reg-wrap #customer-form .row-mod .class-id_state, .cle-reg-wrap #customer-form .row-mod .class-phone { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; width: calc(50% - 8px) !important; }

/* campos: la etiqueta encima */
.cle-reg-wrap #customer-form .row-mod .form-group.row,
.cle-reg-wrap #customer-form .field-password-policy .form-group.row { flex-direction: column; align-items: stretch !important; margin: 0 0 16px; }
.cle-reg-wrap #customer-form .row-mod .form-group.row > label,
.cle-reg-wrap #customer-form .row-mod .form-group.row > .js-input-column,
.cle-reg-wrap #customer-form .row-mod .form-group.row > div { width: 100% !important; max-width: 100% !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; text-align: left !important; }
.cle-reg-wrap #customer-form .row-mod .form-group.row > label { padding: 0 0 5px !important; font-size: 13px; font-weight: 600; color: #1d1d1d; }
.cle-reg-wrap #customer-form .form-control { width: 100% !important; height: 46px; border: 1px solid #d4d4d4; background-color: #fff; font-size: 14px; padding: 10px 14px; }
.cle-reg-wrap #customer-form .form-control:focus { border-color: #ec6330; box-shadow: 0 0 0 3px rgba(236, 99, 48, .15); outline: 0; }
.cle-reg-wrap #customer-form .input-group { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; }
.cle-reg-wrap #customer-form .input-group .form-control { width: 1% !important; flex: 1 1 auto !important; }
.cle-reg-wrap #customer-form .input-group .input-group-btn, .cle-reg-wrap #customer-form .input-group .input-group-append { width: auto !important; flex: none !important; }
.cle-reg-wrap #customer-form .input-group .btn { height: 46px; width: 46px; border-color: #d4d4d4; }
.cle-reg-wrap #customer-form .form-control-comment { display: none; }

/* títulos de sección */
.cle-reg-sec { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding-top: 18px; border-top: 1px solid #eee; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #111; }
.cle-reg-sec.is-first { border-top: 0; padding-top: 0; margin-top: 0; }
.cle-reg-sec b { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; background: #ec6330; color: #fff; font-size: 12px; }
.cle-reg-sec small { font-weight: 400; text-transform: none; color: #777; font-size: 12px; letter-spacing: 0; margin-left: auto; }

/* orden: secciones y campos */
.cle-reg-wrap .cle-reg-pro { order: 1; }
.cle-reg-wrap .cle-reg-sec--acceso { order: 5; }
.cle-reg-wrap .class-email { order: 10 !important; }
.cle-reg-wrap .field-password-policy { order: 20 !important; }
.cle-reg-wrap .cle-reg-sec--datos { order: 25; }
.cle-reg-wrap .class-id_gender { order: 30 !important; }
.cle-reg-wrap .class-firstname { order: 40 !important; }
.cle-reg-wrap .class-lastname { order: 41 !important; }
.cle-reg-wrap .class-id_country { order: 50 !important; }
.cle-reg-wrap .class-dni { order: 55 !important; }
.cle-reg-wrap .class-vat_number { order: 60 !important; }
.cle-reg-wrap .class-company { order: 70 !important; }
.cle-reg-wrap .class-recargoequivalencia { order: 75 !important; }
.cle-reg-wrap .cle-reg-sec--direccion { order: 80; }
.cle-reg-wrap .class-address1 { order: 90 !important; }
.cle-reg-wrap .class-address2 { order: 91 !important; }
.cle-reg-wrap .class-postcode { order: 100 !important; }
.cle-reg-wrap .class-city { order: 101 !important; }
.cle-reg-wrap .class-id_state { order: 110 !important; }
.cle-reg-wrap .class-phone { order: 111 !important; }
.cle-reg-wrap .class-phone_mobile { order: 120 !important; }
.cle-reg-wrap .cle-reg-sec--doc { order: 125; }
.cle-reg-wrap .class-b2b_attachment { order: 130 !important; }
.cle-reg-wrap .text-info-doc-pro { order: 131 !important; font-size: 12px; color: #666; margin: -6px 0 16px; }
.cle-reg-wrap .cle-reg-sec--final { order: 140; }
.cle-reg-wrap .idxrvalidatinguser-form { order: 150 !important; }
.cle-reg-wrap .class-psgdpr { order: 160 !important; }
.cle-reg-wrap .class-newsletter { order: 170 !important; }
.cle-reg-wrap .class-customer_privacy { order: 175 !important; }
.cle-reg-wrap #alertprivate { order: 180 !important; }
.cle-reg-wrap .text-info-register-basic { display: none !important; }

/* tipo de cliente: tres botones */
.cle-reg-wrap .class-id_gender > label { display: none !important; }
.cle-reg-wrap .class-id_gender .js-input-column { display: flex !important; flex-direction: row !important; gap: 10px; }
.cle-reg-wrap .class-id_gender .radio-inline { flex: 1 1 0; display: flex; align-items: center; gap: 8px; margin: 0; min-height: 46px !important; padding: 10px 14px !important; border: 1px solid #d4d4d4; cursor: pointer; font-weight: 600; font-size: 14px; }
.cle-reg-wrap .class-id_gender .radio-inline:has(input:checked) { border-color: #ec6330; background: #fff4ef; box-shadow: inset 0 0 0 1px #ec6330; }
.cle-reg-wrap .class-id_gender .radio-inline:focus-within { outline: 2px solid rgba(236, 99, 48, .35); outline-offset: 1px; }

/* casillas */
.cle-reg-wrap .class-psgdpr > label, .cle-reg-wrap .class-newsletter > label,
.cle-reg-wrap .class-recargoequivalencia > label, .cle-reg-wrap .class-customer_privacy > label { display: none !important; }
.cle-reg-wrap .class-psgdpr label, .cle-reg-wrap .class-newsletter label,
.cle-reg-wrap .class-psgdpr label *, .cle-reg-wrap .class-newsletter label * { font-size: 12.5px !important; line-height: 1.5 !important; color: #555 !important; font-weight: 400 !important; }
.cle-reg-wrap .class-newsletter label { color: #222 !important; font-weight: 600 !important; }
.cle-reg-wrap .class-recargoequivalencia { background: #fafafa; border: 1px solid #ececec; padding: 12px 14px; }
.cle-reg-wrap .class-recargoequivalencia label { font-weight: 600; font-size: 13.5px; }
.cle-reg-wrap .class-recargoequivalencia .re-nota { display: block; margin-top: 4px; font-weight: 400; color: #666; font-size: 12.5px; line-height: 1.45; }
.cle-reg-wrap .idxrvalidatinguser-form label { font-size: 13px !important; font-weight: 600 !important; }

/* llamada al registro PRO */
.cle-reg-pro a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin: 0 0 22px; background: #111; color: #fff; text-decoration: none; }
.cle-reg-pro a span, .cle-reg-pro a span * { color: #fff; line-height: 1.45; }
.cle-reg-pro a span b { color: #ec6330; }
.cle-reg-pro a em { font-style: normal; background: #ec6330; color: #fff; padding: 8px 14px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.cle-reg-pro a:hover em, .cle-reg-pro a:focus-visible em { background: #d4521f; }

/* pie */
.cle-reg-wrap #customer-form .form-footer { padding: 0 !important; margin: 4px 0 0 !important; }
.cle-reg-wrap #customer-form .form-footer .form-control-submit { display: block; width: 100% !important; max-width: none !important; height: 50px !important; margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .03em; }
.cle-reg-login { text-align: center; margin: 14px 0 0; font-size: 13px; color: #555; }
.cle-reg-login a { color: #ec6330 !important; font-weight: 600; }

@media (max-width: 767px) {
  .cle-reg-wrap { margin-top: 0; }
  .cle-reg-head { padding: 0 4px; }
  .cle-reg-head h1 { font-size: 22px; }
  .cle-reg-card { padding: 20px 16px; border-left: 0; border-right: 0; }
  .cle-reg-wrap #customer-form .row-mod .class-firstname, .cle-reg-wrap #customer-form .row-mod .class-lastname,
  .cle-reg-wrap #customer-form .row-mod .class-id_state, .cle-reg-wrap #customer-form .row-mod .class-phone { flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; }
  .cle-reg-wrap .class-id_gender .js-input-column { flex-direction: column !important; }
  .cle-reg-pro a { flex-direction: column; align-items: flex-start; }
  .cle-reg-sec small { display: none; }
}

/* =====================================================================
 * Inicio de sesión (templates/customer/authentication.tpl)
 * ===================================================================== */
.cle-login-page { max-width: 980px; margin: 8px auto 40px; }
#content.page-content:has(.cle-login-page) { border: 0; padding: 0; }
.cle-login-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.cle-login-card { border: 1px solid #e4e4e4; background: #fff; padding: 28px 32px 30px; }
.cle-login-card--new { background: #fafafa; }
.cle-login-h { display: flex; align-items: center; gap: 10px; margin: 0 0 18px !important; padding: 0 !important; font-size: 15px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #111; }
.cle-login-h::before { content: ''; flex: none; width: 6px; height: 22px; background: #ec6330; }
.cle-login-wrap hr, .cle-login-wrap .no-account, .cle-login-wrap .idxrvalidatinguser-login-buttons { display: none !important; }
.cle-login-wrap .login-form { margin: 0; }

/* campos como en el registro */
.cle-login-wrap #login-form .form-group.row { display: flex; flex-direction: column; align-items: stretch !important; margin: 0 0 16px; }
.cle-login-wrap #login-form .form-group.row > label, .cle-login-wrap #login-form .form-group.row > div { width: 100% !important; max-width: 100% !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; text-align: left !important; }
.cle-login-wrap #login-form .form-group.row > label { padding: 0 0 5px !important; font-size: 13px; font-weight: 600; color: #1d1d1d; }
.cle-login-wrap #login-form .form-control { width: 100% !important; height: 46px; border: 1px solid #d4d4d4; background-color: #fff; font-size: 14px; padding: 10px 14px; }
.cle-login-wrap #login-form .form-control:focus { border-color: #ec6330; box-shadow: 0 0 0 3px rgba(236, 99, 48, .15); outline: 0; }
.cle-login-wrap #login-form .input-group { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; }
.cle-login-wrap #login-form .input-group .form-control { width: 1% !important; flex: 1 1 auto !important; }
.cle-login-wrap #login-form .input-group .input-group-btn, .cle-login-wrap #login-form .input-group .input-group-append { width: auto !important; flex: none !important; }
.cle-login-wrap #login-form .input-group .btn { height: 46px; width: 46px; border-color: #d4d4d4; }
.cle-login-wrap #login-form .forgot-password { text-align: right !important; margin: -6px 0 18px; padding: 0; }
.cle-login-wrap #login-form .forgot-password a { color: #ec6330; font-size: 13px; font-weight: 600; }
.cle-login-wrap #login-form .form-footer { padding: 0 !important; margin: 0 !important; text-align: left !important; }
.cle-login-wrap #login-form .form-footer .form-control-submit, .cle-login-wrap #login-form #submit-login { display: block; width: 100% !important; max-width: none !important; height: 50px !important; margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .03em; }

/* crear cuenta */
.cle-login-p { margin: 0 0 10px; color: #444; font-size: 14px; }
.cle-login-list { list-style: none; margin: 0 0 20px; padding: 0; }
.cle-login-list li { position: relative; padding: 4px 0 4px 26px; font-size: 13.5px; color: #333; line-height: 1.45; }
.cle-login-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 2px solid #ec6330; border-bottom: 2px solid #ec6330; transform: rotate(-45deg); }
.cle-login-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none !important; text-align: center; transition: background-color .15s, color .15s; }
.cle-login-btn--ghost { border: 2px solid #111; background: #fff; color: #111 !important; }
.cle-login-btn--ghost:hover, .cle-login-btn--ghost:focus-visible { background: #111; color: #fff !important; }
.cle-login-btn--pro { border: 2px solid #ec6330; background: #ec6330; color: #fff !important; }
.cle-login-btn--pro:hover, .cle-login-btn--pro:focus-visible { background: #d4521f; border-color: #d4521f; }
.cle-login-pro { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e4e4e4; }
.cle-login-pro b { display: block; color: #111; font-size: 14px; }
.cle-login-pro p { margin: 4px 0 12px; color: #555; font-size: 13.5px; }

@media (max-width: 767px) {
  .cle-login-page { margin-top: 0; }
  .cle-login-wrap { grid-template-columns: 1fr; gap: 16px; }
  .cle-login-card { padding: 20px 16px; }
}