/* Quantity Discounts — product tier table and discounted cart lines.
 *
 * 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 --sqd-* custom properties on .sonic-quantity-discounts
 * 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-quantity-discounts/quantity-tiers.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-quantity-discounts { --sqd-*: … }`
   rule and win, no matter which stylesheet the site happens to load last. */
:where(.sonic-quantity-discounts) {
    --sqd-text: currentColor;

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

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

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

    --sqd-panel: transparent;
    --sqd-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. */
    --sqd-accent: currentColor;
    --sqd-accent-alt: currentColor;

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

    --sqd-radius: 10px;
}

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

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

.sonic-quantity-discounts[hidden] {
    display: none;
}

.sonic-quantity-discounts__heading {
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
    text-wrap: pretty;
}

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

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

.sonic-quantity-discounts__table th,
.sonic-quantity-discounts__table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--sqd-border);
}

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

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

.sonic-quantity-discounts__table tbody tr:last-child td {
    border-bottom: 0;
}

/* The tier the current quantity falls into. */
.sonic-quantity-discounts__tier--active td {
    position: relative;
    font-weight: 700;
    background: var(--sqd-highlight);
}

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

/* --- Live "at this quantity" line --------------------------------------- */

.sonic-quantity-discounts__live {
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sqd-accent);
    text-wrap: pretty;
}

.sonic-quantity-discounts__live[hidden] {
    display: none;
}

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

.sonic-quantity-discounts--product {
    padding: 0.875rem 1rem 0.875rem 1.25rem;
}

/* --- Discounted cart / checkout lines ----------------------------------- */

/* Rendered by the cart display class outside the card, so these derive their
   own tones from the surrounding text colour rather than the --sqd-* set. */
.sonic-quantity-discounts-price del {
    opacity: 0.6;
    font-weight: 400;
    text-decoration-thickness: 1px;
}

.sonic-quantity-discounts-price ins {
    text-decoration: none;
    font-weight: 700;
}

.sonic-quantity-discounts-saving {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 400;
    color: currentColor;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

@media (max-width: 600px) {
    .sonic-quantity-discounts {
        padding: 0.875rem 0.875rem 0.875rem 1.125rem;
    }

    .sonic-quantity-discounts__table th,
    .sonic-quantity-discounts__table td {
        padding: 0.4375rem 0.5rem;
    }
}