/* =========================
   BOOKING WIDGET: GUESTS + MEAL PLAN + MOBILE
   Paste at the very bottom of property.css
========================= */

.booking-widget-left{
    flex-wrap:wrap;
    gap:18px 28px;
}

.widget-select{
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.15);
    color:#f5f2eb;
    font-size:14px;
    font-family:'Inter',sans-serif;
    padding:6px 0;
    width:170px;
    cursor:pointer;
    text-overflow:ellipsis;
    color-scheme:dark;
}

.widget-select:focus{
    outline:none;
    border-bottom-color:#c27935;
}

.widget-select option{
    background:#111;
    color:#fff;
}

/* Guests picker */
.pax-wrap{
    position:relative;
}

.pax-toggle{
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.15);
    color:#f5f2eb;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:300;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:150px;
    padding:6px 0;
    cursor:pointer;
    text-align:left;
    white-space:nowrap;
}

.pax-arrow{
    color:#fff;
}

.pax-panel{
    display:none;
    position:absolute;
    left:0;
    top:calc(100% + 16px);
    min-width:240px;
    background:#111;
    border:1px solid rgba(194,121,53,0.5);
    padding:14px 16px 16px;
    z-index:200;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

.pax-panel.up{
    top:auto;
    bottom:calc(100% + 18px);
}

.pax-panel.open{
    display:block;
}

.pax-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    font-size:14px;
    padding:8px 0;
}

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

.pax-ctrl button{
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.35);
    background:transparent;
    color:#fff;
    font-size:18px;
    line-height:1;
}

.pax-ctrl button:hover{
    border-color:#c27935;
    color:#c27935;
}

.pax-ctrl span{
    min-width:18px;
    text-align:center;
}

.pax-done{
    width:100%;
    margin-top:10px;
    padding:11px;
    background:#c27935;
    color:#fff;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:3px;
}

/* Mobile: widget is no longer sticky, fields in a 2-column grid */
@media(max-width:768px){

    .booking-widget{
        position:static;
        padding:22px 5%;
    }

    .booking-widget-left{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px 16px;
    }

    .booking-widget-left .widget-field{
        min-width:0;
    }

    .widget-input,
    .widget-select,
    .pax-toggle{
        width:100%;
        font-size:14px;
    }

    .pax-panel.up{
        top:calc(100% + 10px);
        bottom:auto;
    }

    .whatsapp-btn{
        width:100%;
    }
}


/* =========================
   MOBILE FIX: PROPERTY PAGES (sizes, spacing, alignment)
========================= */
@media(max-width:768px){

    html,body{ overflow-x:hidden; }

    .rooms-grid,.activities-grid,.nearby-grid,.gallery-strip,.overview{
        min-width:0;
    }
    .rooms-grid > *,.activities-grid > *,.nearby-grid > *,.gallery-strip > *,.overview > *{
        min-width:0;
    }

    .property-hero{
        height:auto;
        min-height:0;
        padding:150px 5% 40px;
    }

    .property-hero-content h1{
        font-size:36px;
        letter-spacing:0;
        line-height:1.1;
    }

    .overview{ padding:50px 5%; gap:28px; }
    .overview-left h2{ font-size:30px; }
    .overview-right img{ height:240px; }

    .gallery-strip{
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:0 5% 40px;
    }
    .gallery-strip img{ height:130px; }
    .gallery-strip img:first-child{ grid-column:1/-1; height:200px; }

    .rooms-section,
    .activities-section,
    .nearby-section{ padding:50px 5%; }

    .section-header{ margin-bottom:28px; }
    .section-header h2{ font-size:30px; }

    .room-card img{ height:190px; }

    .activities-grid{
        grid-template-columns:1fr;
        gap:12px;
    }
    .activity-card{ padding:20px; }

    .nearby-grid{ gap:14px; }
    .nearby-card img{ height:220px; }
}


/* =========================
   BLACK THEME: PROPERTY PAGES (matches homepage)
========================= */

body{ background:#000; color:#e8e8e8; }

.overview,
.rooms-section,
.activities-section,
.nearby-section,
.gallery-strip{ background:#000; }

.overview-left h2,
.section-header h2,
.room-info h3,
.activity-card h4{ color:#fff; }

.overview-left p,
.room-info p,
.activity-card p{ color:rgba(255,255,255,0.65); }

.overview-left .small-title,
.section-header .small-title,
.room-info .room-price{ color:#c27935; }

/* pure black cards */
.room-card,
.activity-card{
    background:#000;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:none;
}
.room-card:hover,
.activity-card:hover{ border-color:#c27935; box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.room-card.selected{ border-color:#c27935; }

.room-feature{
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.8);
}

.select-room-btn{ background:#c27935; color:#fff; }
.select-room-btn:hover{ background:#d98a45; }
.room-card.selected .select-room-btn{ background:#d98a45; }

/* orange accents */
.property-tag,
.nearby-distance,
.widget-selected-room{ color:#fff; }
.info-label,
.widget-label{ color:#fff; }

.info-bar{ background:#000; border-top:1px solid rgba(255,255,255,0.08); }
.booking-widget{ background:#0a0a0a; border-top:1px solid rgba(194,121,53,0.35); }
.footer{ background:#000; border-top:1px solid rgba(255,255,255,0.08); }

.pax-panel{ background:#0a0a0a; }

/* header stays white: keep the hamburger dark; calendar icons white */
.mobile-menu{ color:#111; }
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:1; cursor:pointer; }

.nav-btn{ display:none !important; }