/* ==========================================================================
   1. CONFIGURATION & VARIABLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;800&display=swap');

:root {
    /* --- LIGHT MODE (Défaut - Base) --- */
    --account-bg: #F0F2F5;
    --glass: #FFFFFF;
    --border: rgba(0, 0, 0, 0.06);
    --text-main: #1A1A1A;
    --text-sub: #5E6C84;
    --accent: #0066FF; 
    --glow: 0 10px 30px rgba(0, 102, 255, 0.15);
    --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
    
    /* Icônes visibles en mode clair */
    --bg-icon-color: #0066FF;
    --bg-icon-opacity: 0.10;
    
    --toggle-bg: #E4E6EB;

    /* LOGIN PAGE VARS */
    --primary-color: #2563eb;
    --primary-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.8);
    --shadow-soft: 0 20px 40px -10px rgba(0,0,0,0.08);
    --text-dark: #0f172a;
    --text-grey: #64748b;
}

/* --- DARK MODE (Activé via classe .account-dark-mode) --- */
.account-dark-mode {
    --account-bg: #050505;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.08);
    --text-main: #FFFFFF;
    --text-sub: #8899A6;
    --accent: #2962FF; /* Bleu Néon */
    --glow: 0 0 25px rgba(41, 98, 255, 0.3);
    --card-shadow: 0 10px 40px rgba(0,0,0,0.5);
    
    /* Icônes de fond (Dark) */
    --bg-icon-color: #FFFFFF;
    --bg-icon-opacity: 0.03; 
    
    --toggle-bg: rgba(255,255,255,0.1);
}

/* ==========================================================================
   2. GLOBAL OVERRIDES (THEME RESET)
   ========================================================================== */
/* On remet à zéro toutes les marges que le thème parent pourrait ajouter */
.woocommerce-account .site-content,
.woocommerce-account .entry-content,
.woocommerce-account .entry-header,
.woocommerce-account .site-main,
.woocommerce-account .content-area,
.woocommerce-account article {
    margin: 0 !important; 
    border: none !important;
}

/* Header & Footer Fixes */
.woocommerce-account .site-header {
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important; 
    border-bottom: none !important;
}
.woocommerce-account .site-footer {
    margin-top: 0 !important;
    padding-top: 90px !important; 
}

/* Nettoyage éléments par défaut WooCommerce */
.woocommerce-account .entry-header, 
.woocommerce-MyAccount-content > h2 { display: none !important; }
.woocommerce-MyAccount-content { width: 100%; }

/* ==========================================================================
   3. LAYOUT GENERAL DU COMPTE
   ========================================================================== */
.woocommerce-account .site-content {
    background-color: var(--account-bg);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    
    /* SOLUTION PRO : Variable header + espace confort */
    padding-top: calc(var(--header-height) + 20px) !important; 
    padding-bottom: 100px;
    width: 100%;
    max-width: 100% !important; /* Force full width background */
}

/* Le conteneur principal centré */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 1400px;
    width: 92%;
    margin: 0 auto !important;
    position: relative;
}

/* ==========================================================================
   4. DASHBOARD HEADER & SWITCHER
   ========================================================================== */
.dash-header-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 20px;
}

.dash-text h1 {
    font-size: 48px; font-weight: 800; margin: 0; letter-spacing: -1.5px;
    color: var(--text-main);
}
.dash-text p {
    font-size: 18px; color: var(--text-sub); margin: 5px 0 0 0;
}

/* Switch Theme Button (Dashboard version) */
.theme-switch {
    background: var(--toggle-bg);
    border: 1px solid var(--border);
    padding: 5px;
    border-radius: 50px;
    display: flex; align-items: center; gap: 5px;
    cursor: pointer;
    position: relative;
    width: 64px; height: 34px;
    transition: 0.3s;
}
.switch-knob {
    width: 24px; height: 24px;
    background: var(--text-main);
    border-radius: 50%;
    position: absolute; left: 5px;
    transition: 0.3s cubic-bezier(0.3, 1.5, 0.7, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: var(--account-bg);
}
.account-dark-mode .switch-knob { transform: translateX(30px); }

/* ==========================================================================
   5. GRID SYSTEM & CARDS (DASHBOARD)
   ========================================================================== */
.modern-dashboard-wrapper {
    margin-bottom: 100px; 
    display: block;       
}

.dashboard-modern-grid {
    display: grid;
    /* Configuration par défaut (Desktop) : 2 colonnes pour équilibrer les 4 cartes */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
    width: 100%;
}

/* --- Style des Cartes --- */
.modern-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 25px;
    text-decoration: none !important;
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 160px;
    transition: all 0.4s ease;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.modern-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--glow);
    border-color: var(--accent);
}

