/**
 * CSS Personnalisé pour boutique.champagne-senez.com
 * 
 * Ce fichier remplace la couleur #24b9d7 (bleu cyan) par du noir (#000000)
 * sur tous les éléments du site
 */

/* ========================================
   REMPLACEMENT DE LA COULEUR #24b9d7 PAR NOIR
   ======================================== */

/* # Couleur de texte */
*[style*="color:#24b9d7"],
*[style*="color: #24b9d7"],
*[style*="color: #24B9D7"],
*[style*="color:#24B9D7"] {
    color: #000000 !important;
}

/* # Couleur de fond */
*[style*="background-color:#24b9d7"],
*[style*="background-color: #24b9d7"],
*[style*="background-color: #24B9D7"],
*[style*="background-color:#24B9D7"],
*[style*="background:#24b9d7"],
*[style*="background: #24b9d7"],
*[style*="background: #24B9D7"],
*[style*="background:#24B9D7"] {
    background-color: #000000 !important;
}

/* # Couleur de bordure */
*[style*="border-color:#24b9d7"],
*[style*="border-color: #24b9d7"],
*[style*="border-color: #24B9D7"],
*[style*="border-color:#24B9D7"] {
    border-color: #000000 !important;
}

/* # Liens et boutons - Couleur principale */
a,
button,
.btn-primary,
.btn-secondary {
    color: inherit;
}

a:hover,
button:hover,
.btn-primary:hover,
.btn-secondary:hover {
    color: #000000;
}

/* # Boutons primaires avec fond #24b9d7 */
.btn-primary {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #333333 !important;
    border-color: #333333 !important;
}

/* # Bouton Commander du panier - Texte en blanc */
.cart-detailed-actions .btn-primary,
.checkout .btn-primary,
.cart-grid-right .btn-primary,
button[type="submit"].btn-primary {
    color: #ffffff !important;
}

.cart-detailed-actions .btn-primary:hover,
.checkout .btn-primary:hover,
.cart-grid-right .btn-primary:hover,
button[type="submit"].btn-primary:hover {
    color: #ffffff !important;
}

/* # Liens avec couleur #24b9d7 */
a[style*="#24b9d7"],
a[style*="#24B9D7"] {
    color: #000000 !important;
}

/* # Éléments de navigation */
.header-top a,
.main-menu a,
.footer-container a {
    color: inherit;
}

.header-top a:hover,
.main-menu a:hover,
.footer-container a:hover {
    color: #000000 !important;
}

/* # Icônes et SVG */
svg[fill="#24b9d7"],
svg[fill="#24B9D7"] {
    fill: #000000 !important;
}

path[fill="#24b9d7"],
path[fill="#24B9D7"] {
    fill: #000000 !important;
}

/* # Classes personnalisées avec la couleur */
.text-primary,
.bg-primary,
.border-primary {
    color: #000000 !important;
}

.bg-primary {
    background-color: #000000 !important;
}

.border-primary {
    border-color: #000000 !important;
}

/* # Produits - Prix et badges */
.product-price,
.discount-percentage,
.discount-amount {
    color: inherit;
}

/* # Formulaires - Focus et états actifs */
input:focus,
textarea:focus,
select:focus {
    border-color: #000000 !important;
    outline-color: #000000 !important;
}

