/* =======================================================
   RentersHub – Production CSS (site, listing, details, auth)
   Regenerated full stylesheet with mobile polish + tooltips
   ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&display=swap');

/* ---------- Brand Tokens ---------- */
:root {
    --brand: #182764;
    --brand-600: #122052;
    --brand-200: #33417e;
    --accent: #9FCA3B;
    --accent-600: #76A62B;
    --accent-200: #BFE06E;
    --on-primary: #FFF;
    --on-accent: #0B1A04;
    --bg: #F6F8FB;
    --surface: #FFF;
    --text: #1C1F24;
    --muted: #6C757D;
    --border: #E5E7EB;
    --focus: rgba(24,39,100,.18);
    --shadow-brand: rgba(24,39,100,.10);
    --rh-navbar-h: 58px;
    --mobile-top-gap: 6px;
    --sr-ctl-h: 44px;
    --sr-ctl-radius: 12px;
    --sr-ctl-pad-x: .9rem;
    --sr-ctl-pad-y: .55rem;
    /* logo sizes */
    --logo-h-xs: 28px;
    --logo-h-sm: 32px;
    --logo-h-md: 38px;
    /* danger tokens */
    --danger: #dc3545;
    --danger-600: #b02a37;
    --danger-200: #f5c2c7;
    --on-danger: #ffffff;
}

@media (min-width:992px) {
    :root {
        --rh-navbar-h: 66px
    }
}

/* ---------- Base ---------- */
html {
    font-size: clamp(15px,1.1vw,18px)
}

@media (min-width:768px) {
    html {
        font-size: 18px
    }
}

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

body {
    font-size: 1.15rem
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

/* Layout helpers */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.content-wrapper {
    flex: 1;
    margin-top: var(--rh-navbar-h) !important
}

    .content-wrapper > .content {
        padding-top: 0 !important
    }

@media (max-width:575.98px) {
    .content-wrapper > .content {
        padding-top: var(--mobile-top-gap) !important
    }
}

.container-edge {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 8px
}

/* ---------- Utilities ---------- */
.text-primary {
    color: var(--brand) !important
}

.bg-primary {
    background: var(--brand) !important
}

.border-primary {
    border-color: var(--brand) !important
}

.text-accent {
    color: var(--accent) !important
}

.bg-accent {
    background: var(--accent) !important
}

.border-accent {
    border-color: var(--accent) !important
}

/* ---------- Navbar ---------- */
.navbar-accent-border {
    border-bottom: 1px solid var(--accent) !important
}

.navbar-brand-logo {
    height: 36px;
    width: auto;
    max-width: 100%
}

.brand-wordmark {
    font-size: 1.1rem;
    color: var(--brand)
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23182764' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-cta-group {
    display: flex;
    gap: .75rem;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    .navbar-cta-group::-webkit-scrollbar {
        display: none
    }

.nav-btn {
    min-width: max-content;
    border-radius: .65rem
}

@media (max-width:575.98px) {
    .navbar .navbar-collapse {
        padding: .5rem 0
    }

    .navbar-cta-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
        width: 100%;
        white-space: normal;
        overflow: visible
    }

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

/* ---------- Buttons (base + tokens) ---------- */
.btn {
    font-weight: 800;
    border-radius: .75rem
}

.btn-sm {
    padding: .35rem .65rem;
    font-size: .9rem;
    line-height: 1.1;
    border-radius: .6rem
}

@media (max-width:575.98px) {
    .btn-sm {
        padding: .5rem .75rem;
        font-size: 1rem;
        min-height: 40px
    }
}

/* Accent button */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
    border-radius: .65rem;
    padding: .55rem 1rem;
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 800;
}

    .btn-accent:hover, .btn-accent:focus {
        background: var(--accent-600);
        border-color: var(--accent-600);
        color: var(--on-accent)
    }

    .btn-accent:active {
        background: var(--accent-600) !important;
        border-color: var(--accent-600) !important
    }

    .btn-accent:focus {
        box-shadow: 0 0 0 .2rem rgba(159,202,59,.35)
    }

    .btn-accent:disabled {
        opacity: .65;
        pointer-events: none
    }

/* Global Danger small (Bootstrap-compatible) */
.btn.btn-sm.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-danger);
    text-transform: uppercase;
    letter-spacing: .2px;
    box-shadow: 0 6px 14px rgba(220,53,69,.18);
}

    .btn.btn-sm.btn-danger:hover, .btn.btn-sm.btn-danger:focus {
        background: var(--danger-600);
        border-color: var(--danger-600);
        color: var(--on-danger);
    }

    .btn.btn-sm.btn-danger:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(220,53,69,.25)
    }

    .btn.btn-sm.btn-danger:active {
        background: var(--danger-600) !important;
        border-color: var(--danger-600) !important;
        box-shadow: 0 4px 10px rgba(220,53,69,.22) !important;
    }

    .btn.btn-sm.btn-danger:disabled {
        opacity: .6;
        pointer-events: none
    }

