/* CPX Finance Light V0.1.10 comparison panel hierarchy */

/* Treat the input controls as a distinct control panel. */
.comparison-card .cpx-widget__form {
    position: relative;
    padding: 18px 20px 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--light-accent) 18%, var(--light-primary) 7%);
    border-radius: calc(var(--light-radius) + 2px);
    background: color-mix(in srgb, var(--light-accent) 7%, var(--light-surface));
    box-shadow: 0 10px 28px rgba(23, 32, 51, .045);
}

.comparison-card .cpx-widget__form::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--light-accent);
}

/* Inputs stay neutral and readable inside the tinted panel. */
.comparison-card .cpx-field--type select,
.comparison-card .cpx-number-input,
.comparison-card .cpx-step-button {
    background: var(--light-surface);
}

.comparison-card .cpx-step-button {
    border-color: color-mix(in srgb, var(--light-primary) 18%, #fff);
}

/* Visually separate the result summary and lender cards from the control panel. */
.comparison-card .cpx-widget__status {
    margin: 18px 2px 12px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--light-primary) 10%, transparent);
    color: var(--light-primary);
}

.comparison-card .cpx-results {
    gap: 12px;
}

.comparison-card .cpx-offer {
    background: var(--light-surface);
    border-color: color-mix(in srgb, var(--light-primary) 11%, transparent);
    box-shadow: 0 5px 16px rgba(23, 32, 51, .035);
}

.comparison-card .cpx-offer:hover {
    border-color: color-mix(in srgb, var(--light-primary) 18%, transparent);
}

/* Keep secondary actions visually quieter than the primary orange CTA. */
.comparison-card .cpx-offer__more {
    background: color-mix(in srgb, var(--light-primary) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--light-primary) 14%, transparent);
    color: var(--light-primary);
}

@media (min-width: 981px) {
    .comparison-card {
        padding: 16px 18px 18px;
    }

    .comparison-card .cpx-widget__form {
        padding: 16px 18px 14px;
    }

    .comparison-card .cpx-widget__status {
        margin-top: 15px;
        padding-top: 12px;
    }
}

/* Mobile: save vertical space while preserving the input/results distinction. */
@media (max-width: 560px) {
    .comparison-card {
        padding: 8px;
    }

    .comparison-card .cpx-widget__form {
        padding: 12px 10px 10px;
        border-radius: calc(var(--light-radius) - 2px);
    }

    .comparison-card .cpx-widget__form::before {
        height: 3px;
    }

    .comparison-card .cpx-widget__grid {
        gap: 8px;
    }

    .comparison-card .cpx-widget__status {
        margin: 10px 2px 8px;
        padding-top: 9px;
        font-size: 12px;
        line-height: 1.3;
    }

    .comparison-card .cpx-results {
        gap: 8px;
    }
}