/* ==========================================================================
   HomeLink screens (ported from ONE-API/wc-v2/eqr web_eqr.css + eqr.css).
   Loaded only for calculators that initialize HomeLink.
   ========================================================================== */

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans/DMSans.woff2") format("woff2");
    font-weight: 100 1000;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans/DMSans-ext.woff2") format("woff2");
    font-weight: 100 1000;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.modalbackground {
    background-color: rgba(74, 81, 93, 0.71);
}

/* Shells for the modals not covered by the ported eqr block below (picker,
   gear, report) - same centered-card treatment. */
#Homelink_modal1.modalscreen,
#home_link_gear.modalscreen,
#home_link_report.modalscreen {
    background: rgba(74, 81, 93, 0.71);
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
#Homelink_modal1.modalscreen::before,
#home_link_gear.modalscreen::before,
#home_link_report.modalscreen::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#Homelink_modal1 .modal-dialog,
#home_link_gear .modal-dialog,
#home_link_report .modal-dialog {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    text-align: left;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: none;
    overflow: visible;
    margin: 24px 0;
}
#Homelink_modal1 .modal-content,
#home_link_gear .modal-content,
#home_link_report .modal-content {
    background: #ffffff;
    border-radius: 24px;
    border: none;
    box-shadow: 0 8px 24px rgba(10, 13, 18, 0.12);
}
#Homelink_modal1 .modal-body,
#home_link_gear .modal-body,
#home_link_report .modal-body {
    padding: 20px;
}

/* Report screen */
.hl-report-textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    padding: 12px;
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
    font-size: 14px;
    resize: vertical;
    outline: none;
}

/* Gear screen options */
.hl-gear-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px;
    margin-top: 10px;
    cursor: pointer;
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
    font-size: 14px;
    color: #181D27;
    text-align: left;
}
.hl-gear-option .hl-sel-radio { flex: 0 0 auto; }
.hl-gear-option.hl-sel-checked { border-color: #508AFF; }
.hl-gear-option.hl-sel-checked .hl-sel-radio { border-color: #508AFF; }
.hl-gear-option.hl-sel-checked .hl-sel-radio::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #508AFF;
    margin: 3px auto;
}

/* ===== Address picker (ported from eqr.css HOMELINK_CSS block) ===== */
/* /////////HOMELINK_CSS////////////// */
.homelinkpopupaddressselection {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
}

.homelinkpopupaddressselection .h_l_heading {
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
    margin-top: 15px;
    font-family: Montserrat-Medium;
}

.homelinkpopupaddressselection .h_l_body {
    max-height: 375px;
    overflow: scroll;
    overflow-x: hidden;
}

.homelinkpopupaddressselection .h_l_done {
    text-align: center;
    /* margin: 20px 0px; */
}

.homelinkpopupaddressselection .h_l_address {
    width: 100%;
    display: flex;
    margin: 10px 5px;
}

.homelinkpopupaddressselection .h_l_address .h_l_selection {
    display: flex;
    align-items: center;
    width: 10%;
}

.homelinkpopupaddressselection .h_l_address .h_l_selection .h_l_selectiondiv {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 2px solid #508AFF;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.homelinkpopupaddressselection .h_l_address .h_l_selection .h_l_selectiondiv .h_l_selected {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #508AFF;
}

.homelinkpopupaddressselection .h_l_done span {
    background-color: #508AFF;
    color: #FFF;
    padding: 10px 20px;
    font-size: 14px;
    font-family: Montserrat-Medium;
    border-radius: 5px;
    cursor: pointer;
}

/* ===== HomeLink v2 screens (ported from web_eqr.css) =====
   Homelink Equity Review — Loan Balance (webapp only)
   Scoped under #home_link_est_modal / #openLbEditform so these rules do NOT
   leak to native/mobile markup (that CSS never loads on non-webapp platforms;
   the scope keeps it doubly safe inside the webapp).
   ========================================================================== */

/* Lock the background page scroll while any Homelink popup is open. openmodal() uses
   jQuery .show() instead of Bootstrap's JS, so Bootstrap's own body scroll-lock never
   runs; hlSyncBodyScroll() toggles this class from openmodal/modalclose/closepopup and
   sets body top:-scrollY. position:fixed (not just overflow:hidden) is required because
   the scrolling element here is <html>, and overflow:hidden on <body> wouldn't stop it. */
body.hl-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Overlay + centered card. The card keeps its NATURAL/auto height (no fixed max-height,
   no inner scroll) so its full content is always shown; when the content is taller than the
   viewport the OVERLAY scrolls instead. Centering uses an inline-block ::before "ghost" +
   vertical-align:middle rather than absolute/transform — absolute centering clips the top of
   a too-tall card, whereas in-flow inline-block content stays fully reachable while scrolling.
   This works with openmodal()'s jQuery .show() (inline display:block) and does NOT use
   !important, so modalclose()'s .hide() (inline display:none) still hides the modal. */
#home_link_est_modal.modalscreen,
#openLbEditform.modalscreen,
#home_link_select_modal.modalscreen,
#home_link_tax_modal.modalscreen,
#home_link_avm_modal.modalscreen {
    background: rgba(74, 81, 93, 0.71);
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

#home_link_est_modal.modalscreen::before,
#openLbEditform.modalscreen::before,
#home_link_select_modal.modalscreen::before,
#home_link_tax_modal.modalscreen::before,
#home_link_avm_modal.modalscreen::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#home_link_est_modal .modal-dialog,
#openLbEditform .modal-dialog,
#home_link_select_modal .modal-dialog,
#home_link_tax_modal .modal-dialog,
#home_link_avm_modal .modal-dialog {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    text-align: left;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: none;
    overflow: visible;
    margin: 24px 0;
}