/* ---------- Hero ---------- */
.hero-banner {
    background: var(--brand);
    border-radius: 12px
}

    .hero-banner .hero-inner {
        min-height: clamp(140px,22vh,230px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 12px
    }

.hero-title {
    font-size: clamp(1.6rem,4.8vw,3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .2px;
    margin: 0;
    color: #fff;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

    .hero-title .break {
        display: block
    }

.hero-title-accent {
    color: #E8EEFF
}

/* ---------- Search Row ---------- */
.search-row {
    margin: 12px 0
}

.search-row-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: clamp(8px,2vw,16px)
}

.search-row .form-control, .search-row .form-select {
    width: 100%;
    box-sizing: border-box;
    height: var(--sr-ctl-h);
    min-height: var(--sr-ctl-h);
    padding: var(--sr-ctl-pad-y) var(--sr-ctl-pad-x);
    font-size: .95rem;
    border-radius: var(--sr-ctl-radius);
    border: 1px solid #E6E9F3;
    background: #fff;
    transition: border-color .15s,box-shadow .2s;
    line-height: 1.25;
}

.search-row .form-select {
    appearance: none;
    background-image: none;
    padding-right: 2rem
}

.search-row input[type="number"]::-webkit-outer-spin-button,
.search-row input[type="number"]::-webkit-inner-spin-button {
    margin: 0
}

.search-row .form-control:focus, .search-row .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .25rem var(--focus)
}

.search-row .btn-find {
    height: var(--sr-ctl-h);
    line-height: 1.1;
    border-radius: var(--sr-ctl-radius);
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
    font-weight: 800;
    white-space: nowrap;
}

    .search-row .btn-find:hover, .search-row .btn-find:focus {
        background: var(--accent-600);
        border-color: var(--accent-600);
        color: var(--on-accent)
    }

@media (max-width:575.98px) {
    .search-row .row > [class^="col-"], .search-row .row > [class*=" col-"] {
        flex: 0 0 100%;
        max-width: 100%
    }

    .search-row .row {
        row-gap: .5rem
    }
}

/* ---------- Loading Bar ---------- */
.loading-bar {
    height: 3px;
    background: rgba(0,0,0,.08);
    border-radius: 6px;
    overflow: hidden
}

.loading-fill {
    height: 100%;
    width: 10%;
    background: var(--brand);
    transition: width .2s ease
}

/* ---------- Listing (cards) ---------- */
.results-header {
    margin-top: 18px;
    margin-bottom: 8px
}

.results-title {
    font-size: clamp(1.4rem,3.6vw,2.2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    color: var(--text)
}

.results-title-accent {
    color: var(--brand)
}

.results-container {
    padding-top: 6px;
    padding-bottom: 16px
}

.results-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem
}

@media (min-width:768px) and (max-width:991.98px) {
    .results-grid.grid-4-md > [class^="col-"], .results-grid.grid-4-md > [class*=" col-"] {
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media (max-width:575.98px) {
    .results-grid.grid-2-xs > [class^="col-"], .results-grid.grid-2-xs > [class*=" col-"] {
        flex: 0 0 50%;
        max-width: 50%
    }
}
/* Ultra-small phones: force 1-col */
@media (max-width:380px) {
    .results-grid > [class^="col-"], .results-grid > [class*=" col-"] {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.rh .house-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit
}

.rh .house-card {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--surface);
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px var(--shadow-brand);
    transition: transform .14s ease, box-shadow .18s ease, z-index .08s;
}

    .rh .house-card:hover {
        z-index: 1;
        transform: translateY(-1px);
        box-shadow: 0 14px 36px rgba(24,39,100,.14)
    }

.rh .house-type-stripe {
    height: 4px;
    background: var(--brand)
}

.rh .house-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f3f4f6
}

.rh .house-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease
}

.rh .house-card:hover .house-img {
    transform: scale(1.03)
}

@supports not (aspect-ratio:4/3) {
    .rh .house-media {
        height: 185px
    }
}

@media (max-width:420px) {
    .rh .house-media {
        aspect-ratio: 16/11
    }
}

/* Rent badge */
.rh .rent-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--brand);
    color: var(--on-primary);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: .35rem .65rem;
    box-shadow: 0 6px 16px rgba(24,39,100,.24);
    font-weight: 800;
    z-index: 2;
}

    .rh .rent-badge small {
        opacity: .95;
        font-weight: 700
    }

