/* 
 * Styles pour les formulaires utilisateur WordPress
 * Compatible avec les pages de connexion, inscription et compte utilisateur
 */

/* ===== GÉNÉRAL ===== */
.user-profile-php .password-field-wrapper,
.profile-php .password-field-wrapper,
.user-edit-php .password-field-wrapper {
    width: 100% !important;
    margin-bottom: 16px !important;
}

/* ===== PAGES DE CONNEXION ===== */
body.login {
    background: #FDFDEC !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.login h1 {
    text-align: center !important;
}

.login h1 a {
    background-image: url('../images/logo_euno.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto !important;
    display: block !important;
}

.login form {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    padding: 32px !important;
    margin-top: 20px !important;
}

.login label {
    color: #374151 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: #F0B80D !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(240, 184, 13, 0.1) !important;
}

.login .button-primary {
    background: linear-gradient(135deg, #F0B80D 0%, #FFA500 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #2c2c2c !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 12px 24px !important;
    text-shadow: none !important;
    box-shadow: 0 4px 15px rgba(240, 184, 13, 0.3) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 16px !important;
}

.login .button-primary:hover {
    background: linear-gradient(135deg, #FFE55C 0%, #FFB347 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(240, 184, 13, 0.4) !important;
}

.login .button-primary:active {
    transform: translateY(0) !important;
}

/* Messages d'erreur et de succès */
.login .message {
    background: rgba(16, 185, 129, 0.1) !important;
    border-left: 4px solid #10b981 !important;
    color: #065f46 !important;
    border-radius: 8px !important;
    padding: 16px !important;
}

.login #login_error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-left: 4px solid #ef4444 !important;
    color: #991b1b !important;
    border-radius: 8px !important;
    padding: 16px !important;
}

/* Liens */
.login a {
    color: #F0B80D !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.login a:hover {
    color: #d97706 !important;
}

/* ===== STYLES POUR PASSWORD TOGGLE ===== */
.login .password-field-wrapper {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.login .password-field-wrapper input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 45px !important;
    /* Assurer la même hauteur que les autres inputs */
    min-height: 40px !important;
    height: auto !important;
}

.login .password-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ddd !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    opacity: 0.7 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login .password-toggle-btn:hover {
    opacity: 1 !important;
    background: rgba(240, 184, 13, 0.1) !important;
    border-color: #F0B80D !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.login .password-toggle-btn .toggle-icon {
    display: block !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ===== PAGES D'ADMINISTRATION ===== */
.wp-admin .password-field-wrapper {
    width: 100% !important;
    max-width: 25em !important;
}

.wp-admin .password-toggle-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ddd !important;
}

.wp-admin .password-toggle-btn:hover {
    background: rgba(240, 184, 13, 0.1) !important;
    border-color: #F0B80D !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .login form {
        margin: 20px auto !important;
        padding: 24px !important;
    }
    
    .login h1 a {
        width: 60px !important;
        height: 60px !important;
    }
    
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
    
    .password-field-wrapper input {
        padding-right: 45px !important;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login form {
    animation: fadeIn 0.5s ease-out !important;
}

/* ===== WOOCOMMERCE COMPATIBILITY ===== */
.woocommerce-form .password-field-wrapper,
.woocommerce-account .password-field-wrapper,
form .password-field-wrapper {
    width: 100% !important;
    position: relative !important;
    display: block !important;
}

.woocommerce-form .password-field-wrapper input,
.woocommerce-account .password-field-wrapper input,
form .password-field-wrapper input {
    width: 100% !important;
    padding-right: 45px !important;
    box-sizing: border-box !important;
    /* Assurer une hauteur cohérente */
    min-height: 44px !important;
    height: auto !important;
}

.woocommerce .password-toggle-btn,
.woocommerce-form .password-toggle-btn,
.woocommerce-account .password-toggle-btn,
form .password-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ddd !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    opacity: 0.7 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce .password-toggle-btn:hover,
.woocommerce-form .password-toggle-btn:hover,
.woocommerce-account .password-toggle-btn:hover,
form .password-toggle-btn:hover {
    background: rgba(240, 184, 13, 0.1) !important;
    border-color: #F0B80D !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.password-toggle-btn .toggle-icon {
    display: block !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ===== AMÉLIORATION ACCESSIBILITÉ ===== */
.password-toggle-btn:focus {
    outline: 2px solid #F0B80D !important;
    outline-offset: 2px !important;
}

.password-toggle-btn[aria-pressed="true"] {
    background: rgba(240, 184, 13, 0.2) !important;
}

/* ===== ÉTATS DE CHARGEMENT ===== */
.login .button-primary.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.login .button-primary.loading::after {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid currentColor !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-left: 8px !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}