#home_link_est_modal .modal-content,
#openLbEditform .modal-content,
#home_link_select_modal .modal-content,
#home_link_tax_modal .modal-content,
#home_link_avm_modal .modal-content {
    background: #ffffff;
    border-radius: 24px;
    border: none;
    box-shadow: 0 8px 24px rgba(10, 13, 18, 0.12);
}

#home_link_est_modal .modal-body,
#openLbEditform .modal-body,
#home_link_select_modal .modal-body,
#home_link_tax_modal .modal-body,
#home_link_avm_modal .modal-body {
    padding: 20px;
}

/* Container for the RN-style layout */
.hl-lb-root {
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #181D27;
    text-align: left;
}

/* Header row: back / logo / gear */
.hl-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hl-lb-header-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
}

.hl-lb-header-btn img {
    width: 15px;
    height: 25px;
    display: block;
}

.hl-lb-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.hl-lb-logo img {
    max-height: 32px;
    display: block;
}

/* Title + address */
.hl-lb-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #181D27;
    text-align: center;
    margin: 0;
}

.hl-lb-subtitle {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-align: center;
    margin: 0;
}

/* Projection sentence */
.hl-lb-projection {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-align: center;
    padding: 8px 4px;
    margin: 0;
}

.hl-lb-projection b {
    font-weight: 700;
    color: #181D27;
}

/* Gradient balance card */
.hl-lb-balance-card {
    background: linear-gradient(45deg, #13497A 0%, #278AE5 100%);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.hl-lb-balance-left,
.hl-lb-balance-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hl-lb-balance-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.hl-lb-adv-gear,
.hl-lb-balance-edit,
.hl-lb-rate-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.hl-lb-adv-gear img,
.hl-lb-balance-edit img,
.hl-lb-rate-edit img {
    width: 20px;
    height: 20px;
    display: block;
}

.hl-lb-balance-value {
    display: inline-block;
    box-sizing: border-box;
    width: 140px;
    text-align: right;
    border-bottom: 1px solid transparent; /* match the input's underline so height doesn't jump */
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    white-space: nowrap;
    will-change: contents;
}

.hl-lb-balance-input {
    box-sizing: border-box;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    outline: none;
    text-align: right;
    width: 140px;
    padding: 0;
    font-family: inherit;
}

/* Interest-rate row */
.hl-lb-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.hl-lb-rate-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.hl-lb-rate-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #252B37;
}

.hl-lb-rate-helper {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #717680;
}

.hl-lb-rate-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F5F5F5;
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    padding: 4px 16px;
    min-width: 0;
}

.hl-lb-rate-value {
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    text-align: right;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #252B37;
    white-space: nowrap;
}

.hl-lb-rate-input {
    box-sizing: border-box;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #252B37;
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    width: 80px;
    padding: 0;
    font-family: inherit;
}

/* Buttons */
.hl-lb-btn-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding-top: 4px;
}

.hl-lb-btn-skip,
.hl-lb-btn-primary {
    flex: 1 1 0;
    height: 48px;
    border-radius: 84px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0 12px;
}

.hl-lb-btn-skip {
    background: transparent;
    color: #A4A7AE;
}

.hl-lb-btn-primary {
    background: #278AE5;
    color: #ffffff;
}