/* Media shade */
.rh .media-shade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(180deg,rgba(0,0,0,0) 20%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
}

/* Body & text */
.rh .house-body {
    flex: 1 1 auto;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: .4rem
}

/* Title */
.rh .house-title {
    margin: 0;
    font-weight: 800;
    color: #101828;
    font-size: 1rem;
    line-height: 1.2;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    max-height: none !important;
    overflow-wrap: anywhere;
}

.rh .house-desc {
    color: #667085;
    font-weight: 700;
    line-height: 1.45;
    font-size: .9rem;
    margin: .15rem 0 .35rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta rows */
.rh .house-meta {
    display: grid;
    gap: .35rem
}

.rh .meta-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .5rem;
    align-items: start
}

.rh .meta-label {
    color: #667085;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 800
}

.rh .meta-value {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    color: var(--text)
}

.rh .meta-row.stack .meta-value {
    grid-column: 1/-1;
    white-space: normal
}

.rh .meta-row.inline-wrap {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    row-gap: .15rem;
    flex-wrap: wrap
}

    .rh .meta-row.inline-wrap .meta-label {
        flex: 0 0 auto;
        white-space: nowrap
    }

    .rh .meta-row.inline-wrap .meta-value {
        flex: 1 1 auto;
        white-space: normal;
        overflow: visible;
        text-overflow: unset
    }
/* wrap long tokens */
.rh .meta-value, .key-value {
    overflow-wrap: anywhere;
    word-break: break-word
}

/* Chips */
.rh .meta-chip {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #EEF2FF;
    border: 1px solid #E2E8FF;
    color: #273170;
    font-weight: 800;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Listing type stripes (themes) */
.theme-singles .house-type-stripe {
    background: #0d6efd
}

.theme-doubles .house-type-stripe {
    background: #198754
}

.theme-bedsitters .house-type-stripe {
    background: #0dcaf0
}

.theme-studios .house-type-stripe {
    background: #ffc107
}

.theme-sq .house-type-stripe {
    background: #6c757d
}

.theme-onebr-apts .house-type-stripe {
    background: #dc3545
}

.theme-twobr-apts .house-type-stripe {
    background: #6610f2
}

.theme-threebr-apts .house-type-stripe {
    background: #6f42c1
}

.theme-fourbr-apts .house-type-stripe {
    background: #d63384
}

.theme-fivebr-apts .house-type-stripe {
    background: #fd7e14
}

.theme-2br-compound .house-type-stripe {
    background: #20c997
}

.theme-3br-compound .house-type-stripe {
    background: #17a2b8
}

.theme-4br-compound .house-type-stripe {
    background: #cddc39
}

.theme-5plusbr-compound .house-type-stripe {
    background: #212529
}

.theme-default .house-type-stripe {
    background: var(--brand)
}

/* Buttons (brand tokens) */
.rh .btn-outline-brand {
    border: 2px solid var(--brand);
    color: var(--brand);
    background: #fff;
    font-weight: 900;
    border-radius: .9rem
}

    .rh .btn-outline-brand:hover {
        background: var(--brand);
        color: #fff
    }

.rh .btn-brand {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
    font-weight: 900;
    border-radius: .9rem
}

    .rh .btn-brand:hover {
        background: var(--accent-600);
        border-color: var(--accent-600)
    }

/* Actions row inside listing cards */
.rh .house-card .card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem 12px .75rem;
    border-top: 1px solid rgba(12,18,28,.06);
    margin-top: .4rem;
}

