// Variables
$main-color: #464d46;
$second-color: #ceb798;
$muted: #555555;
$bg: #f0f0f0;
$radius: 10px;

body {
    background-color: #f5f5f5;
    //  background-color: #f5f5f5;
}

section {
    scroll-margin-top: 100px;
}

// Helpers
.section-gap {
    margin-top: 28px;
    margin-bottom: 28px;
}

.box {
    background: #fff;
    border-radius: $radius;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.section-title {
    font-weight: 700;
    color: $main-color;
    border-right: 5px solid $second-color;
    padding: 0.35rem 0.75rem;
    margin: 0.75rem 0;
}

// Header bar
#header-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid #eee;

    h1 {
        font-size: clamp(1rem, 0.912rem + 0.2817vw, 1.25rem);
        font-weight: 600;
    }

    .price-badge {
        background: $second-color;
        color: #222;
        border-radius: 999px;
        padding: 0.35rem 0.85rem;
        font-weight: 700;
    }
}

// Meta text
.meta-mini {
    color: $muted;
    font-size: 0.9rem;
}

// Gallery
#gallery {
    .main-img {
        border-radius: $radius;
        width: 100%;
    }
}

#more-images {
    .item {
        img {
            object-fit: cover;
            border-radius: 8px;
            width: 100%;
        }
    }

    .owl-nav {
        display: block !important;
    }
    svg {
        width: 18px;
        height: 18px;
        fill: var(--text-white);
    }
    .owl-prev,
    .owl-next {
        position: absolute;
        top: calc(50% - 20px);
        background-color: $second-color;
        padding: 0px !important;
        height: 36px;
        width: 36px;
        border-radius: 50%;
    }
    .owl-prev {
        left: -13px;
    }
    .owl-next {
        right: -13px;
    }
}

// Detail chip
.detail-chip {
    background: $bg;
    border-radius: $radius;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;

    .icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
.label {
    color: $muted;
    margin: 0 0.5rem;
}

.value {
    color: $main-color;
    font-weight: 700;
}

// Read more link
.read-more {
    a {
        color: $main-color;
        text-decoration: underline;
    }
}

#models{
    .model-image img{
        width: 100%;
    }
}
// Location map
#location {
    iframe {
        width: 100% !important;
        height: 360px;
        border: 0;
        border-radius: $radius;
    }
}

// Features / Amenities items
.feature-item {
    display: flex;
    align-items: center;

    .icon {
        width: 18px;
        margin-left: 0.35rem;
    }
}

// Badge dot
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    &::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $second-color;
    }
}

// Currency icon size
.currency-icon {
    svg {
        width: 16px;
        height: 16px;
        vertical-align: -3px;
    }
}

// Responsive
@media (max-width: 576px) {
    #location {
        iframe {
            height: 300px;
        }
    }
}

#features,
#amenities {
    .icon {
        svg {
            fill: $second-color;
            width: 20px;
            height: 20px;
        }
    }
}

//////////////////////////////////

.details {
    .icon {
        svg,
        img {
            width: 22px;
            height: 22px;
        }
    }
}

//////////////////////
footer {
    background-color: var(--aside-background);
    padding: 60px 0px;

    #social-links {
        li {
            width: 40px;
            height: 40px;
            margin: 3px;
            a {
                border-radius: var(--border-radius);
                background-color: var(--second-color);
                transition: all 0.2s ease;
                svg {
                    fill: var(--btn-color);
                }

                &:hover {
                    &,
                    svg {
                        transform: scale(1.05);
                    }
                }

                height: 100%;
                width: 100%;
                text-align: center;
                display: flex;
                align-content: center;
                justify-content: center;
            }
        }
    }
}
