/* ============================================================
   DESKTOP SEARCH BAR  (.dsb-*)
   ------------------------------------------------------------------
   Location, check-in date, check-in time and a Search button, built
   from the same field pattern as the phone search card: icon + small
   label + bold value on a white rounded card.

   Shared by the hourly-hotels listing page and the home page so the
   two bars are visually identical. The markup lives in
   pages/includes/search_bar.php.

   NOTE: the listing page also carries this same block inside
   pages/html/hourly-hotels/main-page-style.css. Keep the two in
   step when you change a rule here.
   ============================================================ */

.dsb-bar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 1080px;
  margin: 30px auto 0;
  padding: 14px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(20, 35, 65, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.18);
}

.dsb-fields {
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  min-width: 0;
}

.dsb-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  min-height: 62px;
  box-sizing: border-box;
  background: #fbfcff;
  border: 1.5px solid rgba(20, 35, 65, 0.10);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dsb-field:hover { border-color: rgba(99, 102, 241, 0.34); }

.dsb-field:focus-within {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.dsb-icon {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 16px;
  color: #6366f1;
}

.dsb-text { flex: 1 1 auto; min-width: 0; }

.dsb-label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #7c87a6;
}

.dsb-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.2;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsb-chevron {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: #9aa6c6;
  transition: transform 0.18s ease;
}

.dsb-field--time.is-open .dsb-chevron { transform: rotate(180deg); }

/* The real controls sit over their field, invisible, so the browser's own
   pickers still open anchored to the right place while the designed
   label/value stays readable on top. */
.dsb-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* The invisible select renders the real <option> list, and options inherit
   the control's transparent text, which would make every city blank. Give
   them their own colours back. */
.dsb-native option {
  color: #111827;
  background: #ffffff;
  font-weight: 700;
}

/* The time field opens the slot panel built in JS, so its own control
   must not swallow the click. */
.dsb-native--button { pointer-events: none; }

/* Check-out stays a real (never type="hidden") input because flatpickr is
   attached to it, but it is removed from the visible layout entirely. */
.dsb-sr-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.dsb-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 0 30px;
  border: none;
  border-radius: 18px;
  background: #5b6df6;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(91, 109, 246, 0.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dsb-submit:hover { background: #4f61ea; box-shadow: 0 16px 30px rgba(91, 109, 246, 0.36); }
.dsb-submit:active { transform: translateY(1px); }
.dsb-submit:focus-visible { outline: 3px solid rgba(91, 109, 246, 0.45); outline-offset: 2px; }
.dsb-submit i { font-size: 0.95rem; }

/* ---------- Check-in time panel ---------- */
.dsb-time-panel {
  position: fixed;
  z-index: 10060;
  width: 330px;
  max-width: calc(100vw - 32px);
  display: none;
  background: #ffffff;
  border: 1px solid rgba(20, 35, 65, 0.10);
  border-radius: 20px;
  box-shadow: 0 26px 54px rgba(17, 24, 39, 0.24);
  overflow: hidden;
}

/* Flex column so positionTimePanel() can clamp the panel to the viewport and
   let the slot grid scroll instead of the panel being clipped. */
.dsb-time-panel.open { display: flex; flex-direction: column; }

.dsb-time-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #eef1f7;
}

.dsb-time-head h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  color: #111827;
}

.dsb-time-head h4 i { color: #6366f1; }

.dsb-time-sub {
  display: block;
  margin: 3px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #7c87a6;
}

.dsb-time-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: none;
  border-radius: 999px;
  color: #475569;
  font-size: 0.9rem;
  cursor: pointer;
}

