/* ===========================================================
   Godaddy Booking CSS
   Minimal / red palette
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===========================================================
   RESET
=========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--cream);

    color:var(--ink);

    overflow-x:hidden;

    line-height:1.6;

}

/* ===========================================================
   VARIABLES
=========================================================== */

:root{

    --red:#A6342A;

    --red-dark:#7C2620;

    --red-soft:#F6E4E1;

    --ink:#211D1A;

    --ink-soft:#726A63;

    --cream:#FBF8F4;

    --sand:#F1EAE1;

    --white:#ffffff;

    --line:#E7DED4;

    --shadow-sm:0 2px 12px rgba(33,29,26,.06);

    --shadow-md:0 14px 34px rgba(33,29,26,.10);

    --radius-lg:16px;

    --radius-md:10px;

}

/* ===========================================================
   COMMON
=========================================================== */

.container{

    width:94%;

    max-width:1500px;

    margin:auto;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    cursor:pointer;

    font-family:'Inter',sans-serif;

}

/* ===========================================================
   EYEBROW / SIGNATURE DEVICE
   Used above every section heading - a short red rule plus a
   small uppercase label. Repeats consistently so it reads as
   a system, not decoration.
=========================================================== */

.eyebrow{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:14px;

    color:var(--red);

    font-size:13px;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.eyebrow::before{

    content:"";

    width:28px;

    height:2px;

    background:var(--red);

}

/* ===========================================================
   HEADER
=========================================================== */

header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:.4s;

}

/* For pages without a hero image behind them - sits in normal
   document flow (no manual top-padding needed on the page) with
   a solid background always on, since there's no dark photo to
   give white nav text contrast against. */

header.header-solid{

    position:relative;

    background:var(--ink);

    box-shadow:0 4px 20px rgba(33,29,26,.10);

}

.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 0;
}


.logo h2{
    color:var(--white);
    font-family:'Fraunces',serif;
    font-weight:600;
    letter-spacing:-.01em;
}

.logo{
    display: flex;
    align-items: center;   /* Vertically centers the text */
    gap: 15px;             /* Space between logo and text */
}

.logo img{
    height: 89px;
    width: auto;
    display: block;
}

.logo h2{
    margin: 0;
    line-height: 1;
    font-size: large;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:white;

    font-weight:500;

    font-size:15px;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--red);

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}

nav a.active::after{

    width:100%;

}

/* ===========================================================
   NAV DROPDOWN (Properties -> property types)
=========================================================== */

.nav-item-dropdown{

    position:relative;

}

/* Invisible bridge covering the gap between the trigger and the
   dropdown menu below it. Without this, the cursor briefly leaves
   every hoverable element while crossing that empty space, CSS
   :hover breaks, and the menu closes before the mouse arrives. */

.nav-item-dropdown::after{

    content:"";

    position:absolute;

    top:100%;

    left:0;

    width:220px;

    height:18px;

}

.nav-dropdown-trigger{

    display:flex;

    align-items:center;

    gap:6px;

}

.nav-caret{

    font-size:10px;

    transition:.25s;

    cursor:pointer;

}

.nav-item-dropdown:hover .nav-caret,

.nav-item-dropdown.open .nav-caret{

    transform:rotate(180deg);

}

.nav-dropdown-menu{

    display:none;

    position:absolute;

    top:calc(100% + 18px);

    left:0;

    background:var(--white);

    border-radius:10px;

    box-shadow:var(--shadow-md);

    min-width:200px;

    padding:8px 0;

    z-index:50;

}

.nav-item-dropdown:hover .nav-dropdown-menu,

.nav-item-dropdown.open .nav-dropdown-menu{

    display:block;

}

.nav-dropdown-menu a{

    display:block;

    padding:11px 20px;

    color:var(--ink);

    font-size:14px;

    font-weight:500;

    white-space:nowrap;

}

.nav-dropdown-menu a::after{

    content:none;

}

.nav-dropdown-menu a:hover{

    background:var(--cream);

    color:var(--red);

}

