/**
 * Homepage search bar.
 *
 * ⚠️ EVERY rule is written at #ora-search.ora-search, which is (1,1,0).
 * Hello Elementor's kit styles bare `button`, `input` and `select`, and those
 * land on this markup and beat a plain class. The first build used plain
 * classes and Elementor painted the date button solid, the calendar days as
 * buttons, and the whole bar unusable. This is the same armour the booking
 * widget carries; see CLAUDE.md.
 *
 * Its own stylesheet on purpose: booking-assistant.css is 184KB and belongs on
 * the booking page, not the busiest page of the site.
 */
#ora-search.ora-search {
  --ors-bg: #022B32;
  --ors-surface: #053740;
  --ors-surface-2: #173C43;
  --ors-accent: #ffd693;
  --ors-on-accent: #022b32;
  --ors-text: #f4f1ea;
  --ors-muted: #9db3b6;
  --ors-border: rgba(244, 241, 234, .22);
  --ors-faint: rgba(244, 241, 234, .42);

  position: relative;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ors-text);
}

#ora-search.ora-search .ora-search__heading {
  margin: 0 0 .6rem;
  padding: 0;
  font-size: 15px;
  color: var(--ors-muted);
}

/* The bar: one pill, segments divided by hairlines. */
#ora-search.ora-search .ora-search__form {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: .35rem .35rem .35rem 0;
  background: var(--ors-surface);
  border: 1.5px solid var(--ors-border);
  border-radius: 999px;
}

#ora-search.ora-search .ora-search__seg {
  position: relative;
  display: flex;
  min-width: 0;
}
#ora-search.ora-search .ora-search__seg--dates  { flex: 1 1 58%; }
#ora-search.ora-search .ora-search__seg--guests { flex: 1 1 42%; border-left: 1px solid var(--ors-border); }

/* The two triggers are buttons, which is exactly what Elementor styles. */
#ora-search.ora-search .ora-search__trigger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: .55rem 1.5rem;
  background: none;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;      /* 16px or iOS zooms the page on focus */
  font-weight: 400;
  line-height: 1.3;
  color: var(--ors-text);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background .15s;
}
#ora-search.ora-search .ora-search__trigger:hover,
#ora-search.ora-search .ora-search__trigger[aria-expanded="true"] {
  background: var(--ors-surface-2);
}
#ora-search.ora-search .ora-search__trigger:focus-visible {
  outline: 2px solid var(--ors-accent);
  outline-offset: -2px;
}

#ora-search.ora-search .ora-search__legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ors-muted);
}
#ora-search.ora-search .ora-search__value {
  font-size: 16px;
  color: var(--ors-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ora-search.ora-search .ora-search__value--empty { color: var(--ors-muted); }

#ora-search.ora-search .ora-search__submit {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  padding: 0 1.6rem;
  min-height: 52px;
  background: var(--ors-accent);
  color: var(--ors-on-accent);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
#ora-search.ora-search .ora-search__submit:hover { background: #ffe4b4; }
#ora-search.ora-search .ora-search__submit::after { content: ' \2192'; }

/* Popovers */
#ora-search.ora-search .ora-search__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + .6rem);
  left: 0;
  padding: 1rem;
  background: var(--ors-bg);
  border: 1.5px solid var(--ors-border);
  border-radius: 16px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .5);
}
#ora-search.ora-search .ora-search__pop--cal    { width: min(680px, 92vw); }
#ora-search.ora-search .ora-search__pop--guests { right: 0; left: auto; width: min(340px, 92vw); }
#ora-search.ora-search .ora-hidden { display: none !important; }

/* Guest steppers */
#ora-search.ora-search .ora-search__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--ors-border);
}
#ora-search.ora-search .ora-search__stepper:last-of-type { border-bottom: 0; }
#ora-search.ora-search .ora-search__stepper-text { display: flex; flex-direction: column; }
#ora-search.ora-search .ora-search__stepper-title { font-size: 16px; font-weight: 600; }
#ora-search.ora-search .ora-search__stepper-sub   { font-size: 13px; color: var(--ors-muted); }
#ora-search.ora-search .ora-search__stepper-ctl {
  display: flex;
  align-items: center;
  gap: .7rem;
}
#ora-search.ora-search .ora-search__step {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  background: none;
  border: 1.5px solid var(--ors-border);
  border-radius: 50%;
  box-shadow: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--ors-text);
  cursor: pointer;
}
#ora-search.ora-search .ora-search__step:hover:not([disabled]) { border-color: var(--ors-accent); color: var(--ors-accent); }
#ora-search.ora-search .ora-search__step[disabled] { opacity: .3; cursor: default; }
#ora-search.ora-search .ora-search__count { min-width: 1.4rem; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
#ora-search.ora-search .ora-search__stepper-note { margin: .8rem 0 0; padding: 0; font-size: 13px; color: var(--ors-muted); }

