/* ========================================
   AdvancedInlineRateQuoteWidget_SSR.css
   GoRealo Bankrate-style mortgage-rate widget
   Prefix: airqw- (collision-safe; disjoint from airw-)
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============== Design Tokens ============== */
.airqw {
    --airqw-font: inherit; /* Inherit the site's existing font stack — don't override. */
    --airqw-primary: var(--primary-color, #0046E5);
    --airqw-primary-dark: var(--dark-blue, #002E80);
    --airqw-primary-hover: #0038b8;
    --airqw-primary-light: #eef3ff;
    --airqw-green: #16a34a;
    --airqw-green-bg: #ecfdf5;
    --airqw-neon: var(--secondary-color, #00FF41);
    --airqw-gold: #d97706;
    --airqw-gold-bg: #fffbeb;
    --airqw-gold-border: #fbbf24;
    --airqw-text: var(--text-dark, #1e293b);
    /* Secondary text color. Was a washed-out slate (#475569); darkened to
       a strong, clearly legible slate. Visual hierarchy is preserved via
       font-size / font-weight on each element, not via a faint color. */
    --airqw-text-muted: #334155;
    --airqw-bg: #ffffff;
    --airqw-bg-subtle: #f8fafc;
    --airqw-bg-accent: #f1f5f9;
    --airqw-border: #e2e8f0;
    --airqw-border-light: #f1f5f9;
    --airqw-radius: 18px;
    --airqw-radius-md: 12px;
    --airqw-radius-sm: 8px;
    --airqw-radius-xs: 6px;
    --airqw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --airqw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07);
    --airqw-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
    --airqw-shadow-card-hover: 0 8px 30px rgba(0, 70, 229, 0.12);
    --airqw-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --airqw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --airqw-duration: 0.25s;
}

/* ============== Section + Root ============== */
.airqw-section {
    padding: 32px 0;
    background: var(--airqw-bg-subtle);
}

.airqw {
    font-family: var(--airqw-font);
    color: var(--airqw-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.airqw *,
.airqw *::before,
.airqw *::after {
    box-sizing: border-box;
}

/* ============== Grid Layout (Desktop) ============== */
.airqw-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

/* ============== Sidebar (desktop) ============== */
/* Single scroll region on the page: sidebar pins to top via position:sticky
   while the user scrolls past the rate cards; it does NOT have its own
   internal scrollbar. When the user scrolls far enough that the sidebar's
   own bottom passes the viewport's top, sticky releases and the sidebar
   scrolls away with the page. The mobile @media block converts this same
   element into a flex-column slide-in drawer. */
.airqw-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
    background: var(--airqw-bg);
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-md);
    padding: 20px;
    box-shadow: var(--airqw-shadow-sm);
}

/* ---- Field block ---- */
.airqw-field {
    margin-top: 16px;
}

.airqw-field:first-child {
    margin-top: 0;
}

.airqw-field__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--airqw-text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

/* ---- Native select ---- */
.airqw-select {
    font-family: var(--airqw-font);
    width: 100%;
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--airqw-text);
    background-color: var(--airqw-bg);
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-sm);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none; /* Safari iOS still needs this on <select>; keep alongside the unprefixed property */
    transition: border-color var(--airqw-duration) var(--airqw-ease),
                box-shadow var(--airqw-duration) var(--airqw-ease);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.airqw-select:focus {
    border-color: var(--airqw-primary);
    box-shadow: 0 0 0 3px rgba(0, 70, 229, 0.1);
}

/* State / County are just hooks on .airqw-select for future JS targeting */
.airqw-state,
.airqw-county {
    /* inherits all styling from .airqw-select */
}

/* ---- Purchase / Refi field-group wrappers ---- */
.airqw-fields-purchase,
.airqw-fields-refi {
    display: block;
}

.airqw-fields-purchase[hidden],
.airqw-fields-refi[hidden] {
    display: none;
}

/* ---- Input with $ prefix ---- */
.airqw-input-wrap {
    display: flex;
    align-items: center;
    background: var(--airqw-bg);
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-sm);
    padding: 0 10px;
    height: 40px;
    transition: border-color var(--airqw-duration) var(--airqw-ease),
                box-shadow var(--airqw-duration) var(--airqw-ease);
}

.airqw-input-wrap:focus-within {
    border-color: var(--airqw-primary);
    box-shadow: 0 0 0 3px rgba(0, 70, 229, 0.1);
}

.airqw-input-wrap__prefix {
    font-size: 14px;
    font-weight: 600;
    color: var(--airqw-text-muted);
    margin-right: 4px;
    flex-shrink: 0;
}

.airqw-input {
    font-family: var(--airqw-font);
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--airqw-text);
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.airqw-input::placeholder {
    color: var(--airqw-text-muted);
    font-weight: 400;
}

/* ---- Inline $ / % toggle inside down-payment input ---- */
.airqw-input-wrap__toggle {
    display: flex;
    margin-left: 6px;
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-xs);
    overflow: hidden;
    flex-shrink: 0;
    height: 28px;
}

