/* ==========================================================================
   Widget: search-bar — the pick-up / return / dates control
   Desktop: one row, sticky under the header, both always full size.
   Mobile:  a 3 x 2 grid, always expanded, no header above it.

     ┌───────────┬───────────┐
     │ Pick-up   │ Return    │
     ├───────────┼───────────┤
     │ From      │ To        │
     ├───────────┼───────────┤
     │ Sort      │ Filters   │
     └───────────┴───────────┘
   ========================================================================== */

.sbar { background: var(--brand); }
/* minmax(0,…) matters: a native date input has a min-content width wider than
   half a phone screen, and plain 1fr refuses to shrink below it */
.sbar-grid {
  display: grid; gap: 6px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .sbar-grid {
    gap: 8px;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.35fr) minmax(0,1.35fr) auto auto;
  }
}

.cell {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 0; min-height: var(--sbar-cell-h); padding: 4px 10px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #fff;
}
@media (min-width: 1024px) { .cell { min-height: var(--sbar-cell-h-lg); padding: 8px 12px; } }
.cell:focus-within { background: rgba(255,255,255,.18); outline: 2px solid #fff; outline-offset: 2px; }
.cell:focus-within :focus-visible { outline: none; }

.cell > label, .cell-label {
  font-size: 10px; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.7);
}
@media (min-width: 1024px) { .cell > label, .cell-label { font-size: var(--t-11); } }

.cell select, .cell input {
  color-scheme: dark; width: 100%; min-width: 0; margin: 0; padding: 0;
  background: transparent; border: 0; font-family: inherit;
  font-size: var(--t-13); font-weight: 700; color: #fff;
}
@media (min-width: 1024px) { .cell select, .cell input { font-size: var(--t-15); } }
.cell select { -webkit-appearance: none; appearance: none; padding-right: 16px; text-overflow: ellipsis; }
.cell input[type="date"] { flex: 1 1 auto; }
.cell input[type="time"] { flex: 0 0 auto; width: 88px; }
@media (min-width: 1024px) { .cell input[type="time"] { width: 112px; } }

.cell .caret { position: absolute; right: 8px; top: 50%; transform: translateY(-20%); opacity: .8; pointer-events: none; }

/* One datetime-local per side: a single tap opens date and time together,
   and the whole cell is the hit area (see the click handler in index.html). */
.cell-when { cursor: pointer; }
.cell-when input[type="datetime-local"] { width: 100%; min-width: 0; cursor: pointer; }
.cell-when input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer; filter: invert(1); opacity: .75; margin-left: 2px;
}
/* phone: drop the native picker glyph — the cell itself opens the picker, and
   the 24px it costs is the difference between fitting on one line and not */
@media (max-width: 1023px) {
  .cell-when input[type="datetime-local"] { font-size: var(--t-12); }
  .cell-when input[type="datetime-local"]::-webkit-calendar-picker-indicator { display: none; }
}

/* action cells: sort + filters, mobile row three */
.sbar .act {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--sbar-cell-h); padding: 0 10px; border-radius: var(--r-sm);
  font-size: var(--t-13); font-weight: 700;
}
@media (min-width: 1024px) { .sbar .act { min-height: var(--sbar-cell-h-lg); font-size: var(--t-14); } }
.sbar .act-quiet { background: rgba(255,255,255,.08); color: #fff; }
.sbar .act-quiet:hover { background: rgba(255,255,255,.16); }
.sbar .act-solid { background: #fff; color: var(--brand); }
.sbar .act-solid:hover { background: rgba(255,255,255,.9); }
.sbar .act select { width: 100%; text-align: left; }

/* stuck: lose the card look, gain the bar look */
.sbar-wrap { transition: padding .15s ease; }
#booking.is-stuck .sbar { border-radius: 0; box-shadow: var(--sh-bar); }
#booking:not(.is-stuck) .sbar { border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
#booking.is-stuck .sbar-wrap { padding-left: 0; padding-right: 0; }

/* Visibility belongs to the widget, not to utility classes: .cell/.act set
   `display`, which beats Tailwind's `hidden` / `lg:hidden` on specificity. */
.sbar .cell--phone { display: flex; }
.sbar .act--desk   { display: none; }
@media (min-width: 1024px) {
  .sbar .cell--phone { display: none; }
  .sbar .act--desk   { display: flex; }
}