@media (max-width: 780px) {
  /* Stacked: three full-width targets rather than three squeezed ones. */
  #ora-search.ora-search .ora-search__form {
    flex-direction: column;
    padding: .35rem;
    border-radius: 18px;
  }
  #ora-search.ora-search .ora-search__seg--guests { border-left: 0; border-top: 1px solid var(--ors-border); }
  #ora-search.ora-search .ora-search__trigger { border-radius: 12px; padding: .6rem 1rem; }
  #ora-search.ora-search .ora-search__submit { width: 100%; margin-top: .35rem; border-radius: 12px; }
  #ora-search.ora-search .ora-search__pop { left: 0; right: 0; width: auto; }
}

/* -----------------------------------------------------------------------
   Calendar inside the popover

   Also armoured. Elementor styles bare `button`, and every day cell IS a
   button: unarmoured, the theme painted them as buttons, which is what made
   the popover render as overlapping numbers and stray strikethroughs.

   Duplicated STYLE, never duplicated LOGIC. The behaviour comes from the one
   shared Calendar class in ora-calendar.js.
   ----------------------------------------------------------------------- */
#ora-search.ora-search .ora-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .8rem;
}
#ora-search.ora-search .ora-cal-titles {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-around;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ors-text);
}
#ora-search.ora-search .ora-cal-arrow {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin: 0;
  padding: 0;
  background: none;
  border: 1.5px solid var(--ors-border);
  border-radius: 50%;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--ors-text);
  cursor: pointer;
}
#ora-search.ora-search .ora-cal-arrow[disabled] { opacity: .28; cursor: default; }

#ora-search.ora-search .ora-cal-months { display: flex; gap: 1.5rem; }
#ora-search.ora-search .ora-cal-month  { flex: 1 1 0; min-width: 0; }
#ora-search.ora-search .ora-cal-month-label { display: none; }
#ora-search.ora-search .ora-cal-dow,
#ora-search.ora-search .ora-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
#ora-search.ora-search .ora-cal-dow {
  margin: 0 0 .35rem;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--ors-muted);
  text-align: center;
}
#ora-search.ora-search .ora-cal-dow span { padding: 0; }
#ora-search.ora-search .ora-cal-dow-sep { height: 1px; background: var(--ors-border); margin-bottom: .5rem; }

#ora-search.ora-search .ora-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ors-text);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
}
#ora-search.ora-search .ora-day--empty { visibility: hidden; }

/* Booked or past: clearly recessed, not hoverable, not clickable. This was the
   weakest part of the small calendar, where a booked day read almost the same
   as a free one and still took a hover. */
#ora-search.ora-search .ora-day--past,
#ora-search.ora-search .ora-day--disabled,
#ora-search.ora-search .ora-day--unavail {
  color: var(--ors-faint);
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
#ora-search.ora-search .ora-day--unavail {
  text-decoration: line-through;
  text-decoration-color: var(--ors-faint);
  text-decoration-thickness: 1.5px;
}

/* Free but too close to the arrival: available, just not as this check-out, so
   no strikethrough and still clickable to restart the selection there. */
#ora-search.ora-search .ora-day--too-soon {
  opacity: .7;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}

/* Hover and focus belong only to days that can be chosen. */
#ora-search.ora-search .ora-day:not(.ora-day--disabled):not(.ora-day--start):not(.ora-day--end):hover,
#ora-search.ora-search .ora-day:not(.ora-day--disabled):focus-visible {
  background: rgba(255, 214, 147, .22);
  color: #fff;
}
#ora-search.ora-search .ora-day--in-range { background: rgba(255, 214, 147, .16); border-radius: 0; }
#ora-search.ora-search .ora-day--hover    { background: rgba(255, 214, 147, .26); }
#ora-search.ora-search .ora-day--start,
#ora-search.ora-search .ora-day--end {
  background: var(--ors-accent);
  color: var(--ors-on-accent);
  font-weight: 700;
  border-radius: 50%;
}
#ora-search.ora-search .ora-day--today { box-shadow: inset 0 0 0 1px var(--ors-border); }
#ora-search.ora-search .ora-day-num  { line-height: 1; }
#ora-search.ora-search .ora-day-rate { display: none; }   /* no rates on the homepage */
#ora-search.ora-search .ora-cal--loading { opacity: .5; pointer-events: none; }

#ora-search.ora-search .ora-cal-hint {
  margin: .8rem 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ors-muted);
}
#ora-search.ora-search .ora-cal-clear,
#ora-search.ora-search .ora-next-avail-btn {
  margin: 0 0 0 .5rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ors-accent);
  text-decoration: underline;
  text-transform: none;
  cursor: pointer;
}
#ora-search.ora-search .ora-next-avail { margin-top: .6rem; font-size: 13px; color: var(--ors-muted); }
#ora-search.ora-search .ora-next-avail-label { color: var(--ors-text); }
#ora-search.ora-search .ora-num { font-family: inherit; }

@media (max-width: 780px) {
  #ora-search.ora-search .ora-cal-months { flex-direction: column; gap: 1.2rem; }
  #ora-search.ora-search .ora-day { min-height: 42px; }
}