/* Rechat Template Styles */

/* Header Styles */

body.agents-template-default,
body.listing-single-page {
    .elementor-location-header {
        background: white !important;
    }

    #main > div:first-child {
        padding-top: 130px !important;
        margin-top: 0 !important;
    }

    .site-main {
        padding-inline-end: 30px;
        padding-inline-start: 30px;
    }

    .main-transparent-nav {
        background-color: rgba(255, 255, 255, .5) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        backdrop-filter: blur(20px) !important;
        transition: all 250ms ease !important;

        .elementor-icon svg path {
            fill: var(--dark-green) !important;
            transition: all 250ms ease !important;
        }

        .elementor-widget-image.header-logo img {
            content: url("/wp-content/uploads/2022/04/vh-logo-dark.png") !important;
        }

        .menu-item a,
        a.elementor-button,
        .elementor-icon {
            color: var(--text) !important;
            transition: all 250ms ease !important;
        }
    }
}

/* Home Swiper Styles */

@property --gradient-start {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(30, 30, 30, 0.85);
}

@property --gradient-mid {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(30, 30, 30, 0.6);
}

@property --gradient-end {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

.house-item {
    position: relative;
    height: 400px !important;
    overflow: hidden;

    a {
        display: flex !important;
        flex-direction: column !important;
        justify-content: end !important;
        align-items: flex-start !important;
        position: absolute !important;
        padding: 30px;
        inset: 0;
        text-decoration: none;

        &::before {
            background: linear-gradient(
                    to top,
                    var(--gradient-start) 0%,
                    var(--gradient-mid) 50%,
                    var(--gradient-end) 100%
            ) !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0;
            left: 0;
            content: "";
            display: block;
            z-index: 1;
            transition: --gradient-start 250ms ease-in-out,
            --gradient-mid 250ms ease-in-out,
            --gradient-end 250ms ease-in-out;
        }

        &:hover {
            &::before {
                --gradient-start: rgba(1, 40, 21, 0.9);
                --gradient-mid: rgba(1, 40, 21, 0.7);
                --gradient-end: transparent;
            }

            picture img {
                transform: scale(1.05);
            }
        }
    }

    picture {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 250ms ease-in-out;
        }
    }

    h3 {
        margin: 0 !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: white !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
        z-index: 1 !important;
    }

    p {
        margin: 5px 0 !important;
        font-size: 0.9rem !important;
        color: white !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
        z-index: 1 !important;
    }

    ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 1;
        padding-left: 0;

        li {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            padding: 0 !important;
            background: unset !important;
            border: none !important;
            color: white !important;

            img {
                width: 16px;
                height: 16px;
                flex-shrink: 0;
                filter: invert(1) brightness(1);
            }

            b {
                font-weight: 600;
                color: white !important;
            }
        }
    }
}

.listings.swiper {
    overflow: visible !important;

    .swiper-pagination {
        bottom: -30px !important;

        .swiper-pagination-bullet,
        .swiper-pagination-bullet-active {
            background: var(--green) !important;
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: white !important;
        aspect-ratio: 1 / 1;

        &::before,
        &::after {
            padding: 8px 13px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .5);
            backdrop-filter: blur(10px);
            font-size: 20px !important;
        }
    }
}

/* Single House Listing Styles */

#rch-house-detail {
    color: var(--text) !important;

    .rch-single-price-house {
        font-size: 40px !important;
        color: var(--text) !important;
        font-family: var(--header-font) !important;
        margin-top: 20px !important;
    }

    h1.rch-single-address {
        font-size: 22px !important;
        color: var(--text) !important;
        font-weight: 400 !important;
    }

    h2 {
        font-size: 28px;
        font-weight: 500 !important;
        margin-top: 0 !important;
    }

    .rch-main-description-single-house .rch-main-description-listing {
        line-height: 1.5em !important;
        color: var(--text) !important;
    }

    .rch-left-top-slider span {
        background: var(--tan) !important;
    }

    .rch-load-images {
        background: var(--green) !important;
        color: white !important;
        border: none !important;
        border-radius: 25px !important;
        font-size: 12px !important;
        padding: 10px 20px !important;

        img {
            filter: invert(1) brightness(1) !important;
        }

        &:hover {
            background: var(--dark-green) !important;
        }
    }
}

