/* =========================================================
   Woocommerce Custom Styles
   Auteur : Mickaël
   Date : 2026-01-02
   Description : Styles spécifiques pour WooCommerce (produits, boutons, badges, checkout, popup)
   ========================================================= */


/* === Produits : bordures et hover === */
body.archive.woocommerce-page .product,
.swiper-slide {
    border: 2px solid #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

body.archive.woocommerce-page .product:hover,
.swiper-slide:hover {
    transform: translateY(-5px);
    border-color: var(--green);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* === Rupture de stock === */
.woocommerce-loop-product__link {
    position: relative;
}

.soldout {
    text-transform: uppercase;
    font-weight: 600;
    position: absolute;
    top: 5px;
    left: 5px;
    border: 2px solid var(--red);
    color: var(--red);
    padding: .202em .618em;
    font-size: 10px;
    border-radius: 5px;
}

/* === Bouton "Continuer le Shopping" === */
.wpm-shopping-button {
    width: 100%;
    text-align: center;
}

/* === Blocs d’info / promotions === */
.promotion-annotation,
.cure-info-box,
.produit-hors-saison,
.cbd-warning-box,
.message-abonnement,
.livraison-rapide-info,
.livraison-banniere-wrapper,
.gift-product-info,
.woocommerce-info,
.woocommerce-message {
    background: #eef9f0 !important;
    border: 1px solid #b8e3c3;
	text-align: center;
    padding: 14px 18px;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #333 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.promotion-annotation,
.produit-hors-saison,
.cbd-warning-box {
    box-shadow: var(--shadow);
    transition: box-shadow 1.5s ease-in-out;
    animation: pulse-glow-green 2.2s infinite ease-in-out;
}

.promotion-annotation.urgent,
.woocommerce-error {
    background: #fff1f0;
    border: 1px solid #f5b5b0;
    color: #a30000;
    animation: pulse-glow-red 1.8s infinite ease-in-out;
}

@keyframes pulse-glow-red {
    0%, 100% { box-shadow: 0 0 6px rgba(200, 30, 30, 0.4); }
    50% { box-shadow: 0 0 18px rgba(200, 30, 30, 0.85); }
}

@keyframes pulse-glow-green {
    0%, 100% { box-shadow: 0 0 5px rgba(20, 155, 55, 0.4); }
    50% { box-shadow: 0 0 18px rgba(20, 155, 55, 0.85); }
}

/* === Badges produits === */
.gift-badge,
.livraison-rapide-badge,
.aloe-vera-badge,
.cbd-badge,
.fin-de-serie-badge,
.edition-limite-badge,
.edition-noel-badge,
.pourcentage {
    display: inline-block;
    padding: .202em .618em;
    font-size: .875em;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: .618em;
    margin-right: 1em;
}

.gift-badge,
.livraison-rapide-badge,
.aloe-vera-badge,
.cbd-badge,
.edition-limite-badge,
.edition-noel-badge,
.pourcentage {
    border: 1px solid var(--green);
    color: var(--green);
}

.fin-de-serie-badge {
    background-color: #ffeb3b;
    color: #000;
}

.lrgkf-badge {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('https://mickaelconseillerlr.fr/wp-content/uploads/2024/11/lr_global_kids_fund_aufkleber_schwarz.jpg');
    background-size: contain;
    vertical-align: bottom;
    border: 1px solid var(--green);
    padding: 0.202em 0.618em;
    margin-bottom: 0.58em;
    margin-right: 1em;
    border-radius: 5px;
}

/* Overlay */
#gift-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gift-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
}

/* Boîte */
.gift-popup-box {
    background: #fff;
    max-width: 700px;
    width: 92%;
    display: flex;
    gap: 20px;
    padding: 20px;
    border-radius: 14px;
    position: relative;
    z-index: 10;
    animation: popupShow .25s ease;
}

@keyframes popupShow {
    from { transform: scale(.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Bouton fermer */
.gift-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 26px;
    cursor: pointer;
}

/* Colonne gauche */
.gift-modal-left img {
    max-width: 220px;
    border-radius: 10px;
}

/* Colonne droite */
.gift-modal-right {
    flex: 1;
}

.gift-modal-right h2 {
    margin-top: 0;
    font-size: 22px;
}

.gift-short-desc {
    margin: 10px 0;
    color: #444;
}

.gift-price {
    margin: 15px 0;
    font-size: 20px;
    color: #d6336c;
    font-weight: bold;
}

.gift-view-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {
    .gift-popup-box {
        flex-direction: column;
        text-align: center;
    }

    .gift-modal-left img {
        margin: 0 auto;
    }
}


/* === Boutons === */
.button.product_type_simple,
.button.product_type_simple.add_to_cart_button,
.button.product_type_variable.add_to_cart_button,
.storefront-sticky-add-to-cart__content-button,
.wp-block-button__link,
.added_to_cart,
.custom-login-message,
.custom-show-price,
.cta-vdi .button-vdi,
.filter-form button,
.slide-button,
.wc-backward,
.section-carousel .section-button,
.single_add_to_cart_button,
.bouton-abonnement.cure-btn,
.custom-partner-message {
    border: 1px solid var(--green);
    background-color: var(--green);
    color: var(--white);
    padding: .202em .618em;
    font-weight: 500;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.single_add_to_cart_button,
.bouton-abonnement.cure-btn {
    font-size: 1.4em;
    font-weight: 600;
    text-decoration: none !important;
}

.custom-partner-message {
    margin: .5em 0;
    font-size: 1.1em;
}

.button.product_type_simple:hover,
.button.product_type_simple.add_to_cart_button:hover,
.button.product_type_variable.add_to_cart_button:hover,
.storefront-sticky-add-to-cart__content-button:hover,
.wp-block-button__link:hover,
.added_to_cart:hover,
.custom-login-message:hover,
.custom-show-price:hover,
.cta-vdi .button-vdi:hover,
.filter-form button:hover,
.slide-button:hover,
.wc-backward:hover,
.section-carousel .section-button:hover,
.single_add_to_cart_button:hover,
.bouton-abonnement:hover,
.custom-partner-message:hover {
    background-color: #2d7829;
    border-color: #2d7829;
    color: var(--white);
    transform: translateY(-2px) !important;
}

/* === Prix sur page produit === */
.single-product div.product p.price {
    font-size: 1.41575em;
    margin: .5em 0;
}

/* === Étoiles === */
.star-rating {
    font-weight: 600 !important;
}

/* === Paiement et checkout === */
table.shop_table.woocommerce-checkout-review-order-table,
.wc_payment_methods.payment_methods.methods,
#customer_details,
.form-row.place-order,
table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents,
.cart_totals {
    margin-bottom: 15px;
    margin-top: 15px;
    border: 2px solid #b8e3c3;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.wc_payment_methods.payment_methods.methods::before {
    content: "Moyens de paiement";
    display: block;
    font-size: 1.6em;
    font-weight: 300;
    margin: 10px 0 10px 15px;
}

#payment .payment_methods > li:not(.woocommerce-notice) {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

#payment .payment_methods > li:not(.woocommerce-notice):hover {
    border-color: #419b37;
    background-color: #f8f8f8;
}

#payment .payment_methods > li:has(input[type="radio"]:checked) {
    border-color: #419b37;
    box-shadow: 0 0 0 3px rgba(65,155,55,0.2);
}

/* === Partenaire / avantages === */
.partenaire { display: flex; flex-wrap: wrap; gap: 20px; }
.avantages {
    flex: 1 1 45%;
    min-width: 300px;
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* === Badge vérifié commentaires === */
.woocommerce-review__verified.verified {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold !important;
    color: green !important;
    position: relative;
}
.woocommerce-review__verified.verified::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green"><circle cx="12" cy="12" r="10" fill="green"/><path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
    background-size: contain;
    margin-right: 5px;
    vertical-align: middle;
}

/* === Masquer éléments sans prix === */
.no-price .cart,
.no-price .moyens-paiement,
.no-price .ppcp-messages,
.no-price .ppc-button-wrapper,
.no-price .woocommerce-Price-amount,
.no-price .button,
.no-price .custom-show-price,
.no-price .custom-login-message { display: none !important; }

/* === Produits fréquemment achetés / meta === */
.woobt-additional.woobt-text,
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as { display: none !important; }

.woobt-before-text.woobt-text { font-size: 18px; font-weight: bold; }
.woobt-wrap { margin-top: 1em; }

/* === Produits grid === */
.wc-block-grid__products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wc-block-grid__product {
    flex: 1 1 calc(20% - 10px);
    max-width: calc(20% - 10px);
    box-sizing: border-box;
    margin-bottom: 20px;
}

.widget { margin: 0 0 0.706em; }

/* === Filtres === */
.filter-form { display: flex; gap: 10px; margin-bottom: 20px; }
.filter-form label { display: flex; align-items: center; gap: 5px; }

/* === Bannières produit sans avis === */
.woocommerce-noreviews, 
p.no-comments,
.cr-qna-ask-button,
.cr-review-form-submit { background-color: var(--green) !important; }

/* === Liens et boutons dans info/promo === */
.cure-info-box a,
body .woocommerce-message a,
body .woocommerce-message .button,
.woocommerce-checkout-form-coupon a,
.showlogin a {
    color: #2a7a2a !important;
    font-weight: 600;
    text-decoration: underline;
}
.cure-info-box a:hover,
body .woocommerce-message a:hover,
body .woocommerce-message .button:hover,
.woocommerce-checkout-form-coupon a:hover,
.showlogin a:hover { color: #1d5f1d !important; text-decoration: none; }

/*Bloc page paiement - retour au site après paiement*/
.payment-return-warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    color: #856404;
    font-size: 14px;
    display: none; /* caché par défaut */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    position: relative;
}

.payment-return-warning.show {
    display: block;
    opacity: 1;
}
/*-----------------------------------------------*/

/* =========================
   Prix Partenaires
========================= */
.woocommerce-product-partner-price {
    background-color: #f0f9f4; /* Vert très clair */
    border: 2px solid #419b37; /* Vert LR */
    padding: 12px 18px;
    border-radius: 12px;
    margin-top: 15px;
    font-size: 1rem;
    text-align: center;
    display: inline-block;
}

.woocommerce-product-partner-price p {
    margin: 0;
    color: #1a5a2a; /* Vert foncé */
    font-weight: 600;
}

.woocommerce-product-partner-price a {
    display: inline-block;
    margin-left: 10px;
    padding: 6px 12px;
    background-color: #419b37;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.woocommerce-product-partner-price a:hover {
    background-color: #2d7829;
}
/*----------------------------------------------*/

/* === Bientôt disponible === */
.woocommerce div.product .stock.pre-order,
.pre-order-badge-loop {
    color: var(--orange);
    text-transform: uppercase;
    font-weight: 600;
    position: absolute;
    top: 5px;
    left: 5px;
    border: 2px solid var(--orange);
    background-color: #fff;
    padding: .202em .618em;
    font-size: 10px;
    border-radius: 5px;
    z-index: 10;
}

/* === Ancienne version === */
.woocommerce div.product .stock.old-version,
.old-version-badge-loop {
    color: #800020;
    text-transform: uppercase;
    font-weight: 600;
    position: absolute;
    top: 5px;
    left: 5px;
    border: 2px solid #800020;
    background-color: #fff;
    padding: .202em .618em;
    font-size: 10px;
    border-radius: 5px;
    z-index: 10;
}

/* Positionner le badge correctement sur les images produits */
.woocommerce ul.products li.product {
    position: relative;
}
/*--------------------------------------------------------------*/

/* Affichage du nombre de produits vendus */
.wpm-sold-product {
    font-size: 100%;
    display: block;
    color: #2a9d8f;
    font-weight: bold;
}
/*-----------------------------------------*/
.lr-bannieres-wrapper {
    width: 100%;
}

.lr-banniere {
    text-align: center;
    background-color: var(--green);
    color: white;
    font-weight: bold;
}

.lr-banniere p {
    margin: 0;
}
/*-----------------------------------------*/

.produit-articles-conseils {
    margin-top: 40px;
    padding: 20px;
    border-top: 2px solid #eee;
}

.produit-articles-conseils h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.bloc-accroche {
    font-size: 0.95em;
    margin-bottom: 20px;
    color: #555;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
}

.article-item a {
    display: block;
    text-align: center;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-item a:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.article-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-item h4 {
    font-size: 1em;
    margin: 10px 0 5px;
}

.mini-description {
    font-size: 0.85em;
    color: #666;
}

.article-item .cta {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    background-color: #419b37;
    color: #fff;
    font-size: 0.85em;
    border-radius: 4px;
    transition: background 0.2s;
}

.article-item .cta:hover {
    background-color: #2d7829;
}

/*-----------------------------------------*/