/* =========================================================================
 * Promotion pills — catalog tiles AND cart rows.
 * =========================================================================
 * Two scripts draw these (listing.js on a tile, cart.js on a row) and they
 * have to look like one feature, because to the shopper they are one: the
 * amber pill they saw on the shelf is the amber pill they see in the basket.
 * Kept in a shared file rather than copied into listing.css and cart.css so
 * the two cannot drift apart one tweak at a time.
 *
 * The colour is the whole message. Green is money already saved; amber is
 * money still on the table. A shopper scanning a long catalog or a long cart
 * should be able to tell those apart before reading either.
 * ========================================================================= */

.promo-nudge,
.promo-earned {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: .35rem;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.3;
    text-align: left;
}

/* ── "You're N away" ───────────────────────────────────────────────────── */
.promo-nudge {
    gap: .5rem;
    padding: .25rem .25rem .25rem .625rem;
    border: 1px solid #f3d68b;
    background: #fffaef;
}

.promo-nudge-msg {
    font-weight: 500;
    color: #7a5910;
}

.promo-nudge-icon {
    margin-right: .375rem;
    color: #c8901a;
}

.promo-nudge-add {
    flex: none;
    padding: .25rem .75rem;
    border: 0;
    border-radius: 999px;
    background: #c8901a;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease-in-out;
}

.promo-nudge-add:hover:not(:disabled) {
    background: #a4740f;
}

.promo-nudge-add:focus-visible {
    outline: 2px solid #a4740f;
    outline-offset: 2px;
}

.promo-nudge-add:disabled {
    opacity: .65;
    cursor: default;
}

/* ── "You have it" ─────────────────────────────────────────────────────── */
.promo-earned {
    gap: .375rem;
    padding: .25rem .625rem;
    border: 1px solid #b7e4c7;
    background: #f2fbf5;
    color: #1a7f45;
    font-weight: 600;
}

/* ── A promotion that is simply the price ──────────────────────────────── */
/*
 * When one unit already earns the deal there is no threshold to reach, so it is
 * shown where a shopper looks for a price. Green rather than the red the legacy
 * specials use: red is the colour this catalog spends on "out of stock", and a
 * saving is not a warning.
 */
.promo-price {
    color: #1a7f45;
}

.promo-price-was {
    color: #8a9199;
    font-weight: 500;
}

/* ── The deal badge, with its action inside it ─────────────────────────── */
/*
 * The badge states the offer and the button takes it, so they are one control
 * rather than a sentence with a second sentence underneath repeating it.
 */
.promo-tag {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.promo-tag-text {
    flex: 1 1 auto;
    min-width: 0;   /* let a long offer wrap instead of shoving the button out */
}

.promo-tag-add {
    flex: none;
    padding: .2rem .7rem;
    border: 0;
    border-radius: 999px;
    background: #1a7f45;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease-in-out;
}

.promo-tag-add:hover:not(:disabled) {
    background: #146637;
}

.promo-tag-add:focus-visible {
    outline: 2px solid #146637;
    outline-offset: 2px;
}

.promo-tag-add:disabled {
    opacity: .65;
    cursor: default;
}

/* ── Claim a free item ─────────────────────────────────────────────────── */
/*
 * Shown above the catalog grid and inside the cart's claim card. The shopper
 * has already earned this, so it reads as a reward being handed over rather
 * than another thing to do — and the products sit in it, because the one thing
 * that must not happen is being told to go and find them.
 */
#promo_claims {
    margin-bottom: 1rem;
}

.promo-claim {
    padding: .75rem 1rem;
    border: 1px solid #b7e4c7;
    border-left: 4px solid #1a7f45;
    border-radius: .5rem;
    background: #f2fbf5;
}

.promo-claim-head {
    color: #14663a;
    font-weight: 600;
    font-size: .9375rem;
}

.promo-choices {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .625rem;
}

.promo-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    max-width: 100%;
    padding: .4rem .875rem;
    border: 1px solid #1a7f45;
    border-radius: .5rem;
    background: #fff;
    color: #14663a;
    text-align: left;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.promo-choice:hover:not(:disabled) {
    background: #1a7f45;
    color: #fff;
}

