/* ==========================================================================
   Calc Utilities - CSP Compliant Utility Classes
   Replaces inline styles for Content Security Policy compliance
   ========================================================================== */

/* ==========================================================================
   Display Utilities
   ========================================================================== */
.u-hidden { display: none !important; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-inline-block { display: inline-block; }
.u-flex-center { display: flex; justify-content: center; }
.u-flex-space-between { display: flex; justify-content: space-between; }
.u-flex-start { display: flex; justify-content: flex-start; }
.u-flex-center-align { display: flex; justify-content: center; align-items: center; }
.u-text-center { text-align: center; }

/* Overflow Utilities */
.u-overflow-y-hidden { overflow-y: hidden; }
.u-overflow-y-auto { overflow-y: auto; }

/* PHP conditional visibility classes */
.qf-hidden { display: none; }
.comma-hidden { display: none; }
.state-hidden { display: none; }
.county-hidden { display: none; }
.city-hidden { display: none; }
.office-hidden { display: none; }

/* ==========================================================================
   Margin Utilities
   ========================================================================== */
.u-m-0 { margin: 0px; }
.u-mx-0-important { margin-left: 0px !important; margin-right: 0px !important; }
.u-ml-0-important { margin-left: 0px !important; }
.u-mr-0-important { margin-right: 0px !important; }
.u-ml-24 { margin-left: 24px; }
.u-mt-15 { margin-top: 15px; }
.u-mt-30 { margin-top: 30px; }
.u-mt-neg15 { margin-top: -15px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-12pct { margin-bottom: 12%; }
.u-mb-75 { margin-bottom: 75px; }
.u-mx-auto { margin: 0 auto; }

/* ==========================================================================
   Padding Utilities
   ========================================================================== */
.u-p-0 { padding: 0px; }
.u-p-5-important { padding: 5px !important; }
.u-p-10 { padding: 10px; }
.u-px-0-important { padding-left: 0px !important; padding-right: 0px !important; }
.u-pl-0 { padding-left: 0px; }
.u-pl-5 { padding-left: 5px; }
.u-pr-0 { padding-right: 0px; }
.u-pt-0 { padding-top: 0; }
.u-pt-3pct { padding-top: 3%; }
.u-pl-10 { padding-left: 10px; }
.u-p-10-10-0 { padding: 10px 10px 0 10px; }
.u-p-0-5pct { padding: 0 5%; }
.u-p-17-13-important { padding: 17px 13.5px !important; }
.u-p-8-10 { padding: 8px 10px; }
.u-refi-padding { padding: 0 5%; margin-bottom: 75px; }

/* ==========================================================================
   Width Utilities
   ========================================================================== */
.u-w-full { width: 100%; }
.u-w-100 { width: 100%; }
.u-w-83pct { width: 83%; }
.u-w-17 { width: 17px; }
.u-w-18 { width: 18px; }
.u-w-19 { width: 19px; }

/* ==========================================================================
   Height Utilities
   ========================================================================== */
.u-h-full { height: 100%; }
.u-h-13 { height: 13px; }
.u-h-17 { height: 17px; }
.u-h-18 { height: 18px; }
.u-h-180 { height: 180px; }
.u-h-320 { height: 320px; }

/* ==========================================================================
   Combined Size Utilities
   ========================================================================== */
.u-size-full { width: 100%; height: 100%; }
.u-size-17 { width: 17px; height: 17px; }
.u-size-18 { width: 18px; height: 18px; }
.u-icon-dropdown { height: 12px; width: 18px; cursor: pointer; padding-left: 2px; }

/* ==========================================================================
   Position Utilities
   ========================================================================== */
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed { position: fixed; }
.u-center-absolute { position: absolute; top: 50%; left: 50%; }
.u-z-1 { z-index: 1; }

/* ==========================================================================
   Cursor Utilities
   ========================================================================== */
.u-cursor-pointer { cursor: pointer; }
.u-cursor-default { cursor: default; }
.u-link-blue { color: #0079ff !important; }

/* ==========================================================================
   Transform Utilities
   ========================================================================== */
.u-rotate-90 { transform: rotate(90deg); }
.u-rotate-180 { transform: rotate(-180deg); }
.u-translate-x-50 { transform: translateX(-50%); }

/* ==========================================================================
   Border Utilities
   ========================================================================== */
.u-border-radius-tr-br { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.u-border-left-none { border-left: none; }

/* ==========================================================================
   Color Utilities
   ========================================================================== */
.u-bg-white { background-color: #fff; }
.u-text-blue { color: #23405e; }
.u-text-link { color: rgb(24, 117, 221); }

/* ==========================================================================
   Font Utilities
   ========================================================================== */
.u-fs-20 { font-size: 20px; }

/* ==========================================================================
   Slider Position Classes (rc-slider dots and marks)
   ========================================================================== */
/* Slider dots - left positions */
.u-slider-dot-0 { left: 0%; }
.u-slider-dot-14 { left: 13.7931%; }
.u-slider-dot-31 { left: 31.0345%; }
.u-slider-dot-48 { left: 48.2759%; }
.u-slider-dot-66 { left: 65.5172%; }
.u-slider-dot-83 { left: 82.7586%; }
.u-slider-dot-100 { left: 100%; }

/* Slider marks - left positions with transform */
.u-slider-mark-1 { left: 1%; transform: translateX(-50%); }
.u-slider-mark-5 { left: 17.7931%; transform: translateX(-50%); }
.u-slider-mark-10 { left: 34.0345%; transform: translateX(-50%); }
.u-slider-mark-15 { left: 50.2759%; transform: translateX(-50%); }
.u-slider-mark-20 { left: 65.5172%; transform: translateX(-50%); }
.u-slider-mark-25 { left: 81.7586%; transform: translateX(-50%); }
.u-slider-mark-30 { left: 98%; transform: translateX(-50%); }

/* Slider range input positioning */
.u-slider-range { left: 0%; width: 13.7931%; }

/* ==========================================================================
   Chart Container Utilities
   ========================================================================== */
.u-chart-container {
    width: 83%;
    margin: 0 auto;
    height: 320px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-ep-chart-container {
    width: 83%;
    margin: 0 auto;
    height: 320px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-chart-donut {
    height: 100%;
    width: 100%;
    position: absolute;
}

.u-chart-donut-inner {
    height: 100%;
    width: 100%;
}

.u-chart-donut-base {
    height: 100%;
    width: 100%;
}

.u-chart-center-text {
    z-index: 1;
    position: absolute;
    color: #23405e;
}

.u-chart-label-center {
    z-index: 1;
    position: absolute;
    color: #23405e;
}

/* ==========================================================================
   Result Page Specific Utilities
   ========================================================================== */
.u-result-container {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.u-result-form {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.u-qualify-container {
    width: 100%;
    margin-left: 24px;
    display: none;
}

.u-qualify-back {
    display: flex;
    justify-content: flex-start;
    margin-left: 45px;
}

/* ==========================================================================
   Mobile Chart Utilities
   ========================================================================== */
.u-mobile-chart-cell {
    padding: 5px !important;
}

.u-mobile-chart-container {
    position: relative;
}

.u-mobile-chart {
    height: 180px;
}

.u-mobile-chart-center {
    top: 50%;
    left: 50%;
}

/* ==========================================================================
   Input Group / Addon Utilities
   ========================================================================== */
.u-datepicker-addon {
    padding: 8px 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #fff;
    border-left: none;
}

.u-years-addon {
    padding: 17px 13.5px !important;
}

/* ==========================================================================
   Loader Utilities
   ========================================================================== */
.u-loader-container {
    display: none;
    text-align: center;
}

/* ==========================================================================
   Equity Chart Utilities
   ========================================================================== */
.u-equity-chart {
    width: 100% !important;
    transform: rotate(90deg);
}

/* ==========================================================================
   EQR Specific Utilities
   ========================================================================== */
.u-eqr-display-flex { display: flex; justify-content: center; }
.u-eqr-hidden { display: none; justify-content: center; }
.u-eqr-justify-between { justify-content: space-between; }
.u-eqr-ul-center { justify-content: center; }

/* ==========================================================================
   Percentage Image Utilities
   ========================================================================== */
.u-pct-icon {
    display: none;
    width: 19px;
}
.u-hidden-w-19 {
    display: none;
    width: 19px;
}

/* ==========================================================================
   Modal Utilities
   ========================================================================== */
.u-modal-overlay {
    position: fixed;
    inset: 0px;
    background-color: rgba(74, 81, 93, 0.71);
    z-index: 2147483647;
    display: none;
    top: 0;
    width: 100%;
    height: 100%;
}

.u-modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
    margin: 50px auto;
}

/* ==========================================================================
   Misc Utilities
   ========================================================================== */
.u-no-decoration { text-decoration: none; }
.u-divider { border-top: 1px solid #e0e0e0; }

/* ==========================================================================
   Additional Layout Utilities
   ========================================================================== */
.u-ml-0-important { margin-left: 0px !important; }
.u-px-15 { padding-left: 15px; padding-right: 15px; }
.u-mb-20-important { margin-bottom: 20px !important; }
.u-mb-75px { margin-bottom: 75px; }
.u-p-0-5pct-mb75 { padding: 0 5%; margin-bottom: 75px; }

/* ==========================================================================
   Chart Specific Utilities
   ========================================================================== */
.u-chart-320 { height: 320px; }
.u-chart-325 { height: 325px; }
.u-chart-flex-320 {
    display: flex;
    justify-content: center;
    height: 320px;
    width: 100%;
}
.u-chart-flex-325 {
    display: flex;
    justify-content: center;
    height: 325px;
}
.u-chart-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-chart-absolute {
    height: 100%;
    width: 100%;
    position: absolute;
}
.u-chart-inner {
    height: 100%;
    width: 100%;
}
.u-chart-inner-90 {
    height: 90%;
    width: 90%;
    position: relative;
}
.u-chart-center-label {
    z-index: 1;
    position: absolute;
    font-size: 20px;
    top: 45%;
    color: #23405e;
}

/* Monthly Afford Piechart */
.u-monthly-afford-chart {
    height: 320px;
    background-color: rgb(255, 255, 255);
    margin-top: -20px;
}

/* RVB Chart styles */
.u-rvb-chart-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-rvb-chart-outer {
    position: absolute;
    height: 100%;
    width: 100%;
}
.u-rvb-chart-inner {
    position: absolute;
    height: 95%;
    width: 95%;
}
.u-rvb-center-text {
    z-index: 1;
    position: absolute;
    color: #23405e;
}
.u-rvb-legend {
    padding-top: 3%;
    padding-left: 5px;
}

/* Refi chart */
.u-refi-cover-chart {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
}
.u-refi-chart {
    height: 100%;
    width: 100%;
    position: absolute;
}
.u-refi-chart-inner {
    height: 100%;
    width: 100%;
}
.u-refi-center-text {
    z-index: 1;
    position: absolute;
    color: #23405e;
}

/* ==========================================================================
   EQR Footer Utilities
   ========================================================================== */
.u-eqr-footer {
    background-color: #FAFAFA !important;
    display: none;
}
.u-eqr-footer-text {
    color: #256198;
}

/* ==========================================================================
   React Modal Utilities
   ========================================================================== */
.u-react-modal-overlay {
    position: fixed;
    inset: 0px;
    background-color: rgba(74, 81, 93, 0.71);
    z-index: 2147483647;
    display: none;
    top: 0;
    width: 100%;
    height: 100%;
}
.u-react-modal-overlay-scroll {
    position: fixed;
    inset: 0px;
    background-color: rgba(74, 81, 93, 0.71);
    z-index: 2147483647;
    display: none;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.u-react-modal-content {
    position: initial;
    top: 16px;
    left: 0px;
    margin: 200px auto;
    max-width: 420px;
    width: 100%;
    border: none;
    background: rgb(255, 255, 255);
    overflow: auto;
    border-radius: 6px;
    outline: none;
    padding: 20px;
    box-shadow: rgb(95, 95, 95) 0px 0px 12px 3px;
    cursor: pointer;
}

/* ==========================================================================
   More Info Modal Utilities
   ========================================================================== */
.u-moreinfo-dialog {
    max-width: 460px;
    margin: 60px auto;
}
.u-close-icon {
    width: 15px;
    background: none !important;
}
.u-moreinfo-hidden {
    display: none;
    padding: 0px !important;
}

/* ==========================================================================
   Contact Modal Utilities
   ========================================================================== */
.u-contact-dialog {
    margin: 100px auto;
}
.u-close-btn {
    cursor: pointer;
    margin-left: 17px;
}
.u-pb-10 { padding-bottom: 10px; }
.u-alert-hidden {
    opacity: 1;
    display: none;
}

/* ==========================================================================
   Screen/Page Display Utilities
   ========================================================================== */
.u-screen-hidden {
    display: none !important;
}
.u-screen-hidden-padded {
    display: none !important;
    padding: 0 5%;
}
.u-screen-flex {
    display: flex !important;
    justify-content: center;
}

/* ==========================================================================
   Additional Width Utilities
   ========================================================================== */
.u-w-23 { width: 23px; }
.u-hidden-w-23 { display: none; width: 23px; }

/* ==========================================================================
   Additional Height Utilities
   ========================================================================== */
.u-h-24 { height: 24px; }

/* ==========================================================================
   Additional Combined Utilities
   ========================================================================== */
.u-size-100 { width: 100px; height: 100px; }
.u-bg-white-text-blue { background-color: #fff !important; color: #23405e !important; }

/* ==========================================================================
   Datepicker Addon Hidden
   ========================================================================== */
.u-datepicker-addon-hidden {
    padding: 8px 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #fff;
    border-left: none;
    display: none;
}

/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */
.u-flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.u-justify-center { display: flex; justify-content: center; }

/* ==========================================================================
   Text/Layout Combination Utilities
   ========================================================================== */
.u-text-center-mb-5pct {
    text-align: center;
    margin-bottom: 5%;
}
.u-gap-0 { gap: 0; }

/* ==========================================================================
   Additional Spacing Utilities
   ========================================================================== */
.u-mt-24 { margin-top: 24px; }
.u-mt-0 { margin-top: 0px; }
.u-ml-0 { margin-left: 0px; }
.u-py-9-17 { padding-top: 9px; padding-bottom: 17px; }
.u-p-15 { padding: 15px; }

/* ==========================================================================
   Border Utilities
   ========================================================================== */
.u-border-none { border: none; }
.u-text-no-decoration { text-decoration: none; }
.u-list-none { list-style-type: none; }

/* ==========================================================================
   Buyer Costs Toggle
   ========================================================================== */
#buyerCosts { list-style: none; }

/* ==========================================================================
   Rent vs Buy Info Modal
   ========================================================================== */
#rentVsBuyinfo { padding: 0px !important; }

/* ==========================================================================
   Z-Index Utilities
   ========================================================================== */
.u-z-1000 { z-index: 1000; }

/* ==========================================================================
   Chart Overlay Utility
   ========================================================================== */
.u-chart-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   Button State Utilities
   ========================================================================== */
.u-btn-enabled {
    background-color: #278AE5 !important;
}
.u-btn-enabled .next_label,
.u-btn-enabled-label {
    color: #FFF !important;
}
.u-btn-disabled {
    background-color: #EDEDED !important;
}
.u-btn-disabled .next_label,
.u-btn-disabled-label {
    color: #CFCFCF !important;
}
.u-btn-success {
    background-color: #3CC98E !important;
}
.u-btn-success .next_label,
.u-btn-success-label {
    color: #FFF !important;
}

/* ==========================================================================
   Transform Utilities
   ========================================================================== */
.u-rotate-180 {
    transform: rotate(180deg);
}
.u-rotate-360 {
    transform: rotate(360deg);
}

/* ==========================================================================
   Collapse Utilities
   ========================================================================== */
.u-collapse-open {
    border-bottom: 1px solid #ede9e9;
    padding-bottom: 2%;
}
.u-collapse-closed {
    border-bottom: none;
}
.u-assumption-visible {
    display: block !important;
}

/* ==========================================================================
   Toggle Visibility Utilities (for cascading dropdowns)
   ========================================================================== */
.u-toggle-hidden {
    display: none !important;
}

/* ==========================================================================
   IP Calculator Screen Utilities
   ========================================================================== */
.u-ip-screen-hidden {
    display: none !important;
}
.u-ip-screen-flex {
    display: flex !important;
}

/* ==========================================================================
   Slider Background Utilities (for dynamic range sliders)
   ========================================================================== */
.u-slider-bg-no-repeat {
    background-repeat: no-repeat;
}

/* ==========================================================================
   Loan Balance Calculator Utilities
   ========================================================================== */
.u-lbc-hidden {
    display: none;
}
.u-lbc-visible {
    display: block;
}

/* ==========================================================================
   Graph Modal Utilities
   ========================================================================== */
.u-graph-modal-hidden {
    display: none;
}
.u-graph-modal-visible {
    display: block;
}
.u-graph-modal-blur {
    backdrop-filter: blur(8px);
}

/* ==========================================================================
   Closing Costs Screen Utilities
   ========================================================================== */
.u-closing-costs-visible {
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   Numpad Keyboard Utilities
   ========================================================================== */
.u-keyboard-visible {
    display: flex;
}
.u-keyboard-hidden {
    display: none;
}
.u-extrapayyesxs-visible {
    display: flex;
}
.u-extrapayyesxs-hidden {
    display: none;
}
.u-dropdown-visible {
    display: block !important;
}
.u-icon-17 {
    width: 17px;
    height: 17px;
}