.hl-lb-btn-primary[disabled],
.hl-lb-btn-primary.hl-lb-btn-disabled {
    background: #A4A7AE;
    cursor: default;
    pointer-events: none;
}

.hl-lb-add-loan {
    width: 100%;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #278AE5;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

.hl-lb-add-loan.hl-lb-remove-loan {
    color: #C0392B;
}

.loan-remove-btn {
    cursor: pointer;
    opacity: 0.75;
}

.loan-remove-btn:hover {
    opacity: 1;
}

.loan-remove-btn img {
    /* minus.png is a 15x3 bar — keep it a thin dash, not a stretched square. */
    width: 12px;
    height: 3px;
}

/* ---- Multi-loan selection screen (RN SelectLoansScreen) ---- */
.hl-sel-badge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E5F3FF;
    border-radius: 9999px;
    padding: 4px 12px;
    font-family: "DM Sans", sans-serif;
}

.hl-sel-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #278AE5;
}

.hl-sel-badge-text {
    font-size: 12px;
    font-weight: 600;
    color: #278AE5;
}

.hl-sel-row {
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    border: 1px solid #D5D7DA;
    cursor: pointer;
    font-family: "DM Sans", sans-serif;
    text-align: left;
    box-sizing: border-box;
}

.hl-sel-all {
    gap: 8px;
    border-radius: 8px;
    padding: 12px 20px;
}

.hl-sel-all-label {
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
}

.hl-sel-loan {
    justify-content: space-between;
    gap: 4px;
    border-radius: 16px;
    padding: 20px;
}

.hl-sel-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-sel-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.hl-sel-title {
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
}

.hl-sel-date {
    font-size: 14px;
    font-weight: 400;
    color: #717680;
}

.hl-sel-amount {
    font-size: 20px;
    font-weight: 700;
    color: #181D27;
    white-space: nowrap;
}

.hl-sel-checked {
    border-color: #278AE5;
    box-shadow: 0 4px 6px rgba(10, 13, 18, 0.1);
}

.hl-sel-radio {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #D5D7DA;
    box-sizing: border-box;
    position: relative;
}

.hl-sel-checked .hl-sel-radio {
    border-color: #278AE5;
}

.hl-sel-checked .hl-sel-radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #278AE5;
    transform: translate(-50%, -50%);
}

/* Footer */
.hl-lb-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    text-align: center;
}

.hl-lb-footer-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #717680;
}

.hl-lb-support-link,
.hl-lb-disclaimer-toggle {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #278AE5;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.hl-lb-disclaimer-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #717680;
    padding-top: 4px;
}

/* Advanced editor wrapper (openLbEditform) — keeps the existing LoanHtmlCreateFun
   form fields visible while giving the frame the same white-card, DM-Sans look. */
.hl-lb-advanced {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 8px;
}

/* Responsive */
@media only screen and (max-width: 600px) {
    #home_link_est_modal .modal-body,
    #openLbEditform .modal-body,
    #home_link_tax_modal .modal-body,
    #home_link_avm_modal .modal-body {
        padding: 16px;
    }

    .hl-lb-title {
        font-size: 20px;
        line-height: 28px;
    }

    .hl-lb-balance-card {
        padding: 20px;
        border-radius: 20px;
    }

    .hl-lb-balance-value,
    .hl-lb-balance-input,
    .hl-lb-rate-value,
    .hl-lb-rate-input {
        font-size: 20px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 380px) {
    .hl-lb-balance-value,
    .hl-lb-balance-input,
    .hl-lb-rate-value,
    .hl-lb-rate-input {
        font-size: 18px;
        line-height: 24px;
    }

    .hl-lb-rate-pill {
        padding: 4px 12px;
    }
}

/* ==========================================================================
   Homelink Property Tax screen (webapp only)
   Reuses .hl-lb-header/-title/-subtitle/-footer/-btn-* shell.
   ========================================================================== */
.hl-tax-body {
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-align: center;
    padding: 4px 8px;
    margin: 0;
}

.hl-tax-body b {
    font-weight: 700;
    color: #181D27;
}

.hl-tax-radio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 20px;
    border: 1px solid #D5D7DA;
    border-radius: 24px;
    background: #ffffff;
    box-sizing: border-box;
    cursor: pointer;
    font-family: "DM Sans", sans-serif;
    text-align: left;
}

.hl-tax-radio-card.hl-tax-checked {
    border-color: #278AE5;
    box-shadow: 0 4px 6px rgba(10, 13, 18, 0.1);
}