.book-btn{

    background:var(--red);

    color:var(--white);

    padding:12px 28px;

    border-radius:30px;

    font-weight:600;

    font-size:14px;

    transition:.35s;

}

.book-btn:hover{

    background:var(--red-dark);

}

/* ===========================================================
   HERO
=========================================================== */

.hero{

    height:78vh;

    position:relative;

    overflow:hidden;

}

/* ===========================================================
   SLIDES
=========================================================== */

.slides{

    position:absolute;

    width:100%;

    height:100%;

}

.slide{

    position:absolute;

    width:100%;

    height:100%;

    opacity:0;

    transition:opacity 1s ease;

}

.slide.active{

    opacity:1;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ===========================================================
   DARK OVERLAY
=========================================================== */

.overlay{

    position:absolute;

    width:100%;

    height:100%;

    background:linear-gradient(180deg, rgba(33,29,26,.35) 0%, rgba(33,29,26,.55) 100%);

    z-index:2;

}

/* ===========================================================
   HERO CONTENT
=========================================================== */

.hero-content{

    position:relative;

    z-index:5;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    text-align:center;

    padding:20px;

}

.hero-content h1{

    font-family:'Fraunces',serif;

    font-size:60px;

    font-weight:600;

    letter-spacing:-.01em;

    margin-bottom:15px;

    text-shadow:0 8px 25px rgba(0,0,0,.35);

}

.hero-content p{

    font-size:19px;

    margin-bottom:40px;

    color:#f1f1f1;

    letter-spacing:.02em;

}

/* ===========================================================
   SEARCH BOX
=========================================================== */

.search-box{

    background:rgba(255,255,255,.97);

    backdrop-filter:blur(10px);

    border-radius:50px;

    border-top:3px solid var(--red);

    box-shadow:var(--shadow-md);

    padding:10px;

    width:90%;

    max-width:700px;

    display:flex;

    align-items:center;

    gap:10px;

}

.search-box input{

    flex:1;

    height:52px;

    box-sizing:border-box;

    padding:0 20px;

    border:1px solid var(--line);

    border-radius:50px;

    outline:none;

    font-size:15px;

    font-family:'Inter',sans-serif;

    color:var(--ink);

}

.search-box input:focus{

    border-color:var(--red);

}

.search-box button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:52px;

    background:var(--red);

    color:white;

    border:none;

    border-radius:50px;

    padding:0 32px;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

    transition:.35s;

}

.search-box button:hover{

    background:var(--red-dark);

}

.search-box input,

.search-box select{

    height:52px;

    box-sizing:border-box;

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:1000px){

    .hero-content h1{

        font-size:44px;

    }

}

