/* ============================================================
   LAKAY-AUTH.CSS — Connexion / Inscription (v3.0)
   Namespace : .lka-*   ·   Chargé sur /kont-mwen/ non connecté

   Règles de ce fichier :
   - UNE seule source par composant (plus de blocs "FIX" en double)
   - chaque état (repos, hover, focus, active, disabled) est défini
     explicitement avec "html body .lka-wrap …" + !important
     → Dokani (button:focus, a:visited…) ne peut plus rien changer
   - hover seulement avec une vraie souris (pas de hover "collé" au toucher)
   - clair / sombre : uniquement via les tokens de la section 0
   ============================================================ */

/* ============================================================
   0. TOKENS
   ============================================================ */
.lka-wrap {
    --lka-surface:    var(--lk-white, #FFFFFF);
    --lka-soft:       var(--lk-bg-soft, #F8FAFF);
    --lka-text:       var(--lk-text, #1A1A1A);
    --lka-muted:      var(--lk-muted, #666666);
    --lka-line:       var(--lk-border, #E0E0E0);
    --lka-accent:     #00209F;
    --lka-accent-dk:  #001580;
    --lka-red:        #D21034;
    --lka-green:      #2E7D32;
    --lka-gold:       #F5A623;
    --lka-link:       #00209F;      /* liens : bleu Lakay          */
    --lka-link-hover: #D21034;      /* survol (clair)              */
    --lka-radius:     12px;
    --lka-shadow:     0 4px 24px rgba(0, 0, 0, .08);

    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    color: var(--lka-text);
    font-family: var(--lk-font-body, 'DM Sans', sans-serif);
}

html[data-theme="dark"] .lka-wrap {
    --lka-surface:    #1A2438;
    --lka-soft:       #151E30;
    --lka-text:       #E2E8F0;
    --lka-muted:      #94A3B8;
    --lka-line:       #334155;
    --lka-accent:     #3B82F6;
    --lka-accent-dk:  #2563EB;
    --lka-red:        #F87171;
    --lka-green:      #22C55E;
    --lka-gold:       #FBBF24;
    --lka-link:       #60A5FA;      /* bleu clair                  */
    --lka-link-hover: #FBBF24;      /* doré (le rouge était illisible) */
    --lka-shadow:     0 4px 24px rgba(0, 0, 0, .4);
}

/* ============================================================
   1. BOUTONS "NUS" (onglets, sous-onglets, œil) — RESET COMMUN
   Annule outline / ombre / halo tactile quel que soit l'état.
   ============================================================ */
html body .lka-wrap button.lka-tab,
html body .lka-wrap button.lka-subtab,
html body .lka-wrap button.lka-pass-toggle {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    font-family: inherit;
    text-shadow: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Anneau clavier unique (doré) — jamais à la souris / au toucher */
html body .lka-wrap button.lka-tab:focus-visible,
html body .lka-wrap button.lka-subtab:focus-visible,
html body .lka-wrap button.lka-pass-toggle:focus-visible,
html body .lka-wrap a.lka-btn--accent:focus-visible {
    outline: 2px solid var(--lka-gold) !important;
    outline-offset: 2px !important;
}

/* ============================================================
   2. ONGLETS PRINCIPAUX (Konekte / Enskri)
   ============================================================ */
.lka-tabs {
    display: flex;
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 2px solid var(--lka-line);
}

/* repos + focus + active (clic) : MÊME rendu → plus de bleu qui "reste" */
html body .lka-wrap button.lka-tab,
html body .lka-wrap button.lka-tab:focus,
html body .lka-wrap button.lka-tab:active {
    flex: 1;
    margin-bottom: -2px;
    padding: 14px 20px;
    color: var(--lka-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    font-size: 15px;
    font-weight: 600;
    transition: color .2s, background .2s, border-color .2s;
}

@media (hover: hover) {
    html body .lka-wrap button.lka-tab:hover {
        color: var(--lka-accent) !important;
        background: var(--lka-soft) !important;
    }
}

/* onglet courant (placé après : il gagne sur repos / focus / hover) */
html body .lka-wrap button.lka-tab.lka-tab--active,
html body .lka-wrap button.lka-tab.lka-tab--active:focus,
html body .lka-wrap button.lka-tab.lka-tab--active:active,
html body .lka-wrap button.lka-tab.lka-tab--active:hover {
    color: var(--lka-accent) !important;
    background: transparent !important;
    border-bottom-color: var(--lka-accent) !important;
    font-weight: 700;
}

/* ============================================================
   3. PANNEAUX
   ============================================================ */
.lka-panel {
    padding: 32px;
    background: var(--lka-surface);
    border: 1px solid var(--lka-line);
    border-radius: var(--lka-radius);
    box-shadow: var(--lka-shadow);
}

.lka-panel[hidden] { display: none; }

.lka-panel__title {
    margin: 0 0 24px;
    color: var(--lka-text);
    font-family: var(--lk-font-title, 'Fraunces', Georgia, serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.3px;
    text-align: center;
}

/* ============================================================
   4. SOUS-ONGLETS (Kliyan / Vandè)
   ============================================================ */
.lka-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 24px;
    padding: 6px;
    background: var(--lka-soft);
    border: 1px solid var(--lka-line);
    border-radius: 10px;
}

html body .lka-wrap button.lka-subtab,
html body .lka-wrap button.lka-subtab:focus,
html body .lka-wrap button.lka-subtab:active {
    padding: 10px 16px;
    color: var(--lka-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s, color .2s;
}

@media (hover: hover) {
    html body .lka-wrap button.lka-subtab:hover { color: var(--lka-accent) !important; }
}

html body .lka-wrap button.lka-subtab.lka-subtab--active,
html body .lka-wrap button.lka-subtab.lka-subtab--active:focus,
html body .lka-wrap button.lka-subtab.lka-subtab--active:active,
html body .lka-wrap button.lka-subtab.lka-subtab--active:hover {
    color: var(--lka-accent) !important;
    background: var(--lka-surface) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
}

/* ============================================================
   5. CHAMPS
   ============================================================ */
.lka-wrap .form-row {
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.lka-wrap .form-row label {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--lka-text) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.lka-wrap .form-row .required {
    margin-left: 2px;
    color: var(--lka-red) !important;
    font-weight: 700 !important;
}

.lka-wrap .form-row input[type="text"],
.lka-wrap .form-row input[type="email"],
.lka-wrap .form-row input[type="password"],
.lka-wrap .form-row input[type="tel"],
.lka-wrap .form-row input.input-text {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    color: var(--lka-text) !important;
    background: var(--lka-soft) !important;
    border: 1.5px solid var(--lka-line) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
}

/* Texte, email, password, tel — PAS les checkbox ni radio */
.lka-wrap .form-row input[type="text"]:focus,
.lka-wrap .form-row input[type="email"]:focus,
.lka-wrap .form-row input[type="password"]:focus,
.lka-wrap .form-row input[type="tel"]:focus,
.lka-wrap .form-row input[type="search"]:focus,
.lka-wrap .form-row input.input-text:focus {
    background: var(--lka-surface) !important;
    border-color: var(--lka-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 32, 159, .15) !important;
}

html[data-theme="dark"] .lka-wrap .form-row input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .3) !important;
}

/* Non / Siyati */
.lka-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 18px;
}

.lka-row-2col .form-row { margin: 0 !important; }

@media (max-width: 600px) {
    .lka-row-2col { grid-template-columns: 1fr; gap: 0; }
    .lka-row-2col .form-row { margin-bottom: 18px !important; }
}

/* ============================================================
   6. MOT DE PASSE + ŒIL
   ============================================================ */
.lka-pass-wrap { position: relative; display: block; }
.lka-pass-wrap input { padding-right: 48px !important; }

html body .lka-wrap button.lka-pass-toggle,
html body .lka-wrap button.lka-pass-toggle:focus,
html body .lka-wrap button.lka-pass-toggle:active {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--lka-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    transition: color .2s, background .2s;
}

@media (hover: hover) {
    html body .lka-wrap button.lka-pass-toggle:hover {
        color: var(--lka-accent) !important;
        background: rgba(0, 32, 159, .08) !important;
    }
}

html body .lka-wrap button.lka-pass-toggle.is-visible { color: var(--lka-accent) !important; }

/* ============================================================
   7. JAUGE DE FORCE
   ============================================================ */
.lka-strength { margin-top: 10px; padding: 0; }
.lka-strength[hidden] { display: none; }

.lka-strength__bar {
    display: flex;
    gap: 4px;
    height: 4px;
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 2px;
}

.lka-strength__seg {
    flex: 1;
    height: 100%;
    background: var(--lka-line);
    border-radius: 2px;
    transition: background .3s ease;
}

.lka-strength[data-level="1"] .lka-strength__seg:nth-child(-n+1) { background: #DC2626; }
.lka-strength[data-level="2"] .lka-strength__seg:nth-child(-n+2) { background: #F59E0B; }
.lka-strength[data-level="3"] .lka-strength__seg:nth-child(-n+3) { background: #3B82F6; }
.lka-strength[data-level="4"] .lka-strength__seg               { background: #10B981; }

.lka-rules {
    display: grid;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.lka-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--lka-muted);
    font-size: 12.5px;
    line-height: 1.4;
    transition: color .2s;
}

.lka-dot {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: var(--lka-line);
    border-radius: 50%;
    transition: background .2s;
}

.lka-dot::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: solid #FFFFFF;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .2s;
}

.lka-rules li.is-valid { color: var(--lka-green); font-weight: 500; }
.lka-rules li.is-valid .lka-dot { background: var(--lka-green); }
.lka-rules li.is-valid .lka-dot::after { transform: rotate(45deg) scale(1); }

/* ============================================================
   8. MESSAGES SOUS LES CHAMPS
   ============================================================ */
.lka-field-msg { display: none; margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
.lka-field-msg.is-error { display: block; color: var(--lka-red); font-weight: 500; }
.lka-field-msg.is-ok    { display: block; color: var(--lka-green); font-weight: 500; }

/* ============================================================
   9. BOUTONS PRINCIPAUX (Konekte / Enskri) — SOURCE UNIQUE
   Actif : bleu.  Inactif : gris + cadenas, TOUJOURS visible.
   ============================================================ */
html body .lka-wrap button.woocommerce-form-login__submit,
html body .lka-wrap button.woocommerce-form-register__submit,
html body .lka-wrap button.woocommerce-form-login__submit:focus,
html body .lka-wrap button.woocommerce-form-register__submit:focus,
html body .lka-wrap button.woocommerce-form-login__submit:active,
html body .lka-wrap button.woocommerce-form-register__submit:active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    visibility: visible !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 8px 0 0 !important;
    padding: 13px 24px !important;
    box-sizing: border-box;
    color: #FFFFFF !important;
    background: var(--lka-accent) !important;
    border: 2px solid var(--lka-accent) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 32, 159, .2) !important;
    opacity: 1 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    text-align: center;
    text-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, border-color .2s, transform .15s, box-shadow .2s !important;
}

@media (hover: hover) {
    html body .lka-wrap button.woocommerce-form-login__submit:hover:not(:disabled),
    html body .lka-wrap button.woocommerce-form-register__submit:hover:not(:disabled) {
        background: var(--lka-accent-dk) !important;
        border-color: var(--lka-accent-dk) !important;
        box-shadow: 0 6px 20px rgba(0, 32, 159, .3) !important;
        transform: translateY(-1px);
    }
}

html body .lka-wrap button.woocommerce-form-login__submit:focus-visible,
html body .lka-wrap button.woocommerce-form-register__submit:focus-visible {
    outline: 2px solid var(--lka-gold) !important;
    outline-offset: 2px !important;
}

/* Inactif : visible, gris, avec cadenas */
html body .lka-wrap button.woocommerce-form-register__submit:disabled,
html body .lka-wrap button.woocommerce-form-register__submit[disabled],
html body .lka-wrap button.woocommerce-form-register__submit[aria-disabled="true"],
html body .lka-wrap button.woocommerce-form-register__submit:disabled:hover {
    color: var(--lka-muted) !important;
    background: var(--lka-soft) !important;
    border-color: var(--lka-line) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
}

html body .lka-wrap button.woocommerce-form-register__submit:disabled::before {
    content: '🔒';
    font-size: 13px;
    opacity: .75;
}

/* Lien-bouton (panneau Vandè) */
html body .lka-wrap a.lka-btn--accent,
html body .lka-wrap a.lka-btn--accent:link,
html body .lka-wrap a.lka-btn--accent:visited {
    display: inline-block;
    padding: 12px 28px;
    color: #FFFFFF !important;
    background: var(--lka-accent) !important;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 32, 159, .2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .2s, transform .15s;
}

@media (hover: hover) {
    html body .lka-wrap a.lka-btn--accent:hover {
        color: #FFFFFF !important;
        background: var(--lka-accent-dk) !important;
        text-decoration: none !important;
        transform: translateY(-1px);
    }
}

/* ============================================================
   10. "SONJE MWEN" + CHECKBOXES
   ============================================================ */
.lka-row-inline {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 8px !important;
}

.lka-wrap .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: var(--lka-text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* ============================================================
   CHECKBOX — Connexion / Inscription
   Coche blanche sur fond bleu, visible en clair ET en sombre
   ============================================================ */

.lka-wrap .woocommerce-form__input-checkbox {
    position: relative !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--lka-surface) !important;
    border: 2px solid var(--lka-line) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all .2s !important;
}

/* Cocher : fond bleu vif + bordure bleue */
.lka-wrap .woocommerce-form__input-checkbox:checked {
    background: var(--lka-accent) !important;
    background-color: var(--lka-accent) !important;
    border-color: var(--lka-accent) !important;
}

/* La coche ✓ — centrée dans le carré de 20×20 */
.lka-wrap .woocommerce-form__input-checkbox:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 1px !important;
    left: 5px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
    background: transparent !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Hover : bordure bleue pour indiquer que c'est cliquable */
.lka-wrap .woocommerce-form__input-checkbox:hover {
    border-color: var(--lka-accent) !important;
}

.lka-wrap .woocommerce-form__input-checkbox:focus-visible {
    outline: 2px solid var(--lka-gold) !important;
    outline-offset: 2px !important;
}

/* ============================================================
   "Ou pèdi modpas ou ?"
   ============================================================ */
.lka-wrap .lost_password {
    margin: 16px 0 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    text-align: center;
}

/* ============================================================
   Bloc des conditions + son label
   ============================================================ */
.lka-wrap .lka-terms {
    margin: 20px 0 18px !important;
}

.lka-wrap .lka-terms label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: var(--lka-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

.lka-wrap .lka-terms input[type="checkbox"] {
    margin-top: 2px !important;
}

/* ============================================================
   11. LIENS (conditions, mot de passe oublié, politique de confidentialité)
   Un seul bloc : bleu Lakay en clair, bleu clair en sombre,
   survol rouge (clair) / doré (sombre). Les couleurs viennent
   des tokens --lka-link / --lka-link-hover (section 0).
   ============================================================ */
html body .lka-wrap a:not(.lka-btn--accent),
html body .lka-wrap a:not(.lka-btn--accent):link,
html body .lka-wrap a:not(.lka-btn--accent):visited {
    color: var(--lka-link) !important;
    text-decoration: none !important;
    transition: color .2s !important;
}

html body .lka-wrap a:not(.lka-btn--accent):hover,
html body .lka-wrap a:not(.lka-btn--accent):focus-visible,
html body .lka-wrap a:not(.lka-btn--accent):active {
    color: var(--lka-link-hover) !important;
    text-decoration: underline !important;
}

html body .lka-wrap .lost_password a,
html body .lka-wrap .lka-terms a,
html body .lka-wrap .woocommerce-privacy-policy-link {
    font-weight: 600;
}

/* Paragraphe de confidentialité WooCommerce */
html body .lka-wrap .woocommerce-privacy-policy-text,
html body .lka-wrap .woocommerce-privacy-policy-text p {
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: var(--lka-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* ============================================================
   12. PANNEAU VANDÈ
   ============================================================ */
.lka-vendor-cta {
    padding: 40px 24px;
    text-align: center;
    background: var(--lka-soft);
    border: 1.5px dashed var(--lka-line);
    border-radius: var(--lka-radius);
}

.lka-vendor-cta__title {
    margin: 0 0 12px !important;
    color: var(--lka-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.lka-vendor-cta__text {
    max-width: 480px;
    margin: 0 auto 24px !important;
    color: var(--lka-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================================
   13. JAUGE NATIVE WOOCOMMERCE : masquée (on a la nôtre)
   ============================================================ */
.lka-wrap #password_strength_meter,
.lka-wrap #password-strength-meter,
.lka-wrap .woocommerce-password-strength,
.lka-wrap .woocommerce-password-hint,
.lka-wrap .password-strength-meter,
.lka-wrap div[class*="password-strength"] {
    display: none !important;
}

/* ============================================================
   14. MASQUER LES CHAMPS DOKAN DANS LE FORMULAIRE KLIYAN
   ------------------------------------------------------------
   Dokan injecte ses champs vendeur via woocommerce_register_form.
   On ne peut PAS les retirer en PHP (ils contiennent le nonce).
   → On les masque visuellement, UNIQUEMENT dans .lka-form-customer.
   ============================================================ */

.lka-wrap .lka-form-customer .dokan-form-group,
.lka-wrap .lka-form-customer .dokan-seller-registration-form,
.lka-wrap .lka-form-customer .dokan-seller-form,
.lka-wrap .lka-form-customer [id^="dokan-"],
.lka-wrap .lka-form-customer [name^="dokan_"],
.lka-wrap .lka-form-customer [class*="dokan-seller-"],
.lka-wrap .lka-form-customer [class*="dokan-store-"],
.lka-wrap .lka-form-customer [class*="dokan-address"],
.lka-wrap .lka-form-customer [class*="dokan-phone"],
.lka-wrap .lka-form-customer [class*="dokan-payment"],
.lka-wrap .lka-form-customer [class*="dokan-social"],
.lka-wrap .lka-form-customer .user-role,
.lka-wrap .lka-form-customer .show_if_seller {
    display: none !important;
}

.lka-wrap .lka-form-customer p:has(input[name="role"]) {
    display: none !important;
}

/* On garde le texte de confidentialité WooCommerce */
.lka-wrap .lka-form-customer .woocommerce-privacy-policy-text {
    display: block !important;
}

/* ============================================================
   15. RESPONSIVE + ACCESSIBILITÉ
   ============================================================ */
@media (max-width: 600px) {
    .lka-wrap { padding: 16px 12px 32px; }
    .lka-panel { padding: 24px 18px; }
    .lka-panel__title { font-size: 22px; margin-bottom: 20px; }

    html body .lka-wrap button.lka-tab,
    html body .lka-wrap button.lka-tab:focus,
    html body .lka-wrap button.lka-tab:active {
        padding: 12px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lka-wrap * { transition-duration: .01ms !important; }
}