/* 🌐 HOTEL BOOKING PLUGIN - Responsive Modern UI */


/* =====================
   THEME VARIABLES (customizable via admin settings)
   ===================== */
#hb-booking-root{
  --hb-font-family: "Poppins","Segoe UI",sans-serif;
  --hb-text: #111827;
  --hb-form-bg: #ffffff;
  --hb-input-bg: #f8fafc;
  --hb-border: #e5e7eb;
  --hb-primary: #2563eb;
  --hb-accent: #64748b;
  --hb-radius: 16px;
}

/* =====================================================================
   v1.8.9 — Responsive typography + fluid spacing
   ===================================================================== */

#hb-booking-root{
  font-size: clamp(14px, 1.1vw, 16px);
}

#hb-booking-root .hb-form,
#hb-booking-root .hb-room-list,
#hb-booking-root .hb-customer-bookings,
#hb-booking-root #hb-my-bookings{
  max-width: min(700px, 100%);
  margin: clamp(12px, 2vw, 30px) auto;
  padding: clamp(16px, 2.2vw, 25px);
}

#hb-booking-root .hb-form input,
#hb-booking-root .hb-form select,
#hb-booking-root .hb-form textarea{
  font-size: 1em;
  padding: 0.65em 0.85em;
}

/* =====================================================================
   v1.3.1 — Calendar Box responsiveness fixes
   - Remove legacy Step 1 max-width/overflow constraints for new layouts
   - Prevent mobile gaps caused by flex-grow on summary
   - Allow "desktop" sideways expansion unless the container is too narrow
   ===================================================================== */

/* Legacy Step 1 styles in this stylesheet can constrain .hb-calendar-wrap to 350px
   and force overflow: hidden on the container. For calendar_box/horizontal we must
   explicitly override those constraints. */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1,
#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1{
  overflow: visible !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-step-calendar .hb-calendar-wrap--calendarbox,
#hb-booking-root[data-step1-layout="horizontal"] .hb-step-calendar .hb-calendar-wrap--horizontal{
  max-width: 920px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Calendar Box: when the container is narrow (Elementor columns on desktop),
   JS adds .is-vertical to switch to a stacked panel (prevents "vanishing"). */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical{
  flex-direction: column !important;
  gap: 8px !important;
}

/* Prevent the summary from flex-growing on stacked layouts (this is what caused
   the large blank gap on mobile before the panel). */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical .hb-calendarbox-summary{
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* Stacked panel animation (used for mobile and for .is-vertical on desktop). */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical .hb-calendarbox-panel{
  max-width: 100% !important;
  flex-basis: auto !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: max-height .34s ease, opacity .22s ease, transform .34s ease !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical.is-expanded .hb-calendarbox-panel{
  max-height: 440px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Make the stacked (mobile) experience tighter */
@media (max-width: 720px){
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell{ padding: 10px !important; }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-months{ margin: 8px 8px 6px 8px !important; }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-days{ padding: 6px 8px 10px !important; }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-footer{ padding: 0 10px 10px !important; }
}

/* =============== GENERAL LAYOUT =============== */
.hb-form,
.hb-room-list,
.hb-customer-bookings,
#hb-my-bookings {
  font-family: var(--hb-font-family, "Poppins","Segoe UI",sans-serif);
  color: var(--hb-text, #333);
  line-height: 1.6;
  max-width: 700px;
  margin: 30px auto;
  background: var(--hb-form-bg, #fff);
  padding: 25px;
  border-radius: var(--hb-radius, 16px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.hb-form label {
  display: block;
  font-weight: 600;
  margin-top: 15px;
}

.hb-form input,
.hb-form select {
  width: 100%;
  padding: 8px;
  margin-top: 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  transition: 0.2s ease-in-out;
}

.hb-form input:focus,
.hb-form select:focus {
  border-color: #2b6cb0;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
  outline: none;
}

.hb-form button {
  background: var(--hb-primary, #2b6cb0);
  color: #fff;
  border: none;
  padding: 12px 20px;
  margin-top: 20px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hb-form button:hover {
  filter: brightness(0.92);
}

/* =============== ROOMS LIST =============== */
.hb-room-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 15px;
}

.hb-room-item {
  background: var(--hb-form-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 15px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hb-room-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.hb-room-item h2 {
  font-size: 20px;
  color: #2b6cb0;
}

.hb-room-item img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
}

.hb-room-item ul {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.hb-room-item li {
  margin-bottom: 5px;
}

.hb-room-item .button {
  display: inline-block;
  background: var(--hb-primary, #2b6cb0);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.hb-room-item .button:hover {
  background: #1e4e85;
}

/* =============== CUSTOMER PORTAL TABLE =============== */
.hb-customer-bookings {
  width: 100%;
  border-collapse: collapse;
  margin-top: 25px;
}

.hb-customer-bookings th {
  background: var(--hb-primary, #2b6cb0);
  color: #fff;
  text-align: left;
  padding: 8px;
}

.hb-customer-bookings td {
  border: 1px solid #ddd;
  padding: 8px;
}

.hb-cancel-booking {
  background: #e53e3e;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.hb-cancel-booking:hover {
  background: #c53030;
}

/* =============== RESPONSIVE RULES =============== */
@media (max-width: 768px) {
  .hb-form,
  .hb-room-list,
  #hb-my-bookings {
    padding: 15px;
    box-shadow: none;
  }

  .hb-customer-bookings th,
  .hb-customer-bookings td {
    font-size: 13px;
    padding: 6px;
  }

  .hb-room-item h2 {
    font-size: 18px;
  }

  .hb-room-item .button {
    font-size: 13px;
    padding: 8px 12px;
  }

  .hb-form button {
    width: 100%;
  }
}

/* =============== MESSAGES =============== */
#hb-booking-response p {
  font-size: 15px;
  margin-top: 15px;
}

/* === AVAILABILITY & PRICE DISPLAY === */
#hb-price-display {
  margin-top: 20px;
  background: #f1f5f9;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  color: #2b6cb0;
}

.flatpickr-calendar {
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.flatpickr-day.selected {
  background: #2b6cb0 !important;
  color: #fff !important;
}



/* =========================
   Flatpickr: modern compact
   Scoped to booking UI only
   ========================= */
#hb-booking-root .flatpickr-calendar{
  border: 1px solid rgba(0,0,0,0.08) !important;
  font-family: var(--hb-font, "Poppins","Segoe UI",sans-serif) !important;
  overflow: hidden;
}

/* Compact size (single-month) */
#hb-booking-root .flatpickr-calendar.open,
#hb-booking-root .flatpickr-calendar.inline{
  width: min(340px, calc(100vw - 24px)) !important;
  max-width: 340px !important;
}

/* Inline calendar in Calendar Box: center and keep compact */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar{
  display: flex;
  justify-content: center;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
  margin: 0 auto !important;
  box-shadow: none !important;
}

/* Header: attractive bar using primary/accent */
#hb-booking-root .flatpickr-months{
  background: linear-gradient(135deg, rgba(var(--hb-primary-rgb,108,76,255),0.95), rgba(var(--hb-accent-rgb,43,108,176),0.92)) !important;
  padding: 8px 10px 6px !important;
}
#hb-booking-root .flatpickr-months .flatpickr-month{
  background: transparent !important;
}
#hb-booking-root .flatpickr-current-month{
  color: #fff !important;
  padding: 2px 0 0 !important;
  font-weight: 700 !important;
}
#hb-booking-root .flatpickr-current-month .flatpickr-monthDropdown-months,
#hb-booking-root .flatpickr-current-month input.cur-year{
  color: #fff !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
#hb-booking-root .flatpickr-current-month .flatpickr-monthDropdown-months{
  margin: 0 6px 0 0 !important;
}
#hb-booking-root .flatpickr-current-month input.cur-year{
  width: 80px !important;
}
#hb-booking-root .flatpickr-prev-month,
#hb-booking-root .flatpickr-next-month{
  color: #fff !important;
  fill: #fff !important;
  top: 8px !important;
}
#hb-booking-root .flatpickr-prev-month:hover svg,
#hb-booking-root .flatpickr-next-month:hover svg{
  opacity: 0.85;
}

/* Weekdays row */
#hb-booking-root .flatpickr-weekdays{
  background: rgba(0,0,0,0.03) !important;
  padding: 4px 8px 2px !important;
}
#hb-booking-root span.flatpickr-weekday{
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(17,24,39,0.80) !important;
}

/* Days: smaller, modern, centered */
#hb-booking-root .flatpickr-days{
  padding: 6px 8px 8px !important;
}
#hb-booking-root .dayContainer{
  min-width: unset !important;
  width: 100% !important;
  justify-content: center;
}
#hb-booking-root .flatpickr-day{
  height: 30px !important;
  line-height: 30px !important;
  max-width: 30px !important;
  border-radius: 10px !important;
  margin: 1px !important;
  font-size: 12px !important;
}
#hb-booking-root .flatpickr-day:hover{
  background: rgba(var(--hb-primary-rgb,108,76,255),0.12) !important;
  border-color: rgba(var(--hb-primary-rgb,108,76,255),0.25) !important;
}
#hb-booking-root .flatpickr-day.today{
  border-color: rgba(var(--hb-primary-rgb,108,76,255),0.55) !important;
}
#hb-booking-root .flatpickr-day.selected,
#hb-booking-root .flatpickr-day.startRange,
#hb-booking-root .flatpickr-day.endRange{
  background: var(--hb-primary, #6c4cff) !important;
  border-color: var(--hb-primary, #6c4cff) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(var(--hb-primary-rgb,108,76,255),0.25);
}
#hb-booking-root .flatpickr-day.inRange{
  background: rgba(var(--hb-primary-rgb,108,76,255),0.14) !important;
  border-color: rgba(var(--hb-primary-rgb,108,76,255),0.08) !important;
}