@media(max-width:768px){

    .nav-container{

        flex-direction:column;

        gap:20px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero{

        height:90vh;

    }

    .hero-content h1{

        font-size:32px;

    }

    .hero-content p{

        font-size:17px;

    }

    .search-box{
        flex-direction:column;
        width:92%;
        max-width:500px;
        padding:16px;
        gap:12px;
        border-radius:18px;
    }

    .search-box input{
        width:100%;
        height:60px;
        padding:0 18px;
        border-radius:10px;
        font-size:16px;
    }

    .search-box button{
        width:100%;
        height:60px;
        padding:0 20px;
        border-radius:10px;
        font-size:17px;
    }
}



/* ===========================================================
   FEATURED PROPERTIES
=========================================================== */

.properties{

    padding:100px 0;

    background:var(--cream);

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading h2{

    font-family:'Fraunces',serif;

    font-size:38px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:10px;

    letter-spacing:-.01em;

}

.section-heading p{

    color:var(--ink-soft);

    font-size:16px;

}

.property-grid{

    display:grid;

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

    gap:35px;

}

@media(max-width:1200px){

    .property-grid{

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

    }

}

@media(max-width:900px){

    .property-grid{

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

    }

}

/* ===========================================================
   PROPERTY CARD
=========================================================== */

.property-card{

    background:var(--white);

    border-radius:var(--radius-lg);

    overflow:hidden;

    border:1px solid var(--line);

    box-shadow:var(--shadow-sm);

    transition:.35s;

    position:relative;

}

.property-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}

.property-image-wrap{

    position:relative;

    overflow:hidden;

}

.property-card img{

    width:100%;

    height:200px;

    object-fit:cover;

    transition:.5s;

}

.property-card:hover img{

    transform:scale(1.05);

}

.property-content{

    padding:20px;

}

.discount-badge{

    position:absolute;

    top:14px;

    left:14px;

    z-index:2;

    display:inline-block;

    background:var(--red-soft);

    color:var(--red-dark);

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    box-shadow:0 4px 14px rgba(33,29,26,.18);

}

.property-content h3{

    font-family:'Fraunces',serif;

    font-size:20px;

    font-weight:600;

    margin-bottom:7px;

    color:var(--ink);

}

.property-content p{

    color:var(--ink-soft);

    font-size:13px;

    margin-bottom:16px;

}

.price{

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:20px;

}

.price-original{

    font-size:13px;

    font-weight:500;

    color:var(--ink-soft);

    text-decoration:line-through;

    text-decoration-color:var(--ink-soft);

}

.price-final{

    font-size:20px;

    font-weight:700;

    color:var(--ink);

}

.price-unit{

    font-size:13px;

    font-weight:500;

    color:var(--ink-soft);

}

.property-content button{

    width:100%;

    padding:13px;

    background:var(--ink);

    color:white;

    border:none;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.property-content button:hover{

    background:var(--red);

}

/* ===========================================================
   WHY CHOOSE US
=========================================================== */

.why-us{

    padding:100px 0;

    background:var(--white);

}

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:50px;

}

.feature{

    background:var(--cream);

    padding:35px;

    border-radius:var(--radius-lg);

    text-align:center;

    transition:.3s;

}

.feature:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-sm);

}

.icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    border-radius:50%;

    border:1.5px solid var(--red);

    font-size:26px;

}

.feature h3{

    font-family:'Fraunces',serif;

    font-weight:600;

    margin-bottom:12px;

    color:var(--ink);

}

.feature p{

    color:var(--ink-soft);

    font-size:14px;

}

/* ===========================================================
   DESTINATIONS
=========================================================== */

.destinations{

    padding:100px 0;

    background:var(--sand);

}

.destination-grid{

    width:90%;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.destination{

    height:230px;

    border-radius:var(--radius-lg);

    display:flex;

    align-items:flex-end;

    padding:25px;

    font-family:'Fraunces',serif;

    font-size:26px;

    font-weight:600;

    color:white;

    cursor:pointer;

    transition:.4s;

    background-size:cover;

    background-position:center;

    position:relative;

    overflow:hidden;

}

.destination::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(33,29,26,0) 40%, rgba(33,29,26,.75) 100%);

}

.destination span{

    position:relative;

    z-index:1;

    border-bottom:2px solid var(--red);

    padding-bottom:6px;

}

.destination:hover{

    transform:translateY(-4px);

}

/* ===========================================================
   TESTIMONIALS
=========================================================== */

.testimonials{

    padding:100px 0;

    background:var(--white);

}

.testimonial-container{

    width:90%;

    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:30px;

}

.testimonial{

    background:var(--cream);

    padding:35px;

    border-radius:var(--radius-lg);

    border-left:3px solid var(--red);

}

.testimonial p{

    font-family:'Fraunces',serif;

    font-style:italic;

    font-weight:500;

    color:var(--ink);

    margin-bottom:20px;

    line-height:1.7;

    font-size:17px;

}

.testimonial h4{

    color:var(--red);

    font-size:14px;

    font-weight:600;

}

/* ===========================================================
   FOOTER
=========================================================== */

footer{

    background:var(--ink);

    color:white;

    margin-top:80px;

}

.footer-content{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:70px 0;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

.footer-content h3{

    font-family:'Fraunces',serif;

    margin-bottom:20px;

}

.footer-content h4{

    margin-bottom:20px;

    font-size:15px;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--red-soft);

}

