/* ============================================================
   COFFEE LOVERS - Página de Cuenta v1.1
   ============================================================ */

:root {
    --fp-accent:      #BE8A25;
    --fp-accent-h:    #9C6F1D;
    --fp-dark:      #111111;
    --fp-dark-h:    #000000;
    --fp-text:      #333;
    --fp-muted:     #777;
    --fp-border:    #e0e0e0;
    --fp-bg:        #f7f8fa;
    --fp-white:     #fff;
    --fp-radius:    14px;
    --fp-shadow:    0 6px 32px rgba(0,0,0,0.08);
    --fp-tr:        all .22s ease;
}

/* ── Ocultar título duplicado y el título por defecto de WC ── */
.woocommerce-MyAccount-content h2,
.entry-title { /* algunos temas lo muestran */ }

/* ── Wrapper principal ── */
.cl-auth-wrapper {
    display: flex;
    align-items: stretch;
    max-width: 980px;
    margin: 40px auto 60px;
    background: var(--fp-white);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    overflow: hidden;
    border: 1px solid var(--fp-border);
}

/* ── Columnas ── */
.cl-col {
    flex: 1;
    padding: 52px 44px;
}

.cl-col-login   { background: var(--fp-white); border-right: 1px solid var(--fp-border); }
.cl-col-register{ background: var(--fp-bg); }

/* ── Separador central ── */
.cl-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    overflow: visible;
    position: relative;
    z-index: 5;
}
.cl-sep span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fp-white);
    border: 2px solid var(--fp-border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--fp-muted);
    white-space: nowrap;
    letter-spacing: 0;
}

/* ── Caja interior ── */
.cl-box { max-width: 390px; margin: 0 auto; }

/* ── Títulos ── */
.cl-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--fp-dark);
    margin: 0 0 6px;
    line-height: 1.2;
}
.cl-subtitle {
    font-size: .88rem;
    color: var(--fp-muted);
    margin: 0 0 28px;
}

/* ── Formulario ── */
.cl-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Campo ── */
.cl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.cl-field label {
    font-size: .83rem;
    font-weight: 700;
    color: var(--fp-text);
    margin: 0;
}
.cl-field label .req { color: var(--fp-accent); margin-left: 2px; }

.cl-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid var(--fp-border) !important;
    border-radius: 8px !important;
    font-size: .92rem !important;
    color: var(--fp-text) !important;
    background: var(--fp-white) !important;
    transition: var(--fp-tr) !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none;
}
.cl-input:focus {
    border-color: var(--fp-accent) !important;
    box-shadow: 0 0 0 3px rgba(190,138,37,.16) !important;
}
.cl-input::placeholder { color: #bbb !important; }

/* ── Fila nombre+apellido ── */
.cl-row-fields { display: flex; gap: 12px; }

/* ── Contraseña con ojo ── */
.cl-pw-wrap { position: relative; }
.cl-pw-wrap .cl-input { padding-right: 46px !important; }

/* Oculta el icono nativo de "mostrar contraseña" / gestor de contraseñas
   del navegador (Edge/Chrome) para que no choque con nuestro ojito.
   Se resetea -webkit-appearance porque sin eso Chrome ignora el resto. */
.cl-pw-wrap input[type="password"]::-ms-reveal,
.cl-pw-wrap input[type="password"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
.cl-pw-wrap input::-webkit-credentials-auto-fill-button,
.cl-pw-wrap input::-webkit-strong-password-auto-fill-button,
.cl-pw-wrap input::-webkit-contacts-auto-fill-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
}

.cl-eye {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--fp-white);
    border: none;
    cursor: pointer;
    color: var(--fp-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: var(--fp-tr);
    line-height: 0;
    z-index: 5;
}
.cl-eye svg { width: 19px; height: 19px; pointer-events: none; }
.cl-eye:hover, .cl-eye.active { color: var(--fp-accent); }

/* WooCommerce agrega automáticamente su PROPIO botón de "mostrar
   contraseña" (span.show-password-input) a cada input[type=password]
   de sus formularios, sin importar el template. Como ya tenemos un
   ojito propio (.cl-eye), lo ocultamos para que no se dupliquen /
   encimen (ese cuadro gris era ese botón nativo de WooCommerce). */
.cl-pw-wrap .show-password-input,
.password-input .show-password-input,
.woocommerce form .show-password-input {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}



/* ── Fila recuérdame / olvidé ── */
.cl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cl-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    color: var(--fp-text);
    cursor: pointer;
    margin: 0;
}
.cl-check input[type="checkbox"] { accent-color: var(--fp-accent); width: 15px; height: 15px; }
.cl-forgot { font-size: .81rem; color: var(--fp-accent); text-decoration: none; transition: var(--fp-tr); }
.cl-forgot:hover { color: var(--fp-accent-h); text-decoration: underline; }

/* ── Botones ── */
.cl-btn {
    width: 100% !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    cursor: pointer;
    transition: var(--fp-tr) !important;
    letter-spacing: .4px;
    margin-top: 4px;
    display: block;
    text-align: center;
}
.cl-btn--login {
    background: var(--fp-accent) !important;
    color: var(--fp-white) !important;
}
.cl-btn--login:hover {
    background: var(--fp-accent-h) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(190,138,37,.35) !important;
}
.cl-btn--register {
    background: var(--fp-dark) !important;
    color: var(--fp-white) !important;
}
.cl-btn--register:hover {
    background: var(--fp-dark-h) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
}

/* ── Términos ── */
.cl-terms {
    font-size: .77rem;
    color: var(--fp-muted);
    text-align: center;
    margin: 4px 0 0;
}
.cl-terms a { color: var(--fp-accent); text-decoration: none; }
.cl-terms a:hover { text-decoration: underline; }

/* ── Nota informativa ── */
.cl-note {
    font-size: .84rem;
    color: var(--fp-muted);
    background: #faf3e6;
    border-left: 3px solid var(--fp-accent);
    padding: 10px 14px;
    border-radius: 5px;
    margin: 0;
}

/* ── Notices de WooCommerce ── */
.cl-auth-wrapper .woocommerce-error,
.cl-auth-wrapper .woocommerce-message,
.cl-auth-wrapper .woocommerce-info {
    margin-bottom: 20px !important;
    border-radius: 8px !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 820px) {
    .cl-auth-wrapper {
        flex-direction: column;
        margin: 20px 14px 40px;
    }
    .cl-col { padding: 36px 22px; }
    .cl-col-login { border-right: none; border-bottom: 1px solid var(--fp-border); }
    .cl-sep { display: none; }
    .cl-row-fields { flex-direction: column; }
}
@media (max-width: 480px) {
    .cl-col { padding: 26px 14px; }
    .cl-title { font-size: 1.25rem; }
    .cl-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}