/* Make the popup calendar centered on small screens for a clean UX */
@media (max-width: 520px){
  #hb-booking-root .flatpickr-calendar.open{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important;
  }
}

/* === TWO-STEP BOOKING FORM === */
/* Booking container (step-specific sizing) */
#hb-booking-root #hb-booking-container {
  /* Width is controlled per-step via .hb-mode-step1 / .hb-mode-step2 */
  width: 100%;
  margin: 0 auto;
}

/* Step-specific container sizing */
#hb-booking-root #hb-booking-container.hb-mode-step1{
  max-width: 350px;
  max-height: 350px;
  padding: 14px !important;
  overflow: hidden;
}
#hb-booking-root #hb-booking-container.hb-mode-step2{
  max-width: 980px;
}

/* =====================
   STEP 1 (Calendar only) — compact 350×350
   ===================== */
#hb-booking-root #hb-booking-container.hb-mode-step1{
  width: min(350px, 100%);
  max-width: 350px;
  height: 350px;
  max-height: 350px;
  margin: 18px auto;
  padding: 12px !important;
  overflow: hidden;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar h3{
  font-family: "Inter", "Poppins", "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-align: center;
}

/* Keep the input in DOM for flatpickr, but visually remove it */
#hb-booking-root #hb-booking-container.hb-mode-step1 #hb_date_range{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide Step 1 actions (auto-advance) */
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-actions{
  display: none !important;
}

#hb-booking-root .hb-calendar-wrap{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hb-booking-root .hb-calendar-inline{
  width: 100%;
  display: flex;
  justify-content: center;
}

#hb-booking-root .hb-calendar-inline .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 320px;
  box-shadow: none !important;
  border: 1px solid #eee;
}

/* Make day cells a bit tighter to fit the square nicely */
#hb-booking-root .flatpickr-day{
  height: 34px;
  line-height: 34px;
}


/* =====================
   STEP 1 Layout Variants
   ===================== */

/* Expand the Step 1 container for the new layouts */
#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1{
  width: min(920px, 100%);
  max-width: 920px;
  height: auto;
  max-height: none;
  padding: 20px !important;
}

/* Horizontal bar */
#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap{
  justify-content: center;
}

#hb-booking-root .hb-horizontal-datebar{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--hb-input-bg, #f8fafc);
  border: 1px solid var(--hb-border, #e5e7eb);
  border-radius: calc(var(--hb-radius, 16px) + 4px);
}

#hb-booking-root .hb-date-pill{
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--hb-border, #e5e7eb);
  border-radius: calc(var(--hb-radius, 16px) - 2px);
  padding: 12px 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#hb-booking-root .hb-date-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--hb-primary, #6c4cff) 35%, var(--hb-border, #e5e7eb));
}

#hb-booking-root .hb-pill-label{
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#hb-booking-root .hb-pill-date{
  font-size: 16px;
  font-weight: 800;
  color: var(--hb-text, #111827);
}

#hb-booking-root .hb-pill-sep{
  width: 1px;
  height: 42px;
  background: var(--hb-border, #e5e7eb);
  border-radius: 999px;
}

#hb-booking-root .hb-btn.hb-btn-secondary{
  background: var(--hb-primary, #6c4cff);
  color: #fff;
  border-radius: calc(var(--hb-radius, 16px) - 2px);
  padding: 12px 14px;
  font-weight: 800;
  border: none;
  white-space: nowrap;
}

/* Hide the standard input for Horizontal & Calendar-box layouts */
#hb-booking-root[data-step1-layout="horizontal"] .hb-date-input-wrap--hidden,
#hb-booking-root[data-step1-layout="calendar_box"] .hb-date-input-wrap--hidden{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Calendar-box: keep the input INSIDE the panel so the inline calendar renders in the right place.
   We hide it visually without moving it off-screen. */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar > input#hb_date_range{
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Calendar box */
#hb-booking-root .hb-calendar-box{
  width: 100%;
  background: var(--hb-form-bg, #fff);
  border: 1px solid var(--hb-border, #e5e7eb);
  border-radius: calc(var(--hb-radius, 16px) + 6px);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

#hb-booking-root .hb-calendar-box-header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

#hb-booking-root .hb-box-date{
  background: var(--hb-input-bg, #f8fafc);
  border: 1px solid var(--hb-border, #e5e7eb);
  border-radius: calc(var(--hb-radius, 16px) - 2px);
  padding: 10px;
}

#hb-booking-root .hb-box-label{
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#hb-booking-root .hb-box-value{
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 900;
  color: var(--hb-text, #111827);
}

#hb-booking-root .hb-calendar-box-footer{
  margin-top: 6px;
}

#hb-booking-root .hb-muted{
  color: #64748b;
}

/* Better inline calendar appearance inside the box */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-days{
  border-radius: calc(var(--hb-radius, 16px) - 4px);
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.selected,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.startRange,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.endRange{
  background: var(--hb-primary, #6c4cff) !important;
  border-color: var(--hb-primary, #6c4cff) !important;
}

@media (max-width: 720px){
  #hb-booking-root .hb-horizontal-datebar{
    grid-template-columns: 1fr;
  }
  #hb-booking-root .hb-pill-sep{
    display: none;
  }
  #hb-booking-root .hb-calendar-box-header{
    grid-template-columns: 1fr;
  }
}


/* =====================
   STEP 2 layout (wide, responsive)
   ===================== */
#hb-booking-root .hb-step-2-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
}

@media (max-width: 900px){
  #hb-booking-root .hb-step-2-grid{
    grid-template-columns: 1fr;
  }
}

/* Location tabs: 2 per row, compact, brand colors */
#hb-booking-root .hb-location-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 10px 0;
}

#hb-booking-root .hb-location-tabs .hb-location-tab{
  background: var(--hb-form-bg, #fff);
  border: 1px solid #ff914d;
  color: #ff914d;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

#hb-booking-root .hb-location-tabs .hb-location-tab:hover{
  background: #61ce70;
  border-color: #61ce70;
  color: #fff;
}

#hb-booking-root .hb-location-tabs .hb-location-tab.is-active,
#hb-booking-root .hb-location-tabs .hb-location-tab.is-active:hover{
  background: #ff914d;
  border-color: #ff914d;
  color: #fff;
}

/* Rooms list: compact single-line horizontal rows */
#hb-booking-root .hb-room-listbox{
  max-height: 360px;
  overflow: auto;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 6px;
}

#hb-booking-root .hb-room-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}

#hb-booking-root .hb-room-option:hover{
  background: #fff7f0;
  border-color: rgba(255,145,77,0.35);
}

#hb-booking-root .hb-room-option.is-selected{
  background: #fff3ea;
  border-color: #ff914d;
}

#hb-booking-root .hb-room-option-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  gap: 2px;
}

#hb-booking-root .hb-room-option-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0;
}

#hb-booking-root .hb-room-option-meta{
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Step 1 should be a compact 350x350 card with only the calendar visible */
#hb-booking-root #hb-booking-container.hb-mode-step1 #hb-step-1{
  margin: 0;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar h3{
  font-size: 14px !important;
  margin: 0 0 6px 0 !important;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar .hb-step-actions{
  display: none !important;
}
/* If any theme/plugin renders these date fields as visible inputs, hide them in Step 1 */
#hb-booking-root #hb-booking-container.hb-mode-step1 #checkin_date,
#hb-booking-root #hb-booking-container.hb-mode-step1 #checkout_date{
  display: none !important;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar .hb-calendar-wrap{
  max-width: 100% !important;
  padding: 4px !important;
  border-radius: var(--hb-radius, 16px);
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .flatpickr-calendar{
  max-width: 100% !important;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .flatpickr-day{
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

#hb-step-1, #hb-step-2 {
  animation: fadeIn 0.3s ease;
}

#hb-summary {
  background: var(--hb-input-bg, #f8fafc);
  border-radius: 8px;
  padding: 8px;
  font-size: 15px;
  color: #2b6cb0;
  margin-bottom: 15px;
}

.hb-btn {
  background: var(--hb-primary, #2b6cb0);
  color: #fff;
  border: none;
  padding: 12px 20px;
  margin-top: 20px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
}

.hb-btn:hover {
  background: #1e4e85;
}

.hb-btn-secondary {
  background: #ddd;
  color: var(--hb-text, #333);
  margin-top: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#child-ages-container label {
  display: block;
  margin-top: 8px;
  font-weight: 500;
}

#child-ages-container input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* ============================================================
   Booking Review Modal (Consolidated + Elementor-safe)
   - Very high z-index to sit above Elementor overlays
   - Appended to <body> by JS to avoid stacking-context issues
============================================================ */
body.hb-modal-open {
  overflow: hidden;
}

.hb-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  background: rgba(0, 0, 0, 0.55);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hb-modal.show {
  display: flex !important;
}

.hb-modal-content {
  background: #ffffff;
  width: min(520px, 96vw);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  position: relative;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hb-modal.show .hb-modal-content {
  transform: scale(1);
  opacity: 1;
}

.hb-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

.hb-modal-close:hover {
  color: #222;
}

.hb-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.hb-modal-body {
  color: #222;
  background: var(--hb-form-bg, #fff);
  padding: 10px 0;
  border-radius: 8px;
  font-size: 15px;
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.6;
}


/* ============================================================
   Review Popup: modern compact summary (reduce spacing)
============================================================ */
#hb-review-modal .hb-modal-content h3{
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
#hb-review-modal .hb-modal-body{
  padding: 0;
  line-height: 1.45;
}
#hb-review-summary .hb-review-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#hb-review-summary .hb-review-section{
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.02);
  border-radius: 12px;
  padding: 12px;
}
#hb-review-summary .hb-review-section-title{
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #334155;
}
#hb-review-summary .hb-review-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed rgba(15,23,42,0.10);
}
#hb-review-summary .hb-review-row:first-of-type{
  border-top: 0;
  padding-top: 0;
}
#hb-review-summary .hb-review-k{
  color: #475569;
  font-weight: 600;
}
#hb-review-summary .hb-review-v{
  color: #0f172a;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}