/* Icone de fond décorative */
.bg-icon {
    position: absolute; top: -10px; right: -10px;
    font-size: 120px; 
    color: var(--bg-icon-color);
    opacity: var(--bg-icon-opacity);
    transform: rotate(-10deg);
    transition: 0.5s;
}
.modern-card:hover .bg-icon {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.15; 
    color: var(--accent);
}

/* Contenu de la carte */
.card-icon {
    width: 50px; height: 50px;
    background: var(--toggle-bg);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--text-main);
    margin-bottom: 20px;
    transition: 0.3s;
}
.modern-card:hover .card-icon { background: var(--accent); color: #fff; }

.card-info h3 { font-size: 22px; font-weight: 700; color: var(--text-main); margin: 0 0 5px 0; }
.card-info p { font-size: 15px; color: var(--text-sub); margin: 0; }

/* --- Responsive Grid & Dashboard --- */

/* TABLETTE (max 1100px) : Reste à 2 colonnes (déjà défini par défaut) */
@media (max-width: 1100px) {
    .modern-dashboard-wrapper { margin-bottom: 60px; }
}

/* MOBILE (max 768px) */
@media (max-width: 768px) {
    /* 1. Grille verticale */
    .dashboard-modern-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    /* 2. Ajustement cartes */
    .modern-card {
        padding: 25px;
        min-height: auto;
    }
    
    /* 3. Header Dashboard */
    .dash-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 30px;
        position: relative; /* Pour positionner le switch */
    }

    .dash-header-wrapper .theme-switch {
        position: absolute;
        top: 0; right: 0;
        margin-top: 10px;
    }
    
    .dash-text h1 { font-size: 32px; }
    .dash-text p { font-size: 16px; }

    /* 4. Icone de fond */
    .bg-icon { font-size: 80px; opacity: 0.05; }
}

/* ==========================================================================
   6. SOUS-PAGES & NAVIGATION
   ========================================================================== */
.sub-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    width: 100%;
}

/* Bouton Retour */
.modern-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none !important;
    transition: 0.3s ease;
}

.modern-back-btn .icon-box {
    width: 45px; height: 45px;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--card-shadow);
}

.modern-back-btn .btn-text {
    font-size: 15px; font-weight: 600; color: var(--text-sub);
    transition: 0.3s;
}

/* Hover Animation */
.modern-back-btn:hover .icon-box {
    background: var(--accent); color: #FFFFFF;
    border-color: var(--accent);
    transform: translateX(-5px) scale(1.1);
    box-shadow: var(--glow);
}
.modern-back-btn:hover .btn-text {
    color: var(--text-main); transform: translateX(5px);
}

@media (max-width: 768px) {
    .modern-back-btn .btn-text { display: none; }
}

/* ==========================================================================
   7. TABLEAUX & BOUTONS COMMANDES
   ========================================================================== */
/* Bouton "Voir" dans le tableau */
.woocommerce-orders-table__cell-order-actions .button {
    padding: 8px 20px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border-radius: 50px !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.2);
    transition: all 0.3s ease;
}

.woocommerce-orders-table__cell-order-actions .button:hover {
    background: var(--text-main) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    color: #fff !important;
}

@media (max-width: 768px) {
    .woocommerce-orders-table__cell-order-actions {
        text-align: right !important;
        padding-top: 10px !important;
    }
    .woocommerce-orders-table__cell-order-actions .button {
        padding: 10px 25px !important;
        font-size: 14px !important;
    }
}

/* --- FIX PAGINATION (Aligné à droite) --- */
.woocommerce-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end; /* C'est ici que ça se passe : flex-end = Droite */
    gap: 15px; 
    width: 100%; /* S'assure que le conteneur prend toute la largeur pour pouvoir pousser à droite */
}

