/**
 * The quantity pricing card.
 *
 * Two conventions inherited from zda-cable-builder, both learned the hard way
 * on this exact site:
 *
 * 1. Hello Elementor sets no global `box-sizing: border-box`. Themes that do
 *    mask width-plus-padding bugs; this one does not. So the card ships its own
 *    scoped reset.
 *
 * 2. The theme styles bare tables, and it wins on specificity, not load order.
 *    Hello Elementor's reset.css gives every table 15px cell padding, grey cell
 *    borders, zebra stripes, `font-size: .9em` and a grey rule over the first
 *    header row, and some of those selectors out-rank a single plugin class.
 *    Each rule below that has to beat one is written to, and names it.
 *
 * Colours and type deliberately track the Elementor global kit (Inter, #2958A4,
 * #ECECEC) rather than the cable builder's own palette, because this card sits
 * inside the product page's spec stack and should read as part of it rather
 * than as a visitor from another plugin.
 */

.zda-qp-card,
.zda-qp-card *,
.zda-qp-card *::before,
.zda-qp-card *::after {
    box-sizing: border-box;
}

/*
 * Geometry lives in custom properties whose defaults are read off the Figma
 * design. They are in em, relative to the card's own text size, because what
 * the design fixes is proportion: change the text size and the padding and row
 * height follow it, so the card still matches.
 *
 * Any of them can be tuned without a plugin release, from the widget's
 * Advanced > Custom CSS in Elementor:
 *
 *     selector .zda-qp-card { --zda-qp-pad-x: 12px; }
 *
 * The inline padding sits inside the border on purpose. Elementor's padding
 * control pads the widget wrapper, which is outside this border, so it cannot
 * put space between the border and the rows. There is still no outer margin:
 * the gap between widgets belongs to the Elementor container.
 */
.zda-qp-card {
    --zda-qp-border: #ececec;
    --zda-qp-accent: #2958a4;
    --zda-qp-text: #000;
    --zda-qp-muted: #6b6b6b;
    --zda-qp-highlight: #f1f6ff;

    --zda-qp-pad-x: 0.7em;
    --zda-qp-row-height: 3.1em;
    --zda-qp-line-height: 1.5em;
    --zda-qp-radius: 0.7em;

    /* The vertical padding that makes a band exactly --zda-qp-row-height tall,
       its 1px divider included. The title and every row use it, so the whole
       card keeps a single rhythm. */
    --zda-qp-pad-y: calc((var(--zda-qp-row-height) - var(--zda-qp-line-height) - 1px) / 2);

    background: #fff;
    border: 1px solid var(--zda-qp-border);
    border-radius: var(--zda-qp-radius);
    color: var(--zda-qp-text);
    font-size: 0.875rem;
    letter-spacing: -0.5px;
    line-height: var(--zda-qp-line-height);
    padding: 0 var(--zda-qp-pad-x);
    width: 100%;
}

/* A variable product renders empty until a variation is chosen. */
.zda-qp-card--pending:not(.zda-qp-card--ready) {
    display: none;
}

.zda-qp-card__title {
    border-bottom: 1px solid var(--zda-qp-border);
    font-weight: 500;
    padding: var(--zda-qp-pad-y) 0;
}

/* ---- Table ---- */

.zda-qp-card table.zda-qp-table {
    border: 0;
    border-collapse: collapse;
    /* reset.css sets `table { font-size: .9em }`, which left the table a tenth
       smaller than the title above it. */
    font-size: 1em;
    margin: 0;
    table-layout: auto;
    width: 100%;
}

/* Out-ranks reset.css `table td, table th` (0,0,2): 15px padding, grey borders,
   top alignment and a unitless line-height. */
.zda-qp-card .zda-qp-table th,
.zda-qp-card .zda-qp-table td {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--zda-qp-border);
    font-size: 1em;
    line-height: var(--zda-qp-line-height);
    padding: var(--zda-qp-pad-y) 0;
    text-align: start;
    vertical-align: middle;
}

/*
 * reset.css draws a grey rule above the first header row with
 * `table thead:first-child tr:first-child th`, specificity (0,2,4). That beat
 * the reset above and showed as a darker line over "Quantity / Price" that is
 * not in the design. Doubling the card class lifts this to (0,3,2) without
 * resorting to !important.
 */
.zda-qp-card.zda-qp-card .zda-qp-table thead th {
    border-block-start: 0;
}

.zda-qp-card .zda-qp-table thead th {
    font-weight: 500;
}

.zda-qp-card .zda-qp-table tbody tr:last-child th,
.zda-qp-card .zda-qp-table tbody tr:last-child td {
    border-bottom: 0;
}

.zda-qp-card .zda-qp-table__qty {
    font-weight: 400;
    white-space: nowrap;
}

.zda-qp-card .zda-qp-table__price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * The price column is flush right, heading included, as in the design. The
 * alignment used to sit on a single-class rule at (0,2,0), so the cell reset
 * above at (0,2,1) won and every price rendered left-aligned mid-card.
 */
.zda-qp-card .zda-qp-table tr > :last-child {
    text-align: end;
}

/*
 * Nothing is added below the table and the current band is not highlighted,
 * because the Figma design shows neither. The client's rule is that anything
 * not in the design is removed.
 *
 * The row the quantity falls into still carries .zda-qp-table__row--active,
 * with no styling, so a highlight can come back from the widget's
 * Advanced > Custom CSS in Elementor without a plugin release:
 *
 *     selector .zda-qp-table__row--active > * { background: #f1f6ff; }
 */

/* ---- Optional note under the table ---- */
/* Empty by default. Nothing renders unless one is set in the settings. */

.zda-qp-card__note {
    color: var(--zda-qp-muted);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin: 0;
    padding: 0 0 var(--zda-qp-pad-y);
}

/* ---- Screen-reader-only live region ---- */

.zda-qp-card .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---- Narrow screens ---- */

/* Padding and row height are in em, so they shrink with the text and keep the
   design's proportions without a second set of numbers. */
@media (max-width: 480px) {
    .zda-qp-card {
        font-size: 0.8125rem;
    }
}

/* ---- Classic cart and mini-cart ---- */

.zda-qp-cart-price del {
    color: #6b6b6b;
    margin-inline-end: 0.35em;
    opacity: 0.7;
}

.zda-qp-cart-price ins {
    background: none;
    font-weight: 600;
    text-decoration: none;
}

.zda-qp-cart-band,
.zda-qp-cart-saved {
    color: #2958a4;
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ---- Archive badge ---- */

.zda-qp-badge {
    background: var(--zda-qp-highlight, #f1f6ff);
    border-radius: 0.25em;
    color: var(--zda-qp-accent, #2958a4);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.15em 0.5em;
}