#hb-review-summary .hb-review-note{
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
@media (max-width: 480px){
  #hb-review-summary .hb-review-row{
    flex-direction: column;
    align-items: flex-start;
  }
  #hb-review-summary .hb-review-v{
    text-align: left;
  }
}



/* =======================
   Success / Payment Popup
======================= */
.hb-success-box .hb-success-message {
  margin: 0 0 10px;
  font-size: 16px;
}

.hb-success-box .hb-success-meta p {
  margin: 4px 0;
}

.hb-success-note {
  margin-top: 14px;
  font-size: 13px;
  color: #555;
}

.hb-payment-instructions {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
}

.hb-payment-instructions p {
  margin: 6px 0;
}

.hb-payment-instructions ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.hb-payment-instructions li {
  margin: 6px 0;
}

.hb-payment-instructions img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 12px;
}

.hb-brand-logo {
  text-align: center;
  margin: 0 0 12px;
}

.hb-brand-logo img {
  max-width: 200px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

@media (max-width: 480px) {
  .hb-modal {
    padding: 12px;
  }
  .hb-modal-content {
    padding: 18px;
  }
  .hb-modal-actions {
    flex-direction: column;
  }
  .hb-modal-actions button {
    width: 100%;
  }
}


/* ============================================================
   Location Tabs (Rooms by Location)
============================================================ */
/* Layout: 2 per row (stable, no horizontal scrolling) */
.hb-location-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  overflow: visible;
  align-items: stretch;
}

/* Higher specificity than .hb-form button rules (theme/Elementor-safe) */
.hb-form .hb-location-tab{
  width: 100%;
  margin-top: 0;              /* override .hb-form button margin-top */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ff914d;
  background: #ffffff;
  color: #ff914d;

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

  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hb-form .hb-location-tab:hover{
  background: #61ce70;
  border-color: #61ce70;
  color: #ffffff;
  transform: translateY(-1px);
}

.hb-form .hb-location-tab.is-active{
  background: #ff914d;
  border-color: #ff914d;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 145, 77, 0.22);
}

/* keep active state stable on hover */
.hb-form .hb-location-tab.is-active:hover{
  background: #ff914d;
  border-color: #ff914d;
  color: #ffffff;
  transform: translateY(-1px);
}

.hb-form .hb-location-tab:focus-visible{
  outline: 3px solid rgba(255, 145, 77, 0.35);
  outline-offset: 2px;
}

/* Responsive tuning */
@media (max-width: 480px){
  .hb-location-tabs{ gap: 8px; }
  .hb-form .hb-location-tab{
    padding: 9px 10px;
    font-size: 12px;
    border-radius: 12px;
  }
}

/* Ultra-small screens: fall back to 1 column to avoid text wrapping issues */
@media (max-width: 340px){
  .hb-location-tabs{ grid-template-columns: 1fr; }
}

.hb-location-panel {
  display: none;
  margin-top: 10px;
}

.hb-location-panel.is-active {
  display: block;
}

.hb-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.hb-room-card {
  width: 100%;
  text-align: left;
  border: 1px solid #ddd;
  background: var(--hb-form-bg, #fff);
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hb-room-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.hb-room-card.is-selected {
  border-color: #2b6cb0;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}

.hb-room-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 6px;
}

.hb-room-card-meta {
  font-size: 13px;
  color: #555;
}

@media (max-width: 480px) {
  .hb-room-grid {
    grid-template-columns: 1fr;
  }
}



/* =============================
   Modern booking layout (Dates → Rooms/Details)
   ============================= */

#hb-booking-root,
#hb-booking-root * {
  box-sizing: border-box;
}

#hb-booking-root .hb-form {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #1f2937;
  letter-spacing: 0.1px;
  max-width: 980px;
  width: 100%;
}

#hb-booking-root .hb-step h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 14px 0;
  font-weight: 700;
}

/* Step 1: make the calendar section visually smaller/smarter */
#hb-booking-root .hb-step-calendar h3{
  font-size: 16px;
  margin-bottom: 8px;
  text-align: center;
}

#hb-booking-root .hb-label {
  display: block;
  font-weight: 600;
  margin: 12px 0 6px 0;
}

#hb-booking-root .hb-muted {
  color: #6b7280;
  font-size: 13px;
}

#hb-booking-root .hb-tip {
  margin-top: 10px;
}

/* Step 1 calendar */
#hb-booking-root .hb-step-calendar .hb-calendar-wrap {
  position: relative;
  background: var(--hb-form-bg, #fff);
  border: 1px solid #eef2f7;
  border-radius: var(--hb-radius, 16px);
  padding: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  max-width: 350px;
  margin: 0 auto;
}

#hb-booking-root .hb-step-calendar #hb_date_range {
  width: 100%;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* Flatpickr theme tweaks */
#hb-booking-root .flatpickr-calendar {
  width: 100% !important;
  max-width: 350px;
  border: 0 !important;
  box-shadow: none !important;
}
#hb-booking-root .flatpickr-months .flatpickr-month {
  background: transparent;
}
#hb-booking-root .flatpickr-current-month {
  font-weight: 700;
}
#hb-booking-root .flatpickr-day.startRange,
#hb-booking-root .flatpickr-day.endRange,
#hb-booking-root .flatpickr-day.selected {
  background: #ff914d;
  border-color: #ff914d;
  color: #fff;
}
#hb-booking-root .flatpickr-day.inRange {
  background: rgba(255, 145, 77, 0.18);
  border-color: transparent;
  box-shadow: none;
}
#hb-booking-root .flatpickr-day:hover {
  background: #61ce70;
  border-color: #61ce70;
  color: #fff;
}

/* Compact calendar sizing */
#hb-booking-root .flatpickr-weekday {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}
#hb-booking-root .flatpickr-day {
  height: 32px;
  line-height: 32px;
  font-size: 12.5px;
  border-radius: 10px;
}
#hb-booking-root .flatpickr-months .flatpickr-month {
  height: 40px;
}
#hb-booking-root .flatpickr-current-month {
  font-size: 13px;
}

#hb-booking-root .hb-step-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

#hb-booking-root .hb-step-calendar .hb-step-actions{
  justify-content: center;
  margin-top: 10px;
  gap: 10px;
}

#hb-booking-root .hb-step-calendar #hb-next-step{
  width: auto;
  padding: 9px 14px;
  font-size: 13px;
  border-radius: 12px;
}

#hb-booking-root .hb-step-calendar #hb-step1-hint{
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}


#hb-booking-root .hb-step-calendar{
  max-width: 350px;
  margin: 0 auto;
}
/* Step 2 top bar */
#hb-booking-root .hb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #eef2f7;
  border-radius: var(--hb-radius, 16px);
  background: var(--hb-form-bg, #fff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  margin-bottom: 18px;
}
#hb-booking-root .hb-topbar-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.2px;
}
#hb-booking-root .hb-topbar-value {
  font-size: 14px;
  font-weight: 700;
}

/* Two-column layout */
#hb-booking-root .hb-step-2-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}

#hb-booking-root .hb-col {
  background: var(--hb-form-bg, #fff);
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

#hb-booking-root .hb-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Inputs and selects */
#hb-booking-root input[type="text"],
#hb-booking-root input[type="email"],
#hb-booking-root input[type="number"],
#hb-booking-root select,
#hb-booking-root textarea {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--hb-border, #e5e7eb);
  border-radius: 12px;
  font-size: 14px;
  background: var(--hb-form-bg, #fff);
  outline: none;
}

#hb-booking-root textarea{
  min-height: 88px;
  resize: vertical;
}
#hb-booking-root input:focus,
#hb-booking-root select:focus {
  border-color: #ff914d;
  box-shadow: 0 0 0 4px rgba(255, 145, 77, 0.18);
}

