/*!
 * =========================================================================
 * === ArtMeNow WooCommerce Customizations v0.1 =========================
 * =========================================================================
 * 
 * RÔLE :
 * Centralise TOUTES les customisations WooCommerce d'ArtMeNow.
 * Évite la dispersion des styles e-commerce dans les autres fichiers.
 * 
 * CONTENU :
 * 1. Messages et notifications WooCommerce
 * 2. Boutons spécialisés e-commerce
 * 3. Navigation My Account
 * 4. Cart Icon et fonctionnalités panier
 * 5. Intégrations spécifiques galerie
 * 6. Responsive design e-commerce
 * 7. Intégrations checkout et forms
 * 
 * DÉPENDANCES :
 * - style.css : Variables globales (OBLIGATOIRE)
 * - buttons.css : Classes de base boutons
 * - cards.css : Système de cartes (pour intégrations galerie)
 * 
 * COMPATIBILITÉ :
 * - WooCommerce 7.0+
 * - WordPress 6.0+
 * - Tous navigateurs modernes
 * 
 * Author: Gianmarco
 * Version: 0.1 (Centralized)
 * Date: 2026-02-17
 */

/* ==========================================================================
   💬 SECTION 1: MESSAGES ET NOTIFICATIONS WOOCOMMERCE
   ========================================================================== */

/* Suppression icônes messages par défaut */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
    display: none;
}

/* Uniformisation style messages */
.woocommerce-message, 
.woocommerce-info,
.woocommerce-error {
    background-color: var(--light-gray-2);
    border: 1px solid var(--mid-gray);
    border-radius: var(--amn-border-radius);
    padding: var(--amn-column-gap);
    margin: var(--amn-global-margin-top) 0;
    font-family: var(--body-font-family);
    color: var(--body-text-color);
    box-shadow: var(--shadow-buttons);
    transition: var(--amn-transition-default);
    line-height: 1.5;
}

/* Messages spécifiques par type */
.woocommerce-message {
    border-top: 3px solid #28a745;                 /* Vert succès */
    background-color: rgba(40, 167, 69, 0.05);
}

.woocommerce-info {
    border-top: 3px solid var(--primary-button-color);
    background-color: var(--light-gray-2);
}

.woocommerce-error {
    border-top: 3px solid #dc3545;                 /* Rouge erreur */
    background-color: rgba(220, 53, 69, 0.05);
    color: #721c24;
}

/* Liens dans messages */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--primary-button-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--amn-transition-fast);
    border-bottom: 1px solid transparent;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
    text-decoration: underline;
    color: var(--primary-button-color-hover);
    border-bottom-color: currentColor;
}

/* ==========================================================================
   🛒 SECTION 2: BOUTONS SPÉCIALISÉS E-COMMERCE
   ========================================================================== */

/* Boutons WooCommerce héritent du système global */
.woocommerce .button,
.woocommerce-page .button {
    /* Hérite de buttons.css - pas de redéfinition */
}

/* Style alternatif WooCommerce */
.woocommerce .button.alt,
.woocommerce-page .button.alt {
    background-color: var(--primary-button-color);
    color: var(--btn-primary-text-color);
    border-color: var(--primary-button-color);
}

.woocommerce .button.alt:hover,
.woocommerce-page .button.alt:hover {
    background-color: var(--primary-button-color-hover);
    border-color: var(--primary-button-color-hover);
}

/* Bouton Ajouter au panier (page produit) */
.single_add_to_cart_button {
    font-weight: 600;
    padding: 16px 32px;
    min-height: 52px;
    font-size: 16px;
    width: 100%;                                    /* Pleine largeur */
    margin-top: var(--amn-global-margin-top);
    border-radius: var(--amn-border-radius);
    transition: var(--amn-transition-default);
}

/* Bouton Ajouter au panier (cartes produits) */
.add_to_cart_button {
    font-size: 14px;
    padding: 10px 16px;
    min-height: 40px;
    border-radius: var(--amn-border-radius);
    transition: var(--amn-transition-default);
}

/* Bouton Voir le panier */
.added_to_cart {
    margin-left: 10px;
    background-color: var(--secondary-button-color);
    color: var(--btn-secondary-text-color);
    border-radius: var(--amn-border-radius);
    transition: var(--amn-transition-default);
}

.added_to_cart:hover {
    background-color: var(--secondary-button-color-hover);
    color: var(--btn-secondary-text-color-hover);
}

/* États de quantité */
.quantity input[type="number"] {
    border: 1px solid var(--selector-border);
    border-radius: var(--amn-border-radius);
    padding: 8px 12px;
    font-family: var(--body-font-family);
    background-color: var(--selector-background);
    transition: var(--amn-transition-default);
    min-height: 40px;
}