.rh .btn-compact {
    padding: .45rem .85rem;
    border-radius: .8rem;
    line-height: 1.1;
    font-size: .9rem
}

/* ---------- Detail Page ---------- */
.gallery-card {
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px var(--shadow-brand);
    overflow: hidden;
}

.gallery-main {
    position: relative;
    aspect-ratio: 16/10;
    background: #eef2f7
}

.main-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .25s ease
}
/* Thumbs */
.thumb-tray {
    display: flex;
    gap: .5rem;
    padding: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-top: 1px solid #f0f2f6;
}

.thumb {
    width: 92px;
    height: 72px;
    object-fit: cover;
    border-radius: .6rem;
    cursor: pointer;
    transition: transform .15s,box-shadow .15s,border .15s;
    border: 2px solid transparent;
    flex: 0 0 auto;
}

    .thumb:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 12px rgba(0,0,0,.15)
    }

    .thumb.active {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(24,39,100,.18)
    }

/* Sticky aside */
.sticky-aside {
    position: sticky;
    top: calc(var(--rh-navbar-h) + 12px)
}

@media (max-width:991.98px) {
    .sticky-aside {
        position: static;
        top: auto
    }
}

.detail-card {
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px var(--shadow-brand);
}

.detail-title {
    font-weight: 800;
    color: #101828;
    margin: 0 0 .25rem
}

.detail-sub {
    color: #667085;
    margin-bottom: .75rem
}

.detail-price {
    color: #198754;
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: .75rem
}

.price-per {
    font-weight: 800;
    color: var(--muted)
}

.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #F1F5FF;
    color: #273170;
    border: 1px solid #E0E7FF;
    font-weight: 800;
}

/* CTAs */
.cta-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

@media (min-width:576px) {
    .cta-row {
        flex-wrap: nowrap
    }

        .cta-row .btn-cta {
            flex: 1 1 0;
            min-width: 0
        }
}

@media (max-width:575.98px) {
    .cta-row .btn-cta {
        width: 100%
    }
}

.btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 900;
    border-radius: .8rem;
    padding: .7rem 1rem
}

.btn-cta-primary {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent)
}

    .btn-cta-primary:hover {
        background: var(--accent-600);
        border-color: var(--accent-600);
        color: var(--on-accent)
    }

.btn-cta-outline {
    background: #fff;
    color: var(--brand);
    border: 2px solid var(--brand)
}

    .btn-cta-outline:hover {
        background: var(--brand);
        color: #fff
    }

.btn-cta-disabled {
    opacity: .5;
    pointer-events: none
}

.cta-band {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none
}

/* Bottom CTA (optional global) */
.bottom-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    padding: .5rem .75rem;
    box-shadow: 0 -6px 18px rgba(16,24,40,.08);
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom,0));
}

.bottom-cta-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem
}

@media (max-width:575.98px) {
    .bottom-cta-grid {
        grid-template-columns: 1fr
    }
}

/* Sections */
.section-block {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(12,18,28,.06);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(16,24,40,.05);
}

.section-title {
    font-weight: 900;
    color: #101828;
    margin: 0 0 .75rem
}

