/* Microsite vNext home page. */

.csh-vnext.page-homepage .header {
    isolation: isolate;
    min-height: clamp(620px, 78vh, 820px);
}

.csh-vnext.page-homepage .header-bg,
.csh-vnext.page-homepage .header-bg-mobile {
    z-index: -2;
}

.csh-vnext.page-homepage .header-bg::after,
.csh-vnext.page-homepage .header-bg-mobile::after {
    background:
        linear-gradient(90deg, rgba(8, 13, 19, .82) 0%, rgba(8, 13, 19, .48) 52%, rgba(8, 13, 19, .2) 100%),
        linear-gradient(0deg, rgba(8, 13, 19, .42), transparent 46%);
}

.csh-vnext.page-homepage .search-box-home {
    top: 50%;
    left: max(1rem, calc((100vw - var(--csh-content-width)) / 2 + 2rem));
    width: min(720px, calc(100% - 2rem));
    padding: clamp(1.5rem, 4vw, 3rem);
}

.csh-vnext.page-homepage .search-box-home > h1 {
    max-width: 12ch;
    margin: 0 0 1.5rem;
    font-size: clamp(2.35rem, 5vw, 4.65rem);
    line-height: 1.02;
    text-wrap: balance;
}

.csh-vnext.page-homepage #search-box-tabs {
    margin-bottom: .85rem;
}

.csh-vnext.page-homepage #search-box-tabs .row {
    gap: .35rem;
}

.csh-vnext.page-homepage .btn-search-tab {
    min-width: 122px;
    border: 1px solid transparent;
    border-radius: .65rem .65rem 0 0;
}

.csh-vnext.page-homepage .btn-search-tab.active {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .12);
    border-bottom-color: var(--csh-secondary);
}

.csh-vnext.page-homepage #search-box-container,
.csh-vnext.page-homepage #sell-box-container {
    align-items: stretch;
    padding: .45rem;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .85rem;
}

.csh-vnext.page-homepage #search-box-location,
.csh-vnext.page-homepage #sell-box-address,
.csh-vnext.page-homepage #submit-button,
.csh-vnext.page-homepage #sell-next-button {
    min-height: 54px;
}

/*
 * Typeahead creates a visible input, a hint input, and a wrapper around both.
 * Neutralize the legacy pill/input rules at the component boundary so those
 * stacked elements read as one control instead of producing a double border.
 */
.csh-vnext.page-homepage #search-box-container .twitter-typeahead {
    display: block !important;
    width: 100%;
    height: 54px;
    background: var(--csh-surface) !important;
    border: 1px solid #cbd2d9 !important;
    border-radius: var(--csh-radius-sm);
    box-shadow: none;
    overflow: visible;
}

.csh-vnext.page-homepage #search-box-container .twitter-typeahead:focus-within {
    border-color: var(--csh-primary);
    box-shadow: 0 0 0 .22rem rgba(var(--csh-primary-rgb), .18);
}

.csh-vnext.page-homepage #search-box-container .tt-input,
.csh-vnext.page-homepage #search-box-container .tt-hint,
.csh-vnext.page-homepage #search-box-container #search-box-location {
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 1rem !important;
    color: var(--csh-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: calc(var(--csh-radius-sm) - 1px) !important;
    box-shadow: none !important;
}

.csh-vnext.page-homepage #search-box-container .tt-hint {
    color: #8a949e !important;
}

.csh-vnext.page-homepage #search-box-container .tt-input:focus {
    outline: 0;
}

.csh-vnext.page-homepage #search-box-container .tt-menu,
.csh-vnext.page-homepage #search-box-container .tt-dropdown-menu {
    z-index: 1060;
    width: 100%;
    margin-top: .45rem;
    padding: .45rem;
    color: var(--csh-text) !important;
    background: var(--csh-surface) !important;
    border: 1px solid var(--csh-border) !important;
    border-radius: var(--csh-radius-sm);
    box-shadow: var(--csh-shadow);
}

.csh-vnext.page-homepage #search-box-container .tt-suggestion {
    color: var(--csh-text) !important;
    background: transparent !important;
}

