/**
 * 2023-2025 TPMGE
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 *
 * @author    TPMGE
 * @copyright 2023-2025 TPMGE
 * @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

    /* --- CSS pour le palier de prix actif (page produit) --- */
    /* A ajouter dans votre fichier CSS theme */

    .discount-tier-box.active-discount-tier {
        border: 2px solid #28a745; /* Bordure verte (exemple) */
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.4); /* Ombre verte legere */
        background-color: #f8f9fa; /* Fond legerement different (optionnel) */

        /* Transition douce */
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    /* Style par defaut pour les blocs (optionnel, pour la transition retour) */
    .discount-tier-box {
        border: 2px solid transparent; /* Assure la meme taille */
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

 /* Styles de base pour l'affichage des attachements produit */

.product-attachments {
    margin: 1rem 0;
    padding: 0.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.product-attachments-title {
    font-weight: bold;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    color: #232323;
}

.product-attachments-attribute {
    margin-bottom: 1rem;
}

.product-attachments-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.product-attachments-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Styles pour les tags d'attributs */
.product-attachment-tag {
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.product-attachment-tag:hover {
    border-color: #2fb5d2;
    box-shadow: 0 0 0 0.2rem rgba(47, 181, 210, 0.2);
}

.product-attachment-tag.selected {
    background-color: #2fb5d2;
    color: white;
    border-color: #2fb5d2;
}

/* Style pour les options non disponibles */
.product-attachment-tag.unavailable {
    opacity: 0.5;
    border-color: #999;
    background-color: #f0f0f0;
}

.product-attachment-tag.unavailable:hover {
    border-color: #777;
    box-shadow: 0 0 0 0.2rem rgba(119, 119, 119, 0.2);
}

.product-attachment-tag.unavailable.selected {
    background-color: #999;
    color: white;
    border-color: #777;
}

/* Styles pour les couleurs */
.color-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    border: 1px solid #ddd;
    vertical-align: middle;
}

.product-attachment-tag.unavailable .color-swatch {
    opacity: 0.6;
}

/* MODIFICATION: Styles pour le selecteur dropdown */
.product-attachments-dropdown select {
    /* Apparence de base */
    display: inline-block;
    width: auto; /* Ajuster la largeur automatiquement */
    min-width: 250px; /* Largeur minimale */
    max-width: 100%; /* Eviter qu il depasse */
    height: 42px; /* Hauteur similaire aux boutons/tags Bootstrap */
    padding: 0.375rem 1.75rem 0.375rem 0.75rem; /* Padding (plus d espace a droite pour la fleche) */
    font-size: 0.9rem; /* Taille de police similaire aux tags */
    font-weight: 400;
    line-height: 1.5;
    color: #212529; /* Couleur de texte standard */
    background-color: #fff; /* Fond blanc */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Bordure standard */
    border-radius: 0.375rem; /* Coins arrondis standard */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    
    /* Retirer l apparence native et ajouter une fleche personnalisee */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Fleche SVG */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.product-attachments-dropdown select:focus {
    border-color: var(--primary); /* Couleur de focus Bootstrap */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Ombre de focus Bootstrap */
}
/* FIN MODIFICATION */

select option.unavailable {
    color: #999;
}

/* Styles pour le bouton de variante */
.get-variant-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #2fb5d2;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.get-variant-link:hover {
    background-color: #1e94ae;
    text-decoration: none;
    color: white;
}

/* Indicateur de chargement */
.product-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.product-loading .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #2fb5d2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles pour les tags de produits dans la liste des catégories */
.product-tags {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
}

.product-tags:before {
    content: "\f02b";
    font-family: "FontAwesome";
    margin-right: 5px;
    color: #777;
}

/* Styles pour le conteneur des informations de regroupement */
.product-attachment-container {
    margin-top: 10px;
}

/* Style pour le badge de variantes */
.product_list3_variante {
    display: inline-block;
    color: #2fb5d2;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 8px;
    text-decoration: underline;
}

.product_list3_variante:hover {
    color: #208094;
}

/* Styles pour les boîtes de paliers de remise */
.product-attachment-discount-tiers {
  display: flex; /* Utiliser Flexbox pour aligner les boîtes */
  flex-wrap: wrap; /* Permettre aux boîtes de passer à la ligne si pas assez de place */
  gap: 10px; /* Espace entre les boîtes */
  margin-top: 15px; /* Espace au-dessus du conteneur */
  justify-content: flex-start; /* Aligner les boîtes au début */
}

.discount-tier-box {
  border: 1px solid #e0e0e0; /* Bordure grise claire */
  border-radius: 4px; /* Coins arrondis */
  padding: 10px 15px; /* Espacement intérieur */
  text-align: center; /* Centrer le texte */
  background-color: #ffffff; /* Fond blanc */
  min-width: 120px; /* Largeur minimale pour éviter qu'elles soient trop étroites */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Ombre légère */
  cursor: pointer; /* Indique que l'élément est cliquable */
  transition: all 0.2s ease; /* Transition douce pour les animations */
}

.discount-tier-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border-color: #aaa;
}

.discount-tier-box.active-discount-tier {
  border-color: #5cb85c; /* Bordure verte comme le prix */
  background-color: rgba(92, 184, 92, 0.05); /* Fond vert très léger */
  transform: translateY(-3px); /* Léger déplacement vers le haut */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée */
}

.discount-tier-box .tier-title {
  font-weight: bold; /* Titre en gras */
  color: #d9534f; /* Couleur orange/rouge pour le titre */
  font-size: 1.1em; /* Taille de police légèrement plus grande pour le titre */
  margin-bottom: 5px; /* Marge sous le titre */
}

.discount-tier-box .tier-quantity {
  font-size: 0.9em; /* Taille de police plus petite pour la quantité */
  color: #777777; /* Couleur grise pour la quantité */
  margin-bottom: 8px; /* Marge sous la quantité */
}

.discount-tier-box .tier-price {
  font-size: 1.2em; /* Taille de police plus grande pour le prix */
  font-weight: bold; /* Prix en gras */
  color: #5cb85c; /* Couleur verte pour le prix */
}

/* Ajouter un peu d'espace sous le conteneur des boîtes */
#product-attachment-discounts-placeholder + .product-add-to-cart {
    margin-top: 20px;
}

