/*
 * BF Fidélité - front stylesheet
 * @copyright 2026 Blossom Flow. Tous droits reserves.
 * @license   Proprietary - licence commerciale. Voir LICENSE.txt et les CGU.
 *
 * Message colors are injected as CSS custom properties by hookDisplayHeader
 * (see renderFrontColorCssVars). Fallbacks below mirror the shipped defaults
 * so the file still renders decently if the <style> tag is stripped by a
 * hostile cache layer or minifier.
 */

/* =============================================
   Inline usage block (checkbox to spend loyalty balance on the cart).
   Sits below the earn/blocked/empty message ; renders only for logged-in
   customers with a positive balance (server-side gated).
   ============================================= */
.bfloyalty-usage-block {
    display: block;
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--bfl-cart-earn-bg, #d1ecf1);
    color: var(--bfl-cart-earn-text, #0c5460);
    border-left: 3px solid var(--bfl-cart-earn-accent, #17a2b8);
    border-radius: 3px;
    line-height: 1.4;
}
.bfloyalty-usage-block.is-applied {
    background: var(--bfl-product-earn-bg, #f6f6f6);
    color: var(--bfl-product-earn-text, #363a41);
    border-left-color: var(--bfl-product-earn-accent, #6b2d4f);
}
.bfloyalty-usage-block.is-guest {
    background: var(--bfl-cart-empty-bg, #d1ecf1);
    color: var(--bfl-cart-empty-text, #0c5460);
    border-left-color: var(--bfl-cart-empty-accent, #17a2b8);
}
.bfloyalty-usage-block.is-zero {
    background: var(--bfl-cart-empty-bg, #f6f6f6);
    color: var(--bfl-cart-empty-text, #6c757d);
    border-left-color: var(--bfl-cart-empty-accent, #adb5bd);
}
.bfloyalty-usage-block.is-zero .bfloyalty-usage-label {
    cursor: default;
}
.bfloyalty-usage-block.is-zero .bfloyalty-usage-checkbox {
    cursor: not-allowed;
    opacity: 0.6;
}
.bfloyalty-usage-block.is-guest .material-icons {
    vertical-align: middle;
    margin-right: 4px;
    color: var(--bfl-cart-empty-accent, #17a2b8);
}
.bfloyalty-usage-block.is-guest a {
    color: inherit;
    text-decoration: underline;
}
.bfloyalty-usage-form {
    margin: 0;
}
.bfloyalty-usage-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}
.bfloyalty-usage-checkbox {
    margin-top: 3px;
    cursor: pointer;
}
.bfloyalty-usage-text {
    display: block;
}
.bfloyalty-usage-text strong {
    display: block;
    color: inherit;
    font-weight: 500;
}
.bfloyalty-usage-hint {
    display: block;
    font-size: .9em;
    opacity: .8;
    margin-top: 2px;
}

/* =============================================
   Cart footer message + earn/blocked/empty variants
   ============================================= */
.bfloyalty-cart-info {
    line-height: 1.4;
    background: var(--bfl-cart-earn-bg, #d1ecf1);
    color: var(--bfl-cart-earn-text, #0c5460);
    border-left: 3px solid var(--bfl-cart-earn-accent, #17a2b8);
    padding: 12px 14px;
    border-radius: 3px;
    margin: 12px 0;
}
/* Empty-cart variant: the outer bfloyalty-cart-info reuses the "cart_empty"
   swatch when there is no product yet. Adding a modifier class instead of a
   selector rewrite keeps things simple for JS-driven cart updates. */
.bfloyalty-cart-info.is-empty {
    background: var(--bfl-cart-empty-bg, #d1ecf1);
    color: var(--bfl-cart-empty-text, #0c5460);
    border-left-color: var(--bfl-cart-empty-accent, #17a2b8);
}
.bfloyalty-cart-info.is-blocked {
    background: var(--bfl-cart-blocked-bg, #fff4f4);
    color: var(--bfl-cart-blocked-text, #8b2b28);
    border-left-color: var(--bfl-cart-blocked-accent, #d9534f);
}
.bfloyalty-cart-info .bfloyalty-cart-title,
.bfloyalty-cart-info .bfloyalty-excluded-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: .5rem;
    font-weight: 500;
    color: inherit;
}
.bfloyalty-cart-info .bfloyalty-cart-title .material-icons,
.bfloyalty-cart-info .bfloyalty-excluded-title .material-icons {
    flex-shrink: 0;
    line-height: 1.4;
    font-size: 20px;
    color: var(--bfl-cart-earn-accent, #17a2b8);
}
.bfloyalty-cart-info.is-empty .bfloyalty-cart-title .material-icons {
    color: var(--bfl-cart-empty-accent, #17a2b8);
}
.bfloyalty-cart-info.is-blocked .bfloyalty-cart-title .material-icons {
    color: var(--bfl-cart-blocked-accent, #d9534f);
}
.bfloyalty-cart-info .bfloyalty-excluded-note {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    color: var(--bfl-product-excluded-text, #6b6b6b);
}
.bfloyalty-cart-info .bfloyalty-excluded-title {
    font-size: .9em;
    font-weight: 400;
    color: var(--bfl-product-excluded-text, #6b6b6b);
}
.bfloyalty-cart-info .bfloyalty-excluded-note .bfloyalty-excluded-title .material-icons {
    color: var(--bfl-product-excluded-accent, #adb5bd);
}

/* =============================================
   Product page message (loyalty info block)
   ============================================= */
.bfloyalty-product-info .bfloyalty-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    margin: 12px 0;
    background: var(--bfl-product-earn-bg, #f6f6f6);
    color: var(--bfl-product-earn-text, #363a41);
    border-left: 3px solid var(--bfl-product-earn-accent, #6b2d4f);
    border-radius: 3px;
    line-height: 1.4;
}
.bfloyalty-product-info .bfloyalty-message .material-icons {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1.4;
    color: var(--bfl-product-earn-accent, #6b2d4f);
}
.bfloyalty-product-info .bfloyalty-message.bfloyalty-message--blocking {
    background: var(--bfl-cart-blocked-bg, #fff4f4);
    color: var(--bfl-cart-blocked-text, #8b2b28);
    border-left-color: var(--bfl-cart-blocked-accent, #d9534f);
}
.bfloyalty-product-info .bfloyalty-message.bfloyalty-message--blocking .material-icons {
    color: var(--bfl-cart-blocked-accent, #d9534f);
}
.bfloyalty-product-info .bfloyalty-message.bfloyalty-message--excluded {
    background: var(--bfl-product-excluded-bg, #f7f7f7);
    color: var(--bfl-product-excluded-text, #6b6b6b);
    border-left-color: var(--bfl-product-excluded-accent, #adb5bd);
    font-style: italic;
}
.bfloyalty-product-info .bfloyalty-message.bfloyalty-message--excluded .material-icons {
    color: var(--bfl-product-excluded-accent, #adb5bd);
    font-style: normal;
}

/* =============================================
   Product miniature badge ("Fidélité")

   PS themes render our flag as one of:
   - <li class="product-flag bfloyalty-earn bfloyalty-earn--pos-{pos}">Label</li>  (classic 1.7/8)
   - <li class="badge bfloyalty-earn bfloyalty-earn--pos-{pos}">Label</li>          (blossomflow-style overrides)

   Color comes from the "Product loyalty gain" swatch of Apparence - merchants
   retint via the color pickers without touching CSS.

   Position: default 'flags' flows inline with the other badges. The four
   corner variants are absolutely positioned relative to .product-miniature.
   bfloyalty-cart.js moves the element out of .product-flags on load when the
   variant is not 'flags' (see moveBadges()).
   ============================================= */
.product-flag.bfloyalty-earn,
.product-flags .badge.bfloyalty-earn,
.bfloyalty-earn {
    background-color: var(--bfl-product-earn-accent, #6b2d4f) !important;
    color: #fff !important;
    border-color: var(--bfl-product-earn-accent, #6b2d4f) !important;
}

/* MDI and FA icons render via ::before so nothing HTML-shaped goes through
   the flag label (PS core html-escapes flag labels on the product page and
   most theme miniatures). The `content:` value is injected per-shop by
   renderFrontBadgeIconCss() with a whitelist-validated payload. */
.bfloyalty-earn.bfloyalty-earn--mdi::before,
.bfloyalty-earn.bfloyalty-earn--fa::before {
    color: inherit;
    display: inline-block;
}

/* Corner variants: JS reparents the badge to the closest image container
   (.thumbnail-container / .thumbnail-top / .product-thumbnail, falling back
   to .product-miniature). z-index picked so the badge sits ABOVE the static
   image but BELOW the theme's hover overlays (Hummingbird's quick-view slide,
   Classic's .highlighted-informations, etc - those usually use z-index ≥ 2).
   pointer-events: none keeps the badge from stealing hover / click. */
.bfloyalty-earn--pos-top-left,
.bfloyalty-earn--pos-top-right,
.bfloyalty-earn--pos-bottom-left,
.bfloyalty-earn--pos-bottom-right {
    position: absolute;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: calc(100% - 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    pointer-events: none;
}
/* Fade out gracefully when the miniature is being hovered so the theme's
   quick-view / info overlay owns the visual completely. Scoped to the direct
   image-container host so an accidental hover on the whole card doesn't hide
   the badge on the whole grid. */
.thumbnail-container:hover > .bfloyalty-earn--pos-top-left,
.thumbnail-container:hover > .bfloyalty-earn--pos-top-right,
.thumbnail-container:hover > .bfloyalty-earn--pos-bottom-left,
.thumbnail-container:hover > .bfloyalty-earn--pos-bottom-right,
.thumbnail-top:hover > .bfloyalty-earn--pos-top-left,
.thumbnail-top:hover > .bfloyalty-earn--pos-top-right,
.thumbnail-top:hover > .bfloyalty-earn--pos-bottom-left,
.thumbnail-top:hover > .bfloyalty-earn--pos-bottom-right,
.product-thumbnail:hover > .bfloyalty-earn--pos-top-left,
.product-thumbnail:hover > .bfloyalty-earn--pos-top-right,
.product-thumbnail:hover > .bfloyalty-earn--pos-bottom-left,
.product-thumbnail:hover > .bfloyalty-earn--pos-bottom-right,
.product-miniature__image-container:hover > .bfloyalty-earn--pos-top-left,
.product-miniature__image-container:hover > .bfloyalty-earn--pos-top-right,
.product-miniature__image-container:hover > .bfloyalty-earn--pos-bottom-left,
.product-miniature__image-container:hover > .bfloyalty-earn--pos-bottom-right {
    opacity: 0;
    transition: opacity .18s ease-out;
}
.bfloyalty-earn--pos-top-left     { top: 8px;    left: 8px;   }
.bfloyalty-earn--pos-top-right    { top: 8px;    right: 8px;  }
.bfloyalty-earn--pos-bottom-left  { bottom: 8px; left: 8px;   }
.bfloyalty-earn--pos-bottom-right { bottom: 8px; right: 8px;  }

/* =============================================
   Truncated product list + <details> accordion
   Kept mobile-friendly: native <details>, no JS, no hover-only tooltip.
   ============================================= */
.bfloyalty-product-list {
    list-style: none;
    margin: .25rem 0 0 0;
    padding: 0 0 0 28px;
}
.bfloyalty-product-list li {
    position: relative;
    padding: .25rem 0;
    font-size: .95em;
    line-height: 1.35;
}
.bfloyalty-product-list li::before {
    content: "";
    position: absolute;
    left: -14px;
    top: .8em;
    width: 5px;
    height: 5px;
    background: currentColor;
    opacity: .5;
    border-radius: 50%;
}
.bfloyalty-product-list .bfloyalty-product-name {
    font-weight: 500;
}
.bfloyalty-product-list .bfloyalty-product-attrs {
    display: block;
    font-size: .85em;
    opacity: .75;
    font-style: italic;
    margin-top: .1rem;
}
.bfloyalty-product-list--extra {
    margin-top: .25rem;
}

.bfloyalty-product-more {
    margin-top: .35rem;
    padding-left: 28px;
    font-size: .9em;
}
.bfloyalty-product-more > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, .05);
    border-radius: 3px;
    color: inherit;
    font-weight: 500;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.bfloyalty-product-more > summary::-webkit-details-marker { display: none; }
.bfloyalty-product-more > summary::marker { content: ""; }
.bfloyalty-product-more > summary::before {
    content: "▶";
    font-size: 10px;
    transition: transform .2s;
}
.bfloyalty-product-more[open] > summary::before {
    transform: rotate(90deg);
}
.bfloyalty-product-more > summary:hover,
.bfloyalty-product-more > summary:focus {
    background: rgba(0, 0, 0, .1);
    outline: none;
}