/* Dropdown room select */
#hb-booking-root .hb-room-select {
  margin-top: 6px;
}

/* Buttons (ensure tabs/room cards are not affected by .hb-form button global rules) */
#hb-booking-root .hb-btn,
#hb-booking-root .hb-btn-secondary {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
}

#hb-booking-root .hb-btn {
  background: #ff914d;
  border: 1px solid #ff914d;
}
#hb-booking-root .hb-btn:hover {
  background: #61ce70;
  border-color: #61ce70;
}

#hb-booking-root .hb-btn-ghost {
  background: transparent !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}
#hb-booking-root .hb-btn-ghost:hover {
  border-color: #61ce70 !important;
  color: #111827 !important;
}


/* Rooms list (radio options) */
#hb-booking-root .hb-rooms-box{
  border: 1px solid #eef2f7;
  border-radius: 18px;
  overflow: hidden;
  background: var(--hb-form-bg, #fff);
  margin-top: 12px;
}
#hb-booking-root .hb-rooms-box-head{
  padding: 12px 14px;
  background: var(--hb-input-bg, #f8fafc);
  border-bottom: 1px solid #eef2f7;
}
#hb-booking-root .hb-rooms-box-title{
  font-weight: 800;
  font-size: 14px;
  color: #111827;
}
#hb-booking-root .hb-room-listbox{
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  background: var(--hb-input-bg, #f8fafc);
}
#hb-booking-root .hb-room-option{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin: 0 0 8px 0;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  background: var(--hb-form-bg, #fff);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
#hb-booking-root .hb-room-option:hover{
  border-color: #61ce70;
  transform: translateY(-1px);
}
#hb-booking-root .hb-room-radio{
  margin-top: 2px;
  accent-color: #ff914d;
  transform: scale(1.0);
}
#hb-booking-root .hb-room-option-body{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
#hb-booking-root .hb-room-option-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: #111827;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hb-booking-root .hb-room-option-meta{
  font-size: 11.5px;
  color: #6b7280;
  flex: 0 0 auto;
  max-width: 45%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px){
  /* Still compact on mobile, but allow better readability */
  #hb-booking-root .hb-room-option-body{
    gap: 6px;
  }
  #hb-booking-root .hb-room-option-meta{
    max-width: 55%;
  }
}
#hb-booking-root .hb-room-option.is-selected{
  border-color: #ff914d;
  box-shadow: 0 0 0 3px rgba(255, 145, 77, 0.18);
}

/* Keep the legacy dropdown for JS compatibility, but hide it from UI */
#hb-booking-root .hb-room-select-hidden{
  display: none !important;
}


/* Room cards - slightly more modern */
#hb-booking-root .hb-room-card {
  border-radius: var(--hb-radius, 16px);
  border: 1px solid var(--hb-border, #e5e7eb);
  background: var(--hb-form-bg, #fff);
  padding: 12px;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#hb-booking-root .hb-room-card:hover {
  border-color: #61ce70;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
#hb-booking-root .hb-room-card.is-selected {
  border-color: #ff914d;
  box-shadow: 0 10px 26px rgba(255, 145, 77, 0.18);
}
#hb-booking-root .hb-room-card-title {
  font-weight: 800;
  font-size: 14px;
}
#hb-booking-root .hb-room-card-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 980px) {
  #hb-booking-root .hb-step-2-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  #hb-booking-root .hb-two-col {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   UI Refresh: Step 1 compact + Step 2 layout to match sample
   Version: 1.1.5
   ========================================================= */

/* Ensure container sizing uses border-box so 350x350 includes padding */
#hb-booking-root #hb-booking-container,
#hb-booking-root #hb-booking-container *{
  box-sizing: border-box;
}

/* Step 1: true 350x350 card */
#hb-booking-root #hb-booking-container.hb-mode-step1{
  width: 350px !important;
  height: 350px !important;
  max-width: 350px !important;
  max-height: 350px !important;
  padding: 14px !important;
  margin: 0 auto !important;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

/* Step 1: clean header */
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar h3{
  font-size: 15px !important;
  letter-spacing: 0.2px;
  margin: 2px 0 10px 0 !important;
}

/* Step 1: make the inline calendar fill the card neatly */
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-calendar-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 #hb-calendar-inline{
  width: 100%;
  display: flex;
  justify-content: center;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .flatpickr-calendar{
  margin: 0 auto !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
  border-radius: 14px !important;
}

/* Step 2 header (matches sample) */
#hb-booking-root .hb-step2-header{
  margin-bottom: 12px;
}
#hb-booking-root .hb-step2-header .hb-title{
  font-family: "Inter", "Poppins", "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: #0f172a;
}
#hb-booking-root .hb-step2-header .hb-subtitle{
  margin: 0 0 10px 0;
  color: #64748b;
  font-size: 13px;
}
#hb-booking-root .hb-step2-dates{
  display: flex;
  align-items: center;
    /* Super-tight layout: keep CHANGE immediately after the date value */
  gap: 0;
  flex-wrap: wrap;
  font-size: 12px;
  color: #475569;
}

/* Keep a small gap only after the "Dates:" label */
#hb-booking-root .hb-step2-dates-label{
  margin-right: 6px;
}

/* Super-tight: no extra spacing before CHANGE */
#hb-booking-root #hb-prev-step{
  margin-left: 0 !important;
}

#hb-booking-root .hb-link-btn{
  border: 0 !important;
  background: transparent !important;
  color: #2563eb !important;
  font-weight: 700;
  padding: 0 !important;
  cursor: pointer;
}
#hb-booking-root .hb-link-btn:hover{
  text-decoration: underline;
}

/* Location tabs: pill buttons with blue active (like sample) */
#hb-booking-root .hb-location-tabs{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 10px 0 12px 0 !important;
}
#hb-booking-root .hb-location-tabs .hb-location-tab{
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
#hb-booking-root .hb-location-tabs .hb-location-tab:hover{
  border-color: #2563eb !important;
  background: #eff6ff !important;
}
#hb-booking-root .hb-location-tabs .hb-location-tab.is-active{
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Rooms box: match sample container */
#hb-booking-root .hb-rooms-box{
  border: 1px solid #e2e8f0;
  background: var(--hb-input-bg, #f8fafc);
  border-radius: 14px;
  padding: 10px;
}
#hb-booking-root .hb-rooms-box-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 10px 4px;
}
#hb-booking-root .hb-rooms-box-title{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
#hb-booking-root .hb-availability-note{
  font-size: 12px;
  color: #ef4444;
  font-weight: 600;
  min-height: 16px;
}

/* Rooms list: clean, scrollable */
#hb-booking-root .hb-room-listbox{
  max-height: 360px;
  overflow: auto;
  padding: 2px;
}

/* Room rows like sample */
#hb-booking-root .hb-room-option{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  cursor: pointer;
  margin: 0 0 10px 0;
}
#hb-booking-root .hb-room-option:hover{
  border-color: #c7d2fe !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
#hb-booking-root .hb-room-option.is-selected{
  border-color: #2563eb !important;
  background: #eef2ff !important;
}
#hb-booking-root .hb-room-option.is-unavailable{
  opacity: 0.55;
  cursor: not-allowed;
  background: #f1f5f9 !important;
}
#hb-booking-root .hb-room-option.is-unavailable:hover{
  box-shadow: none;
  border-color: #e2e8f0 !important;
}

#hb-booking-root .hb-room-radio{
  margin-top: 6px;
  transform: scale(1.02);
}

#hb-booking-root .hb-room-option-title{
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
#hb-booking-root .hb-room-option-meta{
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Step 2 container width stays wide but responsive */
#hb-booking-root #hb-booking-container.hb-mode-step2{
  max-width: 980px !important;
  margin: 0 auto !important;
}

/* Mobile: keep room rows compact */
@media (max-width: 600px){
  #hb-booking-root .hb-location-tabs .hb-location-tab{
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
  #hb-booking-root .hb-room-option{
    padding: 10px 10px !important;
  }
  #hb-booking-root .hb-room-listbox{
    max-height: 320px;
  }
}


/* ===== Fix: prevent Step 1 + Step 2 showing together ===== */
#hb-booking-root #hb-booking-container.hb-mode-step2 #hb-step-1{ display:none !important; }
#hb-booking-root #hb-booking-container.hb-mode-step1 #hb-step-2{ display:none !important; }

/* ===== Step 1: hard cap to 350x350 (border-box) ===== */
#hb-booking-root #hb-booking-container.hb-mode-step1{
  box-sizing: border-box;
  width: min(350px, 100%) !important;
  height: 350px !important;
  max-width: 350px !important;
  max-height: 350px !important;
}

/* ===== Rooms list: match sample (radio + title, meta below) ===== */
#hb-booking-root .hb-room-option{
  border: 1px solid #e2e8f0;
  background: var(--hb-form-bg, #fff);
}
#hb-booking-root .hb-room-option:hover{
  border-color: #cbd5e1;
}
#hb-booking-root .hb-room-option.is-selected{
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.14);
}

/* =========================================================
   UI Hotfix: responsive Step 2 + left-aligned room titles + right-aligned Change
   Version: 1.1.7
   ========================================================= */