.rch-single-left-main-layout {
    > div > ul {
        padding-left: 0 !important;

        span:first-of-type {
            overflow-wrap: anywhere !important;
        }
    }

    .facilities-in-single-houses {
        margin-block-start: 10px !important;

        li img {
            filter: brightness(0) saturate(100%) invert(36%) sepia(84%) saturate(310%) hue-rotate(115deg) brightness(89%) contrast(90%);
        }
    }
}

.rch-leads-form-shortcode form,
.rch-listing-form-lead form {
    background-color: var(--tan) !important;
    border-radius: 16px !important;

    h2 {
        font-size: 18px !important;
    }

    label {
        display: none !important;
    }

    .form-group {
        margin-block: 10px !important;
    }

    input:not([type="submit"]),
    textarea {
        border: none !important;
        border-radius: 4px !important;
    }

    button[type=submit] {
        border: none !important;
        border-radius: 25px !important;
        line-height: 1em !important;
    }
}

.rch-leads-form-shortcode form {
    h2 {
        font-size: 80px !important;
    }

    > .form-group:nth-child(-n+5) {
        width: 48% !important;
        display: inline-flex !important;
    }

    > .form-group:first-of-type,
    > .form-group:nth-of-type(3) {
        margin-right: 2% !important;
    }

}

@media(max-width: 1300px) {
    .rch-leads-form-shortcode form h2 {
        font-size: 54px !important;
    }
}

@media(max-width: 1000px) {
    .rch-leads-form-shortcode form h2 {
        font-size: 46px !important;
    }
}

@media(max-width: 800px) {
    .rch-leads-form-shortcode form h2 {
        font-size: 44px !important;
        text-align: center !important;
    }
}

@media(max-width: 690px) {
    .rch-leads-form-shortcode form h2 {
        font-size: 38px !important;
    }
}

@media(max-width: 480px) {
    .rch-leads-form-shortcode form {
        h2 {
            font-size: 32px !important;
        }

        > .form-group:nth-child(-n+5) {
            width: 100% !important;
            display: block !important;
        }

        > .form-group:first-of-type,
        > .form-group:nth-of-type(3) {
            margin-right: 0 !important;
        }
    }
}

.rch-formatted-data-summary ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    gap: 20px !important;

    li {
        padding: 15px !important;
        text-align: center !important;
        background: #EDC7B466 !important;
        border-radius: 16px !important;
        font-family: var(--header-font) !important;
        display: flex !important;
        flex: 1 0 calc(33% - 15px) !important;
        flex-wrap: wrap !important;
        flex-direction: column !important;

        b {
            font-size: 1.6rem !important;
            padding-bottom: 5px;
            display: block;
        }

        span {
            line-height: 1.1em !important;
        }
    }
}

.rch-filters-mobile,
.rch-filters {
    justify-content: center !important;

    .rch-inside-filters {

        .ios-radio {
            font-size: 15px !important;
            font-weight: 400 !important;
        }

        input[type="radio"]:checked+.ios-radio::before {
            background-color: var(--green) !important;
            box-shadow: 0 0 4px var(--green) !important;
        }

        .filter-btn.active {
            background-color: var(--green) !important;
            color: white !important;
        }

        span {
            font-size: 16px !important;
        }

        button {
            letter-spacing: 0 !important;
        }

        button:focus,
        button:hover {
            background: unset !important;
            color: var(--green) !important;
        }

        label,
        select {
            font-size: 15px !important;
        }

        .rch-other-inside-filters label input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            border: none !important;

            &:checked:before {
                background-color: var(--green) !important;
            }

            &:before,
            &:after {
                left: 0 !important;
            }
        }
    }

    .rch-map-view > label {
        height: 100% !important;
    }
}

.rch-listing-pagination button {
    letter-spacing: 0 !important;

    &.active {
        background: var(--green) !important;
        border-color: var(--green) !important;

        &:hover {
            color: white !important;
        }
    }
}