.footer-content p{

    color:#C9C2BB;

    line-height:1.8;

    font-size:14px;

}

.footer-content a{

    display:block;

    color:#C9C2BB;

    margin-bottom:12px;

    font-size:14px;

    transition:.3s;

}

.footer-content a:hover{

    color:var(--red-soft);

    padding-left:8px;

}

.copyright{

    text-align:center;

    padding:20px;

    border-top:1px solid rgba(255,255,255,.1);

    color:#9a9289;

    font-size:13px;

}

/* ===========================================================
   ANIMATIONS
=========================================================== */

.property-card,

.feature,

.destination,

.testimonial{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:992px){

    .footer-content{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .property-grid{

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

        gap:16px;

    }

    .destination-grid{

        grid-template-columns:1fr;

    }

    .testimonial-container{

        grid-template-columns:1fr;

    }

    .footer-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-content h4{

        margin-top:10px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .property-content h3{

        font-size:20px;

    }
}

@media(max-width:500px){

    .section-heading h2{

        font-size:25px;

    }

    .price-final{

        font-size:19px;

    }

    .destination{

        height:180px;

        font-size:21px;

    }

}

/* ===========================================================
   PROPERTIES LISTING PAGE
=========================================================== */

.listing-page{

    padding:60px 0 100px;

}

.destination-filter-banner{

    background:var(--red-soft);

    color:var(--red-dark);

    padding:14px 20px;

    border-radius:var(--radius-md);

    margin-bottom:25px;

    font-size:14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

}

.destination-filter-banner a{

    color:var(--red-dark);

    font-weight:600;

    text-decoration:underline;

}

.listing-toolbar{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:45px;

}

.search-input-wrap{

    flex:0 1 400px;

}

.search-box-group{

    display:flex;

    align-items:center;

    width:100%;

    background:var(--white);

    border:1px solid var(--line);

    border-radius:50px;

    box-shadow:var(--shadow-sm);

    padding:5px;

    transition:.2s;

}

.search-box-group:focus-within{

    border-color:var(--red);

    box-shadow:0 0 0 3px var(--red-soft);

}

.search-box-group input{

    flex:1;

    border:none;

    background:transparent;

    padding:10px 10px 10px 16px;

    outline:none;

}

.search-submit-btn{

    border:none;

    background:var(--red);

    color:#fff;

    width:42px;

    height:42px;

    border-radius:50%;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:15px;

    transition:.2s;

}

.search-submit-btn:hover{

    background:var(--red-dark);

    transform:scale(1.05);

}

.search-icon{

    width:18px;

    height:18px;

    flex-shrink:0;

}

.filter-group{

    grid-column:3;

    display:flex;

    align-items:center;

    margin-left:auto;

    gap:12px;

    flex-shrink:0;

}

.filter-label{

    display:flex;

    align-items:center;

    gap:8px;

    border:1px solid var(--line);

    border-radius:50px;

    padding:9px 16px;

    background:var(--white);

    box-shadow:var(--shadow-sm);

    transition:.2s;

}

.filter-label:focus-within{

    border-color:var(--red);

    box-shadow:0 0 0 3px var(--red-soft);

}

.filter-label i{

    color:var(--red);

    font-size:13px;

}

.filter-label select{

    border:none;

    background:transparent;

    padding:0 4px;

    font-size:14px;

}

.filter-label select:focus{

    border-color:transparent;

    outline:none;

}

.listing-toolbar input,

.listing-toolbar select{

    outline:none;

    font-size:15px;

    font-family:'Inter',sans-serif;

    color:var(--ink);

}

@media(max-width:768px){

    .listing-page{

        padding:40px 0 60px;

    }

    .listing-toolbar{

        display:flex;

        flex-direction:column;

        align-items:stretch;

    }

    .search-input-wrap{

        flex:1 1 auto;

    }

    .search-box-group{

        max-width:none;

    }

    .filter-group{

        margin-left:0;

        flex-direction:column;

        align-items:stretch;

    }

    .filter-label{

        justify-content:space-between;

    }

}


/* after eyebro */

.eyebrow::after{

    content:"";

    width:28px;

    height:2px;

    background:var(--red);

}



/* ===========================================================
   PROPERTY DETAILS PAGE
=========================================================== */

.property-details-page{

    padding:50px 0 100px;

}

/* ===========================
   GALLERY
============================ */

.pd-gallery{

    margin-bottom:35px;

}

.pd-gallery-main{

    position:relative;

    width:100%;

    height:460px;

    border-radius:var(--radius-lg);

    overflow:hidden;

    background:var(--sand);

}

.pd-gallery-main img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.pd-discount-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--red-soft);

    color:var(--red-dark);

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

}