/* Step 2: ensure container is responsive and never overflows */
#hb-booking-root #hb-booking-container.hb-mode-step2{
  width: min(980px, 100%) !important;
  padding: 18px !important;
}

/* Step 2 grid: allow columns to shrink properly */
#hb-booking-root .hb-step-2-grid{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 22px !important;
}
#hb-booking-root .hb-col{
  min-width: 0;
}
@media (max-width: 980px){
  #hb-booking-root #hb-booking-container.hb-mode-step2{ padding: 14px !important; }
  #hb-booking-root .hb-step-2-grid{ grid-template-columns: 1fr !important; }
}

/* Dates row: keep "Change" next to selected dates */
#hb-booking-root .hb-step2-dates{
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}
#hb-booking-root #hb-prev-step{
  margin-left: 0 !important;
}

/* Rooms: left-align title/meta and show more text (no centered titles) */
#hb-booking-root .hb-room-option{
  text-align: left !important;
  margin-top: 0 !important; /* override generic label spacing */
  align-items: flex-start !important;
}
#hb-booking-root .hb-room-option-body,
#hb-booking-root .hb-room-option-title,
#hb-booking-root .hb-room-option-meta{
  text-align: left !important;
}

/* Make room title readable: allow wrapping up to 2 lines (shows full name in most cases) */
#hb-booking-root .hb-room-option-title{
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Meta line: keep compact but avoid cutting too aggressively */
#hb-booking-root .hb-room-option-meta{
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
}

/* Step 1: subtle visual upgrade without changing size */
#hb-booking-root #hb-booking-container.hb-mode-step1{
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.10) !important;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar h3{
  letter-spacing: 0.2px;
  color: #0f172a;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .flatpickr-calendar{
  border: 1px solid #eef2f7 !important;
}

/* =========================================================
   Requested UI tweaks: rooms fully left (title + meta stacked)
   and bold selected dates in Step 2
========================================================= */

/* Dates: make selected range slightly bolder for emphasis */
#hb-booking-root .hb-step2-dates-value{
  font-weight: 800 !important;
  color: #0f172a !important;
  background: rgba(255,145,77,0.14) !important;
  border: 1px solid rgba(255,145,77,0.35) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Rooms: stack title + meta (like your example screenshot) */
#hb-booking-root .hb-room-option-body{
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
}

#hb-booking-root .hb-room-option-meta{
  max-width: 100% !important;
  text-align: left !important;
  flex: 0 0 auto !important;
}

/* =========================================================
   Mobile fixes requested:
   - Location tab text should not be cut on mobile
   - Rooms + radio + text must be truly left-aligned
   - Phone input (intl-tel-input) should fit nicely
========================================================= */

@media (max-width: 520px){
  /* Allow long location names to wrap instead of clipping/ellipsis */
  #hb-booking-root .hb-location-tabs .hb-location-tab{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    max-width: 100% !important;
    line-height: 1.15 !important;
    padding: 8px 10px !important;
    /* Reduce “all-caps” spacing on small screens so names fit better */
    letter-spacing: 0.03em !important;
  }
}

/* Rooms: enforce left layout (radio on far-left, title/meta left aligned) */
#hb-booking-root .hb-room-option{
  justify-content: flex-start !important;
}
#hb-booking-root .hb-room-radio{
  flex: 0 0 18px !important;
  margin: 4px 0 0 0 !important;
}
#hb-booking-root .hb-room-option-body{
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}
#hb-booking-root .hb-room-option-title,
#hb-booking-root .hb-room-option-meta{
  width: 100% !important;
  text-align: left !important;
}

/* Phone input: make intl-tel-input field full width and consistent */
#hb-booking-root .iti{
  width: 100% !important;
}
#hb-booking-root .hb-phone-hint{
  margin: 6px 0 0 0;
}
#hb-booking-root .hb-field-error{
  font-size: 12px;
  margin-top: 6px;
  color: #ef4444;
  display: none;
}
#hb-booking-root .hb-field-error.is-visible{
  display: block;
}


/* === STEP 1: Modern popup calendar UX (reference style) === */
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-calendar-wrap{
  width: 100%;
  margin-top: 10px;
  /* Center the date picker input within the Step 1 card */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-label{
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #222;
  margin: 0 0 6px 0;
  text-align: left;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-input-wrap{
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c4cff;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-input-src{
  /* Source input used by flatpickr (altInput is displayed) */
  position: absolute;
  left: -9999px;
  top: -9999px;
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-input,
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-input-wrap .flatpickr-input{
  width: 100% !important;
  height: 44px;
  border: 2px solid #6c4cff;
  border-radius: 10px;
  padding: 0 12px 0 44px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  background: var(--hb-form-bg, #fff);
  outline: none;
  box-shadow: 0 0 0 0 rgba(108, 76, 255, 0);
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-date-input-wrap .flatpickr-input:focus{
  box-shadow: 0 0 0 3px rgba(108, 76, 255, 0.16);
}

#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-actions{
  display: none !important; /* auto-advance after range is selected */
}

/* flatpickr popup styling to match the reference */
#hb-booking-root .flatpickr-calendar{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 38px rgba(0,0,0,0.18);
  overflow: hidden;
}

#hb-booking-root .flatpickr-months{
  padding: 10px 12px 6px 12px;
}

#hb-booking-root .flatpickr-months .flatpickr-month{
  height: 38px;
}

#hb-booking-root .flatpickr-current-month{
  font-size: 18px;
  font-weight: 700;
  padding: 2px 0 0 0;
}

#hb-booking-root .flatpickr-current-month .cur-month{
  font-weight: 700;
}

#hb-booking-root .flatpickr-weekdays{
  padding: 0 10px;
}

#hb-booking-root .flatpickr-weekday{
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

#hb-booking-root .flatpickr-day{
  border-radius: 8px;
}

#hb-booking-root .flatpickr-day:hover{
  background: rgba(45, 108, 223, 0.10);
}

#hb-booking-root .flatpickr-day.selected,
#hb-booking-root .flatpickr-day.startRange,
#hb-booking-root .flatpickr-day.endRange{
  background: #2d6cdf;
  border-color: #2d6cdf;
  color: #fff;
}

#hb-booking-root .flatpickr-day.inRange{
  background: rgba(45, 108, 223, 0.15);
  border-color: transparent;
}

#hb-booking-root .flatpickr-day.today{
  border-color: rgba(45, 108, 223, 0.4);
}

/* === STEP 1: remove unused whitespace (popup calendar UX) === */
#hb-booking-root #hb-booking-container.hb-mode-step1{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#hb-booking-root #hb-booking-container.hb-mode-step1 .hb-step-calendar{
  height: auto !important;
}


/* ===== UI tweaks: Review modal buttons (modern) ===== */
#hb-review-modal .hb-modal-actions{
  display:flex;
  gap:12px;
  margin-top:16px;
}
#hb-review-modal .hb-modal-actions button{
  flex:1;
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:12px;
  line-height:1;
  margin-top:0;
}
#hb-review-modal #hb-confirm-booking.hb-btn{
  background:#ff914d;
  box-shadow:0 8px 18px rgba(255,145,77,0.25);
}
#hb-review-modal #hb-confirm-booking.hb-btn:hover{
  background:#61ce70;
}
#hb-review-modal #hb-cancel-review.hb-btn-secondary{
  background:#f3f4f6;
  color:#111827;
  border:1px solid #e5e7eb;
}
#hb-review-modal #hb-cancel-review.hb-btn-secondary:hover{
  background:#e5e7eb;
}

/* ===== UI tweaks: Success modal logo size ===== */
#hb-success-modal .hb-brand-logo{
  display:flex;
  justify-content:center;
  margin:6px 0 10px;
}
#hb-success-modal .hb-brand-logo img{
  width:52px;
  height:52px;
  object-fit:contain;
}

/* Success message spacing */
#hb-success-modal .hb-success-message{
  margin:6px 0 10px;
}
#hb-success-modal .hb-success-meta p{
  margin:4px 0;
}
#hb-success-modal .hb-success-deadline,
#hb-success-modal .hb-success-whatsapp{
  margin:8px 0;
}




/* =========================================================
   v1.2.5 - Front-end UI overrides (variable-driven)
   Improves Horizontal + Calendar Box layouts; Elementor-friendly
   ========================================================= */

#hb-booking-root,
#hb-booking-root *{
  font-family: var(--hb-font-family) !important;
  box-sizing: border-box;
}

#hb-booking-root{
  color: var(--hb-text);
}

#hb-booking-root #hb-booking-container{
  background: var(--hb-form-bg) !important;
  border-radius: var(--hb-radius) !important;
}

/* Inputs / selects use theme variables */
#hb-booking-root .hb-form input,
#hb-booking-root .hb-form select,
#hb-booking-root .hb-date-display{
  background: var(--hb-input-bg) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 12px !important;
  color: var(--hb-text) !important;
}

#hb-booking-root .hb-form input:focus,
#hb-booking-root .hb-form select:focus,
#hb-booking-root .hb-date-display:focus{
  outline: none !important;
  border-color: rgba(var(--hb-primary-rgb), 0.9) !important;
  box-shadow: 0 0 0 4px rgba(var(--hb-primary-rgb), 0.14) !important;
}