.quantity input[type="number"]:focus {
    outline: 2px solid var(--primary-button-color);
    outline-offset: 2px;
    border-color: var(--selector-border-hover);
}

/* ==========================================================================
   👤 SECTION 3: NAVIGATION MY ACCOUNT
   ========================================================================== */

/* Masquage section téléchargements */
.woocommerce-MyAccount-navigation-link--downloads {
    display: none;
}

/* Navigation My Account responsive */
.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--amn-column-gap) / 2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
}

.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 12px 16px;
    background-color: var(--light-gray);
    color: var(--body-text-color);
    text-decoration: none;
    border-radius: var(--amn-border-radius);
    font-family: var(--body-font-family);
    font-weight: 500;
    transition: var(--amn-transition-default);
    border: 1px solid var(--mid-gray-2);
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
    background-color: var(--primary-button-color);
    color: var(--btn-primary-text-color);
    border-color: var(--primary-button-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-buttons-hover);
}

/* ==========================================================================
   🛒 SECTION 4: CART ICON ET FONCTIONNALITÉS PANIER
   ========================================================================== */

/* Correction du viewBox pour afficher l'icône complète */
#ast-cart-svg {
    width: 20px ;
    height: 20px ;

}

/* Force l'affichage complet en ajustant le conteneur */
.ast-icon-shopping-cart,
.ast-addon-cart-wrap {
    display: inline-flex ;
    align-items: center ;
    justify-content: center ;

    
}
.ast-menu-cart-outline .ast-cart-menu-wrap .count,.ast-menu-cart-outline .ast-addon-cart-wrap {
    border: none;

}

/* ✅ Couleur de l'icône panier - NOIR (ou couleur du texte) */
.ast-icon-shopping-cart svg,
.ast-icon-shopping-cart svg path {

}
.ast-cart-menu-wrap .count,
.ast-addon-cart-wrap {

    border: none !important;
}
/* Assure que le conteneur ne coupe pas l'icône */
.ast-site-header-cart-li {
    overflow: visible;

}

.cart-container {
    display: flex;
    align-items: center;

}

/* Compteur - fond noir, texte blanc */
.ast-addon-cart-wrap .count {
    background-color: var(--primary-button-color) !important;
    color: var(--btn-primary-text-color) !important;

}
.ast-cart-menu-wrap .count,
.ast-addon-cart-wrap {
  
    border: none !important;
}

/* ==========================================================================
   🎨 SECTION 5: INTÉGRATIONS GALERIE SPÉCIFIQUES
   ========================================================================== */

/* Messages "no products" dans filtres gallery */
.woocommerce-info.gallery-no-results {
    text-align: center;
    padding: calc(var(--amn-global-margin-bottom) / 2) var(--amn-column-gap);
    margin: var(--amn-global-margin-top) 0;
    background: linear-gradient(135deg, var(--light-gray-2), var(--light-gray));
    border: 1px solid var(--mid-gray);
    border-radius: var(--amn-border-radius);        /* ✅ AJOUTÉ cohérence */
}

/* Produits en rupture dans galerie */
.outofstock .amn-card {
    opacity: var(--amn-opacity-disabled);
    transition: var(--amn-transition-default);
}

.outofstock .amn-card__badge {
    background-color: var(--dark-gray-3);
    color: white;
}

.outofstock .amn-card__image {
    filter: grayscale(0.8);
    transition: filter var(--amn-transition-default);
}

/* ✅ AJOUTÉ : États de chargement e-commerce */
.woocommerce-loading .amn-card {
    opacity: var(--amn-opacity-loading);
    pointer-events: none;
    transition: var(--amn-transition-default);
}

/* Intégration avec le système de filtres */
.woocommerce .artmenow-error {
    /* Hérite des styles définis dans gallery-system.css */
    border-top-color: var(--primary-button-color);
}

/* Prix dans les cartes */
.amn-card .price {
    font-family: var(--body-font-family);
    font-weight: 600;
    color: var(--body-text-color);
}

.amn-card .price del {
    opacity: var(--amn-opacity-disabled);
    margin-right: 8px;
}

.amn-card .price ins {
    text-decoration: none;
    color: var(--primary-button-color);
}

/* ==========================================================================
   📱 SECTION 6: RESPONSIVE E-COMMERCE
   ========================================================================== */

@media (max-width: 767px) {
    /* Bouton Add to Cart pleine largeur sur mobile */
    .single_add_to_cart_button {
        padding: 18px 24px;
        min-height: var(--amn-min-touch-target);
        font-size: 16px;
    }
    
    /* Navigation My Account en colonne sur mobile */
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }
    
    .woocommerce-MyAccount-navigation a {
        text-align: center;
        padding: 14px 20px;
    }
    
    /* Messages plus compacts */
    .woocommerce-message, 
    .woocommerce-info,
    .woocommerce-error {
        padding: 15px;
        font-size: 14px;
        margin: 15px 0;
    }
    
    /* Cart widget responsive */
    .widget_shopping_cart_content {
        padding: 15px;
    }
    
    /* Quantity inputs plus grands sur mobile */
    .quantity input[type="number"] {
        min-height: var(--amn-min-touch-target);
        font-size: 16px;                            /* Évite zoom iOS */
    }
}

