/* -------- Hotolos Booking Widget (Cloudbeds) -------- */
:root{
  --hotolos-ink:#2c190a;      /* dark brown */
  --hotolos-hover:#d9c3a3;    /* tan hover */
  --hotolos-radius:14px;
}

.hotolos-booking-widget{
  font-family: "Lora", serif;
  display:grid;
  gap:18px;
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--hotolos-radius);
  padding:18px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
}

/* form grid */
.hotolos-booking-widget .hbw-form{
  display:grid; gap:12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items:end;
}

.hotolos-booking-widget .hbw-form label{
  display:grid; gap:6px; font-size:14px; color:var(--hotolos-ink);
}

/* inputs */
.hotolos-booking-widget input[type="date"],
.hotolos-booking-widget input[type="number"]{
  height:44px; padding:0 12px; font-size:15px;
  border:1px solid #d9d9d9; border-radius:10px; background:#fff;
  outline:none; transition:all .2s ease;
}
.hotolos-booking-widget input:focus{
  border-color:var(--hotolos-ink);
  box-shadow:0 0 0 3px rgba(44,25,10,.12);
}

/* button */
.hotolos-booking-widget .hbw-form button{
  height:44px; border-radius:10px; border:0;
  background:var(--hotolos-ink); color:#fff; font-weight:600;
  letter-spacing:.2px; cursor:pointer; transition:all .2s ease;
}
.hotolos-booking-widget .hbw-form button:hover{
  background:var(--hotolos-hover); color:#2c190a;
  transform:translateY(-1px);
}