/* Le reste du style des boutons ne change pas */
.woocommerce-pagination .woocommerce-button {
    width: auto !important;
    display: inline-flex !important;
    
    padding: 12px 30px !important;
    border-radius: 50px !important;
    background: var(--text-main) !important; 
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.woocommerce-pagination .woocommerce-button:hover {
    background: var(--accent) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 102, 255, 0.3);
    color: #fff !important;
}

/* ==========================================================================
   8. MODAL DE DÉCONNEXION (CORRIGÉ)
   ========================================================================== */
.logout-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}

.logout-modal-overlay.active { display: flex; opacity: 1; }

.logout-modal {
    background: var(--glass);
    border: 1px solid var(--border);
    padding: 40px;
    border-radius: 24px;
    width: 90%; max-width: 400px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* FIX CONTENU : Empêche le débordement */
    overflow: hidden; 
    box-sizing: border-box;
}

.logout-modal-overlay.active .logout-modal { transform: scale(1); }

.logout-icon {
    font-size: 40px; color: var(--accent); margin-bottom: 20px;
    display: inline-block;
}

.logout-modal h3 { margin: 0 0 10px 0; font-size: 24px; color: var(--text-main); }
.logout-modal p { color: var(--text-sub); margin-bottom: 30px; font-size: 16px; }

.modal-actions { 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
    width: 100%; /* S'assure que le conteneur prend la largeur dispo */
}

.modal-btn {
    padding: 12px 25px; 
    border-radius: 50px; 
    border: none;
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.3s;
    font-size: 15px; 
    text-decoration: none !important;
    
    /* LE FIX EST ICI : */
    box-sizing: border-box; /* Inclut le padding dans le calcul de la largeur */
    max-width: 100%;        /* Empêche de dépasser */
}

.btn-cancel { background: var(--toggle-bg); color: var(--text-main); }
.btn-cancel:hover { background: #d1d5db; }

.btn-confirm {
    background: var(--accent); color: #fff;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}
.btn-confirm:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4); color: #fff;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .logout-modal { 
        padding: 30px 20px; /* Un peu moins de padding sur les côtés */
        width: 85%; 
    }
    .logout-icon { font-size: 30px; margin-bottom: 15px; }
    .logout-modal h3 { font-size: 20px; }
    .logout-modal p { margin-bottom: 20px; }
    
    .modal-actions { 
        flex-direction: column; 
        gap: 10px; 
    }
    
    .modal-btn { 
        width: 100%; /* Prend toute la largeur disponible */
        padding: 14px; /* Hauteur confortable pour le doigt */
        margin: 0; /* Sécurité pour éviter les décalages */
    }
    
    .btn-cancel { order: 2; }
    .btn-confirm { order: 1; }
}

/* ==========================================================================
   9. LOGIN PAGE (BREAKOUT STYLE)
   ========================================================================== */
/* Animations */
@keyframes ambientGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Wrapper principal (Overlay Fixe) */
.login-breakout-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 500; 
    overflow-y: auto;
    padding-top: calc(var(--header-height) + 40px) !important;
    padding-bottom: 40px;
    display: flex; justify-content: center; align-items: center;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}