.airqw-input-wrap__toggle-btn {
    font-family: var(--airqw-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--airqw-text-muted);
    background: transparent;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    transition: all var(--airqw-duration) var(--airqw-ease);
    line-height: 1;
}

.airqw-input-wrap__toggle-btn--active {
    background: var(--airqw-primary);
    color: #fff;
}

.airqw-input-wrap__toggle-btn:not(.airqw-input-wrap__toggle-btn--active):hover {
    background: var(--airqw-bg-accent);
    color: var(--airqw-text);
}

/* ---- Segmented pill toggle (Mortgage type, Cash-out, FHA/VA, DTI, Points, Use) ---- */
.airqw-segmented {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-sm);
    background: var(--airqw-bg);
    /* No overflow:hidden — lets the active button's outer ring overlay this border cleanly. */
}

.airqw-segmented__btn {
    font-family: var(--airqw-font);
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--airqw-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--airqw-duration) var(--airqw-ease);
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.airqw-segmented__btn + .airqw-segmented__btn {
    border-left: 1px solid var(--airqw-border);
}

.airqw-segmented__btn:hover:not(.airqw-segmented__btn--active) {
    background: var(--airqw-bg-accent);
    color: var(--airqw-text);
}

.airqw-segmented__btn--active {
    background: var(--airqw-primary-light);
    color: var(--airqw-primary);
    box-shadow: 0 0 0 2px var(--airqw-primary);
    border-radius: var(--airqw-radius-sm);
    position: relative;
    z-index: 1;
    font-weight: 700;
}

/* Points has 4 children — allow wrap if too narrow */
.airqw-segmented--four .airqw-segmented__btn {
    padding: 8px 6px;
    font-size: 12.5px;
}

/* ---- Pills (used by mobile topbar Mortgage-type toggle) ----
   Base styles live here so the elements have visuals at any viewport;
   layout overrides for the topbar container itself live in the media query. */
.airqw-pill {
    font-family: var(--airqw-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--airqw-text-muted);
    background: transparent;
    border: 1px solid transparent;
    padding: 9px 14px;
    cursor: pointer;
    transition: all var(--airqw-duration) var(--airqw-ease);
    white-space: nowrap;
    border-radius: var(--airqw-radius-sm);
}

.airqw-pill--active {
    background: var(--airqw-primary-light);
    color: var(--airqw-primary);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--airqw-primary);
}

/* ---- Loan-term checkbox rows (desktop) ---- */
.airqw-term-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}

.airqw-term-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--airqw-text);
    cursor: pointer;
    padding: 4px 0;
    margin: 0;
}

.airqw-term-row__check {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--airqw-primary);
    cursor: pointer;
}

.airqw-term-row__label {
    line-height: 1.3;
}

.airqw-term-more {
    display: contents;
}

.airqw-term-more[hidden] {
    display: none;
}

.airqw-term-showmore {
    grid-column: 1 / -1;
    font-family: var(--airqw-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--airqw-primary);
    background: none;
    border: none;
    padding: 6px 0 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.airqw-term-showmore:hover {
    color: var(--airqw-primary-hover);
}

.airqw-term-showmore .airqw-term-showmore__label-less {
    display: none;
}

.airqw-term-showmore[aria-expanded="true"] .airqw-term-showmore__label-more {
    display: none;
}

.airqw-term-showmore[aria-expanded="true"] .airqw-term-showmore__label-less {
    display: inline;
}

/* ---- More-filters accordion ---- */
.airqw-more-filters {
    margin-top: 18px;
    border-top: 1px solid var(--airqw-border-light);
    padding-top: 14px;
}

.airqw-more-filters__btn {
    font-family: var(--airqw-font);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--airqw-text);
    cursor: pointer;
    letter-spacing: 0.01em;
}

.airqw-more-filters__chev {
    font-size: 1.1rem;
    transition: transform 0.2s var(--airqw-ease);
    color: var(--airqw-text-muted);
}

.airqw-more-filters__btn[aria-expanded="true"] .airqw-more-filters__chev {
    transform: rotate(180deg);
}

.airqw-more-filters__panel {
    padding-top: 4px;
}