.pd-gallery-thumbs{

    display:flex;

    gap:12px;

    margin-top:12px;

    overflow-x:auto;

    padding-bottom:4px;

}

.pd-thumb{

    width:90px;

    height:70px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    border:2px solid transparent;

    opacity:.65;

    flex-shrink:0;

    transition:.2s;
}

.pd-thumb:hover{

    opacity:1;

}

.pd-thumb.active{

    border-color:var(--red);

    opacity:1;

}

/* ===========================
   LAYOUT
============================ */

.pd-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}

/* ===========================
   HEADER
============================ */

.pd-header{

    margin-bottom:10px;

}

.pd-header h1{

    font-family:'Fraunces',serif;

    font-size:32px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:10px;

}

.pd-location{

    color:var(--ink-soft);

    font-size:15px;

    margin-bottom:6px;
}

.pd-landmark{

    color:var(--ink-soft);

    font-size:14px;

    margin-bottom:14px;

}

.pd-landmark i{

    color:var(--red);

    margin-right:4px;

}

.pd-badges{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:10px;

}

.pd-badges .badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 14px;

    border-radius:30px;

    background:var(--sand);

    color:var(--ink);

    font-size:13px;

    font-weight:500;

}

/* ===========================
   CONTENT SECTIONS
============================ */

.pd-section{

    margin-top:35px;

    padding-top:35px;

    border-top:1px solid var(--line);

}

.pd-section h2{

    font-family:'Fraunces',serif;

    font-size:22px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:16px;

}

.pd-description{

    color:var(--ink-soft);

    line-height:1.8;

    font-size:15px;

}

.pd-map-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

    color:var(--red);

    font-weight:600;

    font-size:14px;

}

.pd-map-link i{

    font-size:15px;

}

/* ===========================
   AMENITIES
============================ */

.pd-amenities-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:14px;

}

.pd-amenity{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--ink);

    font-size:14px;

}

.pd-amenity i{

    color:var(--red);

    font-size:15px;

}

/* ===========================
   ROOM TYPES
============================ */

.pd-no-rooms{

    color:var(--ink-soft);

    font-size:14px;

}

.pd-rooms-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.pd-room-card{

    display:grid;

    grid-template-columns:auto 130px 1fr auto auto;

    align-items:center;

    gap:18px;

    padding:16px;

    border:1px solid var(--line);

    border-radius:var(--radius-lg);

    background:var(--white);

    cursor:pointer;

    transition:.2s;

}

.pd-room-card:hover{

    box-shadow:var(--shadow-sm);

}

.pd-room-card.selected{

    border-color:var(--red);

    box-shadow:0 0 0 3px var(--red-soft);

}

.pd-room-radio{

    width:18px;

    height:18px;

    accent-color:var(--red);

    cursor:pointer;

}

.pd-room-image{

    width:130px;

    height:90px;

    object-fit:cover;

    border-radius:10px;

}

.pd-room-info h3{

    font-family:'Fraunces',serif;

    font-size:17px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:6px;

}

.pd-room-desc{

    color:var(--ink-soft);

    font-size:13px;

    margin-bottom:8px;

    line-height:1.5;

}