/* # Messages et alertes */
.alert-info {
    background-color: #f8f9fa !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

/* # Pagination */
.pagination .page-item.active .page-link {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* # Slider et carrousels */
.carousel-indicators li.active {
    background-color: #000000 !important;
}

.carousel-control-prev,
.carousel-control-next {
    color: #000000 !important;
}

/* # Menu mobile */
.mobile-menu a {
    color: inherit;
}

.mobile-menu a:hover {
    color: #000000 !important;
}

/* # Filtres et facettes */
.facet .custom-checkbox input:checked ~ .custom-control-label::before,
.facet .custom-radio input:checked ~ .custom-control-label::before {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* # Loader et spinners */
.loader,
.spinner {
    border-color: #000000 !important;
}

/* # Tabs et onglets */
.nav-tabs .nav-link.active {
    border-bottom-color: #000000 !important;
}

/* ========================================
   FIN DES RÈGLES DE REMPLACEMENT
   ======================================== */

/* ========================================
   SÉLECTEUR DE QUANTITÉ ET BOUTON AJOUTER AU PANIER
   Design moderne et épuré inspiré de l'image
   ======================================== */

/* # Container principal des actions produit */
.product-actions-container {
    margin: 15px 0 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* # Sélecteur de quantité compact */
.product-quantity-compact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* # Boutons + et - compacts */
.btn-quantity-minus-compact,
.btn-quantity-plus-compact {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-quantity-minus-compact:hover,
.btn-quantity-plus-compact:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000;
}

.btn-quantity-minus-compact:active,
.btn-quantity-plus-compact:active {
    transform: scale(0.95);
}

/* # Icônes Material dans les boutons compacts */
.btn-quantity-minus-compact .material-icons,
.btn-quantity-plus-compact .material-icons {
    font-size: 16px;
}

/* # Champ input de quantité compact */
.product-quantity-input-compact {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    width: 45px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 4px;
    -moz-appearance: textfield; /* Firefox */
    background-color: #ffffff;
}

/* Supprimer les flèches de input number */
.product-quantity-input-compact::-webkit-outer-spin-button,
.product-quantity-input-compact::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-quantity-input-compact:focus {
    outline: none;
    border-color: #000000;
}

/* # Bouton Ajouter au panier arrondi (style moderne) */
.btn-add-to-cart-rounded {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50px; /* Très arrondi comme dans l'image */
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 200px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.btn-add-to-cart-rounded:hover {
    background-color: #333333 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.btn-add-to-cart-rounded:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-add-to-cart-rounded:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

/* # Animation de succès */
.btn-add-to-cart-rounded.btn-success {
    background-color: #28a745 !important;
}

/* # Masquer les badges (Neuf, Promo, etc.) dans la grille */
.product-miniature .product-flags {
    display: none !important;
}

/* # Masquer le bouton Wishlist */
.product-miniature .wishlist-button-add,
.product-miniature .wishlist-button,
.product-miniature [data-button-action="add-to-wishlist"],
.product-miniature .js-wishlist-add-to,
.product-miniature .wishlist-button-product {
    display: none !important;
}

/* # Masquer la modal de confirmation d'ajout au panier (garder seulement le side cart) */
#blockcart-modal,
.blockcart-modal,
.modal.fade[id*="cart"],
.modal.show[id*="cart"],
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show,
body.modal-open .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Réactiver le scroll quand modal est masquée */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* # Masquer l'aperçu rapide (Quick View) et le bandeau blanc au survol */
.product-miniature .quick-view,
.product-miniature .js-quick-view,
.product-miniature .highlighted-informations {
    display: none !important;
}

/* S'assurer que le conteneur thumbnail-top n'a pas de z-index élevé */
.product-miniature .thumbnail-top {
    position: relative;
}

/* # Effet hover - Afficher la 2e image au survol */
.product-miniature .thumbnail-container {
    position: relative;
    overflow: hidden;
}

.product-miniature .product-thumbnail {
    display: block;
    position: relative;
}

/* Image principale */
.product-miniature .product-image-primary {
    display: block;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.product-miniature .product-image-primary img {
    display: block;
    width: 100%;
    height: auto;
}

/* Image secondaire (cachée par défaut) */
.product-miniature .product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product-miniature .product-image-secondary img {
    display: block;
    width: 100%;
    height: auto;
}

/* Au survol : masquer image 1, afficher image 2 */
.product-miniature:hover .product-image-primary {
    opacity: 0;
}

.product-miniature:hover .product-image-secondary {
    opacity: 1;
}

/* # Responsive - Mobile */
@media (max-width: 767px) {
    .product-actions-container {
        gap: 10px;
    }
    
    .product-quantity-compact {
        gap: 6px;
    }
    
    .btn-quantity-minus-compact,
    .btn-quantity-plus-compact {
        width: 28px;
        height: 28px;
    }
    
    .btn-quantity-minus-compact .material-icons,
    .btn-quantity-plus-compact .material-icons {
        font-size: 14px;
    }
    
    .product-quantity-input-compact {
        width: 40px;
        font-size: 13px;
    }
    
    .btn-add-to-cart-rounded {
        padding: 8px 20px;
        font-size: 13px;
        max-width: 180px;
    }
}

/* ========================================
   FIN SÉLECTEUR DE QUANTITÉ
   ======================================== */

/* ========================================
   FIX PANIER - Alignement des flèches sur mobile
   ======================================== */

/* Fix pour le conteneur bootstrap-touchspin sur mobile */
@media (max-width: 767px) {
    /* Forcer l'utilisation de flexbox au lieu de table-cell */
    .bootstrap-touchspin {
        display: flex !important;
        align-items: stretch;
        width: 100%;
    }
    
    /* Le champ de quantité doit être flexible */
    .bootstrap-touchspin input[type="number"] {
        flex: 1;
        min-width: 0;
    }
    
    /* Les boutons doivent rester de taille fixe */
    .bootstrap-touchspin .input-group-btn-vertical {
        display: flex !important;
        flex-direction: column;
        width: auto !important;
        flex-shrink: 0;
    }
    
    /* Ajuster la taille des boutons sur mobile */
    .bootstrap-touchspin .input-group-btn-vertical > .btn {
        padding: 4px 8px;
        font-size: 12px;
        min-width: 30px;
    }
    
    /* Conteneur de la quantité dans le panier */
    .product-line-grid-right .qty {
        display: flex;
        align-items: center;
        width: 100%;
    }
}

/* ========================================
   FIN FIX PANIER MOBILE
   ======================================== */