.muted-note {
    color: #667085
}

/* Features */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .5rem
}

@media (min-width:768px) {
    .feature-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .45rem .6rem;
    border-radius: .7rem;
    background: #f6f8ff;
    color: #223;
    border: 1px solid #e8ecff;
    font-weight: 800;
}
/* Four green squares icon */
.feature-icon {
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    position: relative;
    margin-right: .15rem
}

.feature-icon-grid4::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 2px;
    top: 0;
    left: 0;
    box-shadow: 12px 0 0 0 var(--accent),0 12px 0 0 var(--accent),12px 12px 0 0 var(--accent);
}

/* Fees grid (spare carded variant) */
.fees-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .75rem
}

@media (min-width:768px) {
    .fees-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media (min-width:1200px) {
    .fees-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

.fee-card {
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(16,24,40,.06);
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.fee-name {
    color: #475467;
    font-weight: 800
}

.fee-amount {
    color: #198754;
    font-weight: 900
}

/* Similar houses (simple card variant) */
.similar-card {
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(16,24,40,.08);
}

.similar-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block
}

@media (max-width:575.98px) {
    .similar-img {
        height: 48vw
    }
}

/* Footer & Empty state */
.footer-brand {
    background: linear-gradient(180deg,var(--brand) 0%,var(--brand-600) 100%)
}

.footer-chip {
    background: rgba(159,202,59,.15);
    padding: .125rem .5rem;
    border-radius: .35rem
}

.footer-link {
    color: #fff;
    text-decoration: none
}

    .footer-link:hover {
        text-decoration: underline
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15) !important
}

.social-pill {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px
}

.social-outline {
    border: 2px solid var(--accent);
    background: rgba(255,255,255,.06);
    color: #fff
}

.instagram-bg {
    background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,var(--brand) 90%)
}

.social-ink {
    color: var(--on-accent)
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16,24,40,.05);
}

.empty-state-img {
    max-width: 160px;
    opacity: .85;
    margin-bottom: 1rem
}

.empty-state-title {
    font-weight: 800;
    margin: .25rem 0
}

.empty-state-text {
    max-width: 520px;
    color: #667085;
    margin: .25rem 0 1rem
}

.empty-state-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center
}

/* ---------- Action Page ---------- */
.action-page {
    padding: 2rem 1rem
}

.action-title {
    color: var(--brand)
}

.action-btns {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    width: min(420px,92vw);
    margin-inline: auto
}

.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: var(--on-primary);
    border: 1px solid var(--brand);
    border-radius: .65rem;
    padding: .6rem 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

    .btn-brand:hover, .btn-brand:focus {
        background: var(--brand-600);
        border-color: var(--brand-600);
        color: var(--on-primary)
    }

.btn-outline-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--brand);
    border: 2px solid var(--brand);
    border-radius: .65rem;
    padding: .6rem 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

    .btn-outline-brand:hover, .btn-outline-brand:focus {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand)
    }

.action-btns .btn, .action-btns .btn-brand, .action-btns .btn-outline-brand, .action-btns .btn-accent {
    width: 100%
}

/* =======================================================
   AUTH – Shared (Login, Register, Forgot)
   ======================================================= */
.auth-wrap {
    min-height: 100vh;
    background: var(--bg)
}

.auth-panel {
    display: flex;
    min-height: 100vh
}

.auth-left {
    background: linear-gradient(180deg,var(--brand) 0%,var(--brand-600) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.25rem;
}

.auth-left-inner {
    max-width: 560px
}

.auth-brand {
    font-weight: 900;
    letter-spacing: .4px;
    margin: 0 0 .25rem
}

.auth-left .brand-kicker {
    opacity: .97;
    margin-bottom: .75rem
}

.auth-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: .96
}

    .auth-bullets li {
        display: flex;
        gap: .5rem;
        align-items: flex-start;
        margin: .3rem 0
    }

    .auth-bullets i {
        margin-top: .15rem
    }

.auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(180deg,#f7f9ff 0%,#f6f8fb 100%)
}

