/* Local extension: the shared set has no currency-prefixed price field synced
   to a native range, and the card has no internal flow. Shared components
   supply every appearance value; local rules cover arrangement, the prefix
   adornment, block-owned range progress, savings/baseline roles and the
   live-update highlight. Every selector is rooted at the block class.
   Source for the range background: components.css .clvr-slider__input;
   Firefox track/progress stay native. */

/* The shared card has no internal flow; stack its sections on a shared gap.
   The card is the query context so the block reflows to its embedded width. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__card {
    container-type: inline-size;
    display: grid;
    gap: var(--clvr-space-6);
}

/* Price (with slider) and plan picker share one row when there is room. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__controls {
    display: grid;
    gap: var(--clvr-space-6);
    align-items: start;
}

@container (min-width: 40rem) {
    .ffmls-savings-calculator-block .ffmls-savings-calculator__controls {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/* Currency adornment inside the shared control. The input keeps the shared
   control look; only its start inset grows to clear the "$". */
.ffmls-savings-calculator-block .ffmls-savings-calculator__prefix {
    position: absolute;
    inset-inline-start: var(--clvr-space-3);
    color: var(--clvr-color-text-muted);
    pointer-events: none;
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__price-input {
    padding-inline-start: var(--clvr-space-6);
    font-variant-numeric: tabular-nums;
}

/* A track and its two extremes are one unit, so they sit tighter than the
   field gap. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__track {
    display: grid;
    gap: var(--clvr-space-1);
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__ends {
    display: flex;
    justify-content: space-between;
}

/* Native range using the shared slider appearance with block-owned progress. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__range {
    background-image: linear-gradient(
        90deg,
        var(--clvr-color-primary) var(--ffmls-savings-calculator-block-progress, 0%),
        var(--clvr-color-surface-muted) var(--ffmls-savings-calculator-block-progress, 0%)
    );
}

/* Native select: the host theme strips the browser arrow, so the shared
   chevron glyph marks it as a dropdown. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__select {
    appearance: none;
    padding-inline-end: var(--clvr-space-8);
    cursor: pointer;
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__chevron {
    position: absolute;
    inset-inline-end: var(--clvr-space-3);
    color: var(--clvr-color-text-muted);
    pointer-events: none;
}

/* Result rows: one divided list inside the card instead of nested cards.
   Option text leads; cost and savings sit in two value columns. Dividers
   take padding on both sides; the list itself owns no outer spacing. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__options {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 8rem));
    gap: var(--clvr-space-2) var(--clvr-space-6);
    align-items: start;
    margin: 0;
    padding: var(--clvr-space-4) 0;
    border-top: 1px solid var(--clvr-color-border-subtle);
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__option:first-child {
    padding-top: 0;
    border-top: 0;
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__option:last-child {
    padding-bottom: 0;
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__option-name {
    display: grid;
    gap: var(--clvr-space-1);
    min-width: 0;
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__option-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clvr-space-2);
}

/* Narrow embeds: option text spans the row; the two figures share a line. */
@container (max-width: 34rem) {
    .ffmls-savings-calculator-block .ffmls-savings-calculator__option {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ffmls-savings-calculator-block .ffmls-savings-calculator__option-name {
        grid-column: 1 / -1;
    }
}

/* Savings figures read as gains; the traditional row is the reference. */
.ffmls-savings-calculator-block .ffmls-savings-calculator__save {
    color: var(--clvr-color-success-text);
}

.ffmls-savings-calculator-block .ffmls-savings-calculator__baseline {
    color: var(--clvr-color-text-muted);
}

/* Live-update highlight: visible for ~1.2s (JS removes the class). An outline
   tints around the figure without shifting layout. Under reduced
   motion the highlight still shows, it just doesn't fade. */
.ffmls-savings-calculator-block .clvr-metric__value {
    border-radius: var(--clvr-radius-sm);
    transition: background-color var(--clvr-duration-normal) ease, outline-color var(--clvr-duration-normal) ease;
}

.ffmls-savings-calculator-block .clvr-metric__value.is-updated {
    background-color: var(--clvr-color-label-positive-bg);
    outline: var(--clvr-space-1) solid var(--clvr-color-label-positive-bg);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ffmls-savings-calculator-block .clvr-metric__value {
        transition: none;
    }
}

/* Host-theme conflict: LWC's content link colour (a light blue) reaches the
   fine-print survey link at 3.4:1 with no underline. Use the shared link
   token and an underline so the link is readable and distinct from text. */
.ffmls-savings-calculator-block .clvr-field__description a {
    color: var(--clvr-color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ffmls-savings-calculator-block .clvr-field__description a:hover {
    color: var(--clvr-color-link-hover);
}