/* ==========================================================================
   🎯 SECTION 7: INTÉGRATIONS CHECKOUT ET FORMS
   ========================================================================== */

/* Forms de checkout cohérents avec design system */
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form select {
    border: 1px solid var(--selector-border);
    border-radius: var(--amn-border-radius);
    padding: 12px;
    font-family: var(--body-font-family);
    background-color: var(--selector-background);
    color: var(--body-text-color);
    transition: var(--amn-transition-default);
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce form input:focus,
.woocommerce form select:focus {
    outline: 2px solid var(--primary-button-color);
    outline-offset: 2px;
    border-color: var(--selector-border-hover);
    background-color: var(--main-background-color);
}

/* Labels de checkout */
.woocommerce-checkout .form-row label,
.woocommerce form label {
    font-family: var(--title-font-family);
    font-weight: 500;
    color: var(--body-text-color);
    margin-bottom: 6px;
    display: block;
    font-size: 14px;
}

/* Checkboxes et radios */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--primary-button-color);
}

/* Tables (panier, commandes) */
.woocommerce table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--amn-global-margin-top) 0;
}

.woocommerce table th,
.woocommerce table td {
    padding: 12px;
    border: 1px solid var(--mid-gray);
    text-align: left;
    font-family: var(--body-font-family);
}

.woocommerce table th {
    background-color: var(--light-gray);
    font-weight: 600;
    color: var(--body-text-color);
}

.woocommerce table tbody tr:hover {
    background-color: var(--light-gray-2);
    transition: var(--amn-transition-fast);
}

/* ==========================================================================
   🎨 SECTION 8: PRODUITS ET VARIATIONS
   ========================================================================== */

/* Galerie produit */
.woocommerce-product-gallery {
    margin-bottom: var(--amn-global-margin-bottom);
}

.woocommerce-product-gallery img {
    border-radius: var(--amn-border-radius);
    transition: var(--amn-transition-default);
}

/* Variations produits */
.variations select {
    border: 1px solid var(--selector-border);
    border-radius: var(--amn-border-radius);
    padding: 8px 12px;
    background-color: var(--selector-background);
    transition: var(--amn-transition-default);
}

.variations select:focus {
    outline: 2px solid var(--primary-button-color);
    outline-offset: 2px;
    border-color: var(--selector-border-hover);
}

/* Onglets produit */
.woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--mid-gray);
    margin: 0;
    padding: 0;
}

.woocommerce-tabs ul.tabs li {
    margin: 0 5px -1px 0;
    padding: 0;
    border: 1px solid var(--mid-gray);
    border-bottom: none;
    border-radius: var(--amn-border-radius) var(--amn-border-radius) 0 0;
    background-color: var(--light-gray);
}

.woocommerce-tabs ul.tabs li.active {
    background-color: var(--main-background-color);
}

.woocommerce-tabs ul.tabs li a {
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    color: var(--body-text-color);
    font-family: var(--body-font-family);
    transition: var(--amn-transition-fast);
}

.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-button-color);
}

/* ==========================================================================
   📝 NOTES DE MAINTENANCE
   ========================================================================== 
   
   POUR AJOUTER UNE CUSTOMISATION WOOCOMMERCE :
   1. Identifier la section appropriée (messages, boutons, etc.)
   2. Utiliser les variables du design system (style.css)
   3. Maintenir cohérence avec buttons.css et cards.css
   4. Tester responsive sur tous breakpoints
   5. Vérifier accessibilité (focus, contraste, touch targets)
   
   POUR MODIFIER STYLES E-COMMERCE :
   1. Variables globales → Modifier dans style.css (impact global)
   2. Styles spécifiques → Surcharger dans ce fichier
   3. Tester compatibilité avec plugins WooCommerce tiers
   
   DÉPENDANCES CRITIQUES :
   - ❌ Ne PAS dupliquer les styles de buttons.css
   - ✅ Utiliser EXCLUSIVEMENT les variables de style.css  
   - ✅ Maintenir cohérence avec gallery-system.css et cards.css
   - ✅ Respecter les breakpoints du design system
   
   EXTENSIONS FUTURES :
   - Section 9: Wishlist integration
   - Section 10: Advanced mini-cart
   - Section 11: Product quick view
   - Section 12: Reviews et ratings custom
   ========================================================================== */