/* Brand header card */
.card-brand {
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(24,39,100,.12)
}

    .card-brand .card-header {
        background: linear-gradient(180deg,var(--brand) 0%,var(--brand-600) 100%);
        color: #fff;
        border-bottom: none;
        padding: 1rem 1.25rem
    }

    .card-brand .title {
        color: #fff
    }

    .card-brand .sub {
        opacity: .92;
        font-weight: 700
    }

    .card-brand .card-body {
        padding: 1.25rem
    }

/* Header logo sizes */
.logo-img {
    height: var(--logo-h-sm);
    width: auto;
    max-width: 100%
}

@media (max-width:575.98px) {
    .logo-img {
        height: var(--logo-h-xs)
    }
}

@media (min-width:768px) {
    .logo-img {
        height: var(--logo-h-md)
    }
}

.card-brand .logo-img {
    height: var(--logo-h-sm)
}

/* Carded auth form */
.auth-card {
    width: min(520px,92vw);
    background: var(--surface);
    border: 1px solid rgba(12,18,28,.06);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(24,39,100,.12)
}

    .auth-card .auth-header {
        padding: 1.25rem 1.25rem .5rem
    }

/* Cardless Sign-in variant */
.auth-plain {
    width: min(560px,94vw)
}

    .auth-plain .auth-header {
        margin-bottom: .25rem
    }

    .auth-plain .auth-body {
        margin-top: .5rem
    }

/* Auth headings */
.auth-title {
    font-weight: 900;
    color: var(--brand);
    margin: 0;
    font-size: clamp(1.6rem,2.2vw,2.4rem)
}

.auth-sub {
    color: #667085;
    margin: 0
}

/* Form controls */
.auth-body {
    padding: 1.25rem
}

.auth-input.form-control {
    height: var(--sr-ctl-h);
    min-height: var(--sr-ctl-h);
    border-radius: 12px;
    border-color: #E6E9F3
}

.form-text, .invalid-feedback, .text-muted {
    font-weight: 600
}

.invalid-feedback {
    display: none
}

.is-invalid ~ .invalid-feedback {
    display: block
}

/* Input-group toggle button */
.input-group-lg .form-control.auth-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.btn-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

/* Eyeball toggle */
.field {
    display: block
}

.control-wrap {
    position: relative
}

.has-eye {
    padding-right: 3rem
}

.toggle-visibility {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    transition: background .15s,border-color .15s,color .15s,box-shadow .15s;
}

    .toggle-visibility:hover {
        background: #f8fafc;
        border-color: #d5d8e0
    }

    .toggle-visibility:focus {
        outline: none;
        box-shadow: 0 0 0 .25rem var(--focus)
    }

/* Password strength bar */
.strength {
    height: 6px;
    background: #e9eefb;
    border-radius: 999px;
    overflow: hidden
}

    .strength > div {
        height: 100%;
        width: 0;
        transition: width .25s ease;
        background: var(--brand)
    }

    .strength.weak > div {
        background: #e11d48
    }

    .strength.ok > div {
        background: #f59e0b
    }

    .strength.good > div {
        background: var(--accent)
    }

/* Terms */
.terms-wrap {
    border: 1px solid #eef1f5;
    border-radius: 14px;
    background: #fff
}

.terms-head {
    padding: 1rem 1rem 0 1rem
}

.terms-meta {
    font-weight: 700;
    color: #6b7280;
    font-size: .95rem
}

.terms-box {
    max-height: 300px;
    overflow: auto;
    padding: 1rem;
    border-top: 1px dashed #e8ecf5;
    scroll-behavior: smooth;
}

.disabled-hint {
    font-size: .95rem;
    color: #6b7280
}

/* Mini CTA grid */
.mini-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem
}

@media (max-width:575.98px) {
    .mini-cta-grid {
        grid-template-columns: 1fr
    }
}

/* Auth footer links */
.auth-foot {
    padding: 0 1.25rem 1.25rem
}

.auth-links a {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2px
}

