@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');

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

body{
    font-family:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background:#fafafa;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

button, input, select, textarea{
    font-family:inherit;
}

/* keep the footer pinned to the bottom of the viewport */
footer{
    margin-top:auto;
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
    background:white;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.logo{
    font-size:24px;
    font-weight:bold;
    display:flex;
    align-items:center;
    gap:10px;
    color:#1a1a1a;
    text-decoration:none;
}

.logo-img{
    height:38px;
    width:auto;
}

nav a{
    margin-left:25px;
    text-decoration:none;
    color:#333;
}

.hero{
    padding:80px 20px 24px;   /* less gap below the search bar */
    text-align:center;
}

.hero h1{
    font-size:48px;
    margin-bottom:15px;
}

.hero p{
    color:#666;
    margin-bottom:40px;
}

.search-box{
    max-width:1200px;
    margin:auto;
    background:white;
    border-radius:60px;
    display:flex;
    gap:15px;
    padding:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.search-item{
    flex:1;
    text-align:left;
}

.label{
    display:block;
    font-size:12px;
    font-weight:bold;
    margin-bottom:5px;
}

select,input{
    width:100%;
    border:none;
    outline:none;
    font-size:16px;
}

button{
    background:#b8923a;
    color:white;
    border:none;
    border-radius:40px;
    padding:15px 35px;
    cursor:pointer;
}

.featured{
    padding:32px 50px 80px;   /* less gap above "Our Havens" */
}

#results:empty{
    display:none;
}

.featured h2{
    margin-bottom:30px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr); /* 3 havens per row on desktop */
    gap:25px;
}
@media(max-width:900px){ .cards{ grid-template-columns:repeat(2, 1fr); } } /* tablet: 2 per row */
@media(max-width:520px){ .cards{ grid-template-columns:1fr; } }            /* phone: 1 per row */

.card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    display:block;
    text-decoration:none;
    color:#333;
    transition:transform .2s, box-shadow .2s;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,0,0,.15);
}

.card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.card h3{
    padding:15px;
}

.card p{
    padding:0 15px 20px;
    color:#666;
}

.amenities{
    padding:80px 50px;
}

.amenity-grid{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
}

.amenity-grid div{
    background:white;
    padding:20px;
    border-radius:15px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

/* brand-gold line icon used on amenity lists */
.amenity-ico{
    width:30px;
    height:30px;
    stroke:#b8923a;
    stroke-width:1.7;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none;
}

footer{
    margin-top:50px;
    background:#222;
    color:white;
    text-align:center;
    padding:25px;
}

@media(max-width:900px){
    .featured{ padding:60px 24px; }
    .amenities{ padding:60px 24px; }
}

@media(max-width:768px){

    header{
        flex-direction:column;
        gap:12px;
        padding:16px 20px;
    }

    nav a{ margin-left:16px; }

    .hero{ padding:50px 16px; }
    .hero h1{ font-size:34px; }

    .search-box{
        flex-direction:column;
        border-radius:20px;
        gap:8px;
    }

    .featured,
    .amenities{ padding:48px 18px; }

    .haven-photo{ height:380px; }

    .guest-popup{
        width:100%;
        left:0;
        right:0;
    }
}

@media(max-width:520px){
    .hero h1{ font-size:28px; }
    .hero p{ margin-bottom:24px; }

    .haven-amenities{ grid-template-columns:1fr; }

    .featured,
    .amenities{ padding:40px 14px; }

    .logo{ font-size:20px; }
}

.guest-selector{
    position:relative;
}

.guest-trigger{
    cursor:pointer;
}

.guest-popup.show{
    display:block;
}

.value{
    display:block;
    color:#666;
    margin-top:5px;
}

.date-display{
    cursor:pointer;
}

.search-item select{
    margin-top:5px;
    color:#444;
    background:transparent;
    cursor:pointer;
    font-size:15px;
}

.date-display.empty{
    color:#999;
}

.guest-popup{
    display:none;
    position:absolute;
    top:80px;
    right:0;
    width:350px;
    background:white;
    border-radius:20px;
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    z-index:999;
}

.guest-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.guest-row button{
    width:35px;
    height:35px;
    border-radius:50%;
    border:1px solid #ccc;
    background:white;
    color:black;
    font-size:18px;
    cursor:pointer;
    padding:0;
}

.guest-row span{
    margin:0 12px;
}

.haven-detail{
    width:100%;
    max-width:1200px;        /* match the site width (header, search bar, results) */
    margin:40px auto;
    padding:0 20px;
}

.back-link{
    display:inline-block;
    margin-bottom:20px;
    text-decoration:none;
    color:#b8923a;
    font-weight:bold;
}

.haven-photo{
    width:100%;
    height:620px;           /* fixed size like the design peg */
    object-fit:contain;     /* show the WHOLE photo, letterboxed, no cropping */
    background:#eceae4;      /* light fill behind letterboxed photos */
    border-radius:22px;
    box-shadow:inset 0 0 0 1px #efe9dd;   /* subtle 1px inner border */
    margin-bottom:14px;
    cursor:zoom-in;
}

/* floating photo viewer (lightbox) */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    z-index:2000;
    cursor:zoom-out;
}

