/* Custom code goes here - paste your css code below in line 3 */

#payment-option-1-container label span {
    margin-left: 3px;
}

/* Styles communs pour tous les badges */
.product-flag {
    position: absolute;
    top: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 3px;
    z-index: 20;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* meilleure lisibilité sur images */
    transition: all 0.3s ease; /* effet au survol */
}

.product-flag:hover {
    transform: scale(1.1);
}

/* Badge Nouveau */
.product-flag.new {
    left: 10px; /* à gauche */
    background-color: #007bff; /* bleu */
}

/* Badge Occasion */
.product-flag.occasion {
    right: 10px; /* à droite */
    background-color: #28a745 !important; /* vert */
}

/* Responsive : badges s’ajustent sur petits écrans */
@media (max-width: 480px) {
    .product-flag {
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* ========================================
   Badges fiche produit - Nouveau & Occasion
   ======================================== */

/* Styles communs pour tous les badges sur fiche produit */
#product .product-flagg {
    position: absolute;       /* positionné par rapport à la fiche produit */
    top: 29px;                /* même hauteur pour tous */
    width: 100px;             /* même largeur */
    text-align: center;        /* centrer le texte */
    padding: 2px 0;           /* même padding vertical */
    border-radius: 3px;
    
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    box-sizing: border-box;
    z-index: 999;             /* toujours au-dessus de l'image */
    pointer-events: auto;     /* hover et clic fonctionnent correctement */
}

/* Position et couleur spécifiques */
#product .product-flagg.new {
    left: 10px;               /* badge à gauche */
    background-color: #007bff; /* bleu */
}

#product .product-flagg.occasion {
    right: 10px;              /* badge à droite */
    background-color: #28a745 !important; /* vert */
}

/* Hover effect pour les deux badges */
#product .product-flagg:hover {
    transform: scale(1.1);
}

/* Responsive : badges plus petits sur petits écrans */
@media (max-width: 480px) {
    #product .product-flagg {
        width: 80px;
        font-size: 10px;
        padding: 3px 0;
    }
}

/* Badge drapeau pays */

.product-miniature .product-flag.custom-png-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 35;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: auto;
}

/* Image JAP */
.product-miniature .product-flag.custom-png-badge img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
/*faire descendre le bouton whishlist */

//* Parent relatif : le container de l'image */
.js-qv-product-cover, 
.js-qv-product-cover::parent {
    position: relative !important;  /* permet aux éléments absolus à l'intérieur de se placer correctement */
    overflow: visible !important;
}

/* Bouton wishlist */
.wishlist-button-product {
    position: absolute !important;
    top: 60px !important;          /* ajuste ici pour descendre sous le badge */
    right: 10px !important;        /* aligné à droite */
    z-index: 1000 !important;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    transform-origin: center center;
}

.wishlist-button-product:hover {
    transform: scale(1.2);
    background: rgba(255,255,255,1);
}

/* Responsive pour mobile */
@media (max-width: 480px) {
    .wishlist-button-product {
        top: 50px; /* ajuste pour petits écrans */
        padding: 6px;
    }
}
/* ===================== Desktop ===================== */
@media (min-width: 768px) {
  #contact-link {
    position: relative;
  }

  .shop-discord {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* Icône Discord bleu et plus grande */
  .shop-discord i.fab.fa-discord {
    color: #3ec9f7 !important; /* bleu Discord */
    font-size: 19px;            /* taille icône desktop */
    vertical-align: middle;     /* alignement avec le texte */
  }

  /* Texte blanc */
  .shop-discord a {
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;       /* Aligne verticalement texte et icône */
  }
}

/* ===================== Mobile uniquement ===================== */

@media (max-width: 767px) {
  .shop-discord {
    display: inline-flex;      
    align-items: center;       
    margin-top: 0;             
    padding-right: 0;          
    gap: 4px;                  /* espace entre texte et icône */
    margin-left: 35px;         /* décale le bloc vers la droite */
  }

  .shop-discord i.fab.fa-discord {
    color: #3ec9f7 !important; 
    font-size: 16px;            
    vertical-align: middle;
    position: relative;
    top: 0;                     
    pointer-events: none;       /* icône non cliquable */
  }

  .shop-discord a {
    color: #fff !important;     
    display: inline-flex;
    align-items: center;
    text-decoration: none;      
  }
}

/* ===================== Hover ===================== */
.shop-discord a:hover {
  text-decoration: underline;
}



/* ===================== Icon paiement ===================== */


========================== */
/* LIGNE DES CARTES CB           */
/* ============================= */
/* ===== ESPACE SOUS LE BOUTON COMMANDER ===== */
#payment-confirmation {
    margin-bottom: 12px !important;
}

/* ===== ICÔNES CARTES BLEUES ===== */
#payment-confirmation + div {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    text-align: center;
}

/* Ajustement taille + alignement */
#payment-confirmation + div img {
    margin: 0 4px;
    vertical-align: middle;
    height: 28px;
}

/* ===== TEXTE "PAIEMENT SÉCURISÉ" ===== */
.payment-security {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    font-size: 13px;
    text-align: center;
}

/* ===== PAYPAL ===== */
.payment-methods {
    margin-top: 5px !important;
}

/* ============================= */
/* TEXTE PAIEMENT SECURISE       */
/* ============================= */
#ps_checkout-payment-method-logo-block-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
  width: 100%;
  margin: 8px 0 12px 0;
  text-align: center !important;
}

/* ============================= */
/* BOUTONS PAYPAL                */
/* ============================= */
.ps_checkout-buttons,
.paypal-buttons,
.paypal-button-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px;
  width: 100%;
  margin: 0 auto !important;
}

/* ============================= */
/* CONTENEUR GLOBAL              */
/* ============================= */
.checkout.cart-detailed-actions,
.checkout.cart-detailed-actions .text-sm-center {
  text-align: center !important;
}

/* ============================= */
/* VERSION MOBILE                */
/* ============================= */
@media (max-width: 767px) {
  .checkout.cart-detailed-actions,
  .checkout.cart-detailed-actions .text-sm-center {
    text-align: center !important;
  }

  .checkout.cart-detailed-actions .btn.btn-primary {
    display: block !important;
    margin: 0 auto 14px auto !important;
  }

  .paypal-mark {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    width: fit-content !important;
    max-width: 100%;
    margin: 0 auto 4px auto !important;
    padding: 4px 8px;
  }

  .paypal-mark .cards-logo {
    height: 22px !important;
    width: auto !important;
  }

  #ps_checkout-payment-method-logo-block-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px;
    width: 100%;
    margin: 4px 0 4px 0 !important;
    font-size: 14px;
    text-align: center !important;
  }

  .ps_checkout-buttons,
  .paypal-buttons,
  .paypal-button-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px;
    width: 100%;
    margin: 0 auto !important;
    padding-top: 0 !important;
  }
}