:root{

    --bg:#fafafa;
    --text:#111;
    --muted:#666;

    --card:#fff;

    --radius-xl:40px;
    --radius-lg:28px;

    --shadow:
    0 30px 80px rgba(0,0,0,.06);

    --border:
    1px solid rgba(0,0,0,.06);

}


body{

    background:var(--bg);
    font-family:"Inter",sans-serif;
    color:var(--text);

}

/* =========================
header for search
========================= */

.search-page .navbar {
    width: 220px;
    overflow: hidden;
    transition: width .35s ease;
}

.search-page .header:hover .navbar {
    width: min(1000px, calc(100% - 40px));
}

.search-page .nav-links {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.search-page .header:hover .nav-links {
    opacity: 1;
    pointer-events: auto;
}

/* GRID */

/* =========================
PROPERTY GRID
========================= */

.properties-grid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}


/* =====================
MAP
===================== */

.properties-layout{

    display:flex;

    height:calc(100vh - 150px);

    padding:30px;

    gap:30px;

    box-sizing:border-box;

    overflow:hidden;

    align-items:flex-start;

}


.map-container{

    flex:1;

    height:100%;

    position:sticky;

    top:0;

    border-radius:30px;

    overflow:hidden;

}


.properties-scroll{

    flex:1;

    height:100%;

    overflow-y:auto;

    padding-top:0;

    min-height:0;

}


    .properties-scroll{

        margin-bottom:-30px;

    }



.price-marker{

    background:#fff;
    color:#111;

    padding:6px 10px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;

    box-shadow:
        0 3px 10px rgba(0,0,0,.10);

    border:1px solid rgba(0,0,0,.06);

    white-space:nowrap;

    transition:.2s ease;

}




#desktop-map{

    width:100%;

    height:100%;

    border-radius:30px;

}




/* hide scrollbar */

.properties-scroll::-webkit-scrollbar{
    display:none;
}

.properties-scroll{
    scrollbar-width:none;
}



/* =====================
PROPERTY CARD CLEAN FRAMELESS
===================== */

.property-card{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    padding:0;

}


/* keep previous text styling */

.property-card-content{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

}


/* image only gets the effect */

/* =====================
PROPERTY IMAGE WRAPPER
===================== */

.property-card-image{

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

}



/* IMAGE */

.property-card-image img{

    width:100%;

    display:block;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:transform .45s ease;

}



/* HOVER ZOOM */

.property-card:hover .property-card-image img{

    transform:scale(1.05);

}



/* =====================
GRID ONLY VIEW
===================== */


.properties-layout.grid-mode .map-container{

    display:none;

}


.properties-layout.grid-mode .properties-scroll{

    width:100%;

}


.properties-layout.grid-mode .properties-grid{

    grid-template-columns:repeat(3,1fr);

}



/* =====================
MAP VIEW
===================== */


.properties-layout.map-mode .map-container{

    display:block;

}


.properties-layout.map-mode .properties-scroll{
    width:50%;
}

.properties-layout.map-mode .map-container{
    width:50%;
}





@media (min-width:901px){

    .mobile-map-layout{
        display:none !important;
    }

}

@media (max-width:900px){

    .properties-layout,
    .desktop-filters{
        display:none !important;
    }

}

/* =========================
PROPERTY PAGINATION
========================= */

.property-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:28px 10px 40px;
}

.property-pagination-button{
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#111;
    border-radius:999px;
    padding:10px 18px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.property-pagination-button:hover:not(:disabled){
    background:#111;
    color:#fff;
}

.property-pagination-button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.property-pagination-info{
    color:#666;
    font-size:14px;
    white-space:nowrap;
}


/* ======================================
   PROPERTY CARD IMAGE NAVIGATION
====================================== */

.property-card-image {
    position: relative;
}

.property-image-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 32px;
    height: 42px;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    z-index: 10;

    box-shadow: none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.property-image-prev {
    left: 14px;
}

.property-image-next {
    right: 14px;
}

.property-card-image:hover .property-image-arrow,
.property-image-arrow:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.property-image-arrow:hover {
    background: transparent;

    transform:
        translateY(-50%)
        scale(1.08);
}

.property-image-count {
    position: absolute;

    bottom: 14px;
    left: 50%;

    transform: translateX(-50%);

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(0,0,0,.55);
    color: #fff;

    font-size: 12px;
    line-height: 1;

    pointer-events: none;

    opacity: 0;
    transition: opacity .2s ease;

    z-index: 9;
}

.property-card-image:hover .property-image-count {
    opacity: 1;
}


/* ======================================
   MOBILE PROPERTY IMAGE NAVIGATION
   ====================================== */

@media (max-width: 900px) {

    .property-image-arrow {
        display: none !important;
    }

}

/* Recent property photo markers */
.recent-property-photo-marker {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    cursor: pointer;
    overflow: visible;
}

.recent-property-photo-ring {
    width: 58px;
    height: 58px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899, #3b82f6);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(124, 58, 237, 0.30);
    box-sizing: border-box;
}

.recent-property-photo-ring img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.recent-property-photo-marker:hover .recent-property-photo-ring {
    transform: scale(1.08);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(124, 58, 237, 0.45);
}