/* Direction-aware by construction: logical properties (inline-start/end)
   instead of left/right, so the offer cards read correctly in RTL locales
   without shipping a separate -rtl stylesheet that would drift. */
/**
 * Tiger Funnels — order bump card. Scoped under .tgfun-bump; colours come
 * from per-bump CSS custom properties set inline by the renderer.
 */

.tgfun-bumps { margin: 18px 0; }

.tgfun-bump {
    background: var(--tgfun-bump-bg, #FFF8E1);
    border: 2px dashed var(--tgfun-bump-border, #f88903);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.tgfun-bump:last-child { margin-bottom: 0; }

.tgfun-bump__accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
}
/* Draw the checkbox ourselves.
   The card paints its own light background (--tgfun-bump-bg), but a native
   control is painted by the THEME: on a dark theme the browser renders a
   near-black square with no visible tick sitting on our cream card, which is
   the one element the whole offer depends on the shopper recognising. Owning
   the appearance is the only way it looks like a checkbox on every theme. */
.tgfun-bump__checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 4px;
    background: #fff;
    color: inherit;
    position: relative;
    transition: background-color .12s ease, border-color .12s ease;
}
.tgfun-bump__checkbox:checked {
    background: currentColor;
    border-color: currentColor;
}
/* The tick is drawn in the card background colour so it stays legible against
   whatever ink the merchant picked. */
.tgfun-bump__checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--tgfun-bump-bg, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
@media (forced-colors: active) {
    /* Windows High Contrast throws away background colours; let the browser
       have its own control back rather than show an empty box. */
    .tgfun-bump__checkbox { -webkit-appearance: auto; appearance: auto; }
    .tgfun-bump__checkbox:checked::after { content: none; }
}
.tgfun-bump__arrow { margin-inline-end: 4px; }

.tgfun-bump.is-pulse .tgfun-bump__arrow {
    display: inline-block;
    animation: tgfun-bump-pulse 1.4s ease-in-out infinite;
}
@keyframes tgfun-bump-pulse {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
/* Motion is decoration only — respect the OS setting. */
@media (prefers-reduced-motion: reduce) {
    .tgfun-bump.is-pulse .tgfun-bump__arrow { animation: none; }
}

.tgfun-bump__body { display: flex; gap: 14px; align-items: flex-start; }
.tgfun-bump__media { flex: 0 0 72px; }
.tgfun-bump__media img { width: 72px; height: auto; border-radius: 6px; display: block; }
.tgfun-bump__content { flex: 1 1 auto; min-width: 0; }
.tgfun-bump__headline { font-weight: 700; margin: 0 0 4px; }
.tgfun-bump__desc { margin: 0 0 6px; font-size: .925em; }
.tgfun-bump__price { margin: 0; }
.tgfun-bump__price del { opacity: .6; margin-inline-end: 6px; }

.tgfun-bump.is-busy { opacity: .6; pointer-events: none; }
.tgfun-bump__error { color: #b91c1c; margin: 8px 0 0; font-size: .9em; }

@media (max-width: 480px) {
    .tgfun-bump__body { gap: 10px; }
    .tgfun-bump__media, .tgfun-bump__media img { flex-basis: 56px; width: 56px; }
}

/* --- media layouts ---------------------------------------------------- */
/* The image has explicit width/height attributes, so aspect-ratio here just
   keeps the box stable while the file loads — no reflow under the checkbox. */
.tgfun-bump__media img {
    width: 100%; height: auto; display: block;
    border-radius: 6px; object-fit: cover;
}
.tgfun-bump--media-left .tgfun-bump__body  { flex-direction: row; }
.tgfun-bump--media-right .tgfun-bump__body { flex-direction: row-reverse; }
.tgfun-bump--media-top .tgfun-bump__body   { flex-direction: column; }
.tgfun-bump--media-top .tgfun-bump__media  { flex: 0 0 auto; width: 100%; }
.tgfun-bump--media-top .tgfun-bump__media img { max-height: 190px; }
.tgfun-bump--media-none .tgfun-bump__media { display: none; }

/* --- variation picker -------------------------------------------------- */
.tgfun-bump__variation { margin: 0 0 8px; }
/* 16px minimum: Mobile Safari zooms the viewport on any focused control below
   it and does not zoom back out. 44px minimum height for the thumb. */
.tgfun-bump__variation select {
    font-size: 16px;
    min-height: 44px;
    width: 100%; max-width: 240px; padding: 7px 9px;
    border: 1px solid rgba(0,0,0,.2); border-radius: 6px;
    background: #fff; color: #111; font-size: .95em;
}

/* --- benefit bullets --------------------------------------------------- */
.tgfun-bump__benefits {
    list-style: none; margin: 0 0 8px; padding: 0;
    font-size: .92em; line-height: 1.5;
}
.tgfun-bump__benefits li { position: relative; padding-inline-start: 18px; }
/* Marker drawn in CSS so it inherits the surrounding ink and stays legible
   on light and dark themes alike — a hard-coded green tick does not. */
.tgfun-bump__benefits li::before {
    content: ""; position: absolute; inset-inline-start: 3px; top: .45em;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .55;
}

/* --- skins -------------------------------------------------------------
   Each skin sets shape and emphasis only; the per-bump background and border
   colours still come through as custom properties, so a merchant can pick a
   look AND their brand colour without the two fighting. */

/* classic = the default dashed highlight (base rules above) */

.tgfun-bump--skin-solid {
    border-style: solid;
    border-width: 1px;
    background: var(--tgfun-bump-border);
    color: #fff;
}
.tgfun-bump--skin-solid .tgfun-bump__desc,
.tgfun-bump--skin-solid .tgfun-bump__benefits { opacity: .92; }
.tgfun-bump--skin-solid .tgfun-bump__price del { opacity: .75; }

.tgfun-bump--skin-outline {
    background: transparent;
    border-style: solid;
    border-width: 1px;
}

.tgfun-bump--skin-ticket {
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    /* Notches read as "coupon" without an image, and survive any background
       because they are painted from the surrounding page colour. */
    -webkit-mask-image: radial-gradient(circle 9px at 0 50%, transparent 98%, #000 100%),
                        radial-gradient(circle 9px at 100% 50%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle 9px at 0 50%, transparent 98%, #000 100%),
                radial-gradient(circle 9px at 100% 50%, transparent 98%, #000 100%);
    mask-composite: intersect;
}

.tgfun-bump--skin-card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.tgfun-bump--skin-banner {
    border: 0;
    border-inline-start: 6px solid var(--tgfun-bump-border);
    border-radius: 0 8px 8px 0;
}

/* Motion is decoration: no skin may reintroduce it against the OS setting. */
@media (prefers-reduced-motion: reduce) {
    .tgfun-bump[class*="tgfun-bump--skin-"] .tgfun-bump__arrow { animation: none; }
}

/* --- bundle contents --------------------------------------------------- */
.tgfun-bump__package {
    list-style: none; margin: 0 0 8px; padding: 0;
    font-size: .9em; line-height: 1.5;
}
.tgfun-bump__package li { position: relative; padding-inline-start: 16px; }
.tgfun-bump__package li::before {
    content: "+"; position: absolute; inset-inline-start: 2px; top: 0;
    font-weight: 700; opacity: .6;
}
.tgfun-bump__package li:first-child::before { content: ""; }

/* --- keyboard visibility ------------------------------------------------
   The card is a checkbox a shopper is being asked to spend money on, so it
   must be obvious where the keyboard is. Themes frequently strip outlines
   from inputs, which left the bump with no focus indicator at all. Drawn on
   the label so the whole hit area lights up, not just the small box.
   :focus-visible keeps it off mouse clicks. */
.tgfun-bump__accept:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}
.tgfun-bump__checkbox:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.tgfun-bump__variation select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
/* Busy state: the cart is mid-update, so make it look untouchable as well as
   report aria-busy. */
.tgfun-bump.is-busy { opacity: .75; }
.tgfun-bump.is-busy .tgfun-bump__accept { cursor: progress; }

/* Screen-reader-only text, defined by US.
   `.screen-reader-text` is conventionally supplied by the theme, and most do —
   but the card already relied on it for the variation picker's label, so any
   theme that doesn't would render "Choose an option" and "Regular price:" as
   visible text in the middle of the offer. Scoped to our card so a theme's own
   definition is not touched. */
.tgfun-bump .screen-reader-text,
.tgfun-offer .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The card paints its own background, so it must paint its own ink too.
   Inheriting the theme's text colour put light grey on the cream default —
   2.8:1, measured live on a dark theme, against a 4.5:1 requirement. The value
   is derived from the chosen background in PHP (Tiger_Funnels_Bumps::ink), so a
   merchant who picks a dark card gets light text rather than the same bug
   inverted. -webkit-text-fill-color covers inputs, which keep their own colour. */
.tgfun-bump {
    color: var(--tgfun-bump-ink, #1f2933);
}
.tgfun-bump .tgfun-bump__accept-text,
.tgfun-bump .tgfun-bump__headline,
.tgfun-bump .tgfun-bump__desc,
.tgfun-bump .tgfun-bump__price,
.tgfun-bump .tgfun-bump__price del,
.tgfun-bump .tgfun-bump__price strong,
.tgfun-bump .tgfun-bump__benefits,
.tgfun-bump .tgfun-bump__package {
    color: var(--tgfun-bump-ink, #1f2933);
    -webkit-text-fill-color: var(--tgfun-bump-ink, #1f2933);
}

/* --- Phone: touch targets and stacking ------------------------------------ */
/* The accept row is the single most important control on the card and was a
   ~24px-tall target. */
.tgfun-bump__accept { min-height: 44px; align-items: center; padding: 4px 0; }
.tgfun-bump__checkbox { width: 24px; height: 24px; }
.tgfun-bump__checkbox:checked::after { left: 7px; top: 2px; width: 6px; height: 12px; }

@media (max-width: 400px) {
    /* Side-by-side image and text never stacked, leaving ~134px for the
       headline, description, bullets, variation select and price. */
    .tgfun-bump--media-left .tgfun-bump__body,
    .tgfun-bump--media-right .tgfun-bump__body { flex-direction: column; }
    .tgfun-bump--media-left .tgfun-bump__media,
    .tgfun-bump--media-right .tgfun-bump__media { flex: 0 0 auto; width: 100%; }
    .tgfun-bump--media-left .tgfun-bump__media img,
    .tgfun-bump--media-right .tgfun-bump__media img { max-height: 160px; width: auto; }
    .tgfun-bump { padding: 12px; }
}

/* --- Skin: minimal — a single rule, no box -------------------------------
   For checkouts whose own design is already busy: the offer reads as part of
   the page rather than as an advert pasted onto it. Uses the derived ink like
   every other skin, so it stays legible on a dark theme. */
.tgfun-bump--skin-minimal {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tgfun-bump-border);
    border-bottom: 1px solid var(--tgfun-bump-border);
    border-radius: 0;
    padding-inline: 0;
}
.tgfun-bump--skin-minimal .tgfun-bump__accept { font-weight: 600; }

/* --- Skin: spotlight — tinted panel with a corner flag --------------------
   The loudest of the set, for a single hero offer. The flag is drawn in CSS so
   there is no image to ship and it inherits the merchant's accent colour. */
.tgfun-bump--skin-spotlight {
    position: relative;
    border: 0;
    border-radius: 10px;
    padding-block-start: 22px;
    background: color-mix(in srgb, var(--tgfun-bump-border) 10%, var(--tgfun-bump-bg));
    box-shadow: inset 0 0 0 2px var(--tgfun-bump-border);
    overflow: hidden;
}
.tgfun-bump--skin-spotlight::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 6px;
    background: var(--tgfun-bump-border);
}