/* Buttons */
#hb-booking-root .hb-btn{
  background: var(--hb-primary) !important;
  border-color: var(--hb-primary) !important;
  border-radius: 12px !important;
}

#hb-booking-root .hb-btn:hover{
  background: var(--hb-accent) !important;
  border-color: var(--hb-accent) !important;
}

#hb-booking-root .hb-btn-secondary{
  background: transparent !important;
  border: 1px solid var(--hb-border) !important;
  color: var(--hb-text) !important;
}

#hb-booking-root .hb-btn-secondary:hover{
  border-color: rgba(var(--hb-primary-rgb), 0.9) !important;
  color: var(--hb-primary) !important;
}

/* Flatpickr theme */
#hb-booking-root .flatpickr-calendar{
  border-radius: 14px !important;
  border: 1px solid rgba(var(--hb-primary-rgb), 0.18) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.14) !important;
  overflow: hidden;
}

#hb-booking-root .flatpickr-months{
  padding: 10px 10px 0;
}

#hb-booking-root .flatpickr-current-month{
  font-weight: 700;
  color: var(--hb-text) !important;
}

#hb-booking-root .flatpickr-weekday{
  color: rgba(0,0,0,0.55) !important;
  font-weight: 600;
}

#hb-booking-root .flatpickr-day{
  border-radius: 10px !important;
}

#hb-booking-root .flatpickr-day.today{
  border-color: rgba(var(--hb-accent-rgb), 0.85) !important;
}

#hb-booking-root .flatpickr-day.selected,
#hb-booking-root .flatpickr-day.startRange,
#hb-booking-root .flatpickr-day.endRange{
  background: var(--hb-primary) !important;
  border-color: var(--hb-primary) !important;
  color: #fff !important;
}

#hb-booking-root .flatpickr-day.inRange{
  background: rgba(var(--hb-primary-rgb), 0.12) !important;
  border-color: transparent !important;
  color: var(--hb-text) !important;
}

#hb-booking-root .flatpickr-day:hover{
  background: rgba(var(--hb-primary-rgb), 0.10) !important;
}

/* ---------- Step 1: Horizontal (date inputs + guests) ---------- */
#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap--horizontal{
  width: 100%;
  max-width: 100%;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  width: 100%;
  display: grid;
  grid-template-columns: 1.6fr 1.6fr 1fr 1fr;
  gap: 14px;
  align-items: end;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-field{
  min-width: 0;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon{
  position: relative;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon input{
  padding-right: 42px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--hb-accent-rgb), 0.75);
  pointer-events: none;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-step1-tip{
  display: block;
  margin-top: 10px;
}

@media (max-width: 820px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr;
  }
}

