/*
 * Theme tokens (web/app/themes/gds/resources/styles/config/variables.scss)
 * with literal fallbacks for a template that doesn't print them.
 */
.stedox-free-gift-row,
.stedox-fg-slot {
    --stedox-fg-green: var(--gds-color-success, #2e7d32);
    --stedox-fg-green-dark: #1b5e20;
    --stedox-fg-green-light: var(--gds-color-success-light, #e8f5e8);
    --stedox-fg-ink: var(--gds-color-secondary-950, #1a2441);
    --stedox-fg-radius: 4px;
}

/*
 * Thumbnail breathing room — applies to every cart row, not just gift
 * ones (the image otherwise touches its cell's edge with zero gap).
 */
.wc-block-cart-item__image img {
    box-sizing: border-box;
    padding: 3px;
}

.stedox-free-gift-row .wc-block-cart-item__image img {
    background-color: #fff;
}

/* Gift row: light green wash across the whole line item. Relative so the
   badge ribbon can be positioned against the row's own top-right corner —
   a <tr> in both the Mini-Cart and the full Cart page. */
.wc-block-cart-items__row.stedox-free-gift-row,
.wp-block-woocommerce-mini-cart-contents .stedox-free-gift-row {
    position: relative;
    background-color: var(--stedox-fg-green-light);
}

/*
 * No quantity control on a free gift — always exactly 1. !important:
 * WooCommerce's own stylesheet declares the same selector at the same
 * specificity and loads after ours on some templates.
 */
.stedox-free-gift-row .wc-block-cart-item__quantity {
    display: none !important;
}

/* The per-unit price line (crossed-out original + "0") is redundant — the
   line total and "SAVE" badge already say it's free. */
.stedox-free-gift-row .wc-block-cart-item__prices .wc-block-components-product-price {
    display: none !important;
}

/* "Free gift" ribbon pinned to the row's top-right corner. */
.stedox-free-gift-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--stedox-fg-radius);
    background-color: var(--stedox-fg-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.6;
}

.stedox-free-gift-badge svg {
    flex-shrink: 0;
}

/* "Included for free with your order" caption under the price, plus the
   "Change gift" link on rows whose rule offers a choice. */
.stedox-free-gift-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-top: 4px;
    color: var(--stedox-fg-green);
    font-size: 12px;
}

.stedox-free-gift-caption svg {
    flex-shrink: 0;
}

.stedox-free-gift-change {
    min-height: 24px;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--stedox-fg-ink);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.stedox-free-gift-change:hover {
    color: var(--stedox-fg-green-dark);
}

.stedox-free-gift-change:focus-visible {
    outline: 2px solid var(--stedox-fg-ink);
    outline-offset: 2px;
}

/*
 * The full-width slot (see `fullWidthSlot()` in cart-item.js and
 * gift-picker.js): an extra <tr>/<td colspan> right under the trigger row,
 * since the row's own <td>s form a 3-column grid a nested element's
 * `grid-column` can't escape. Zero padding so an empty slot adds no gap;
 * the note/picker inside supply their own spacing.
 */
.stedox-fg-slot-cell {
    padding: 0 !important;
    border: none !important;
}

.stedox-fg-slot {
    padding: 0 16px;
}

/*
 * Reserves the note/picker's space before the first cart data resolves.
 * Sized to what's coming: the default matches the note, the tall variant
 * (qty already at the threshold) matches the two-option picker card.
 */
.stedox-fg-skeleton {
    height: 16px;
    margin: 8px 0;
    width: 60%;
    border-radius: var(--stedox-fg-radius);
    background: linear-gradient(90deg, #e5e5e5 25%, #f0f0f0 37%, #e5e5e5 63%);
    background-size: 400% 100%;
    animation: stedox-fg-skeleton-pulse 1.4s ease infinite;
}

/* Matches a two-option picker card (heading + two option rows + padding),
   measured at 165px in the Mini-Cart drawer. */
.stedox-fg-skeleton--tall {
    width: 100%;
    height: 165px;
}

@keyframes stedox-fg-skeleton-pulse {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

/* "Add N more to get a free gift". Starts collapsed; cart-item.js adds
   `.stedox-fg-visible` a frame later to fade it in and removes it to fade
   out once the threshold is reached, so it hands off to the picker instead
   of popping. Never shown alongside the picker (same slot). */
.stedox-free-gift-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    max-height: 0;
    margin: 0;
    opacity: 0;
    color: var(--stedox-fg-green);
    font-size: 12px;
    line-height: 1.4;
    transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease;
}

/* 6em: the German/Finnish note wraps to three lines in a 320px drawer. */
.stedox-free-gift-progress.stedox-fg-visible {
    max-height: 6em;
    margin: 8px 0;
    opacity: 1;
}

.stedox-free-gift-progress svg {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .stedox-fg-skeleton {
        animation: none;
    }

    .stedox-free-gift-progress {
        transition: none;
    }
}