/* Ajustements potentiels pour les petits écrans */
@media (max-width: 767px) {
  .product-attachment-discount-tiers {
    justify-content: center; /* Centrer les boîtes sur mobile */
  }
  .discount-tier-box {
    flex-basis: calc(50% - 10px); /* Deux boîtes par ligne sur mobile */
    min-width: auto;
  }
}
@media (max-width: 480px) {
  .discount-tier-box {
    flex-basis: 100%; /* Une boîte par ligne sur très petits écrans */
  }
}

/* --- CSS pour la surbrillance de quantite --- */
/* A ajouter dans votre fichier CSS theme */

.product-miniature.quantity-selected-highlight {
    /* Exemples de styles - A adapter a votre theme */
    border: 2px solid #007bff; /* Bordure bleue */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Ombre portee bleue */
    /* background-color: #e7f3ff; */ /* Fond tres legerement bleu (optionnel) */

    /* Transition douce pour l'effet */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Style pour notre input quantité personnalisé */
.pa-touchspin-container,.pa-quantity-input {
  display: flex;
  align-items: stretch;
  position: relative;
  box-shadow: none;
  border: 1px solid var(--light-gray);  
  border-radius: 6px;
}
.pa-touchspin-container{
  height: 45px;
}
.pa-touchspin-down, .pa-touchspin-up {
  background: var(--light);
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  width: 35px;
  
}

.pa-touchspin-down {
  border-radius: 6px 0 0 6px;
  border-right: none;
  margin-right: -1px;
}

.pa-touchspin-up {
  border-radius: 0 6px 6px 0;
  border-left: none;
  margin-left: -1px;
}

.pa-touchspin-down:hover, .pa-touchspin-up:hover {
  background-color: #e6e6e6;
}

.pa-quantity-input {
  border-radius: 0;
  text-align: center;
  width: 55px;
  font-size: 16px;
  box-shadow: none;
  z-index: 1;
  padding: 10px 0px;
  border: none;
}

.pa-quantity-input:focus {
  outline: none;
  border: 1px solid #66afe9;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.pa-quantity-input::-webkit-outer-spin-button,
.pa-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Masquer l'ancien input #quantity_wanted s'il existe toujours dans le DOM */
#quantity_wanted {
  display: none !important;
}

/* Si l'ancien conteneur TouchSpin existe encore, le masquer également */
.bootstrap-touchspin {
  display: none !important;
}