.pd-room-meta{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    font-size:13px;

    color:var(--ink-soft);

}

.pd-room-meta i{

    color:var(--red);

    margin-right:4px;

}

.pd-room-price{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:2px;

    text-align:right;

    white-space:nowrap;

}

.pd-room-price .price-original{

    font-size:13px;

}

.pd-room-price .price-final{

    font-size:19px;

}

.pd-room-selected-check{

    color:var(--line);

    font-size:22px;

    transition:.2s;

}

.pd-room-card.selected .pd-room-selected-check{

    color:var(--red);

}

/* ===========================
   BOOKING SIDEBAR
============================ */

.pd-sidebar{

    position:sticky;

    top:20px;

}

.pd-booking-box{

    background:var(--white);

    border:1px solid var(--line);

    border-radius:var(--radius-lg);

    padding:26px;

    box-shadow:var(--shadow-md);

}

.pd-booking-price{

    display:flex;

    align-items:baseline;

    gap:6px;

    margin-bottom:22px;

    flex-wrap:wrap;

}

.pd-booking-from{

    display:block;

    width:100%;

    font-size:12px;

    color:var(--ink-soft);

    text-transform:uppercase;

    letter-spacing:.06em;

    margin-bottom:4px;

}

.pd-booking-amount{

    font-family:'Fraunces',serif;

    font-size:28px;

    font-weight:600;

    color:var(--ink);

}

.pd-booking-unit{

    font-size:13px;

    color:var(--ink-soft);

}

.pd-booking-field{

    margin-bottom:16px;

}

.pd-booking-field label{

    display:block;

    font-size:12px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:6px;

    text-transform:uppercase;

    letter-spacing:.04em;

}

.pd-booking-field input,

.pd-booking-field select{

    width:100%;

    padding:12px 14px;

    border:1px solid var(--line);

    border-radius:8px;

    font-size:14px;

    font-family:'Inter',sans-serif;

    color:var(--ink);

    outline:none;

}

.pd-booking-field input:focus,

.pd-booking-field select:focus{

    border-color:var(--red);

}