/* result cards */
.hotolos-booking-widget .hbw-results .room{
  border:1px solid #eee; border-radius:12px; padding:14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.hotolos-booking-widget .hbw-results .room h4{
  margin:0; color:var(--hotolos-ink); font-size:18px;
}
.hotolos-booking-widget .hbw-results .room p{ margin:2px 0 0; color:#555; }

/* book link as button */
.hotolos-booking-widget .hbw-results .room a{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background:var(--hotolos-ink); color:#fff !important; text-decoration:none;
  font-weight:600; transition:.2s;
}
.hotolos-booking-widget .hbw-results .room a:hover{
  background:var(--hotolos-hover); color:#2c190a !important;
}

/* responsive */
@media (max-width: 980px){
  .hotolos-booking-widget .hbw-form{ grid-template-columns: repeat(3,1fr); }
  .hotolos-booking-widget .hbw-form button{ grid-column: span 3; }
}
@media (max-width: 640px){
  .hotolos-booking-widget{ padding:14px; gap:14px; }
  .hotolos-booking-widget .hbw-form{ grid-template-columns: 1fr 1fr; gap:10px; }
  .hotolos-booking-widget .hbw-form button{ grid-column: span 2; width:100%; }
  .hotolos-booking-widget .hbw-results .room{
    flex-direction:column; align-items:flex-start;
  }
}
.hotolos-booking-widget .hbw-form label:nth-child(3) > span::after{
  content:"Guests"; /* replaces label text visually if you hide the original */
}
/* ===== Hotolos Booking: COMPACT ===== */
.hbw--compact .hotolos-booking-widget{
  max-width: 880px;           /* control width */
  margin: 0 auto;             /* center it */
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.hbw--compact .hotolos-booking-widget .hbw-form{
  grid-template-columns: 1.1fr 1.1fr .8fr .8fr .9fr; /* tighter columns */
  gap: 10px;
}

/* tighten result cards spacing */
.hbw--compact .hotolos-booking-widget .hbw-results .room{
  padding: 12px;
}

/* if it ever overflows on small laptops, drop to 4 columns */
@media (max-width: 1200px){
  .hbw--compact .hotolos-booking-widget .hbw-form{
    grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4 cols */
  }
  .hbw--compact .hotolos-booking-widget .hbw-form button{ grid-column: span 4; }
}

/* tablet/phone behavior (inherits your existing mobile rules) */
/* ===== Hotolos Booking: OVERLAY (transparent on hero) ===== */
.hbw--overlay .hotolos-booking-widget{
  background: rgba(255,255,255,0.08);  /* faint glass */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width: 980px;
  margin: 0 auto;
}

/* white-ish labels/text */
.hbw--overlay .hotolos-booking-widget .hbw-head h3,
.hbw--overlay .hotolos-booking-widget .hbw-head p,
.hbw--overlay .hotolos-booking-widget .hbw-form label{ color:#fff; }

/* transparent inputs with white text/borders */
.hbw--overlay .hotolos-booking-widget input[type="date"],
.hbw--overlay .hotolos-booking-widget input[type="number"],
.hbw--overlay .hotolos-booking-widget input[type="text"]{
  background: transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.7);
}
.hbw--overlay .hotolos-booking-widget input::placeholder{ color:rgba(255,255,255,.75); }
.hbw--overlay .hotolos-booking-widget input:focus{
  border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

/* buttons */
.hbw--overlay .hotolos-booking-widget .hbw-form button{
  background:#fff; color:#2c190a;
}
.hbw--overlay .hotolos-booking-widget .hbw-form button:hover{
  background:#d9c3a3; color:#2c190a;
}

/* results also look glassy */
.hbw--overlay .hotolos-booking-widget .hbw-results .room{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.35);
}
.hbw--overlay .hotolos-booking-widget .hbw-results .room h4,
.hbw--overlay .hotolos-booking-widget .hbw-results .room p{ color:#fff; }

.hbw--overlay .hotolos-booking-widget .hbw-results .room a{
  background:#fff; color:#2c190a !important;
}
.hbw--overlay .hotolos-booking-widget .hbw-results .room a:hover{
  background:#d9c3a3; color:#2c190a !important;
}

/* layout tightening on large screens */
.hbw--overlay .hotolos-booking-widget .hbw-form{
  grid-template-columns: 1.1fr 1.1fr .8fr .8fr .9fr;
  gap: 10px;
}

/* responsive */
@media (max-width: 1200px){
  .hbw--overlay .hotolos-booking-widget .hbw-form{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .hbw--overlay .hotolos-booking-widget .hbw-form button{ grid-column: span 4; }
}
/* ===== Hotolos Booking: TOP BAR ===== */
.hbw--topbar .hotolos-booking-widget{
  background: rgba(255,255,255,0.9);
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  max-width: 100%;
  padding: 10px 20px;
}

.hbw--topbar .hotolos-booking-widget .hbw-head{ display:none; } /* remove headline/subtext */

.hbw--topbar .hotolos-booking-widget .hbw-form{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
}

.hbw--topbar .hotolos-booking-widget .hbw-form label{
  display:flex;
  flex-direction:column;
  font-size:13px;
  color:#2c190a;
}

.hbw--topbar .hotolos-booking-widget input[type="date"],
.hbw--topbar .hotolos-booking-widget input[type="number"],
.hbw--topbar .hotolos-booking-widget input[type="text"]{
  height:40px; min-width:130px;
  border-radius:6px; border:1px solid #d9d9d9;
  padding:0 10px;
}

.hbw--topbar .hotolos-booking-widget .hbw-form button{
  height:40px;
  border-radius:6px;
  background:#2c190a; color:#fff;
  font-weight:600;
  padding:0 16px;
}
.hbw--topbar .hotolos-booking-widget .hbw-form button:hover{
  background:#d9c3a3; color:#2c190a;
}
/* Stop sideways scroll on mobile WITHOUT touching header */
@media (max-width: 768px){
  /* Keep the page itself from scrolling horizontally */
  html, body { overflow-x: hidden !important; }

  /* Clamp common overflow offenders to the viewport */
  main, #main, #content, .site-content, .page, .entry-content,
  .elementor, .elementor-section, .vc_row, .rev_slider_wrapper, .rev_slider {
    max-width: 100% !important;
    overflow-x: clip !important;   /* prevents their children from causing page overflow */
  }

  /* WPBakery "Stretch row" fixes */
  .vc_row[data-vc-full-width="true"],
  .vc_row[data-vc-stretch-content="true"]{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Elementor full-width sections */
  .elementor-section.elementor-section-full_width{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Neutralize inline 100vw styles that cause overhang on mobile */
  [style*="100vw"] { width: 100% !important; }

  /* DO NOT constrain the header */
  header, .site-header, #masthead { overflow-x: visible !important; }
}