.login-breakout-wrapper.dark-mode {
    background: linear-gradient(-45deg, #0f172a, #1e293b, #020617, #111827);
    background-size: 400% 400%;
    animation: ambientGradient 15s ease infinite;
}

/* Switch Theme Flottant (Login) */
.login-theme-switch {
    position: absolute;
    top: calc(var(--header-height) + 30px); right: 5%;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-dark);
    transition: 0.3s;
    z-index: 600; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.login-theme-switch:hover { transform: scale(1.1) rotate(15deg); background: #fff; }

.login-breakout-wrapper.dark-mode .login-theme-switch {
    background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.1);
}

/* Carte de Login */
.login-white-card {
    width: 100%; max-width: 520px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 50px 45px;
    box-shadow: var(--shadow-soft);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0; transform: translateY(30px);
    position: relative; z-index: 10;
    margin: 0 auto;
}
.login-breakout-wrapper.dark-mode .login-white-card {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.login-header-text { text-align: center; margin-bottom: 35px; }
.login-header-text h1 { margin: 0; font-size: 32px; font-weight: 800; color: var(--text-dark); letter-spacing: -1px; }
.login-header-text p { margin: 8px 0 0; color: var(--text-grey); font-size: 15px; }
.login-breakout-wrapper.dark-mode h1 { color: #fff; }
.login-breakout-wrapper.dark-mode p { color: #94a3b8; }

/* Tabs Navigation */
.login-tabs-nav {
    display: flex; position: relative;
    background: rgba(0,0,0,0.04);
    border-radius: 14px; padding: 5px; margin-bottom: 30px;
}
.login-breakout-wrapper.dark-mode .login-tabs-nav { background: rgba(255,255,255,0.05); }

.nav-btn {
    flex: 1; border: none; background: none; padding: 12px;
    font-weight: 600; font-size: 14px; color: var(--text-grey);
    cursor: pointer; z-index: 2; transition: color 0.3s;
}
.nav-btn:hover, .nav-btn:focus { 
    background: transparent !important; 
    color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: none !important;
}
.nav-btn.active, .nav-btn.active:hover { color: #fff !important; }

.nav-indicator {
    position: absolute; top: 5px; bottom: 5px; left: 5px;
    width: calc(50% - 5px);
    background: var(--text-dark);
    border-radius: 10px; z-index: 1;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.login-breakout-wrapper.dark-mode .nav-indicator { background: var(--primary-color); }

/* Inputs */
.custom-field { position: relative; margin-bottom: 20px; }

.field-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 18px; pointer-events: none;
    transition: 0.3s ease;
}

.field-input {
    width: 100%; box-sizing: border-box !important;
    padding: 16px 16px 16px 54px !important;
    background: #fff !important;
    border: 2px solid #f1f5f9 !important;
    border-radius: 16px !important;
    font-size: 16px !important; 
    color: var(--text-dark) !important;
    outline: none !important; 
    transition: all 0.2s ease;
}
.field-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    background: #fff !important;
}
.field-input:focus + .field-icon { color: var(--primary-color); transform: translateY(-50%) scale(1.1); }

/* Dark Mode Inputs */
.login-breakout-wrapper.dark-mode .field-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}
.login-breakout-wrapper.dark-mode .field-input:focus {
    border-color: #60a5fa !important;
    background: rgba(15, 23, 42, 0.9) !important;
}

/* Boutons Login */
.main-btn {
    width: 100%; padding: 18px; border-radius: 16px; border: none;
    font-size: 16px; font-weight: 700; cursor: pointer; color: #fff;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.main-btn:hover { 
    color: #ffffff !important; 
    text-decoration: none !important; 
    background-image: none !important; 
}

.blue-btn { background: var(--primary-gradient); box-shadow: 0 8px 20px -5px rgba(37, 99, 235, 0.4); }
.blue-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 25px -5px rgba(37, 99, 235, 0.5); }

.dark-btn { background: #0f172a; }
.dark-btn:hover { background: #1e293b; transform: translateY(-2px); }
.login-breakout-wrapper.dark-mode .dark-btn { background: var(--primary-gradient); }

/* Footer Login */
.form-tools {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; font-size: 14px; color: var(--text-grey);
}
.form-tools a, .switch-msg a {
    color: var(--text-grey); text-decoration: none; font-weight: 500;
    transition: 0.3s;
}
.form-tools a:hover, .switch-msg a:hover { color: var(--primary-color); }

.switch-msg { text-align: center; font-size: 15px; color: var(--text-grey); margin-top: 15px; }
.switch-msg a { color: var(--primary-color); font-weight: 700; }

.privacy-text { font-size: 12px; color: #94a3b8; text-align: center; margin-bottom: 15px; }
.alert-msg { background: #fee2e2; color: #dc2626; padding: 10px; border-radius: 8px; margin-bottom: 15px; text-align:center; }

/* Responsive Login */
@media (max-width: 768px) {
    .login-breakout-wrapper {
        padding: 15px; padding-top: 40px;
        align-items: flex-start;
    }
    .login-white-card {
        padding: 30px 20px; border-radius: 20px;
        animation: fadeInUp 0.5s ease forwards;
        max-width: 100%;
    }
    .login-header-text h1 { font-size: 26px; }
    .field-input { padding: 18px 18px 18px 50px !important; font-size: 16px !important; }
}

@media (max-height: 800px) {
    .login-breakout-wrapper {
        align-items: flex-start;
        padding-top: calc(var(--header-height) + 20px);
    }
}