/* intl-tel-input */
.iti {
    width: 100%
}

.iti__flag-container ~ input#Username {
    width: 100%
}

.iti input:focus {
    box-shadow: 0 0 0 .25rem var(--focus)
}

/* Stepper */
.bs-stepper .step-trigger {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid #e3e8f5;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s,box-shadow .15s,background .15s;
}

.bs-stepper .bs-stepper-circle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.bs-stepper .step.active .step-trigger, .bs-stepper .step .step-trigger:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--focus)
}

.bs-stepper .step.completed .bs-stepper-circle {
    background: var(--accent)
}

.bs-stepper .line {
    flex: 0 0 24px;
    height: 2px;
    background: #e5e7eb;
    margin: 0 .5rem
}

/* Forgot Password CTA */
.btn-custom {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 900;
    border: 1px solid var(--accent);
    border-radius: .75rem;
    padding: .6rem 1rem;
}

    .btn-custom:hover {
        background: var(--accent-600);
        border-color: var(--accent-600);
        color: var(--on-accent)
    }

/* Responsive auth compaction */
@media (max-width:991.98px) {
    .auth-left {
        display: none
    }

    .auth-right {
        padding: 1rem
    }

    .auth-card {
        box-shadow: 0 8px 20px rgba(16,24,40,.08)
    }
}

/* =======================================================
   LOGO / IMAGE TUNING
   ======================================================= */
@media (max-width:420px) {
    .rh .house-media {
        aspect-ratio: 16/12
    }
}

/* ---------- Image grid + Plus tile (uploader) ---------- */
#Uttambsolutionsimagespreviewcontainer {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start
}

.img-card {
    position: relative;
    width: 110px;
    height: 110px;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

    .img-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .img-card .btn-del {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 26px;
        height: 26px;
        line-height: 24px;
        font-weight: 700;
        border-radius: 9999px;
        border: none
    }

    .img-card[data-kind="existing"] .btn-del {
        background: #fff;
        color: #dc3545;
        border: 1px solid #dc3545
    }

    .img-card[data-kind="new"] .btn-del {
        background: #dc3545;
        color: #fff
    }

.plus-card {
    width: 110px;
    height: 110px;
    border: 2px dashed #cbd5e1;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    background: #fafafa;
}

    .plus-card:hover {
        border-color: #0d6efd;
        color: #0d6efd;
        background: #f8fbff
    }

    .plus-card .plus {
        font-size: 36px;
        line-height: 1;
        font-weight: 700
    }

.benefit-row.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .1rem rgba(220,53,69,.2)
}

#uploadWarnings .alert {
    padding: .35rem .5rem;
    margin: .25rem 0 0
}

/* ===== Property Detail (no inline styles) ===== */
.detail-rent-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--brand);
    color: var(--on-primary);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: .35rem .65rem;
    box-shadow: 0 6px 16px rgba(24,39,100,.24);
    font-weight: 800;
    z-index: 2;
}

    .detail-rent-badge small {
        opacity: .95;
        font-weight: 700
    }

/* Price line */
.price-line-amount {
    color: #198754;
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.2
}

.price-line-per {
    font-weight: 800;
    color: var(--muted);
    font-size: .9rem
}

/* Fees list (DL grid) */
.fees-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem .75rem;
    align-items: center
}

.fees-label {
    color: #667085;
    font-weight: 800;
    white-space: nowrap;
    display: flex;
    align-items: center
}

.fees-value {
    color: var(--text);
    font-weight: 800;
    min-width: 0
}

.fees-note {
    color: #667085;
    font-weight: 700
}

/* Key details list */
.key-details-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem .75rem
}

.key-label {
    color: #667085;
    font-weight: 800;
    white-space: nowrap
}