/* ---------- Step 1: Calendar Box (inline, smart) ---------- */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-wrap--calendarbox{
  width: 100%;
  display: flex;
  justify-content: center;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box{
  width: 100%;
  max-width: 560px;
  background: var(--hb-form-bg);
  border-radius: var(--hb-radius);
  border: 1px solid rgba(var(--hb-primary-rgb), 0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.12);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(var(--hb-primary-rgb), 0.14), transparent 55%),
    radial-gradient(520px 220px at 90% 0%, rgba(var(--hb-accent-rgb), 0.12), transparent 55%);
  pointer-events: none;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box > *{
  position: relative;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-date{
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: calc(var(--hb-radius, 16px) - 4px);
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,0,0,0.55);
  text-transform: uppercase;
  margin-bottom: 6px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-value{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--hb-text);
}

/* Inline calendar should never overflow its card */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar{
  width: 100%;
}

#hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-innerContainer{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-months{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-month{
  flex: 1 1 320px;
  min-width: 280px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-days{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-days .dayContainer{
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 100% !important;
}

@media (max-width: 640px){
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box{
    padding: 14px;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-header{
    grid-template-columns: 1fr;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-month,
  #hb-booking-root[data-step1-layout="calendar_box"] .flatpickr-days .dayContainer{
    min-width: 100%;
  }
}



/* =========================================================
   Step 1 Ultra Flexible Layout Overrides (Horizontal + Box)
   - Designed for Elementor containers
   - Targets ~800px max width on desktop, fluid on smaller
   ========================================================= */
#hb-booking-root{
  width: 100%;
  max-width: 100%;
}

/* Override the compact 350×350 Step 1 sizing for modern layouts */
#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1{
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 22px !important;
}

/* Horizontal layout: keep a clean, wide bar that wraps gracefully */
#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap{
  justify-content: flex-start;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap--horizontal{
  width: 100%;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-label{
  margin-top: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: 13px;
  color: var(--hb-text, #111827);
}

/* Inputs/selects: unified height + modern focus ring using primary */
#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon input,
#hb-booking-root[data-step1-layout="horizontal"] .hb-select{
  height: 48px;
  border-radius: calc(var(--hb-radius, 16px) - 4px);
  border: 1px solid var(--hb-border, #e5e7eb);
  background: var(--hb-input-bg, #f8fafc);
  color: var(--hb-text, #111827);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon input:focus,
#hb-booking-root[data-step1-layout="horizontal"] .hb-select:focus{
  outline: none;
  border-color: rgba(var(--hb-primary-rgb), 0.7);
  box-shadow: 0 0 0 4px rgba(var(--hb-primary-rgb), 0.14);
}

/* Tablet: 2 columns (dates row 1, guests row 2) */
@media (max-width: 860px){
  #hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1,
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1{
    padding: 18px !important;
  }

  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  #hb-booking-root[data-step1-layout="horizontal"] .hb-label{
    white-space: normal;
  }
}

/* Mobile: 1 column stack */
@media (max-width: 520px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr;
  }
}

/* Calendar Box: ensure inline calendar is always contained and centered */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar{
  width: 100%;
  max-width: 100%;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
  padding: 8px 2px 2px;
}

/* Subtle charming highlight for selected range using primary */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.selected,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.startRange,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.endRange{
  background: rgba(var(--hb-primary-rgb), 0.95) !important;
  border-color: rgba(var(--hb-primary-rgb), 0.95) !important;
  color: #fff !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day.inRange{
  background: rgba(var(--hb-primary-rgb), 0.16) !important;
  border-color: rgba(var(--hb-primary-rgb), 0.06) !important;
  color: var(--hb-text, #111827) !important;
}


/* Calendar box: compact footer */
#hb-booking-root .hb-calendar-box-footer .hb-muted{
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 420px){
  #hb-booking-root .flatpickr-day{
    height: 28px !important;
    line-height: 28px !important;
    max-width: 28px !important;
    border-radius: 9px !important;
  }
  #hb-booking-root .flatpickr-days{ padding: 6px 6px 6px !important; }
}


/* =====================================================================
   v1.3.0 — Calendar Box (collapsible): compact by default.
   Desktop: expands sideways. Mobile: expands vertically.
   ===================================================================== */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell{
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.98));
  border: 1px solid rgba(15,23,42,.08);
  border-radius: calc(var(--hb-radius, 16px) + 8px);
  padding: 12px;
  box-shadow: 0 18px 46px rgba(2,6,23,.10);
  position: relative;
  display: flex;
  gap: 12px;
  align-items: stretch;
  overflow: visible; /* allow soft shadows without clipping */
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary{
  flex: 1 1 320px;
  min-width: 260px;
  cursor: pointer;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary:focus{
  outline: none;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary:focus .hb-calendar-box-header,
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary:hover .hb-calendar-box-header{
  box-shadow: 0 0 0 4px rgba(var(--hb-primary-rgb), .10);
  border-radius: calc(var(--hb-radius, 16px) + 6px);
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-header{
  margin-bottom: 8px;
  padding: 8px;
  border-radius: calc(var(--hb-radius, 16px) + 6px);
  background: linear-gradient(180deg, rgba(var(--hb-primary-rgb), .06), rgba(var(--hb-accent-rgb), .04));
  border: 1px solid rgba(var(--hb-primary-rgb), .12);
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-date{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: calc(var(--hb-radius, 16px) - 2px);
  padding: 10px;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-value{
  font-size: 15px;
  font-weight: 900;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(var(--hb-primary-rgb), .06);
  border: 1px solid rgba(var(--hb-primary-rgb), .14);
}



#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-panel{
  flex: 0 0 0;
  max-width: 0;
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
  transition: max-width .34s ease, opacity .22s ease, transform .34s ease;
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--hb-radius, 16px) + 6px);
  background: rgba(248,250,252,.86);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-expanded .hb-calendarbox-panel{
  flex-basis: 360px;
  max-width: 420px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  color: #111827;
  font-size: 22px;
  line-height: 24px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 12px 18px rgba(0,0,0,.10);
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-close:hover{
  box-shadow: 0 14px 22px rgba(0,0,0,.14);
}

/* Inline calendar styling inside the panel (compact, modern) */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 auto !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-months{
  background: linear-gradient(90deg, rgba(var(--hb-primary-rgb), .92), rgba(var(--hb-accent-rgb), .68));
  border-radius: 14px;
  padding: 6px 10px;
  margin: 8px 10px 8px 10px;

}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-current-month,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-current-month .cur-month,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-current-month input.cur-year{
  color: #fff !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-prev-month,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-next-month{
  padding: 6px !important;
  border-radius: 12px !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-prev-month:hover,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-next-month:hover{
  background: rgba(255,255,255,.18) !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-weekdays{
  margin: 0 10px 4px 10px;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-weekday{
  font-size: 11px !important;
  font-weight: 700 !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-days{
  padding: 8px 10px 10px !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day{
  height: 30px !important;
  line-height: 30px !important;
  max-width: 30px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-footer{
  margin-top: 4px;
  padding: 0 12px 12px;
}

@media (max-width: 720px){
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell{
    flex-direction: column;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-panel{
    max-width: 100%;
    flex-basis: auto;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height .34s ease, opacity .22s ease, transform .34s ease;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-expanded .hb-calendarbox-panel{
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
  }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day{
    height: 28px !important;
    line-height: 28px !important;
    max-width: 28px !important;
    border-radius: 9px !important;
  }
}

/* =====================================================================
   v1.3.1 — Calendar Box & Horizontal layout hardening
   - Fix large gaps on mobile (summary no longer flex-grows)
   - Prevent desktop "sideways" panel from vanishing in narrow Elementor columns
   - Remove legacy Step 1 max-width / overflow constraints for these layouts
   ===================================================================== */

/* Ensure Step 1 container does not clip expanded layouts */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1,
#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1{
  overflow: visible !important;
}

/* Remove legacy "compact card" styling from the wrap for modern layouts */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-step-calendar .hb-calendar-wrap--calendarbox,
#hb-booking-root[data-step1-layout="horizontal"] .hb-step-calendar .hb-calendar-wrap--horizontal{
  max-width: 920px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Calendar Box: auto-vertical mode (JS adds .is-vertical when container is narrow) */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical{
  flex-direction: column !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical .hb-calendarbox-summary{
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical .hb-calendarbox-panel{
  max-width: 100% !important;
  flex-basis: auto !important;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height .34s ease, opacity .22s ease, transform .34s ease;
}
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical.is-expanded .hb-calendarbox-panel{
  /* Smaller than before to keep mobile view compact */
  max-height: 430px;
  opacity: 1;
  transform: translateY(0);
}

/* Reduce the gap that was appearing on mobile by preventing summary flex-grow */
@media (max-width: 720px){
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary{
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell{
    gap: 8px !important;
    padding: 10px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-header{
    margin-bottom: 6px !important;
    padding: 8px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-sub{
    padding: 7px 10px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-months{
    margin: 8px 8px 6px 8px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-days{
    padding: 6px 8px 10px !important;
  }
}


/* =====================================================================
   v1.3.2 — Calendar Box polish (center alignment, compact header, no clipping)
   Grey + light green + blue aesthetic. Elementor-responsive.
   ===================================================================== */

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell{
  padding: 10px !important;
  overflow: visible !important;
  max-width: 820px !important;
  background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.96)) !important;
}

/* Make the summary header slightly smaller and cleaner */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-box-header{
  margin-bottom: 6px !important;
  padding: 7px !important;
  background: linear-gradient(135deg,
    rgba(var(--hb-primary-rgb), .08),
    rgba(var(--hb-accent-rgb), .08)
  ) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-date{
  padding: 8px 10px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-label{
  color: rgba(55,65,81,.72) !important;
  font-weight: 800 !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-box-value{
  font-size: 14px !important;
  font-weight: 900 !important;
  color: rgba(17,24,39,.96) !important;
}

/* Panel: center contents and avoid side clipping */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-panel{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-expanded .hb-calendarbox-panel,
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-vertical.is-expanded .hb-calendarbox-panel{
  padding: 10px !important;
  overflow: visible !important; /* allow shadows; calendar itself stays clipped */
}

/* Inline calendar host: keep centered and responsive */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Calendar itself: fit inside the panel; no width based on viewport */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 328px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

/* Month bar: inset so it never touches/cuts the panel edges */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-months{
  border-radius: 12px !important;
  margin: 6px 6px 6px 6px !important;
  padding: 6px 10px 6px !important;
  padding-right: 44px !important; /* space for close button */
}

/* Days area: slightly tighter for a shorter overall height */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-weekdays{
  padding: 0 8px !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-days{
  padding: 4px 8px 8px !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-day{
  height: 28px !important;
  line-height: 28px !important;
  margin: 1px !important;
  font-size: 12px !important;
}

/* Close button: smaller, fully inside, modern */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-close{
  top: 12px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.10) !important;
}

/* Mobile: keep everything perfectly centered and avoid edge clipping */
@media (max-width: 520px){
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell{
    padding: 10px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell.is-expanded .hb-calendarbox-panel{
    padding: 10px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
    max-width: 320px !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-months{
    margin: 6px !important;
  }
}



/* Calendar Box: removed hint/button row and close button (v1.3.3) */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-sub,
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-close{display:none !important;}

/* Calendar Box: inline calendar sizing & centering */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar{
  display: flex;
  justify-content: center;
  padding: 10px 10px 8px;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  background: transparent !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-innerContainer,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .dayContainer{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-days{
  width: 100% !important;
}
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-weekdays{
  width: 100% !important;
}


/* =====================================================================
   v1.3.4 UI refresh — Horizontal Step 1 and Flatpickr square tiles
   - Remove wasted vertical space (title removed in PHP)
   - Make horizontal layout look like a premium modern bar (Elementor-friendly)
   - Use blue + grey, with square-ish colored date tiles
   ===================================================================== */

#hb-booking-root[data-step1-layout="horizontal"] .hb-step-calendar{
  padding-top: 0 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap--horizontal{
  width: 100% !important;
  max-width: 820px !important; /* target ~800px */
  margin: 0 auto !important;
  background: var(--hb-form-bg, #fff) !important;
  border: 1px solid rgba(148,163,184,.55) !important; /* slate-300 */
  border-radius: calc(var(--hb-radius, 16px) + 4px) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.10) !important;
  padding: 16px 18px 14px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  display: grid !important;
  grid-template-columns: 1.25fr 1.25fr .7fr .7fr !important;
  gap: 14px !important;
  align-items: end !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-label{
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: #334155 !important; /* slate-700 */
  margin-bottom: 6px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon input,
#hb-booking-root[data-step1-layout="horizontal"] select{
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148,163,184,.65) !important;
  background: linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(241,245,249,1) 100%) !important;
  color: #0f172a !important; /* slate-900 */
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon input:focus,
#hb-booking-root[data-step1-layout="horizontal"] select:focus{
  border-color: rgba(37,99,235,.75) !important; /* blue-600 */
  box-shadow: 0 0 0 4px rgba(37,99,235,.14) !important;
  outline: none !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon{
  position: relative !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon svg{
  opacity: .85 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-tip{
  margin: 10px 2px 0 !important;
  padding-top: 10px !important;
  border-top: 1px dashed rgba(148,163,184,.55) !important;
  font-size: 12.5px !important;
  color: #64748b !important; /* slate-500 */
}

/* Responsive behavior: keep it ultra clean on smaller columns/devices */
@media (max-width: 920px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap--horizontal{
    max-width: 100% !important;
    padding: 14px 14px 12px !important;
  }
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr !important;
  }
}

/* Flatpickr: square-ish colored tiles (requested for horizontal calendar) */
#hb-booking-root .flatpickr-day{
  border-radius: 8px !important; /* square tile look, not circular */
}

#hb-booking-root .flatpickr-day.startRange,
#hb-booking-root .flatpickr-day.endRange,
#hb-booking-root .flatpickr-day.selected{
  background: var(--hb-primary, #2563eb) !important;
  border-color: var(--hb-primary, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
}

#hb-booking-root .flatpickr-day.inRange{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.0) !important;
  color: #0f172a !important;
}

/* Remove the header space that was previously occupied by "Pick Your Dates" */
#hb-booking-root .hb-step-calendar > h3{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Calendar box: keep compact spacing after title removal */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-step-calendar{
  padding-top: 0 !important;
}


/* =====================================================================
   v1.3.5 — Horizontal Step 1 fixes
   - Make the bar truly responsive inside Elementor columns (container-width driven)
   - Avoid ultra-narrow columns squashing fields/labels
   - No Step 1 tips (removed in PHP)
   ===================================================================== */

/* Override the earlier grid to a flex-wrap layout that adapts to the container width */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-end !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field{
  flex: 1 1 150px !important;
  min-width: 140px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field.hb-field-date{
  flex: 2 1 260px !important;
  min-width: 220px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-label{
  white-space: nowrap !important;
}

@media (max-width: 520px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field{
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* Flatpickr popup polish for Horizontal layout (premium, modern, compact) */
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-calendar{
  border: 1px solid rgba(148,163,184,.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.18) !important;
  overflow: hidden !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-months{
  background: linear-gradient(90deg, rgba(var(--hb-primary-rgb, 37,99,235), .96) 0%, rgba(var(--hb-primary-rgb, 37,99,235), .74) 100%) !important;
  padding: 8px 10px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-months .flatpickr-month,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-current-month,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-current-month input.cur-year,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-current-month span.cur-month{
  color: #fff !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-weekdays{
  background: rgba(241,245,249,1) !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-weekday{
  color: #334155 !important;
  font-weight: 700 !important;
}


/* =====================================================================
   v1.3.6 — Horizontal Step 1 (final) — match the reference layout
   - Desktop: single row (check-in, check-out, adults, children)
   - Tablet: 2 columns
   - Mobile: 1 column
   - Calendar popup styled to match the classic blue header + square tiles
   ===================================================================== */

/* Force the intended grid layout regardless of theme/Elementor defaults */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  display: grid !important;
  grid-template-columns: 2.2fr 2.2fr 1fr 1fr !important;
  gap: 18px !important;
  align-items: end !important;
  width: 100% !important;
}

@media (max-width: 860px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 520px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field{
  min-width: 0 !important;
}

/* Label + input spacing like the reference */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-label{
  display: block !important;
  margin: 0 0 8px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

/* Inputs with icon on the right */
#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon{
  position: relative !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-date-display{
  width: 100% !important;
  height: 48px !important;
  padding: 0 44px 0 14px !important;
  border-radius: 6px !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  font-size: 15px !important;
  line-height: 48px !important;
  color: #111827 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-select{
  width: 100% !important;
  height: 48px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  font-size: 15px !important;
  color: #111827 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-input-icon .hb-icon{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #334155 !important;
  pointer-events: none !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-date-display:focus,
#hb-booking-root[data-step1-layout="horizontal"] .hb-select:focus{
  outline: none !important;
  border-color: rgba(var(--hb-primary-rgb, 37,99,235), .95) !important;
  box-shadow: 0 0 0 3px rgba(var(--hb-primary-rgb, 37,99,235), .18) !important;
}

/* Horizontal picker: classic blue header + square day tiles (sample-like) */
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-calendar{
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 14px 44px rgba(15,23,42,.18) !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-months{
  background: #0b4aa2 !important;
  padding: 6px 8px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-months .flatpickr-prev-month,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-months .flatpickr-next-month{
  color: #fff !important;
  fill: #fff !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-current-month,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-current-month span.cur-month,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-current-month input.cur-year{
  color: #fff !important;
  font-weight: 700 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-weekdays{
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-weekday{
  color: #334155 !important;
  font-weight: 700 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-day{
  border-radius: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-day:hover{
  background: rgba(var(--hb-primary-rgb, 37,99,235), .10) !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-day.selected,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-day.startRange,
#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-day.endRange{
  background: #0b4aa2 !important;
  border-color: #0b4aa2 !important;
  color: #fff !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .flatpickr-day.inRange{
  background: rgba(11,74,162,.16) !important;
  border-color: rgba(11,74,162,0) !important;
  color: #0f172a !important;
}

/* =====================================================================
   v1.3.7 — Horizontal Step 1 fine-tune (Elementor/container-width safe)
   Goals:
   - Prevent overflow/clipping when the shortcode sits in a narrower column
   - Match the 4-field single-row reference when width allows (~800px)
   - Automatically fall back to 2 columns / 1 column based on *container* width
   - Ensure adults/children labels never overlap and controls keep full width
   ===================================================================== */

#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap--horizontal{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 14px 16px 12px !important;
  overflow: visible !important;
  /* Container queries (works great inside Elementor columns) */
  container-type: inline-size;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: end !important;
}

/* Ensure each field stacks label + control (prevents theme overrides causing overlaps) */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* Allow date fields to shrink inside grids (fixes overflow/"vanishing" right side) */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field.hb-field-date{
  min-width: 0 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-date-display,
#hb-booking-root[data-step1-layout="horizontal"] .hb-select{
  width: 100% !important;
  min-width: 0 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-label{
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin: 0 0 7px 0 !important;
}

/* Remove any remaining Step 1 tip text for all layouts (requested) */
#hb-booking-root .hb-step1-tip,
#hb-booking-root .hb-tip{
  display: none !important;
}

/* Container-width breakpoints (preferred) */
@container (max-width: 780px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@container (max-width: 520px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* Fallback for browsers without container queries */
@media (max-width: 860px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =====================================================================
   v1.3.8 — Horizontal layout: enforce true horizontal bar on desktop
   Fixes:
   - Elementor/narrow column: prevent unwanted full-vertical stack
   - Use JS-set data-hb-horizontal-cols (4/2/1) for reliable responsiveness
   ===================================================================== */

#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1{
  max-width: 920px !important;
  padding: 18px 18px 16px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-calendar-wrap--horizontal{
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  display: grid !important;
  width: 100% !important;
  gap: 18px !important;
  align-items: end !important;
}

#hb-booking-root[data-step1-layout="horizontal"][data-hb-horizontal-cols="4"] .hb-horizontal-fields{
  grid-template-columns: minmax(0, 2.35fr) minmax(0, 2.35fr) minmax(0, 0.95fr) minmax(0, 0.95fr) !important;
}

#hb-booking-root[data-step1-layout="horizontal"][data-hb-horizontal-cols="2"] .hb-horizontal-fields{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

#hb-booking-root[data-step1-layout="horizontal"][data-hb-horizontal-cols="1"] .hb-horizontal-fields{
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-field{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields .hb-label{
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* Remove any remaining hint/tip text in Step 1 (requested) */
#hb-booking-root[data-step1-layout="horizontal"] #hb-step-1 .hb-hint,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-step-1 .hb-hint{
  display: none !important;
}

/* =====================================================================
   v1.3.9 — FINAL HARDENING (Horizontal + Calendar Box)
   Fixes two failure modes:
   1) Legacy 350×350 Step 1 card rules (with !important) overriding
      horizontal/calendar_box sizing.
   2) If JS does not set data-hb-horizontal-cols (Elementor dynamic render),
      the grid can degrade into a single-column stack.
   ===================================================================== */

/* Step 1 container must NOT be forced into the 350×350 card for modern layouts */
#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1{
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* The step wrapper also had a legacy 350px cap; remove it for modern layouts */
#hb-booking-root[data-step1-layout="horizontal"] .hb-step-calendar,
#hb-booking-root[data-step1-layout="calendar_box"] .hb-step-calendar{
  max-width: none !important;
  width: 100% !important;
}

/* Ensure the horizontal bar stays horizontal by default (even if JS attrs are missing) */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
  grid-template-columns: minmax(0, 2.35fr) minmax(0, 2.35fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
}

@media (max-width: 860px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px){
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =====================================================================
   Step 1 layout isolation + hard overrides (v1.4.0)

   Goal:
   - Keep DEFAULT layout compact (the original ~350x350 calendar card)
   - Keep HORIZONTAL + CALENDAR BOX layouts wide/auto height
   - Provide a safe Horizontal grid fallback even if JS data-hb-horizontal-cols
     is not present or if container queries are not supported.
   ===================================================================== */

/* DEFAULT (compact) layout */
#hb-booking-root[data-step1-layout="default"] #hb-booking-container.hb-mode-step1 {
  max-width: 350px !important;
  width: 100% !important;
  height: 350px !important;
  max-height: 350px !important;
  overflow: hidden !important;
  padding: 14px !important;
}

/* HORIZONTAL + CALENDAR BOX (wide) layouts */
#hb-booking-root[data-step1-layout="horizontal"] #hb-booking-container.hb-mode-step1,
#hb-booking-root[data-step1-layout="calendar_box"] #hb-booking-container.hb-mode-step1 {
  max-width: 920px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 16px !important;
}

/* Horizontal: desktop 4 columns (fallback) */
#hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields {
  display: grid !important;
  gap: 12px !important;
  align-items: end;
  grid-template-columns: minmax(0, 2.35fr) minmax(0, 2.35fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
}

/* Horizontal: honor JS-driven col count if present */
#hb-booking-root[data-step1-layout="horizontal"][data-hb-horizontal-cols="2"] .hb-horizontal-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#hb-booking-root[data-step1-layout="horizontal"][data-hb-horizontal-cols="1"] .hb-horizontal-fields {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  #hb-booking-root[data-step1-layout="horizontal"] .hb-horizontal-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Calendar Box: avoid oversized blank area; keep summary compact */
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell {
  align-items: flex-start !important;
  justify-content: center !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary {
  flex: 0 0 340px !important;
  max-width: 340px !important;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-panel {
  flex: 0 1 420px !important;
  max-width: 420px !important;
}

@media (max-width: 860px) {
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-shell {
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-summary,
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-panel {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* v1.3.11 — Calendar Box (Step-1) should be dates-only (no split columns / no empty whitespace)
   The markup now renders a single "card" with the two date fields on top and the inline calendar below.
*/
#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendar-wrap--calendarbox {
  display: flex;
  justify-content: center;
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-simple {
  width: min(920px, 100%);
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
}

#hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-simple .hb-calendar-box-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

@media (max-width: 560px) {
  #hb-booking-root[data-step1-layout="calendar_box"] .hb-calendarbox-simple .hb-calendar-box-header {
    grid-template-columns: 1fr;
  }
}

#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Hide the source input used by flatpickr inline mode */
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar > input#hb_date_range {
  display: none !important;
}

/* Keep the inline calendar visually integrated (no nested shadows/borders)
   while preserving flatpickr's sizing.
*/
#hb-booking-root[data-step1-layout="calendar_box"] #hb-inline-calendar .flatpickr-calendar {
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
}