.rch-map-listing-list {
    .gm-style button {
        font-size: 15px !important;
        letter-spacing: 0 !important;
        color: var(--text) !important;
        padding: .5rem 1rem !important;
        text-transform: unset !important;
    }

    .gmnoprint {
        button {
            font-family: var(--body-font) !important;
            font-size: 15px !important;
            letter-spacing: 0 !important;
            border-radius: 0 !important;
            padding: 0 !important;
            color: var(--text) !important;

            img {
                filter: brightness(0) saturate(100%) invert(36%) sepia(84%) saturate(310%) hue-rotate(115deg) brightness(89%) contrast(90%);
            }
        }

        .gm-style-mtc button {
            padding: .5rem 1rem !important;
        }

        button.gm-svpc img {
            position: static !important;
        }

        li label  {
            font-size: 15px !important;
        }

        .gm-compass button {
            background: unset !important;
        }
    }
}

.rch-under-main-listing {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;

    button.rch-map-toggle-btn {
        width: fit-content !important;
    }
}

.rch-under-filter-in-mobile {
    gap: 15px !important;

    .box-filter-listing-text {
        width: 100% !important;
    }

    button.filter-toggle-btn {
        width: fit-content !important;
        line-height: 1em !important;
    }
}

.rch-filters-mobile {
    .rch-other-inside-filters {
        & label {
            margin-block: 15px !important;
        }

        input[type="checkbox"]:after {
            /*top: 6px !important;*/
        }
    }
}

.rch-footer-filter-mobile {
    background: var(--green) !important;

    button {
        background: var(--peach) !important;
        color: var(--text) !important;
        padding: 0.5rem 1.5rem !important;
    }
}

.rch-disclaimer-show {
    background: var(--tan) !important;
    border-radius: 16px !important;
}

.rch-agent-list a {
    color: var(--green) !important;
}

@media(max-width: 1300px) {
    #rch-house-detail .rch-single-price-house {
        font-size: 34px !important;
    }
}

@media(max-width: 1000px) {
    body.agents-template-default,
    body.listing-single-page {
        #main > div:first-child {
            padding-top: 100px !important;
        }
    }

    #rch-house-detail .rch-single-price-house {
        font-size: 30px !important;
    }

    #rch-house-detail h1.rch-single-address {
        font-size: 20px !important;
    }
}

@media(max-width: 800px) {
    .rch-formatted-data-summary ul li b {
        font-size: 1.5rem !important;
    }

    #rch-house-detail h2 {
        font-size: 24px !important;
    }
}

@media(max-width: 768px) {
    .rch-map-listing-list[style*="z-index: 1"] ~ .rch-under-main-listing > div {
        z-index: -1 !important;
    }
}

@media(max-width: 690px) {
    body.agents-template-default,
    body.listing-single-page {
        #main > div:first-child {
            padding-top: 100px !important;
        }
    }

    #rch-house-detail .rch-single-price-house {
        font-size: 28px !important;
    }

    #rch-house-detail h1.rch-single-address {
        font-size: 18px !important;
    }

    .rch-formatted-data-summary ul li b {
        font-size: 1.4rem !important;
    }

    .rch-formatted-data-summary ul li span {
        font-size: 14px !important;
    }

    #rch-house-detail h2 {
        font-size: 22px !important;
    }

    .rch-listing-list .house-item ul li {
        font-size: 12px !important;
    }

    .rch-formatted-data-summary ul li {
        flex: 1 0 calc(50% - 10px) !important;
    }

    /*.rch-under-main-listing {*/
    /*    height: auto !important;*/
    /*}*/
}

@media(max-width: 480px) {
    .rch-under-filter-in-mobile {
        flex-direction: column !important;
    }
}

/* Listings Grid Styles */

.rch-grid-container {
    display: block;
    width: 100%;

    #rch-listing-list-latest-listings {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        width: 100%;
    }

    #rch-loading-listing {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }
}

/* Agent Page Styles */

.rch-main-layout-single-agent *:not(button) {
    color: var(--text) !important;
}

.rch-single-agents-social {
    padding-left: 0 !important;

    li {
        background: unset !important;
    }
}

.rch-agents-list-items .house-item {

    p,
    ul li b {
        color: white !important;
    }
}