/* Awesome CSS Code: WC MyAccount | 10/10/2026 07:36 */

/* --- Code: WooCommerce MyAccount - Auto Hide Success Notice --- */
/*=================================================================================
// WOOCOMMERCE MYACCOUNT AUTO-HIDE SUCCESS NOTICES
// AND ADD LOADER TO SAVE BUTTON - THE CSS CODE
// Ce code améliore l'expérience utilisateur (UX) sur la page Mon Compte 
// de WooCommerce lors de la modification du profil ou des adresses. Il ajoute :
// 1. Spinner & blocage anti-double clic sur le bouton de sauvegarde
// 2. Disparition automatique des messages de succès (Auto-Hide)
// 3. Défilement automatique vers les notifications (Scroll Auto)
//================================================================================*/
.woocommerce-message { 
	transition: opacity 0.8s ease-in-out; 
}

.ck-myaccount-button-save-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: ck-myaccount-button-save-spin 1s ease-in-out infinite;
	margin-right: 8px;
	vertical-align: middle;
}
@keyframes ck-myaccount-button-save-spin { to { transform: rotate(360deg); } }

/* --- Code: WooCommerce MyAccount Dashboard Card [PC#146] --- */
/*==========================================
// MYACCOUNT DASHBOARD CARDS
//=========================================*/
/* Cards Container */
.ck-myaccount-dashboard-card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: -10px;
}

/* Style de la carte individuelle */
.ck-myaccount-dashboard-card {
    border-radius: 5px;
    padding: 25px;
    text-decoration: none !important;
    color: #333 !important;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border: 1px solid #c4c4c5;
}
.dark .ck-myaccount-dashboard-card {
    border: 1px solid #404555;
}

.ck-myaccount-dashboard-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #007cba; /* Ou votre couleur de marque */
}

.ck-myaccount-dashboard-card-icon-container {
    font-size: 2rem;
}

.ck-myaccount-dashboard-card-content h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.ck-myaccount-dashboard-card-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}
/*** THE CARD ICONS***/
.ck-myaccount-dashboard-card-icon {
    border-radius: 18px;
    padding: 10px;
}

.ck-myaccount-dashboard-card-order-icon {
    color: #0e55db;
    background: #b9ceff;
}

.ck-myaccount-dashboard-card-download-icon {
    color: #bd0edb;
    background: #f9d3ff;
}

.ck-myaccount-dashboard-card-edit-account-icon {
    color: #11b300;
    background: #e9ffe3;
}

