/*
 * 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;
    border-radius: 6px;
}

/* On the cart page the green wash reaches the row's edges, while the photo
   and the price sit flush against them: inset the first and last cells so
   the white photo does not touch the green's edge. */
.wc-block-cart-items__row.stedox-free-gift-row > td:first-child {
    padding-left: 12px;
}

.wc-block-cart-items__row.stedox-free-gift-row > td:last-child {
    padding-right: 12px;
}

/* 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 box or trash on a free gift: its quantity follows the
 * trigger and shows as a number on the thumbnail instead. !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;
}

/* Quantity bubble on the gift's thumbnail — the quantity control is hidden,
   so this is the only place the count shows. The cell clips by default,
   which would cut the bubble's corner off. */
.stedox-free-gift-row .wc-block-cart-item__image {
    position: relative;
    overflow: visible !important;
}

.stedox-free-gift-qty {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 11px;
    background-color: var(--stedox-fg-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* "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;
    align-self: flex-start;
    margin-top: 1px;
}

/* The words wrap beside the gift icon instead of dropping under it. */
.stedox-free-gift-caption > span {
    flex: 1 1 0;
    min-width: 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;
    }
}

/*
 * Checkout order summary (React; cart-item.js adds the chip): the same
 * green wash as a cart row, a little apart from its neighbours so the
 * rounded corners show, and the "Free gift" chip in place of the 0 total
 * and its SAVE badge, level with the product name.
 */
.wc-block-components-order-summary-item.stedox-free-gift-row {
    --stedox-fg-green: var(--gds-color-success, #2e7d32);
    --stedox-fg-green-light: var(--gds-color-success-light, #e8f5e8);

    margin: 6px -8px;
    padding: 10px 8px;
    border-radius: 6px;
    background-color: var(--stedox-fg-green-light);
}

.stedox-free-gift-badge--inline {
    position: static;
    box-shadow: none;
    white-space: nowrap;
}

.stedox-free-gift-row .wc-block-components-order-summary-item__total-price .wc-block-components-product-price,
.stedox-free-gift-row .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge,
.stedox-free-gift-row .wc-block-components-order-summary-item__individual-price {
    display: none !important;
}

.stedox-free-gift-free {
    font-weight: 700;
    color: var(--stedox-fg-green);
}