.pd-book-btn{

    width:100%;

    padding:15px;

    background:var(--red);

    color:#fff;

    border:none;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.pd-book-btn:hover{

    background:var(--red-dark);

}

.pd-book-btn:disabled{

    background:var(--line);

    color:var(--ink-soft);

    cursor:not-allowed;

}

.pd-booking-note{

    text-align:center;

    font-size:12px;

    color:var(--ink-soft);

    margin-top:12px;

}

/* ===========================
   RESPONSIVE
============================ */

@media(max-width:992px){

    .pd-layout{

        grid-template-columns:1fr;

    }

    .pd-sidebar{

        position:static;

    }

    .pd-gallery-main{

        height:320px;

    }

}

@media(max-width:768px){

    .property-details-page{

        padding:30px 0 70px;

    }

    .pd-room-card{

        grid-template-columns:auto 1fr auto;

        grid-template-areas:

            "radio image check"

            "info info info"

            "price price price";

    }

    .pd-room-radio{

        grid-area:radio;

    }

    .pd-room-image{

        grid-area:image;

        width:100%;

        height:120px;

    }

    .pd-room-selected-check{

        grid-area:check;

    }

    .pd-room-info{

        grid-area:info;

    }

    .pd-room-price{

        grid-area:price;

        flex-direction:row;

        align-items:baseline;

        text-align:left;

        margin-top:8px;

    }

}

@media(max-width:500px){

    .pd-header h1{

        font-size:26px;

    }

    .pd-gallery-main{

        height:240px;

    }

}


/* ===========================================================
   MOBILE NAV TOGGLE
=========================================================== */

.nav-toggle{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;

    padding:6px;

}

.nav-collapse{

    display:flex;

    align-items:center;

    gap:35px;

}

@media(max-width:768px){

    .nav-container{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .nav-toggle{

        display:block;

    }

    .nav-collapse{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:var(--ink);

        flex-direction:column;

        align-items:stretch;

        gap:0;

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease;

    }

    .nav-collapse.open{

        max-height:500px;

    }

    nav{

        flex-direction:column;

        gap:0;

        width:100%;

    }

    nav a{

        padding:16px 24px;

        border-bottom:1px solid rgba(255,255,255,.08);

        width:100%;

    }

    nav a::after{

        display:none;

    }

    .nav-item-dropdown::after{

        display:none;

    }

    .nav-dropdown-menu{

        position:static;

        box-shadow:none;

        background:rgba(255,255,255,.05);

        border-radius:0;

        padding:0;

        display:none;

    }

    .nav-item-dropdown:hover .nav-dropdown-menu{

      display:none;

    }
    .nav-item-dropdown.open .nav-dropdown-menu{

        display:block;

    }

    .nav-dropdown-menu a{

        padding-left:40px;

        color:#d8d2cb;

    }

    .book-btn{

        margin:16px 24px;

        text-align:center;

    }

    .logo img{

        height:48px;

    }

    .logo h2{

        font-size:16px;

    }

    .nav-container{

        padding:16px 0;

    }

    .hero-content{

        padding-top:90px;

        justify-content:flex-start;

    }

    .hero-content h1{

        font-size:26px;

        line-height:1.3;

    }

    .hero-content p{

        font-size:14px;

        margin-bottom:28px;

    }

}

/* ===========================================================
   SHOW MORE BUTTON (homepage -> properties.php)
=========================================================== */

.show-more-wrap{

    text-align:center;

    margin-top:50px;

}

.show-more-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:var(--ink);

    color:#fff;

    padding:15px 36px;

    border-radius:30px;

    font-weight:600;

    font-size:15px;

    transition:.3s;

}

.show-more-btn:hover{

    background:var(--red);

}

/* ===========================================================
   BOOKING CONFIRMATION MODAL
=========================================================== */

.bkc-overlay{

    position:fixed;

    inset:0;

    background:rgba(33,29,26,.55);

    backdrop-filter:blur(4px);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2000;

    padding:20px;

}

.bkc-modal{

    position:relative;

    background:var(--white);

    border-radius:var(--radius-lg);

    padding:44px 36px 36px;

    max-width:420px;

    width:100%;

    text-align:center;

    box-shadow:var(--shadow-md);

    animation:bkcPopIn .3s ease;

}

@keyframes bkcPopIn{

    from{

        opacity:0;

        transform:translateY(14px) scale(.97);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.bkc-close{

    position:absolute;

    top:16px;

    right:16px;

    background:none;

    border:none;

    color:var(--ink-soft);

    font-size:18px;

    cursor:pointer;

    padding:6px;

    line-height:1;

    transition:.2s;

}

.bkc-close:hover{

    color:var(--red);

}

.bkc-icon{

    font-size:48px;

    color:#1e7e42;

    margin-bottom:18px;

}

.bkc-modal h2{

    font-family:'Fraunces',serif;

    font-size:24px;

    font-weight:600;

    color:var(--ink);

    margin-bottom:10px;

}

.bkc-modal p{

    color:var(--ink-soft);

    font-size:14px;

    line-height:1.6;

    margin-bottom:6px;
}

.bkc-call-note{

    margin-top:20px;

    margin-bottom:10px;

    font-size:13px;

    font-weight:600;

    color:var(--ink);

}

.bkc-call-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    background:var(--red);

    color:#fff;

    padding:14px;

    border-radius:8px;

    font-weight:600;

    font-size:15px;

    transition:.3s;

}

.bkc-call-btn:hover{

    background:var(--red-dark);

}

@media(max-width:500px){

    .bkc-modal{

        padding:36px 24px 28px;

    }

    .bkc-modal h2{

        font-size:20px;

    }

}

/* ===========================================================
   HEADER ACCOUNT AREA
=========================================================== */

.nav-account{

    display:flex;

    align-items:center;

    gap:14px;

    margin-left:10px;

}

.nav-account-name{

    display:flex;

    align-items:center;

    gap:6px;

    color:white;

    font-size:14px;

    font-weight:500;

}

.nav-account-name i{

    color:var(--red);

    font-size:13px;

}

.nav-login-link,

.nav-logout-link{

    color:white;

    font-weight:600;

    font-size:14px;

    position:relative;

}

.nav-login-link::after,

.nav-logout-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--red);

    transition:.35s;

}