.dsb-time-close:hover { background: #e6ebf3; }

.dsb-time-seg {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin: 12px 16px 0;
  padding: 4px;
  background: #f1f4fa;
  border-radius: 999px;
}

.dsb-time-seg button {
  flex: 1 1 0;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  color: #64748b;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.dsb-time-seg button.active {
  background: #ffffff;
  color: #4338ca;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

.dsb-time-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 16px 16px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dsb-time-grid .time-slot {
  height: 44px;
  border: 1.5px solid rgba(20, 35, 65, 0.10);
  border-radius: 12px;
  background: #fbfcff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  color: #111827;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.dsb-time-grid .time-slot:hover { border-color: rgba(99, 102, 241, 0.45); background: #f5f6ff; }

.dsb-time-grid .time-slot.selected {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4338ca;
}

.dsb-time-grid .no-time-slots {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px;
  border-radius: 12px;
  background: #fff8ec;
  color: #7a5a12;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.dsb-time-grid .no-time-slots i { color: #d08b12; margin-top: 2px; }
/* ---------- Location dropdown panel ---------- */
/* The browser's own <select> menu gave the location field five unstyled rows.
   This panel replaces it with the same card language as the time picker:
   grouped rows, a tinted icon per option, a supporting line of copy and a
   check mark on the option the guest is filtered by. */
.dsb-field--location.is-open {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.dsb-field--location.is-open .dsb-chevron { transform: rotate(180deg); }

.dsb-loc-panel {
  position: fixed;
  z-index: 10061;
  width: 348px;
  max-width: calc(100vw - 28px);
  display: none;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(20, 35, 65, 0.10);
  border-radius: 20px;
  box-shadow: 0 26px 54px rgba(17, 24, 39, 0.24);
  overflow: hidden;
  font-family: inherit;
}

.dsb-loc-panel.open { display: flex; }

/* The head stays put and the list takes the remaining height, so the script
   can clamp the whole panel to the viewport without ever cutting off the
   "Near me" row. */
.dsb-loc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #eef1f7;
}

.dsb-loc-head h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  color: #111827;
}

.dsb-loc-head h4 i {
  color: #6366f1;
  font-size: 0.9rem;
}

.dsb-loc-sub {
  display: block;
  margin: 3px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #7c87a6;
}

.dsb-loc-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: none;
  border-radius: 999px;
  color: #475569;
  font-size: 0.9rem;
  cursor: pointer;
}

.dsb-loc-close:hover { background: #e6ebf3; }

.dsb-loc-list {
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dsb-loc-cap {
  padding: 10px 10px 5px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9aa6c6;
}

.dsb-loc-cap:first-child { padding-top: 4px; }

.dsb-loc-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dsb-loc-opt:hover { background: #f5f7ff; }

.dsb-loc-opt:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.55);
  outline-offset: -2px;
  background: #f5f7ff;
}

.dsb-loc-opt.is-selected {
  background: #eef2ff;
  border-color: rgba(99, 102, 241, 0.32);
}

.dsb-loc-opt.is-selected:hover { background: #e8edff; }

.dsb-loc-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 0.92rem;
}

.dsb-loc-opt[data-value=""] .dsb-loc-ic {
  background: #eef1f7;
  color: #475569;
}

.dsb-loc-opt--near .dsb-loc-ic {
  background: #4f46e5;
  color: #ffffff;
}

.dsb-loc-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dsb-loc-copy strong {
  font-size: 0.93rem;
  font-weight: 800;
  line-height: 1.25;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsb-loc-copy span {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #7c87a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsb-loc-opt--near .dsb-loc-copy strong { color: #4338ca; }

.dsb-loc-check {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #4f46e5;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.dsb-loc-opt.is-selected .dsb-loc-check {
  opacity: 1;
  transform: scale(1);
}

.dsb-loc-sep {
  height: 1px;
  margin: 6px 10px;
  background: #eef1f7;
}

/* Narrow desktop windows: drop to two rows instead of squeezing. */
@media (min-width: 769px) and (max-width: 1080px) {
  .dsb-bar { flex-wrap: wrap; }
  .dsb-fields { flex-wrap: wrap; }
  .dsb-field { flex: 1 1 calc(50% - 6px); }
  .dsb-submit { flex: 1 1 100%; }
}

/* Below the phone breakpoint the phone bar takes over; if it ever fails to
   build, this stack keeps the search usable instead of leaving a squashed row. */
@media (max-width: 768px) {
  .dsb-bar { flex-direction: column; align-items: stretch; gap: 10px; max-width: 100%; margin: 18px auto 0; padding: 14px; }
  .dsb-fields { flex-direction: column; }
  .dsb-field { flex: 1 1 auto; }
  .dsb-submit { width: 100%; }
  .dsb-time-panel { display: none !important; }
}
/* ---------- Home page placement ---------- */
/* On the listing page the bar sits on the dark hero. On the home page it sits
   inside the light "locations" panel, right under the hero grid, so it only
   needs its own vertical rhythm here. */
.loc-search-bar {
  max-width: 1080px;
  margin: 34px auto 30px;
  padding: 0 4px;
}

.loc-search-bar .dsb-bar { margin: 0 auto; }

@media (max-width: 768px) {
  .loc-search-bar { margin: 22px auto 22px; padding: 0; }
  /* The slot panel is hidden below this breakpoint, so the time field would
     be a control that cannot open anything. Location, date and the search
     button still work, and the default time is submitted with the search. */
  .loc-search-bar .dsb-field--time { display: none; }
}