.csh-vnext.page-homepage #search-box-container .tt-menu h5,
.csh-vnext.page-homepage #search-box-container .tt-dropdown-menu h5 {
    margin: .25rem .25rem .35rem;
    padding: .45rem .55rem;
    color: #ffffff;
    background: var(--csh-primary);
    border: 0;
    border-radius: .4rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.csh-vnext.page-homepage #search-box-container .tt-suggestion:hover,
.csh-vnext.page-homepage #search-box-container .tt-suggestion.tt-cursor {
    color: var(--csh-text) !important;
    background: var(--csh-surface-muted) !important;
}

.csh-vnext.page-homepage #submit-button,
.csh-vnext.page-homepage #sell-next-button {
    color: #ffffff !important;
    background: var(--csh-secondary);
    border-color: var(--csh-secondary);
}

.csh-vnext.page-homepage #search-box-tabs-mobile {
    display: none !important;
}

.csh-vnext.page-homepage #page-content {
    padding: 0;
    background: var(--csh-bg);
}

.csh-vnext.page-homepage #properties {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.csh-vnext.page-homepage #properties > .container-fluid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.csh-vnext.page-homepage #properties > .container-fluid > br {
    display: none;
}

.csh-vnext.page-homepage .genericSwiper {
    min-height: 280px;
    padding: 3.75rem clamp(.25rem, 2vw, 1.5rem) 2.5rem;
    background: var(--csh-surface);
    border: 1px solid var(--csh-border);
    border-radius: var(--csh-radius-lg);
    box-shadow: var(--csh-shadow-sm);
}

.csh-vnext.page-homepage .property-slide-group {
    align-items: stretch;
    gap: clamp(.75rem, 2vw, 1.25rem);
}

.csh-vnext.page-homepage .property-panel {
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--csh-radius);
    box-shadow: 0 12px 28px rgba(18, 28, 38, .13);
}

.csh-vnext.page-homepage .property-panel:hover {
    transform: translateY(-4px);
}

.csh-vnext.page-homepage .property-panel > .save-favorite.panel-favorite {
    position: absolute;
    z-index: 20;
    top: 1rem;
    right: 1rem;
    display: block;
    width: 42px;
    height: 42px;
    color: var(--csh-primary);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

.csh-vnext.page-homepage .property-panel > .save-favorite.panel-favorite > div {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--csh-primary);
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .2);
}

.csh-vnext.page-homepage .property-panel > .save-favorite.panel-favorite > .btn-favorite-on,
.csh-vnext.page-homepage .property-panel > .save-favorite.panel-favorite > .btn-favorite-on i {
    color: #dc2626 !important;
    background: rgba(255, 255, 255, .98) !important;
    border-color: rgba(220, 38, 38, .28) !important;
}

.csh-vnext.page-homepage .property-panel > .save-favorite.panel-favorite:hover > div,
.csh-vnext.page-homepage .property-panel > .save-favorite.panel-favorite:focus > div {
    transform: scale(1.06);
}

.csh-vnext.page-homepage .property-panel .panel-top-left {
    display: inline-flex;
    align-items: stretch;
    flex-direction: column;
    width: max-content;
}

.csh-vnext.page-homepage .property-panel .panel-status {
    width: 100%;
    box-sizing: border-box;
    background: rgba(8, 13, 19, .82);
    border-radius: .45rem .45rem 0 0;
}

.csh-vnext.page-homepage .property-panel .property-views-overlay {
    position: static;
    z-index: auto;
    width: 100%;
    box-sizing: border-box;
    padding: .25rem .5rem;
    color: #ffffff !important;
    background: rgba(8, 13, 19, .82);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0 0 .45rem .45rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}

