/* ===========================
   Booking Form — Base Styles
   =========================== */
:root{
  --bg:#ffffff;
  --text:#0f172a;      /* slate-900 */
  --muted:#6b7280;     /* gray-500  */
  --border:#e5e7eb;    /* gray-200  */
  --accent:#0ea5e9;    /* sky-500   */
  --shadow:0 10px 20px rgba(2,6,23,.06);
  --radius:12px;
  --input-h:48px;
  --gap:12px;
  --label:12px;
  --fz:14px;
}

/* Container (Elementor controls visibility/placement) */
.search-availability-top{ position:relative; z-index:99999; }
.search-availability-top .booking-search{
  /*! background:var(--bg); */
  /*! color:var(--text); */
  /*! border:1px solid var(--border); */
  /*! border-radius:var(--radius); */
  /*! box-shadow:var(--shadow); */
  /*! padding:16px; */
}

/* Form wrapper */
.form-wrap.with-icon{ position:relative; }
.form-availability{ width:100%; }

/* ===========================
   Layout
   - Mobile-first: everything stacks
   - >=768px: calendars full width, then 3 dropdowns in 1 row, then button full width
   =========================== */
.form-availability .form-content{
  display:grid;
  grid-template-columns: 1fr;  /* stacked by default */
  gap: var(--gap);
  align-items: end;
}

/* Field blocks */
.form-availability .booking-arrival,
.form-availability .booking-departure,
.form-availability .booking-adults,
.form-availability .booking-children,
.form-availability .booking-room,
.form-availability .booking-btn,
.form-availability .booking-note{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 10px;
}

/* Desktop/tablet layout */
@media (min-width:768px){
  .form-availability .form-content{
    grid-template-columns: repeat(3, 1fr);
  }

  /* Calendars: each row is full width */
  .booking-arrival,
  .booking-departure{
    grid-column: 1 / -1; /* span all 3 columns */
  }

  /* Dropdowns: share one row (3 columns) */
  .booking-adults,
  .booking-children,
  .booking-room{
    grid-column: span 1;
    align-self: end; /* align bottoms neatly */
    margin-right: 5px;
  }

  /* Button full width below */
  .booking-btn{
    grid-column: 1 / -1;
  }
}

/* ===========================
   Labels, Inputs, Icons
   =========================== */
.form-availability label{
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}

.field-group{ position: relative; }
.field-group .icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
}

.form-availability input[type="text"],
.form-availability select{
  height: var(--input-h);
  width: 100%;
  font-size: var(--fz);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}

/* Add left padding if icon present */
.field-group input[type="text"],
.field-group select{
  padding-left: 20px;
}

/* Focus */
.form-availability input[type="text"]:focus,
.form-availability select:focus,
.form-availability .button:focus-visible{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.2);
}

/* Placeholder (if used) */
.form-availability ::placeholder{ color:#9ca3af; }

/* Custom select arrow */
.form-availability select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat;
  padding-right: 44px; /* space for arrow */
}

/* Optional dropdown icon container (if kept) */
.booking-room{ position: relative; }
.booking-room .dropdown-icon{
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  pointer-events: none;
}

/* ===========================
   Button
   =========================== */
.form-availability .button{
  font-family:"Montserrat", Sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-text);
  border-color: var(--e-global-color-text);
}
.form-availability #booking_form_top_formSearchSubmit:hover{
  background-color: var(--e-global-color-text);
  color: var(--e-global-color-secondary);
}
.form-availability .button:active{ transform: translateY(1px); }

/* Note */
.form-availability .booking-note .uppercase{
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Validation */
.form-availability input:required:invalid,
.form-availability select:required:invalid{
  border-color: #fca5a5; /* red-300 */
}

/* ===========================
   Datepicker stacking (Flatpickr & friends)
   =========================== */
.flatpickr-calendar,
.ui-datepicker,
.air-datepicker,
.datepicker-dropdown,
.daterangepicker,
.litepicker,
.litepicker .container{
  z-index: 999999 !important;
}

/* Make sure popup calendars aren’t clipped by field wrapper */
.field-group{ overflow: visible; }