.ninjaffiliation-widget {
    margin-bottom: 20px;
}

.ninjaffiliation-widget.ninjaffiliation-compare-price {
    width: 100%;
}

.ninjaffiliation-widget .ninjaffiliation-offer {
    background-color: #EEE;
    text-decoration: none;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 50px;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    gap: 15px;
    transition: background-color 0.3s ease-in-out;
    font-weight: normal!important;
}

.ninjaffiliation-widget > .ninjaffiliation-offer:nth-child(2) {
    font-weight: bold!important;
}

.ninjaffiliation-widget .ninjaffiliation-offer:hover {
    background-color: #DDD;
}

.ninjaffiliation-widget .ninjaffiliation-logo {
    /* Fixed square so logos with different intrinsic aspect ratios (Hardloop Y,
       Snowleader shield, Ekosport k…) all render in the same box and the
       merchant name always starts at the same x-position across rows. */
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.ninjaffiliation-widget .ninjaffiliation-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ninjaffiliation-widget .ninjaffiliation-reseller { 
    color: #000;
    flex-basis: 50%;
    font-size: 0.85em;
}

.ninjaffiliation-widget .ninjaffiliation-price { 
    color: #000;
    flex-basis: 18%;
    text-align: right;
    font-size: 0.85em;
}

.ninjaffiliation-widget .ninjaffiliation-cta {
    flex-basis: auto;
    white-space: nowrap;
    font-weight: bold;
    padding: 5px 14px;
    background-color: var(--ninja-cta-color, #d8613c);
    border-radius: 35px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    font-size: 0.78em;
}

.ninjaffiliation-widget .ninjaffiliation-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
    display: inline-block;
}

.ninjaffiliation-widget.ninjaffiliation-best-price .ninjaffiliation-cta {
    padding: 12px 22px;
}


.ninjaffiliation-widget .ninjaffiliation-cta:hover {
    background-color: var(--ninja-cta-hover-color, #333);
}

.ninjaffiliation-extra-offers {
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ninjaffiliation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 10px;
  }
  
  .ninjaffiliation-toggle-offers {
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    color: #555;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
  }
  .ninjaffiliation-toggle-offers:hover {
    color: #222;
  }
  
  .ninjaffiliation-arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.3s ease;
  }
  
  .ninjaffiliation-arrow.rotated {
    transform: rotate(180deg);
  }
  
  .ninjaffiliation-updated {
    color: #555;
    cursor: help;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: auto;
  }
  .ninjaffiliation-updated:hover {
    opacity: 1;
    color: #222;
  }
  .ninjaffiliation-updated[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
  }
  .ninjaffiliation-updated[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
  

.ninjaffiliation-cta .cta-label-mobile { display: none; }   /* hidden by default */
.ninjaffiliation-cta .cta-label-desktop { display: inline; } /* desktop label */

/*
 * COMPACT MODE
 */
.ninjaffiliation-widget.ninjaffiliation-compact-price {
    width: 100%;
}

.ninjaffiliation-widget.ninjaffiliation-compact-price .ninjaffiliation-offer {
    padding-top: calc(0.5rem + 2px);
    padding-bottom: calc(0.5rem + 2px);
}

/* In compact mode there's no title, so the best offer is the 1st child.
   Bold that one and neutralize the inherited "2nd child" rule from compare mode. */
.ninjaffiliation-widget.ninjaffiliation-compact-price > .ninjaffiliation-offer:first-child {
    font-weight: bold !important;
}
.ninjaffiliation-widget.ninjaffiliation-compact-price > .ninjaffiliation-offer:nth-child(2) {
    font-weight: normal !important;
}

.ninjaffiliation-widget.ninjaffiliation-compact-price .ninjaffiliation-logo {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.ninjaffiliation-widget.ninjaffiliation-compact-price .ninjaffiliation-reseller {
    flex-basis: auto;
    flex-grow: 1;
    font-size: 0.7em;
}

.ninjaffiliation-widget.ninjaffiliation-compact-price .ninjaffiliation-price {
    flex-basis: auto;
    font-weight: bold;
    color: #d8613c;
    padding-right: 8px;
    font-size: 0.7em;
}


/*
 * PRICE TREND — visual signals for "lowest price" or "price drop" on the best offer.
 * Switchable via data-trend-style; default is "auto" (discount on real drops, chip otherwise).
 */

/* chip — floating speech bubble above the best pill */
.ninjaffiliation-widget .ninjaffiliation-offer {
    position: relative; /* anchor for the chip */
}
.ninjaffiliation-trend-chip {
    position: absolute;
    bottom: 100%;
    margin-bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c9c4e;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.6;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    z-index: 1;
}
.ninjaffiliation-trend-chip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2c9c4e;
}
.ninjaffiliation-trend-chip.is-down {
    background-color: #777;
}
.ninjaffiliation-trend-chip.is-down::after {
    border-top-color: #777;
}

/* discount — strikethrough old price + savings tag (used by auto on real drops) */
.ninjaffiliation-discount {
    display: block;
    font-size: 11px;
    margin-top: 2px;
    line-height: 1;
}
.ninjaffiliation-discount s {
    color: #999;
    font-weight: normal;
}
.ninjaffiliation-discount-pct {
    color: #2c9c4e;
    font-weight: bold;
    margin-left: 4px;
}
.ninjaffiliation-discount.is-down .ninjaffiliation-discount-pct { color: #c0392b; }

/* inline-tag — small badge between merchant name and price */
.ninjaffiliation-inline-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.7em;
    font-weight: 600;
    color: #2c9c4e;
    background-color: #ecf9f0;
    border-radius: 4px;
    vertical-align: middle;
}
.ninjaffiliation-inline-tag.is-down {
    color: #555;
    background-color: #f0f0f0;
}

/* When the chip is present, reserve space on the widget itself so the chip
   can overflow upward without pushing the offer pill down (which would
   misalign it with sibling widgets in a multi-column grid). */
.ninjaffiliation-widget.ninjaffiliation-has-tag-stuck {
    padding-top: 14px;
}
/* In compact mode the widget is typically rendered next to product cards
   in a grid — reserve the chip space on every compact widget to keep all
   first-row pills aligned across columns, with or without the chip. */
.ninjaffiliation-widget.ninjaffiliation-compact-price {
    padding-top: 14px;
}

/* tag-stuck (default for AUTO) — chip half overlapping the pill's top-left corner */
.ninjaffiliation-tag-stuck {
    position: absolute;
    top: -14px;
    left: 16px;
    background-color: #2c9c4e;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.6;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    z-index: 1;
}
.ninjaffiliation-tag-stuck.is-down {
    background-color: #777;
}


/*
 * OUT-OF-STOCK — pill stays clickable (cookie capture) but is visually softened
 * and the CTA shifts to a neutral "Vérifier la dispo" label.
 */
.ninjaffiliation-widget .ninjaffiliation-offer.is-out-of-stock {
    opacity: 0.78;
}
.ninjaffiliation-widget .ninjaffiliation-offer.is-out-of-stock:hover {
    opacity: 1;
}
.ninjaffiliation-widget .ninjaffiliation-offer.is-out-of-stock .ninjaffiliation-price {
    color: #888;
}
.ninjaffiliation-widget .ninjaffiliation-offer.is-out-of-stock .ninjaffiliation-cta {
    background-color: #888;
}
.ninjaffiliation-widget .ninjaffiliation-offer.is-out-of-stock:hover .ninjaffiliation-cta {
    background-color: #555;
}
.ninjaffiliation-stock-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.72em;
    font-weight: 600;
    color: #b04a3a;
    background-color: #fdecea;
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.2px;
}

/*
 * SKELETON LOADER
 * Reuses the .ninjaffiliation-offer pill so the height matches the rendered
 * offer exactly. The shimmer is on the inner bars; the pill itself stays its
 * normal grey background.
 */
.ninjaffiliation-skeleton-offer {
    cursor: default !important;
    pointer-events: none;
}

.ninjaffiliation-skeleton-offer .ninjaffiliation-skeleton-bar {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 4px;
    background-color: #DDD;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: ninjaffiliation-shimmer 1.4s infinite linear;
}

/* Override the orange CTA button so the placeholder reads as inert */
.ninjaffiliation-skeleton-offer .ninjaffiliation-cta {
    background-color: transparent;
    padding: 5px 10px;
}

@keyframes ninjaffiliation-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/*
 * MOBILE
 */
 @media (max-width: 576px) {
     .ninjaffiliation-widget .ninjaffiliation-title {
        font-size: 1em;
    }

    .ninjaffiliation-widget .ninjaffiliation-price {
        display: none;
    }

    .ninjaffiliation-cta .cta-label-desktop { display: none; } /* hide text */
    .ninjaffiliation-cta .cta-label-mobile { display: inline; }/* show price */

    .ninjaffiliation-widget .ninjaffiliation-offer {
        font-size: 0.90em;
    }

    .ninjaffiliation-widget .ninjaffiliation-cta {
        flex-basis: auto;
    }

    .ninjaffiliation-widget .ninjaffiliation-reseller {
        flex-basis: 46%;
    }

    /* Compact mode keeps price visible on mobile (overrides the global hide above) */
    .ninjaffiliation-widget.ninjaffiliation-compact-price .ninjaffiliation-price {
        display: inline;
        flex-basis: auto;
    }

    .ninjaffiliation-widget.ninjaffiliation-compact-price .ninjaffiliation-reseller {
        flex-basis: auto;
        flex-grow: 1;
    }

 }