.airqw-more-filters__panel[hidden] {
    display: none;
}

/* Mobile-drawer variant: no top border + auto-expanded by default */
.airqw-more-filters--mobile {
    border-top: none;
    margin-top: 8px;
    padding-top: 0;
}

.airqw-more-filters--mobile .airqw-more-filters__btn {
    padding-bottom: 10px;
}

/* ============== Right Pane (main) ============== */
.airqw-main {
    min-width: 0;
}

/* ---- Header ---- */
.airqw-header {
    margin-bottom: 16px;
}

.airqw-header__title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.airqw-title {
    font-family: var(--airqw-font);
    font-size: 26px;
    font-weight: 700;
    color: var(--airqw-text);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.airqw-header__date {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--airqw-text-muted);
    font-weight: 400;
}

.airqw-header__date strong {
    font-weight: 600;
    color: var(--airqw-text);
}

/* ---- LIVE Badge ---- */
.airqw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.airqw-badge--live {
    background: var(--airqw-green-bg);
    color: var(--airqw-green);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.airqw-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--airqw-neon);
    box-shadow: 0 0 6px var(--airqw-neon);
    animation: airqw-pulse 2s ease-in-out infinite;
}

@keyframes airqw-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--airqw-neon); }
    50%      { opacity: 0.5; box-shadow: 0 0 12px var(--airqw-neon), 0 0 20px rgba(0, 255, 65, 0.3); }
}

/* ============== Summary Band ============== */
.airqw-summary-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--airqw-border-light);
    border-bottom: 1px solid var(--airqw-border-light);
}

.airqw-summary-band__results {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.airqw-summary-band__lead {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--airqw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.airqw-summary-band__terms {
    font-size: 14px;
    font-weight: 700;
    color: var(--airqw-text);
}

.airqw-summary-band__location {
    font-size: 13px;
    font-weight: 500;
    color: var(--airqw-text-muted);
}

.airqw-summary-band__location::before {
    content: '\00B7';
    margin: 0 4px 0 0;
    color: var(--airqw-text-muted);
    font-weight: 700;
}

.airqw-summary-band__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.airqw-summary-band__sort-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--airqw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Sort dropdown ---- */
.airqw-sort {
    position: relative;
}

.airqw-sort__btn {
    font-family: var(--airqw-font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--airqw-text);
    background: var(--airqw-bg);
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-sm);
    cursor: pointer;
    transition: border-color var(--airqw-duration) var(--airqw-ease);
}

.airqw-sort__btn:hover {
    border-color: var(--airqw-primary);
    color: var(--airqw-primary);
}

.airqw-sort__btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.airqw-sort__btn i {
    font-size: 1rem;
    transition: transform 0.2s var(--airqw-ease);
}

.airqw-sort__btn-label {
    display: inline-block;
    min-width: 30px;
    text-align: left;
}

.airqw-sort__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--airqw-bg);
    border: 1px solid var(--airqw-border);
    border-radius: var(--airqw-radius-sm);
    box-shadow: var(--airqw-shadow-md);
    min-width: 160px;
}

.airqw-sort__list[hidden] {
    display: none;
}

.airqw-sort__option {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--airqw-text);
    border-radius: var(--airqw-radius-xs);
    cursor: pointer;
    transition: background var(--airqw-duration) var(--airqw-ease);
}

.airqw-sort__option:hover {
    background: var(--airqw-bg-accent);
}

.airqw-sort__option--active {
    background: var(--airqw-primary-light);
    color: var(--airqw-primary);
}

/* ============== Cards (panel + grid) ============== */
.airqw-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
}

.airqw-cards[data-category]:not(.airqw-cards--active) {
    display: none;
}

/* ============== Rate Card ============== */
.airqw-card {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr auto;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: var(--airqw-bg);
    border: 1.5px solid var(--airqw-border);
    border-radius: var(--airqw-radius-md);
    position: relative;
    transition: all var(--airqw-duration) var(--airqw-ease);
    animation: airqw-fadein 0.4s var(--airqw-ease) both;
}

.airqw-card:hover {
    border-color: rgba(0, 70, 229, 0.25);
    box-shadow: var(--airqw-shadow-card-hover);
    transform: translateY(-2px);
}