.csh-vnext.page-homepage .panel-content {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.csh-vnext.page-homepage .panel-price {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.csh-vnext.page-homepage .panel-address {
    font-weight: 650;
    line-height: 1.35;
}

.csh-vnext.page-homepage .genericSwiper .cta {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.csh-vnext.page-homepage .genericSwiper .cta a {
    background: var(--csh-primary);
    box-shadow: 0 7px 18px rgba(var(--csh-primary-rgb), .2);
    font-weight: 800;
    text-decoration: none;
}

.csh-vnext.page-homepage .swiper-pagination {
    bottom: .65rem !important;
}

.csh-vnext.page-homepage .swiper-pagination-bullet-active {
    background: var(--csh-primary);
}

.csh-vnext.page-homepage #our-services {
    padding: clamp(3.5rem, 8vw, 7rem) 0;
    background: var(--csh-surface);
    border-top: 1px solid var(--csh-border);
    border-bottom: 1px solid var(--csh-border);
}

.csh-vnext.page-homepage #our-services .row {
    align-items: center;
    row-gap: 2rem;
}

.csh-vnext.page-homepage #our-services h2 {
    margin-bottom: 1.1rem;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.csh-vnext.page-homepage #our-services p {
    color: var(--csh-text-muted);
    font-size: 1rem;
}

.csh-vnext.page-homepage #our-services img {
    display: block;
    max-height: 260px;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(18, 28, 38, .12));
}

.csh-vnext.page-homepage #our-services .btn {
    margin-top: .5rem;
    padding: .75rem 1.1rem;
}

.csh-vnext.page-homepage #signup {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    color: #fff;
    background: linear-gradient(135deg, var(--csh-primary), color-mix(in srgb, var(--csh-primary) 72%, #111820));
}

.csh-vnext.page-homepage #signup .form-group {
    justify-content: center;
    gap: 1rem 1.5rem;
    margin: 0;
}

.csh-vnext.page-homepage #signup label {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.csh-vnext.page-homepage #signup .btn {
    color: #ffffff !important;
    background: var(--csh-secondary);
    border-color: var(--csh-secondary);
}

.csh-vnext.page-homepage #page-content > :not(section):not(div:last-child) {
    max-width: var(--csh-content-width);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .csh-vnext.page-homepage .header {
        min-height: 700px;
    }

    .csh-vnext.page-homepage .search-box-home {
        left: clamp(1rem, 4vw, 2rem);
    }

    .csh-vnext.page-homepage .property-slide-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .csh-vnext.page-homepage .header {
        min-height: 690px;
    }

    .csh-vnext.page-homepage .search-box-home {
        top: 48%;
        right: 1rem;
        left: 1rem;
        width: auto;
        padding: 1.25rem;
    }

    .csh-vnext.page-homepage .search-box-home > h1 {
        margin-bottom: 1rem;
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .csh-vnext.page-homepage #search-box-container,
    .csh-vnext.page-homepage #sell-box-container {
        gap: .5rem;
    }

    .csh-vnext.page-homepage #search-box-container .col-sm-9,
    .csh-vnext.page-homepage #search-box-container .col-sm-3,
    .csh-vnext.page-homepage #sell-box-container .col-sm-9,
    .csh-vnext.page-homepage #sell-box-container .col-sm-3 {
        flex: 0 0 100%;
        width: 100%;
    }

    .csh-vnext.page-homepage .genericSwiper {
        padding: 3.4rem .75rem 2.25rem;
    }

    .csh-vnext.page-homepage .property-slide-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .csh-vnext.page-homepage #our-services {
        text-align: center;
    }

    .csh-vnext.page-homepage #our-services .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1rem;
    }

    .csh-vnext.page-homepage #our-services .row > :first-child,
    .csh-vnext.page-homepage #our-services .row > :last-child {
        grid-column: 1 / -1;
    }

    .csh-vnext.page-homepage #our-services .row > [class*="col-"] {
        width: auto;
    }

    .csh-vnext.page-homepage #our-services img {
        max-height: 190px;
    }
}

@media (max-width: 479.98px) {
    .csh-vnext.page-homepage .header {
        min-height: 735px;
    }

    .csh-vnext.page-homepage .genericSwiper .cta a {
        width: max-content;
        max-width: calc(100vw - 4rem);
        text-align: center;
    }
}