/* Tiered Discount — incentive shortcode.
 *
 * Deliberately theme-agnostic: every colour derives from the inherited text
 * colour (currentColor), so the component picks up whatever the host theme
 * uses and works on light and dark alike without assuming a palette. No
 * brand colours and no theme-specific preset names are baked in — a
 * theme.json slug like `--wp--preset--color--primary` is not part of any
 * standard, so relying on it would paint unrelated sites in one project's
 * colours.
 *
 * To restyle it, set the --std-* custom properties on .sonic-tiered-discount
 * from the theme (they are the supported styling API), or override the
 * scoped classes, or replace the markup entirely via the template override
 * at yourtheme/sonic-tiered-discount/incentive.php.
 *
 * Each custom property declares a plain fallback first and the color-mix()
 * version second, so browsers without color-mix() still get a usable look.
 */

/* Defaults live in :where() so they carry ZERO specificity. A theme can then
   override any of them with a plain `.sonic-tiered-discount { --std-*: … }`
   rule and win, no matter which stylesheet the site happens to load last. */
:where(.sonic-tiered-discount) {
    --std-text: currentColor;

    --std-muted: currentColor;
    --std-muted: color-mix(in srgb, currentColor 62%, transparent);

    --std-border: currentColor;
    --std-border: color-mix(in srgb, currentColor 18%, transparent);

    --std-surface: transparent;
    --std-surface: color-mix(in srgb, currentColor 4%, transparent);

    --std-panel: transparent;
    --std-panel: color-mix(in srgb, currentColor 2%, transparent);

    /* Accents default to the text colour: visible on any background, and an
       obvious hook for a theme to brand. */
    --std-accent: currentColor;
    --std-accent-alt: currentColor;

    --std-track: currentColor;
    --std-track: color-mix(in srgb, currentColor 15%, transparent);

    --std-highlight: transparent;
    --std-highlight: color-mix(in srgb, currentColor 7%, transparent);

    --std-radius: 10px;
}

/* The live wrapper exists only so the cart-change refresh has something stable
   to write into. `display: contents` keeps it out of the box tree, so wrapping
   the card does not change how it sits inside a flex or grid parent. */
.sonic-tiered-discount-live {
    display: contents;
}

.sonic-tiered-discount {
    position: relative;
    /* No vertical margin: the surrounding layout owns the spacing. */
    margin: 0;
    padding: 1.125rem 1.25rem 1.125rem 1.5rem;
    border: 1px solid var(--std-border);
    border-radius: var(--std-radius);
    background: var(--std-surface);
    color: var(--std-text);
    font-family: inherit;
    overflow: hidden;
}

/* Accent stripe down the leading edge. */
.sonic-tiered-discount::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--std-accent);
}

.sonic-tiered-discount--max::before {
    background: var(--std-accent-alt);
}

.sonic-tiered-discount__message {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: inherit;
    text-wrap: pretty;
}

/* wc_price() output inside the message. */
.sonic-tiered-discount__message .woocommerce-Price-amount,
.sonic-tiered-discount__message bdi {
    color: var(--std-accent);
    font-weight: 700;
    white-space: nowrap;
}

/* Exclusions disclaimer inside the incentive card. */
.sonic-tiered-discount__note {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--std-muted);
}

/* Same note beside the cart / checkout totals. Rendered outside the card, so
   it derives its own muted tone from the surrounding text colour. */
tr.sonic-tiered-discount-note td,
.sonic-tiered-discount-note--checkout {
    padding-top: 0.25rem;
    border-top: 0;
    color: currentColor;
    color: color-mix(in srgb, currentColor 62%, transparent);
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
}

/* --- Progress toward the next tier ------------------------------------- */

.sonic-tiered-discount__progress {
    margin-top: 0.875rem;
}

.sonic-tiered-discount__progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--std-track);
    overflow: hidden;
}

.sonic-tiered-discount__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--std-accent);
    transition: width 0.4s ease;
}

.sonic-tiered-discount--max .sonic-tiered-discount__progress-bar {
    background: var(--std-accent-alt);
}

.sonic-tiered-discount__progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--std-muted);
}

/* --- Tier table --------------------------------------------------------- */

.sonic-tiered-discount__table {
    width: 100%;
    margin: 0.875rem 0 0;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--std-panel);
    border: 1px solid var(--std-border);
    border-radius: 8px;
    overflow: hidden;
}

.sonic-tiered-discount__table th,
.sonic-tiered-discount__table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--std-border);
}

.sonic-tiered-discount__table th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--std-muted);
    background: var(--std-surface);
}

.sonic-tiered-discount__table td:last-child,
.sonic-tiered-discount__table th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sonic-tiered-discount__table tbody tr:last-child td {
    border-bottom: 0;
}

/* Current tier: tinted row plus a marker on the leading edge. */
.sonic-tiered-discount__tier--active td {
    position: relative;
    font-weight: 700;
    background: var(--std-highlight);
}

.sonic-tiered-discount__tier--active td:first-child::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--std-accent-alt);
}

/* --- Product-page variant ---------------------------------------------- */

.sonic-tiered-discount--product {
    margin: 0;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
}

.sonic-tiered-discount--product .sonic-tiered-discount__message {
    font-size: 0.875rem;
}

@media (max-width: 600px) {
    .sonic-tiered-discount {
        padding: 1rem 1rem 1rem 1.25rem;
    }

    .sonic-tiered-discount__progress-labels {
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sonic-tiered-discount__progress-bar {
        transition: none;
    }
}