/* --- Code: WooCommerce MyAccount - Display Author Avavtar [PC#36] --- */
/*===============================================
//
//==============================================*/
.ck-myaccount-user-profile-wrapper {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    min-width: 300px;
    background: linear-gradient(135deg, #5b4dff 0%, #7c3aed 55%, #4f46e5 100%) !important;
}
        
.ck-myaccount-user-profile-avatar-container {
	margin-right: 10px;
}

.ck-myaccount-user-profile-avatar {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 7px solid #ffffff30 !important;
}

/*OLD
.ck-myaccount-user-profile-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 3px;
}*/

.ck-myaccount-user-profile-detail-container {
    color: #ffffff;
}

.ck-myaccount-user-profile-email {
    font-size: 12px;
}
.ck-myaccount-user-profile-logout-url {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    font-size: 12px;
	background: #b90101;
	color: #ffffff;
}

/* --- Code: WooCommerce MyAccount - Empty Item Boxes [PC#143] --- */
.ck-myaccount-empty-box-container {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin: 20px 0;
}
.dark .ck-myaccount-empty-box-container {
    background: #2A2C33;
}
 
.ck-myaccount-empty-box-icon {
    color: #d1d5db;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.ck-myaccount-empty-box-container h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.1;
}

.ck-myaccount-empty-box-container p {
    color: #6b7280 !important;
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.1;
}
.dark .ck-myaccount-empty-box-container p {
    color: #9fa9b5 !important;
}

.ck-myaccount-empty-box-button {
    color: #fff !important;
    padding: 15px 35px !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-decoration: none;
    display: inline-block;
}

.ck-myaccount-empty-box-button {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* --- Code: WooCommerce MyAccount - Menu & Content Wrapper [PC#121] --- */
/* ==========================================================================
   STRUCTURE MON COMPTE - THÈME NOIR (CK SIDEBAR)
   ========================================================================== */

/**
 * 1. Le Wrapper Global (Flexbox)
 * Contient la Sidebar et le Contenu Principal.
 */
.ck-woocommerce-before-account-navigation-wrapper {
    display: flex;
    align-items: flex-start; /* Aligne le haut de la sidebar et du contenu */
    gap: 40px;               /* Espace entre les deux colonnes */
    margin-top: 10px;
    width: 100%;
}

/**
 * 2. Le Container Sidebar (Aside)
 * Contient : Widgets personnalisés + Menu Navigation WooCommerce.
 */
.ck-woocommerce-before-account-navigation-container {
    flex: 0 0 300px;         /* Largeur fixe de la sidebar */
    width: 300px;
    position: sticky;        /* La sidebar reste visible au scroll */
    top: 20px;
}

/**
 * 3. Neutralisation du menu natif de WooCommerce
 * Comme il est dans notre aside, on annule les styles par défaut du thème/plugin.
 */
.ck-woocommerce-before-account-navigation-container .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    min-width: 300px;
}

.ck-woocommerce-before-account-navigation-container .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/**
 * 3. Le Contenu Principal (La zone de droite)
 */
.woocommerce-MyAccount-content {
    flex: 1;                /* Prend tout l'espace restant */
	width: 100% !important;
    margin: 0px !important;
    float: none !important;
}

/* ==========================================================================
   RESPONSIVE (MOBILE & TABLETTE)
   ========================================================================== */

@media (max-width: 767px) {
    /* On passe en colonne : la sidebar au dessus du contenu */
    .ck-woocommerce-before-account-navigation-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    /* La sidebar prend toute la largeur */
    .ck-woocommerce-before-account-navigation-container {
        flex: none;
        width: 100%;
        position: relative; /* On désactive le sticky sur mobile */
        top: 0;
    }
}

/* --- Code: WooCommerce MyAccount - Content Header Custom Title [PC#124] --- */
/*==============================================
// MYACCOUNT CONTENT HEADER TITLE
// Ajoute un titre personnalisé à chaque page de MyAcccount
//=============================================*/
.myaccount-content-header-title {
	margin-right: 10px;
	/*width: 22px;
	height: 22px;*/
	position: relative;
	top: -1.5px;
}

/* MarketKing - Menu "Demande de remboursement" */
/* On ne cible que le h2 qui est le TOUT PREMIER enfant du contenu MyAccount */
/* ET seulement si on est sur la page de remboursement */
body[class*="refund"] .woocommerce-MyAccount-content > h2:first-of-type:not(.ck-account-section-title) {
    display: none;
}
		
/* MarketKing Menu "Message" Title */
#marketking_myaccount_messages_title,
/* Event Ticket Core - Menu "Mes Billets" Title */
.myaccount-tickets-title {
    display: none !important;
}

/* --- Code: WooCommerce MyAccount > Dashboard Page --- */
/**************** MENU GENERAL ****************/ 
/* Hide MyAccount Page Header Title */
.storefront-full-width-content.woocommerce-account .entry-header {
    display: none !important;
}

.woocommerce-dashboard .woocommerce-MyAccount-content p:empty {
    display: none !important;
}

/* Hide "Go to Vendor Dashboard" Button */
.marketking_go_vendor_dashboard_linkXX {
    display: none !important;
}
/************** END MENU GENERAL **************/


/**************** STYLED MENU ****************/
.woocommerce-MyAccount-navigation ul li {
    border: 0px !important;
}

/* Remove Storefront Menu Icon */
.woocommerce-MyAccount-navigation ul li a::before {
    display: none;
}

.woocommerce .woocommerce-MyAccount-navigation-link {
    border-bottom: 0px solid #eee;
}
.woocommerce-MyAccount-navigation-link>a {
    display: block !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-bottom: 7px;
	border-radius: 3px;
	background: #003edd;
	color: #ffffff !important;
}
.woocommerce-MyAccount-navigation-link>a:hover {
    background: #0050ff;
}
.woocommerce-MyAccount-navigation-link.is-active a {
    background: #600fff !important;
}
/**************** END STYLED MENU ****************/


/**************** STYLED MENU IN MOBILE ****************/
@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation-link>a {
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 13px !important;
	}
}
/**************** END STYLED MENU IN MOBILE ****************/


/**************** MAKE MOBILE MENU IN TWO ROWS - 1ERE METHODE ****************/
@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation-link {
    width: 47% !important;
    display: inline-block !important;
    margin-right: 5px !important;
	}
}
/**************** END MAKE MOBILE MENU IN TWO ROWS - 1ERE METHODE ****************/

	
/**************** MAKE MOBILE MENU IN TWO ROWS - 2EME METHODE ****************/
/*@media (max-width: 767px) {*/
	/* Mettre le menu en ligne sur mobile */
	/*.woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }*/
	/* et afficher 2 colonnes de boutons sur mobile */
    /*.ck-woocommerce-before-account-navigation-container .woocommerce-MyAccount-navigation li {
        flex: 1 1 calc(50% - 10px); 
    }*/
	
	/* Margin deja géré par le gap:7px */
	/*.woocommerce-MyAccount-navigation-link>a {
	margin-bottom: 0px !important;
	}*/
/*}*/
/**************** END MAKE MOBILE MENU IN TWO ROWS- 2EME METHODE ****************/

/* --- Code: WooCommerce MyAccount > Edit Account --- */
/***** Edit PassWord Zone *****/
/* Text "Changement de Mot de passe" */
.woocommerce-EditAccountForm fieldset legend {
    background: transparent;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 0px !important;
    text-transform: uppercase;
}
/* Edit PassWord Foem Wrapper */
.woocommerce-EditAccountForm fieldset {
    background: transparent !important;
    border: 1px solid #C4C4D5;
}
.dark .woocommerce-EditAccountForm fieldset {
    border: 1px solid #404555;
}
/***** Edit PassWord Zone *****/