/* ==========================================================================
   Babbikit - Remises : badges, prix barres et economie realisee
   Feuille permanente, valable pour toutes les promotions (Black Friday,
   Noel, soldes...) : tout s'affiche des qu'un article a une remise en cours
   (prix specifique PrestaShop), sans condition de date.
   Chargee apres bbk-refonte.css dans templates/_partials/stylesheets.tpl.
   Gabarits concernes : vignette de la boutique (product.tpl du module, copie
   du theme), fenetre produit (detail_product.tpl, copie du theme), carrousel
   de l'accueil (babbikit_carousel.tpl, copie du theme), panneau du panier
   (front.js du module), tunnel (checkout/_partials/cart-summary-subtotals.tpl).
   Couleurs : variables ci-dessous ; une operation peut les surcharger dans
   bbk-operation.css.
   Historique : v1 a v24 pendant la mise au point (novembre 2026) ;
   v25 = version propre et generique, sans bloc d'essai.
   ========================================================================== */

:root {
  --bbk-remise-fond: #FFEBAD;
  --bbk-remise-texte: #0E314B;
  --bbk-remise-contour: #9BB1FF;
  --bbk-remise-barre: #24445C;
}

/* 1. Badge rond, a cheval sur le coin superieur gauche de la photo (boutique) */
.thumbnail-container:has(> .bbk-remise-badge),
.babbikit-product-card:has(> .bbk-remise-badge) { position: relative; }
.bbk-remise-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 3;
  display: flex;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border: 2px solid var(--bbk-remise-contour);
  border-radius: 50%;
  background: var(--bbk-remise-fond);
  color: var(--bbk-remise-texte);
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
}

/* 2. Prix barre, a cote du prix remise */
.bbk-remise-prix { display: contents; }
.bbk-remise-barre {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--bbk-remise-barre);
  text-decoration: line-through;
  white-space: nowrap;
}

/* 3. Telephone (boutique) : badge plus petit, prix barre sous le prix */
@media (max-width: 575px) {
  .bbk-remise-badge {
    top: -9px;
    left: -9px;
    width: 46px;
    height: 46px;
    font-size: 12.5px;
  }
  .bbk-remise-prix {
    display: inline-block;
    position: relative;
  }
  .bbk-remise-prix .bbk-remise-barre {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 1px 0 0;
    font-size: 12.5px;
    line-height: 1.15;
  }
}

/* 4. Carrousel de l'accueil : le bandeau defilant coupe ce qui depasse,
   le badge est donc pose dans le coin de la photo, en plus grand */
.babbikit-product-card > .bbk-remise-badge {
  top: 8px;
  left: 8px;
  width: 60px;
  height: 60px;
  font-size: 16px;
}
@media (max-width: 575px) {
  .babbikit-product-card > .bbk-remise-badge {
    top: 6px;
    left: 6px;
    width: 50px;
    height: 50px;
    font-size: 13.5px;
  }
  .babbikit-product-card .bbk-remise-barre { font-size: 13px; }
}

/* 5. Fenetre produit (apercu rapide) : badge dans le coin de la photo,
   au premier plan (la galerie utilise des niveaux d'affichage eleves) */
.container-image-detail-product:has(> .bbk-remise-badge) { position: relative; }
.container-image-detail-product > .bbk-remise-badge {
  z-index: 120;
  top: 14px;
  left: 14px;
  width: 64px;
  height: 64px;
  font-size: 17px;
}
.price-detail-product .bbk-remise-barre {
  margin-left: 10px;
  font-size: 16px;
}
@media (max-width: 575px) {
  .container-image-detail-product > .bbk-remise-badge {
    top: 10px;
    left: 10px;
    width: 52px;
    height: 52px;
    font-size: 14px;
  }
  .price-detail-product .bbk-remise-barre { font-size: 14px; }
}

/* 6. Panneau du panier : prix barre sous le prix de la ligne */
.bbkit-product-price-cart:has(.bbk-remise-barre) { display: flex; flex-direction: column; align-items: flex-end; }
.bbkit-product-price-cart .bbk-remise-barre { margin: 2px 0 0; font-size: 12px; line-height: 1.15; }

/* 7. Tunnel de commande : ligne « Vous economisez » sous le sous-total.
   bbk-commande.css (charge apres) impose marges et espacements aux lignes
   via body#checkout #js-checkout-summary .cart-summary-line : d'ou ces
   selecteurs par identifiant. Texte aligne sur les autres lignes. */
#cart-subtotal-bbk-economie.bbk-remise-economie {
  border-radius: 10px;
  background: var(--bbk-remise-fond);
}
body#checkout #js-checkout-summary #cart-subtotal-bbk-economie {
  margin: 2px -10px 6px !important;
  padding: 5px 10px !important;
}
body#checkout #js-checkout-summary #cart-subtotal-bbk-economie .value {
  color: var(--bbk-remise-texte) !important;
}