@keyframes airqw-fadein {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- BEST card variant ---- */
.airqw-card--best {
    border-color: var(--airqw-gold-border);
    background: linear-gradient(135deg, var(--airqw-gold-bg) 0%, var(--airqw-bg) 40%);
}

.airqw-card--best:hover {
    border-color: var(--airqw-gold);
}

.airqw-card__badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background: linear-gradient(135deg, var(--airqw-gold) 0%, #f59e0b 100%);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px 5px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

/* ---- Card columns ---- */
.airqw-card__product {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.airqw-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--airqw-radius-sm);
    background: var(--airqw-primary-light);
    color: var(--airqw-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform var(--airqw-duration) var(--airqw-ease-spring);
}

.airqw-card:hover .airqw-card__icon {
    transform: scale(1.08);
}

.airqw-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.airqw-card__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--airqw-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airqw-card__subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--airqw-text-muted);
}

.airqw-card__rate {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.airqw-card__rate-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--airqw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.airqw-card__rate-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--airqw-green);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.airqw-card__apr {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--airqw-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.airqw-card__payment {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.airqw-card__payment-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--airqw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.airqw-card__payment-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--airqw-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.airqw-card__payment-note {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--airqw-text-muted);
}

.airqw-card__action {
    display: flex;
    justify-content: flex-end;
}

/* ---- Bankrate-style secondary lines (under APR / Mo. payment) ----
   Small, lightweight text — the SAME visual weight as the existing
   product line (.airqw-card__subtitle) and .airqw-card__payment-note.
   They tuck compactly into the existing rate / payment columns, so the
   row keeps its slim height; they are NOT a separate block. */
.airqw-card__subline {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--airqw-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 1px;
}

/* The upfront-cost figure picks up the same primary accent the panel's
   cost total uses — a quiet at-a-glance cue, still lightweight. */
.airqw-card__subline--cost {
    color: var(--airqw-primary);
    font-weight: 600;
}

/* ---- "View details" toggle ----
   Full-width grid item; a quiet, underlined text affordance consistent with
   the widget's other inline toggles (.airqw-term-showmore). */
.airqw-card__details-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    font-family: var(--airqw-font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 4px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--airqw-primary);
    cursor: pointer;
    transition: color var(--airqw-duration) var(--airqw-ease);
}

.airqw-card__details-toggle:hover {
    color: var(--airqw-primary-hover);
}

.airqw-card__details-toggle:hover .airqw-card__details-toggle-label {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.airqw-card__details-toggle i {
    font-size: 1rem;
    transition: transform 0.2s var(--airqw-ease);
}

.airqw-card__details-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* ---- Inline expandable detail panel ----
   Collapsed via the [hidden] attribute by the macro; the JS toggles it.
   When visible it spans the full card width on its own row. */
.airqw-card__details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 10px;
    padding: 16px;
    background: var(--airqw-bg-subtle);
    border: 1px solid var(--airqw-border-light);
    border-radius: var(--airqw-radius-sm);
    animation: airqw-fadein 0.25s var(--airqw-ease) both;
}

.airqw-card__details[hidden] {
    display: none;
}

.airqw-card__details-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.airqw-card__details-heading {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--airqw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.airqw-card__details-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.8rem;
}

.airqw-card__details-row-label {
    font-weight: 500;
    color: var(--airqw-text-muted);
    min-width: 0;
    overflow-wrap: anywhere; /* long fee labels wrap instead of overflowing the row */
}