.lightbox[hidden]{
    display:none;
}

.lightbox img{
    max-width:92vw;
    max-height:90vh;
    border-radius:12px;
    box-shadow:0 12px 50px rgba(0,0,0,.6);
}

.lightbox-close{
    position:absolute;
    top:22px;
    right:30px;
    color:#fff;
    font-size:30px;
    cursor:pointer;
    line-height:1;
}

.haven-thumbs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.haven-thumb{
    width:90px;
    height:70px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    border:2px solid transparent;
    transition:border-color .15s;
}

.haven-thumb:hover{
    border-color:#b8923a;
}
.haven-thumb.active{
    border-color:#b8923a;
    box-shadow:0 0 0 1px #b8923a;
}

.haven-detail h1{
    font-size:26px;
    margin-bottom:10px;
}

.haven-rate{
    color:#b8923a;
    font-size:20px;
    margin-bottom:10px;
}

.haven-rate span{
    color:#666;
    font-size:16px;
}

.haven-price{
    font-size:18px;
    font-weight:bold;
    color:#b8923a;
    margin-bottom:20px;
}

.haven-meta{
    color:#555;
    font-size:15px;
    margin-bottom:12px;
}

.haven-divider{
    border:none;
    border-top:1px solid #e6e6e6;
    margin:24px 0;
}

.haven-detail h3{
    margin-bottom:6px;
}

.haven-desc{
    color:#555;
    line-height:1.6;
    margin-bottom:25px;
}

.haven-amenities{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:15px 0 30px;
}

.haven-amenities li{
    background:white;
    padding:15px;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    gap:10px;
}
.haven-amenities li .amenity-ico{ width:24px; height:24px; }

.book-btn{
    font-size:16px;
}

/* haven detail two-column layout */
.haven-grid{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:40px;
    align-items:start;
}

@media(max-width:768px){
    .haven-grid{ grid-template-columns:1fr; }
}