.promo-choice:focus-visible {
    outline: 2px solid #14663a;
    outline-offset: 2px;
}

.promo-choice:disabled {
    opacity: .55;
    cursor: default;
}

.promo-choice.is-adding {
    background: #1a7f45;
    color: #fff;
}

.promo-choice-name {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.promo-choice-price {
    font-size: .6875rem;
    font-weight: 500;
    opacity: .75;
}

/* ── Tiles ─────────────────────────────────────────────────────────────── */
/* The card body is a flex column whose last child pushes the buttons to the
   bottom; the pill is a block in that flow so a two-line message on a narrow
   card grows the card instead of overlapping the row beneath it. */
.product .promo-nudge-slot {
    display: block;
}

.product .promo-nudge,
.product .promo-earned {
    font-size: .75rem;
}

/* ── Phones ────────────────────────────────────────────────────────────── */
/* Cart rows become stacked cards and catalog tiles go two-up, so the pill
   takes the full width and pins its button to the edge rather than letting it
   trail off the side. */
@media (max-width: 575.98px) {
    .promo-nudge {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
}

/* ── Wide cards ────────────────────────────────────────────────────────── */
/*
 * The corner banner and the deal tag were drawn once for every screen from a
 * phone upward, and the shared stylesheet only ever steps them DOWN (≤576px).
 * That leaves one size doing the work across a tile that is not one size: this
 * grid is `col-6 col-md-6 col-xl-4 col-xxl-3`, so a tile roughly 185px wide on a
 * phone becomes roughly 350px on a wide monitor. The banner does not grow with
 * it, so the thing whose whole job is to be noticed from across the grid ends up
 * occupying a tenth of the card it is meant to flag, and the offer underneath it
 * — the sentence a shopper actually reads and clicks — sets at 12px in a card
 * with a 24px price above it.
 *
 * So the family steps UP at the two breakpoints where the grid itself changes
 * column count, in proportion to the tile rather than to the viewport.
 *
 * SCOPED TO `.product`, and in THIS sheet rather than the shared one, on purpose.
 * shared/promotion-deal.css is loaded by order entry and the promotion builder's
 * preview as well, and neither wants this: an order-entry tile is denser than a
 * shop card at the same viewport, and the builder's preview is a MINIATURE whose
 * whole point is to show the merchant a banner at the size the shop draws it —
 * scaling that by the designer's own window would make it promise the wrong one.
 *
 * Every rule below carries the extra `.product` over its counterpart in the
 * shared sheet, which is what lets it win despite that sheet loading last.
 */
@media (min-width: 992px) {
    .product .promo-banner {
        font-size: .6875rem;
        letter-spacing: .07em;
    }

    .product .promo-banner-ribbon {
        width: 7.25rem;
        height: 7.25rem;
    }

    /* A wider band, not just bigger type in the same one — the band's thickness
       is its type plus this padding, and a heavier word on a hairline reads as
       cramped rather than as bigger. */
    .product .promo-banner-ribbon .promo-banner-face {
        padding: .3rem 0;
    }

    .product .promo-banner-corner {
        width: 5.5rem;
        height: 5.5rem;
        font-size: .625rem;
    }

    /* The one length in the family that is not a proportion: the width a word
       wraps at inside the disc. It has to follow the disc by hand. */
    .product .promo-banner-corner .promo-banner-text {
        width: 4rem;
    }

    .product .promo-tag {
        font-size: .8125rem;
    }

    .product .promo-tag-add {
        font-size: .8125rem;
    }

    .product .promo-tag-go {
        font-size: .6875rem;
    }

    /* The nudge and the "deal applied" pill sit on the same card as the tag and
       often directly under it, so they step with it — two pills a card apart at
       two sizes reads as one of them being broken. */
    .product .promo-nudge,
    .product .promo-earned {
        font-size: .8125rem;
    }
}

/* Four tiles across, and the widest a card in this catalog ever gets. */
@media (min-width: 1400px) {
    .product .promo-banner {
        font-size: .8125rem;
        letter-spacing: .08em;
    }

    .product .promo-banner-ribbon {
        width: 8.5rem;
        height: 8.5rem;
    }

    .product .promo-banner-ribbon .promo-banner-face {
        padding: .35rem 0;
        /* The band only has to be as long as the chord it is clipped to (0.99 ×
           the square's side); anything past that is cut off both ends equally.
           Stated here because the shared sheet's 9rem was chosen against a
           6.25rem square and is not obviously still enough against 8.5rem. */
        width: 12rem;
    }

    .product .promo-banner-corner {
        width: 6.25rem;
        height: 6.25rem;
        font-size: .6875rem;
    }

    .product .promo-banner-corner .promo-banner-text {
        width: 4.6rem;
    }

    .product .promo-tag {
        padding: .3rem .65rem;
        font-size: .875rem;
    }

    .product .promo-tag-add {
        padding: .25rem .8rem;
        font-size: .8125rem;
    }

    .product .promo-tag-go {
        font-size: .75rem;
    }

    .product .promo-nudge,
    .product .promo-earned {
        font-size: .875rem;
    }

    .product .promo-nudge-add {
        font-size: .8125rem;
    }
}

/* =========================================================================
 * THE DEAL BUILDER
 * =========================================================================
 * Opened by clicking a promotion badge — and styled in ./shared/promotion-deal
 * .css, which order entry, this storefront and the promotion builder's preview
 * pane all load. Everything from the modal frame inward used to be duplicated
 * here, and the copies drifted: this one said "Spend $50.00 more" where order
 * entry said "Add $50.00 more" about the same promotion, so a shopper and the
 * rep on the phone to them read two descriptions of one offer.
 *
 * Even the PALETTE is no longer here. This is the customer-facing shop, so the
 * builder is green like the rest of it — but that green is now
 * `.promo-deal-theme-portal` in the shared stylesheet, asked for by name in
 * mini_shop/promo-deal-modal.php. It moved because the promotion builder needs to
 * show a merchant the shop's own colours, and the app does not load this file: two
 * definitions of the shop's green is the same drift in a smaller place.
 *
 * The green INSIDE the builder was never part of that theme: green means MONEY
 * ALREADY SAVED throughout the promotion feature, on both surfaces, and the shared
 * stylesheet is right to fix it. The theme changes the chrome — the header, the
 * current step, the focus ring.
 *
 * Amber is not used inside the builder on either surface. On a tile it means
 * "money still on the table", a useful warning while scrolling past; inside the
 * builder the shopper is already doing something about it, and colouring work in
 * progress as a warning would make finishing the deal feel like clearing an
 * error. The one exception is the tier top-up button, which IS money still on
 * the table and is amber on both surfaces for that reason.
 * ========================================================================= */

/* ── The badge, once it is a button ────────────────────────────────────── */
.promo-tag.is-clickable {
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.promo-tag.is-clickable:hover,
.promo-tag.is-clickable:focus-visible {
    background-color: #d8f3e3 !important;
    border-color: #1a7f45 !important;
}

.promo-tag.is-clickable:focus-visible {
    outline: 2px solid #1a7f45;
    outline-offset: 1px;
}

/* The chevron is the whole of the affordance — it is what separates a badge
   that states something from a badge that opens something. It sits last and
   never shrinks, so a two-line offer still ends in an arrow. */
.promo-tag-go {
    flex: none;
    margin-left: auto;
    font-size: .625rem;
    opacity: .55;
}

.promo-tag.is-clickable:hover .promo-tag-go {
    opacity: 1;
}

/* listing.js drops the "Add N" button INSIDE this badge when the tile is short
   of the deal. That button is then the thing to press, so the chevron stands
   down — two affordances on one pill is an invitation to press the wrong one.
   Browsers without :has() simply show both, which is untidy and not broken. */
.promo-tag:has(.promo-tag-add) .promo-tag-go {
    display: none;
}

/* The cart draws one badge per promotion on a row, so they need to stack. */
.promo-line-badge {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}