.airqw-card__details-row-value {
    font-weight: 600;
    color: var(--airqw-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Emphasized total row: top rule + heavier type */
.airqw-card__details-row--total {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--airqw-border);
}

.airqw-card__details-row--total .airqw-card__details-row-label {
    font-weight: 700;
    color: var(--airqw-text);
}

.airqw-card__details-row--total .airqw-card__details-row-value {
    font-weight: 800;
    color: var(--airqw-primary);
}

/* Keyboard focus visibility for every interactive control in the widget.
   Scoped to .airqw so it never leaks to the host page. */
.airqw button:focus-visible,
.airqw a:focus-visible,
.airqw [tabindex]:focus-visible {
    outline: 2px solid var(--airqw-primary);
    outline-offset: 2px;
    border-radius: var(--airqw-radius-xs);
}

/* ============== Buttons ============== */
.airqw-btn {
    font-family: var(--airqw-font);
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all var(--airqw-duration) var(--airqw-ease);
    white-space: nowrap;
}

.airqw-btn--apply {
    font-size: 0.85rem;
    padding: 10px 22px;
    border-radius: var(--airqw-radius-sm);
    background: var(--airqw-primary);
    color: #fff;
}

.airqw-btn--apply:hover {
    background: var(--airqw-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 70, 229, 0.3);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.airqw-btn--apply i {
    font-size: 1rem;
    transition: transform var(--airqw-duration) var(--airqw-ease);
}

.airqw-btn--apply:hover i {
    transform: translate(2px, -2px);
}

.airqw-btn--cta {
    font-size: 0.95rem;
    padding: 14px 28px;
    border-radius: var(--airqw-radius-sm);
    background: var(--airqw-primary);
    color: #fff;
    min-width: 280px;
}

.airqw-btn--cta:hover {
    background: var(--airqw-primary-hover);
    box-shadow: 0 6px 20px rgba(0, 70, 229, 0.3);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.airqw-btn--cta i {
    transition: transform var(--airqw-duration) var(--airqw-ease);
}

.airqw-btn--cta:hover i {
    transform: translateX(4px);
}

.airqw-btn--apply-filters {
    font-size: 1rem;
    padding: 14px 24px;
    border-radius: var(--airqw-radius-sm);
    background: var(--airqw-primary);
    color: #fff;
    width: 100%;
}

.airqw-btn--apply-filters:hover {
    background: var(--airqw-primary-hover);
    color: #fff;
    text-decoration: none;
}

/* ============== Empty State ============== */
.airqw-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--airqw-text-muted);
    background: var(--airqw-bg);
    border: 1px dashed var(--airqw-border);
    border-radius: var(--airqw-radius-md);
}

.airqw-empty__icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.airqw-empty__text {
    font-size: 0.9rem;
    font-weight: 500;
}

.airqw-empty--no-match {
    margin-top: 8px;
}

/* ============== Footer ============== */
.airqw-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 20px 0 8px;
    margin-top: 24px;
    border-top: 1px solid var(--airqw-border-light);
}

.airqw-footer__note {
    background: #EFF6FF;
    border-left: 4px solid var(--airqw-primary);
    border-radius: var(--airqw-radius-xs);
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.airqw-footer__note i {
    color: var(--airqw-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.airqw-footer__note p {
    margin: 0;
    font-size: 0.88rem;
    color: #1e3a5f;
    line-height: 1.55;
}

/* ============== Mobile-only elements (hidden on desktop) ============== */
.airqw-mobile-topbar,
.airqw-sidebar__mobile-header,
.airqw-sidebar__mobile-sort,
.airqw-sidebar__mobile-footer,
.airqw-backdrop {
    display: none;
}

/* The mobile-drawer scroll-body wrapper is transparent on desktop so the
   sidebar's field list lays out as if the wrapper weren't there. The mobile
   @media block below makes it a flex scroll container. */
.airqw-sidebar__scroll-body {
    display: contents;
}

/* ============== Filter actions bar (Apply / Reset) ============== */
/* Hidden in markup via [hidden] until JS detects pending filter changes
   (currentFilterState !== appliedFilterState). Appears above the field list
   on both desktop and mobile, drawing attention without disrupting the layout.
   On desktop, sticky-pinned at viewport top:16 so it remains visible even
   when the user has scrolled past the sidebar's natural top. Solid background
   + z-index ensure clean overlay over any sidebar content scrolling beneath. */
.airqw-sidebar__actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    /* Bleed outside the sidebar's 20px padding so the bar spans the full
       sidebar width edge-to-edge -- looks like a header band, not a floating
       panel. Bottom margin restores spacing from the first filter field. */
    margin: -20px -20px 16px;
    padding: 12px 16px;
    background: var(--airqw-primary-light);
    border-bottom: 1px solid var(--airqw-primary);
    /* Top corners rounded to match the sidebar's outer radius so the bar
       blends visually with the sidebar's top edge when in flow. */
    border-radius: var(--airqw-radius-md) var(--airqw-radius-md) 0 0;
    /* Sticky flush at viewport top so no strip of scrolling sidebar content
       is visible above the bar once the sidebar's own sticky releases. */
    position: sticky;
    top: 0;
    z-index: 5;
}

.airqw-sidebar__actions[hidden] {
    display: none;
}

/* Attention pulse: amber/gold ring + soft background flash, runs once each
   time the bar transitions from hidden -> visible. JS adds the --pulse class
   after removing [hidden] (with a reflow trick) and removes it after the
   animation completes. */
@keyframes airqw-actions-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);    background: var(--airqw-primary-light); }
    20%  { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.55); background: var(--airqw-gold-bg); }
    60%  { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.20); background: var(--airqw-gold-bg); }
    100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);    background: var(--airqw-primary-light); }
}

.airqw-sidebar__actions--pulse {
    animation: airqw-actions-pulse 1.6s var(--airqw-ease) 1;
}

.airqw-btn--reset,
.airqw-btn--primary {
    font-family: var(--airqw-font);
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--airqw-radius-sm);
    cursor: pointer;
    transition: all var(--airqw-duration) var(--airqw-ease);
    line-height: 1.3;
    white-space: nowrap;
}