.hl-tax-radio-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.hl-tax-radio {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #D5D7DA;
    box-sizing: border-box;
    position: relative;
}

.hl-tax-checked .hl-tax-radio {
    border-color: #278AE5;
}

.hl-tax-checked .hl-tax-radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #278AE5;
    transform: translate(-50%, -50%);
}

.hl-tax-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #181D27;
}

.hl-tax-amount {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #181D27;
    white-space: nowrap;
}

/* ==========================================================================
   Homelink AVM / Estimated Home Value screen (webapp only)
   ========================================================================== */
.hl-avm-desc {
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
    text-align: center;
    padding: 4px 8px;
    margin: 0;
}

.hl-avm-stats {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
}

.hl-avm-conf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
}

.hl-avm-conf-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

.hl-avm-conf-value {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #414651;
}

/* Decorative bell-curve distribution chart (13 bars, ends -> center gradient of greens). */
.hl-avm-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    height: 128px;
}

.hl-avm-chart-bar {
    flex: 1 1 0;
    min-width: 1px;
    display: block;
    border-radius: 6px 6px 0 0;
}

.hl-avm-legend {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0 0;
}

.hl-avm-legend-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hl-avm-legend-low {
    align-items: flex-start;
    text-align: left;
}

.hl-avm-legend-market {
    align-items: center;
    text-align: center;
}

.hl-avm-legend-high {
    align-items: flex-end;
    text-align: right;
}

.hl-avm-legend-top {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hl-avm-legend-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hl-avm-legend-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.hl-avm-legend-label {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #414651;
}

.hl-avm-legend-value {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #181D27;
    white-space: nowrap;
}

.hl-avm-est-card {
    background: linear-gradient(45deg, #47CD89 0%, #5CB89E 100%);
    border-radius: 24px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.hl-avm-est-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.hl-avm-est-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hl-avm-est-value {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    white-space: nowrap;
    will-change: contents;
}

.hl-avm-est-input {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    outline: none;
    text-align: right;
    width: 140px;
    padding: 0 4px;
    font-family: inherit;
}

.hl-avm-est-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.hl-avm-est-edit img {
    width: 20px;
    height: 20px;
    display: block;
}

.hl-avm-slider-wrap {
    padding: 4px 0;
}

.hl-avm-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #D5D7DA;
    border-radius: 999px;
    outline: none;
    accent-color: #17B26A;
}

.hl-avm-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border-radius: 999px;
}

.hl-avm-slider::-moz-range-track {
    height: 8px;
    background: #D5D7DA;
    border-radius: 999px;
}

.hl-avm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #17B26A;
    border: 2px solid #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-top: -8px;
}

.hl-avm-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #17B26A;
    border: 2px solid #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.hl-avm-btn-primary {
    flex: 1 1 0;
    height: 48px;
    border-radius: 84px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0 12px;
    background: #17B26A;
    color: #ffffff;
}

.hl-avm-btn-primary[disabled],
.hl-avm-btn-primary.hl-lb-btn-disabled {
    background: #A4A7AE;
    cursor: default;
    pointer-events: none;
}

/* AVM footer: single row — "Questions? Contact Support" (left) / "View Disclaimer" (right). */
.hl-avm-footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding-top: 4px;
}

.hl-avm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.hl-avm-footer-q {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #414651;
}

.hl-avm-footer-link {
    color: #278AE5;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
}

.hl-avm-disclaimer-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    text-align: left;
}

@media only screen and (max-width: 600px) {
    .hl-tax-radio-card {
        padding: 16px;
        border-radius: 20px;
    }

    .hl-tax-amount,
    .hl-avm-est-value,
    .hl-avm-est-input {
        font-size: 20px;
        line-height: 28px;
    }

    .hl-avm-est-card {
        padding: 16px 20px;
        border-radius: 20px;
    }
}

@media only screen and (max-width: 380px) {
    .hl-tax-amount,
    .hl-avm-est-value,
    .hl-avm-est-input {
        font-size: 18px;
        line-height: 24px;
    }

    .hl-avm-legend-value {
        font-size: 13px;
    }
}

/* Address text cell on the picker (eqr.css .h_l_places + web_eqr.css override) */
.h_l_places {
    font-family: 'Heebo-Bold';
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0em;
    color: #494949;
}
.web_h_l_places {
    font-size: 15px;
    font-family: "Montserrat-Medium" !important;
}

#hl_loading img {
    width: 70px;
}