.key-value {
    color: var(--text);
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

/* ---------- Mobile polish ---------- */
@media (max-width:575.98px) {
    .fees-list, .key-details-list {
        grid-template-columns: 1fr;
        gap: .25rem .5rem
    }

    .fees-label, .key-label {
        margin-top: .35rem
    }

    .feature-chip {
        padding: .35rem .5rem;
        gap: .25rem;
        font-size: .95rem
    }

    .feature-icon {
        width: 16px;
        height: 16px
    }

    .feature-icon-grid4::before {
        width: 5px;
        height: 5px;
        border-radius: 2px;
        box-shadow: 10px 0 0 0 var(--accent),0 10px 0 0 var(--accent),10px 10px 0 0 var(--accent);
    }

    .detail-rent-badge, .rh .rent-badge {
        padding: .28rem .5rem;
        font-size: .9rem
    }

    .container-edge {
        padding: 0 12px
    }

    .thumb {
        width: 80px;
        height: 62px;
        border-radius: .5rem
    }

    .rh .house-card .card-actions {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .4rem
    }

    .rh .btn-compact {
        flex: 1 1 calc(50% - .4rem);
        text-align: center
    }
}

/* Narrow mid-range phones */
@media (max-width:420px) {
    .rh .house-media {
        aspect-ratio: 16/11
    }

    .rh .house-title {
        font-size: .95rem
    }

    .rh .house-desc {
        font-size: .85rem
    }
}

/* Motion sensitivity */
@media (prefers-reduced-motion:reduce) {
    .rh .house-card, .rh .house-img, .main-image {
        transition: none !important
    }
}

/* --------- Tooltip affordance & benefit-row UX --------- */
[data-bs-toggle="tooltip"] {
    cursor: help
}

.benefit-row {
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease
}

    .benefit-row.is-checked {
        border-color: var(--brand,#182764);
        box-shadow: 0 0 0 .15rem var(--focus,rgba(24,39,100,.18));
        background: #f8fafc
    }

    .benefit-row .house-benefit-name {
        background: transparent;
        resize: none
    }

/* Forms: numeric glyphs + placeholder visibility */
::placeholder {
    color: #98A2B3;
    opacity: 1
}

input[type="number"], input[type="text"][inputmode="decimal"] {
    font-variant-numeric: tabular-nums
}

/* =======================================================
   Equal-height guarantee for Similar Houses (with OR without .rh)
   ======================================================= */
.house-card .house-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f3f4f6;
}

.house-card .house-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@supports not (aspect-ratio:4/3) {
    .house-card .house-media {
        height: 185px
    }
}

/* =======================================================
   Modal actions (Uttambsolutionsmodal) – polished Cancel button
   ======================================================= */
#Uttambsolutionsmodal .modal-footer {
    gap: .6rem
}

    #Uttambsolutionsmodal .modal-footer .btn {
        min-height: 44px;
        border-radius: 12px;
        font-weight: 800;
        line-height: 1.1;
        padding: .6rem 1rem;
    }

/* Sharper red Cancel (btn-sm btn-danger inside modal) */
#Uttambsolutionsmodal .btn.btn-sm.btn-danger {
    background: linear-gradient(180deg, var(--danger,#dc3545) 0%, var(--danger-600,#b02a37) 100%);
    border: 0;
    color: var(--on-danger,#fff);
    box-shadow: 0 6px 14px rgba(220,53,69,.18);
    letter-spacing: .2px;
}

    #Uttambsolutionsmodal .btn.btn-sm.btn-danger:hover,
    #Uttambsolutionsmodal .btn.btn-sm.btn-danger:focus {
        filter: brightness(.96)
    }

    #Uttambsolutionsmodal .btn.btn-sm.btn-danger:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(220,53,69,.25), 0 6px 14px rgba(220,53,69,.18);
    }

    #Uttambsolutionsmodal .btn.btn-sm.btn-danger:active {
        filter: none;
        box-shadow: 0 3px 8px rgba(220,53,69,.22) !important;
    }

/* Stack both buttons on phones for easy tapping */
@media (max-width:575.98px) {
    #Uttambsolutionsmodal .modal-footer {
        flex-wrap: wrap
    }

        #Uttambsolutionsmodal .modal-footer .btn {
            width: 100%
        }
}