/* booking widget */
.booking-card{
    position:sticky;
    top:20px;
    background:white;
    border:1px solid #e6e6e6;
    border-radius:16px;
    padding:24px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.booking-title{
    margin:0 0 18px;
    font-size:22px;
}

.booking-fields{
    border:1px solid #b0b0b0;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:16px;
}

.date-row{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.date-cell{
    background:white;
    color:#222;
    border:none;
    border-bottom:1px solid #b0b0b0;
    border-radius:0;
    padding:10px 12px;
    text-align:left;
    cursor:pointer;
}

.date-cell:first-child{
    border-right:1px solid #b0b0b0;
}

.cell-label{
    display:block;
    font-size:11px;
    font-weight:bold;
    letter-spacing:.4px;
    margin-bottom:4px;
}

.date-value{
    display:block;
    font-size:14px;
    color:#222;
}

.date-value.empty{
    color:#888;
}

/* hours of stay dropdown */
.stay-cell{
    padding:10px 12px;
    border-bottom:1px solid #b0b0b0;
}

/* auto check-out time (read-only) */
.checkout-time{
    display:block;
    font-size:14px;
    color:#222;
}

.checkout-time.empty{
    color:#888;
}

/* check-in / check-out time info */
.checkin-info{
    padding:10px 12px;
    border-bottom:1px solid #b0b0b0;
}

.checkin-info:empty{
    display:none;
}

.ci-time{
    display:block;
    font-size:13px;
    color:#444;
    line-height:1.45;
}

.stay-cell select{
    width:100%;
    border:none;
    outline:none;
    background:white;
    font-size:14px;
    color:#222;
    cursor:pointer;
}

.stay-cell select:disabled{
    color:#717171;
    cursor:default;
}

/* optional add-ons */
.addons{
    border:1px solid #e6e6e6;
    border-radius:12px;
    padding:6px 14px;
    margin-bottom:16px;
}

.addons-title{
    font-size:11px;
    font-weight:bold;
    letter-spacing:.4px;
    color:#717171;
    padding:10px 0 4px;
}

.addon-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
}

.addon-row + .addon-row{
    border-top:1px solid #ececec;
}

/* price computation panel */
.price-breakdown{
    margin-bottom:16px;
}

.deposit-note{
    margin:10px 0 0;
    font-size:12px;
    color:#717171;
    line-height:1.5;
}

.price-msg{
    margin:0;
    font-size:14px;
    color:#717171;
}

.price-msg.price-error{
    color:#c1123e;
    font-weight:600;
}

.price-row{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    color:#444;
    padding:6px 0;
}

.price-row.price-total{
    border-top:1px solid #e6e6e6;
    margin-top:4px;
    padding-top:10px;
    font-weight:bold;
    font-size:16px;
    color:#222;
}

.price-row.price-balance{
    border-top:1px solid #e6e6e6;
    margin-top:4px;
    padding-top:10px;
    font-weight:600;
    color:#222;
}

/* availability calendar — Airbnb-style two-month panel, floating in the screen center */
.calendar-popup{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:640px;
    max-width:92vw;
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 48px rgba(0,0,0,.30), 0 0 0 100vmax rgba(0,0,0,.45);
    padding:24px 28px;
    z-index:1000;
    font-family:inherit;
    color:#222;
}

.cal-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.cal-heading h3{
    margin:0 0 4px;
    font-size:22px;
    font-weight:600;
}

.cal-heading p{
    margin:0;
    font-size:14px;
    color:#717171;
}

.cal-fields{
    display:flex;
    align-items:stretch;
    gap:8px;
}

.cal-field{
    position:relative;
    min-width:130px;
    padding:8px 34px 8px 14px;
    border:1px solid #b0b0b0;
    border-radius:10px;
    cursor:pointer;
}

.cal-field.active{
    border:2px solid #222;
    padding:7px 33px 7px 13px;
}

.cal-field-value{
    display:block;
    margin-top:2px;
    font-size:14px;
    color:#222;
}

.cal-field-value.ph{
    color:#717171;
}

.cal-clear-x{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    padding:0;
    background:#fff;
    color:#717171;
    border:none;
    border-radius:50%;
    font-size:11px;
    line-height:1;
    cursor:pointer;
}

.cal-clear-x:hover{
    background:#f0f0f0;
    color:#222;
}

.cal-months{
    position:relative;
    display:flex;
    gap:40px;
    justify-content:center;
}

.cal-month{
    flex:1;
    max-width:280px;
}

.cal-month-title{
    text-align:center;
    font-size:16px;
    font-weight:600;
    margin-bottom:16px;
}

.cal-nav{
    position:absolute;
    top:-4px;
    width:34px;
    height:34px;
    padding:0;
    background:#fff;
    color:#222;
    border:none;
    border-radius:50%;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.cal-nav:hover:not(:disabled){
    background:#f0f0f0;
}

.cal-prev{ left:0; }
.cal-next{ right:0; }

.cal-nav:disabled{
    color:#d0d0d0;
    cursor:not-allowed;
}

.cal-weekdays,
.cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
}

.cal-weekdays{
    margin-bottom:6px;
}

.cal-weekdays span{
    text-align:center;
    font-size:12px;
    color:#222;
    padding:4px 0;
}

.cal-grid{
    gap:2px;
}

.cal-day{
    aspect-ratio:1;
    padding:0;
    background:#fff;
    color:#222;
    border:1px solid transparent;
    border-radius:50%;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cal-day:hover:not(.disabled):not(.empty):not(.selected){
    border-color:#222;
}

.cal-day.empty{
    cursor:default;
}

.cal-day.disabled{
    color:#c4c4c4;
    text-decoration:line-through;
    cursor:not-allowed;
}

.cal-day.selected{
    background:#222;
    color:#fff;
    border-color:#222;
}

.cal-day.in-range{
    background:#f0f0f0;
    border-radius:0;
}

.cal-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:20px;
}

.cal-kbd{
    font-size:18px;
    color:#222;
    border:1px solid #ccc;
    border-radius:6px;
    padding:1px 6px;
    cursor:default;
}

.cal-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.cal-text-btn{
    background:#fff;
    color:#222;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
}

.cal-text-btn:hover{
    background:#f0f0f0;
}

.cal-close-btn{
    background:#222;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 22px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

.cal-close-btn:hover{
    background:#000;
}

@media(max-width:760px){
    .calendar-popup{
        width:92vw;
    }
    .cal-top{
        flex-direction:column;
        gap:14px;
    }
    .cal-months{
        flex-direction:column;
        gap:24px;
    }
    .cal-month{
        max-width:none;
    }
}

.guest-toggle{
    width:100%;
    background:white;
    color:#222;
    border:none;
    border-radius:0;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    text-align:left;
}

.guest-toggle-text #guestSummary{
    font-size:15px;
}

.chevron{
    font-size:18px;
    color:#222;
}

.guest-panel{
    padding:4px 12px 12px;
    border-top:1px solid #ececec;
}

.guest-stepper-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
}

.guest-stepper-row + .guest-stepper-row{
    border-top:1px solid #ececec;
}

.g-title{
    font-size:16px;
    font-weight:600;
}

.g-sub{
    font-size:13px;
    color:#777;
}

.stepper{
    display:flex;
    align-items:center;
    gap:14px;
}

.step-btn{
    width:32px;
    height:32px;
    padding:0;
    border-radius:50%;
    background:white;
    color:#222;
    border:1px solid #b0b0b0;
    font-size:18px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.step-btn:disabled{
    border-color:#e0e0e0;
    color:#ccc;
    cursor:not-allowed;
}

.step-count{
    min-width:18px;
    text-align:center;
    font-size:16px;
}

.check-btn{
    width:100%;
    font-size:16px;
    font-weight:bold;
    background:linear-gradient(90deg,#c2a04a,#9c7a2e);
}

.guest-note{
    margin:16px 0 0;
    font-size:13px;
    color:#555;
    line-height:1.5;
}

.results-section{
    max-width:1200px;
    margin:40px auto;
}

.results-section h2{
    margin-bottom:20px;
}

.available-card{
    background:white;
    padding:20px;
    border-radius:15px;
    margin-bottom:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    font-size:18px;
}