.airqw-btn--reset {
    color: var(--airqw-text);
    background: var(--airqw-bg);
    border: 1px solid var(--airqw-border);
}

.airqw-btn--reset:hover {
    background: var(--airqw-bg-accent);
    border-color: var(--airqw-text-muted);
}

.airqw-btn--primary {
    color: #fff;
    background: var(--airqw-primary);
    border: 1px solid var(--airqw-primary);
    font-weight: 700;
}

.airqw-btn--primary:hover {
    background: var(--airqw-primary-hover);
    border-color: var(--airqw-primary-hover);
}

/* ============== Tablet & Mobile (<= 1023px) ============== */
@media (max-width: 1023px) {
    .airqw {
        padding: 0 16px;
    }

    .airqw-grid {
        display: block;
    }

    /* ---- Sidebar becomes a slide-in drawer at this breakpoint ----
       Layout: flex column with three fixed regions (header, sort, footer)
       sandwiching a scrollable __scroll-body. Avoids sticky-positioning
       overlap and works on iOS Safari touch-scroll. */
    .airqw-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 100%; /* 100vw includes the scrollbar width and can cause horizontal overflow */
        max-width: 480px;
        height: 100vh; /* Explicit -- inset top/bottom alone do not constrain a flex column on all browsers */
        height: 100dvh; /* Modern browsers: dynamic viewport handles mobile address-bar chrome */
        padding: 0;
        margin: 0;
        background: var(--airqw-bg);
        border: none;
        border-radius: 0;
        box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15);
        transform: translateX(100%);
        transition: transform 240ms var(--airqw-ease);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .airqw.airqw--drawer-open .airqw-sidebar {
        transform: translateX(0);
    }

    .airqw-sidebar__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 16px 20px;
        background: var(--airqw-bg);
        border-bottom: 1px solid var(--airqw-border);
    }

    .airqw-sidebar__mobile-title {
        font-family: var(--airqw-font);
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--airqw-text);
    }

    .airqw-sidebar__mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        border-radius: var(--airqw-radius-sm);
        color: var(--airqw-text);
        font-size: 1.4rem;
        cursor: pointer;
        transition: background var(--airqw-duration) var(--airqw-ease);
    }

    .airqw-sidebar__mobile-close:hover {
        background: var(--airqw-bg-accent);
    }

    .airqw-sidebar__mobile-sort {
        display: block;
        flex-shrink: 0;
        padding: 16px 20px 0;
        border-bottom: 1px solid var(--airqw-border-light);
        padding-bottom: 16px;
    }

    /* Actions bar inside the mobile drawer: full-width band that aligns with
       the mobile-header / mobile-footer edges. No corner radii (it's flat in
       the drawer's flex stack). Sticky is disabled here -- the drawer's flex
       layout already keeps this region fixed above the scroll-body. */
    .airqw-sidebar__actions {
        flex-shrink: 0;
        margin: 0;
        padding: 12px 20px;
        border-radius: 0;
        border-bottom: 1px solid var(--airqw-primary);
        position: static;
        top: auto;
    }

    /* The middle scrolling region of the mobile drawer. Holds all filter
       fields. Padding-bottom gives a little breathing room above the footer
       border so the last field's focus ring isn't clipped. */
    .airqw-sidebar__scroll-body {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px 24px;
    }

    /* Refi/Purchase wrappers inside the scroll body get no extra horizontal
       padding -- the scroll-body's padding already handles that. */
    .airqw-sidebar__scroll-body > .airqw-fields-purchase,
    .airqw-sidebar__scroll-body > .airqw-fields-refi {
        padding-left: 0;
        padding-right: 0;
    }

    .airqw-sidebar__mobile-footer {
        display: block;
        flex-shrink: 0;
        padding: 12px 20px;
        background: var(--airqw-bg);
        border-top: 1px solid var(--airqw-border);
    }

    .airqw-sidebar__mobile-footer .airqw-btn--apply-filters {
        width: 100%;
    }

    /* ---- Backdrop ---- */
    .airqw-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        opacity: 0;
        transition: opacity 240ms var(--airqw-ease);
        pointer-events: none;
        z-index: 999;
    }

    .airqw.airqw--drawer-open .airqw-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Body scroll lock helper toggled by JS while drawer is open */
    body.airqw-noscroll {
        overflow: hidden;
    }

    .airqw-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .airqw-mobile-topbar__type {
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
        background: var(--airqw-bg);
        border: 1px solid var(--airqw-border);
        border-radius: var(--airqw-radius-sm);
        overflow: hidden;
        min-width: 0;
    }

    /* Topbar pill layout overrides only (base .airqw-pill styles live outside the media query) */
    .airqw-mobile-topbar__type .airqw-pill {
        flex: 1 1 0;
        min-width: 0;
        border: none;
        padding: 9px 12px;
    }

    .airqw-mobile-topbar__type .airqw-pill + .airqw-pill {
        border-left: 1px solid var(--airqw-border);
    }

    .airqw-mobile-topbar__filters {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--airqw-font);
        font-size: 13px;
        font-weight: 700;
        color: var(--airqw-text);
        background: var(--airqw-bg);
        border: 1px solid var(--airqw-border);
        border-radius: var(--airqw-radius-sm);
        padding: 9px 12px;
        cursor: pointer;
        transition: all var(--airqw-duration) var(--airqw-ease);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .airqw-mobile-topbar__filters:hover {
        border-color: var(--airqw-primary);
        color: var(--airqw-primary);
    }

    .airqw-mobile-topbar__filters i {
        font-size: 1rem;
    }

    .airqw-mobile-topbar__count {
        display: none;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        color: #fff;
        background: var(--airqw-primary);
        border-radius: 9px;
        text-align: center;
    }

    .airqw-mobile-topbar__count[data-count]:not([data-count="0"]) {
        display: inline-block;
    }

    /* ============== Mobile form-field tweaks (sidebar in drawer mode) ============== */

    /* Loan-term pills replace checkbox rows inside drawer */
    .airqw-sidebar .airqw-term-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .airqw-sidebar .airqw-term-row {
        position: relative;
        padding: 8px 16px;
        border: 1.5px solid var(--airqw-border);
        border-radius: 999px;
        background: var(--airqw-bg);
        transition: all var(--airqw-duration) var(--airqw-ease);
    }

    .airqw-sidebar .airqw-term-row__check {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .airqw-sidebar .airqw-term-row__label {
        font-size: 13px;
        font-weight: 600;
        color: var(--airqw-text-muted);
        line-height: 1.3;
    }

    .airqw-sidebar .airqw-term-row:has(.airqw-term-row__check:checked) {
        background: var(--airqw-primary-light);
        border-color: var(--airqw-primary);
    }

    .airqw-sidebar .airqw-term-row:has(.airqw-term-row__check:checked) .airqw-term-row__label {
        color: var(--airqw-primary);
        font-weight: 700;
    }

    .airqw-sidebar .airqw-term-more {
        display: contents;
    }

    .airqw-sidebar .airqw-term-showmore {
        flex-basis: 100%;
    }

    /* FHA / VA become iOS-style switch toggles inside drawer */
    .airqw-sidebar .airqw-field .airqw-segmented[aria-label="Show FHA loans"],
    .airqw-sidebar .airqw-field .airqw-segmented[aria-label="Show VA loans"] {
        position: relative;
        width: 52px;
        height: 30px;
        flex-shrink: 0;
        border: none;
        border-radius: 999px;
        background: var(--airqw-bg-accent);
        overflow: hidden;
        padding: 0;
        align-self: flex-end;
    }

    .airqw-sidebar .airqw-segmented[aria-label="Show FHA loans"] .airqw-segmented__btn,
    .airqw-sidebar .airqw-segmented[aria-label="Show VA loans"] .airqw-segmented__btn {
        position: absolute;
        top: 0;
        height: 100%;
        font-size: 0;
        line-height: 0;
        color: transparent;
        border-left: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* Stretch first/second button to cover full track for click affordance */
    .airqw-sidebar .airqw-segmented[aria-label="Show FHA loans"] .airqw-segmented__btn:first-child,
    .airqw-sidebar .airqw-segmented[aria-label="Show VA loans"] .airqw-segmented__btn:first-child {
        left: 0;
        right: 50%;
        z-index: 2;
    }

    .airqw-sidebar .airqw-segmented[aria-label="Show FHA loans"] .airqw-segmented__btn:last-child,
    .airqw-sidebar .airqw-segmented[aria-label="Show VA loans"] .airqw-segmented__btn:last-child {
        left: 50%;
        right: 0;
        z-index: 2;
    }

    /* Knob */
    .airqw-sidebar .airqw-segmented[aria-label="Show FHA loans"]::after,
    .airqw-sidebar .airqw-segmented[aria-label="Show VA loans"]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 200ms var(--airqw-ease);
        z-index: 1;
    }

    /* Yes is the FIRST button (default active) — knob on right when Yes is active */
    .airqw-sidebar .airqw-segmented[aria-label="Show FHA loans"]:has(.airqw-segmented__btn:first-child.airqw-segmented__btn--active),
    .airqw-sidebar .airqw-segmented[aria-label="Show VA loans"]:has(.airqw-segmented__btn:first-child.airqw-segmented__btn--active) {
        background: var(--airqw-primary);
    }

    .airqw-sidebar .airqw-segmented[aria-label="Show FHA loans"]:has(.airqw-segmented__btn:first-child.airqw-segmented__btn--active)::after,
    .airqw-sidebar .airqw-segmented[aria-label="Show VA loans"]:has(.airqw-segmented__btn:first-child.airqw-segmented__btn--active)::after {
        transform: translateX(22px);
    }

    /* Position the FHA/VA fields as inline row: label left, switch right */
    .airqw-sidebar .airqw-field:has(> .airqw-segmented[aria-label="Show FHA loans"]),
    .airqw-sidebar .airqw-field:has(> .airqw-segmented[aria-label="Show VA loans"]) {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .airqw-sidebar .airqw-field:has(> .airqw-segmented[aria-label="Show FHA loans"]) .airqw-field__label,
    .airqw-sidebar .airqw-field:has(> .airqw-segmented[aria-label="Show VA loans"]) .airqw-field__label {
        margin-bottom: 0;
        font-size: 14px;
    }

    /* ============== Cards on mobile (single column) ============== */
    .airqw-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "product product"
            "rate    payment"
            "action  action";
        gap: 14px 16px;
        padding: 16px 18px;
    }

    .airqw-card__product {
        grid-area: product;
        padding-right: 90px; /* leave room for BEST badge */
    }

    .airqw-card__rate {
        grid-area: rate;
        align-items: flex-start;
    }

    .airqw-card__payment {
        grid-area: payment;
        align-items: flex-start;
    }

    .airqw-card__action {
        grid-area: action;
        justify-content: stretch;
    }

    .airqw-card__action .airqw-btn--apply {
        width: 100%;
    }

    /* New extended-field elements: the mobile card uses named grid areas, so
       these un-templated items auto-place onto fresh implicit rows. Force a
       full two-column span so they stack cleanly above/below the named rows. */
    .airqw-card__details-toggle,
    .airqw-card__details {
        grid-column: 1 / -1;
    }

    /* Stack the two breakdown sections on narrow widths */
    .airqw-card__details {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .airqw-footer {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .airqw-btn--cta {
        width: 100%;
        min-width: 0;
    }
}

/* ============== Mobile cards: tight typography (<= 640px) ============== */
@media (max-width: 640px) {
    .airqw {
        padding: 0 12px;
    }

    .airqw-section {
        padding: 20px 0;
    }

    .airqw-title {
        font-size: 22px;
    }

    .airqw-summary-band {
        gap: 8px;
        padding: 12px 0;
    }

    .airqw-summary-band__results {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .airqw-summary-band__location::before {
        content: '';
        margin: 0;
    }

    .airqw-card {
        padding: 14px 16px;
        gap: 12px 14px;
    }

    /* Rate column center-aligned for visual balance on narrow widths */
    .airqw-card__rate {
        align-items: center;
        text-align: center;
    }

    /* Keep the payment column aligned with the centered rate column on the
       same grid row (previously left-aligned, which looked asymmetric) */
    .airqw-card__payment {
        align-items: center;
        text-align: center;
    }

    .airqw-card__rate-value,
    .airqw-card__payment-value {
        font-size: 1.25rem;
    }

    .airqw-card__apr {
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .airqw-card__icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    /* Reserve vertical space so the absolutely-positioned BEST badge never
       overlaps the payment value on narrow cards */
    .airqw-card--best {
        padding-top: 26px;
    }

    .airqw-card__badge {
        top: 8px;
        right: 12px;
        border-radius: var(--airqw-radius-xs);
        font-size: 0.62rem; /* was 0.55rem (~8.8px) — too small to read comfortably */
        padding: 2px 7px 3px;
    }

    .airqw-card__product {
        padding-right: 70px;
    }

    .airqw-card__name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    .airqw-card__details {
        padding: 14px;
    }
}

/* ============== Very small phones (<= 380px) ============== */
@media (max-width: 380px) {
    .airqw-card__rate-value,
    .airqw-card__payment-value {
        font-size: 1.1rem;
    }

    .airqw-mobile-topbar {
        gap: 8px;
    }

    .airqw-mobile-topbar__filters span:not(.airqw-mobile-topbar__count) {
        display: none;
    }
}