.nav-login-link:hover::after,

.nav-logout-link:hover::after{

    width:100%;

}

@media(max-width:768px){

    .nav-account{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        margin:16px 24px 0;

        padding-top:16px;

        border-top:1px solid rgba(255,255,255,.08);

    }

}

/* ===========================================================
   WHATSAPP FLOATING BUTTON - sitewide, always visible
=========================================================== */

.whatsapp-float{

    position:fixed;

    bottom:24px;

    right:24px;

    width:60px;

    height:60px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    box-shadow:0 6px 20px rgba(0,0,0,.25);

    z-index:1500;

    transition:.25s;

    text-decoration:none;

}

.whatsapp-float:hover{

    transform:scale(1.08);

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

}

@media(max-width:768px){

    .whatsapp-float{

        width:52px;

        height:52px;

        font-size:26px;

        bottom:18px;

        right:18px;

    }

}

/* ===========================================================
   TESTIMONIAL STARS
=========================================================== */

.testimonial-stars{

    margin-bottom:14px;

}

.testimonial-stars i{

    color:var(--line);

    font-size:14px;

    margin-right:2px;

}

.testimonial-stars i.filled{

    color:#f5a623;

}

/* ===========================================================
   FOOTER SOCIAL ICONS
=========================================================== */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:18px;

}

.footer-social a{

    width:38px;

    height:38px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:15px;

    transition:.25s;

}

.footer-social a:hover{

    background:var(--red);

    transform:translateY(-3px);

}

.price-range-group{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--white);

    border:1px solid var(--line);

    border-radius:50px;

    padding:12px 18px;

    box-shadow:var(--shadow-sm);

    transition:.2s;

}

.price-range-group:focus-within{

    border-color:var(--red);

    box-shadow:0 0 0 3px var(--red-soft);

}

.price-range-icon{

    color:var(--red);

    font-size:13px;

    flex-shrink:0;

}

.price-range-input{

    width:56px;

    border:none;

    background:transparent;

    padding:0;

    font-size:14px;

    font-family:'Inter',sans-serif;

    color:var(--ink);

    text-align:center;

    -moz-appearance:textfield;

}

.price-range-input::-webkit-outer-spin-button,
.price-range-input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}

.price-range-input:focus{

    outline:none;

}

.price-range-input::placeholder{
    
    color:var(--ink-soft);
}
    

.price-range-divider{

    width:10px;

    height:1px;

    background:var(--line);

    flex-shrink:0;

}

@media(max-width:600px){

    .price-range-group{

        width:100%;

        justify-content:center;

    }

}

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

.pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-top:60px;

    flex-wrap:wrap;

}

.pagination-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:30px;

    background:var(--white);

    border:1px solid var(--line);

    color:var(--ink);

    font-weight:600;

    font-size:14px;

    transition:.2s;

}

.pagination-btn:hover{

    border-color:var(--red);

    color:var(--red);

}

.pagination-disabled{

    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;

}

.pagination-numbers{

    display:flex;

    align-items:center;

    gap:6px;

}

.pagination-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    color:var(--ink-soft);

    font-weight:600;

    font-size:14px;

    transition:.2s;

}

.pagination-number:hover{

    background:var(--sand);

}

.pagination-number.active{

    background:var(--red);

    color:#fff;

}

.pagination-ellipsis{

    color:var(--ink-soft);

    padding:0 4px;

}

@media(max-width:600px){

    .pagination{

        gap:12px;

    }

    .pagination-btn{

        padding:10px 16px;

        font-size:13px;

    }

    .pagination-number{

        width:32px;

        height:32px;

        font-size:13px;

    }

}