/* ─────────────────────────────────────────────────────────────────────────────
   Parada browse filter column — the right-hand "Find …" card of /v1/parkings,
   shared by /v1/comm/parkings and /v1/rental so the three browse pages look and
   behave the same: a sticky card on desktop, a collapsible card above the
   results on a phone, and one "From → To" date-range field that opens a
   calendar-only modal (Litepicker).

   The rules are the /v1/parkings ones under their own names (pls-*).
   views/public/parkings.ejs links this sheet too, but still carries an inline
   copy of the card rules (its <style> loads after this sheet and wins where
   both define a selector); the date-range field and its modal it takes ONLY
   from here. The segmented control rows (Term, Bay type, Transmission …) are
   seg-control.css (.p-seg).

   Markup (see views/public/comm/parkings.ejs):
     .pls-search-col > .pls-search-card[.is-collapsed]
       .pls-search-hd > .pls-search-title + .pls-search-toggle
       .pls-active-chips > .pls-active-chip[.is-muted]
       .pls-search-bd > form > .pls-form-col / .pls-form-row …
   The date-range field and modal are shared partials —
   views/includes/browse/date-range-field.ejs + date-range-modal.ejs, wired by
   /assets/js/browse-date-range.js — placed directly under each page's first
   field, so the three pages render one identical control.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Search card ──────────────────────────────────── */
.pls-search-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 28px rgba(0,0,0,.07);
  overflow: hidden;
}
.pls-search-hd {
  padding: 18px 24px 14px;
  border-bottom: 1px solid #f9fafb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pls-search-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.pls-search-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 18px;
  background: #1f497d;
  border-radius: 2px;
  flex-shrink: 0;
}
/* Collapse toggle button — hidden on desktop, shown on mobile */
.pls-search-toggle {
  display: none;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s ease, border-color .15s, color .15s;
  padding: 0;
}
.pls-search-toggle:hover { border-color: #1f497d; color: #1f497d; }
.pls-search-toggle:focus-visible { outline: 2px solid #1f497d !important; outline-offset: 2px; }
.pls-search-toggle .fa { font-size: 12px; }
.pls-search-card.is-collapsed .pls-search-toggle { transform: rotate(0deg); }
.pls-search-card:not(.is-collapsed) .pls-search-toggle { transform: rotate(180deg); }
/* Active-filter chips strip — surfaces current filters when collapsed */
.pls-active-chips {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 24px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #f9fafb;
}
.pls-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #1f497d;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pls-active-chip.is-muted {
  background: #fff;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.pls-search-bd { padding: 20px 22px 22px; }

.pls-label {
  font-size: 11px;
  font-weight: 800;
  color: #6b7280;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.pls-input {
  width: 100%;
  height: 44px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13.5px;
  color: #111827;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  appearance: auto;
  box-sizing: border-box;
}
.pls-input:focus {
  border-color: #1f497d;
  box-shadow: 0 0 0 3px rgba(31,73,125,.1);
}
.pls-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
/* Full-width variant — the segmented rows stack instead of sharing a row. */
.pls-form-row.pls-form-row-full {
  grid-template-columns: 1fr;
}
.pls-form-col { display: flex; flex-direction: column; min-width: 0; }
/* A single field on its own (Location, Sort by …). */
.pls-form-col.pls-form-field { margin-bottom: 12px; }

.pls-search-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pls-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  background: #fff;
  /* #6b7280 on white is 4.8:1 — /v1/parkings' #9ca3af is under AA. */
  color: #6b7280;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pls-clear-btn:hover { border-color: #9ca3af; color: #374151; }
.pls-clear-btn:focus-visible { outline: 2px solid #1f497d !important; outline-offset: 2px; }

/* Select / text field with an icon on the right */
.pls-select-wrap { position: relative; }
.pls-select-wrap .pls-select-icon {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: #9ca3af; font-size: 12px;
  pointer-events: none;
}
.pls-select-wrap .pls-input { padding-right: 30px; }

/* ── Date-range trigger (opens the date-range modal) ─────────── */
.pls-trip-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pls-trip-btn:hover {
  border-color: #1f497d;
  box-shadow: 0 0 0 3px rgba(31, 73, 125, .08);
}
.pls-trip-btn:focus-visible { outline: 2px solid #1f497d !important; outline-offset: 2px; }
.pls-trip-btn-ico {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 14px;
}
.pls-trip-btn-caret {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 11px;
}
/* One range field for From and To. The two values stay visible at a glance,
   while the whole field remains one generous tap/click target. */
.pls-trip-range {
  min-height: 62px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.pls-trip-range-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.pls-trip-range-part {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pls-trip-range-part--end { text-align: right; }
.pls-trip-range-caption {
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .45px;
  line-height: 1.2;
  text-transform: uppercase;
}
.pls-trip-range-date {
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pls-trip-range-arrow {
  color: #9ca3af;
  font-size: 12px;
}
.pls-trip-btn.is-set .pls-trip-range-date { color: #111827; font-weight: 700; }
@media (max-width: 380px) {
  .pls-trip-range { gap: 8px; padding-left: 11px; padding-right: 11px; }
  .pls-trip-range-values { gap: 5px; }
  .pls-trip-range-date { font-size: 11.5px; }
}

/* ── Price-range dual-handle slider ── */
.pls-rng-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pls-rng-val { font-size: 13px; font-weight: 800; color: #1f497d; }
.pls-rng { position: relative; height: 22px; }
.pls-rng-track { position: absolute; top: 9px; left: 0; right: 0; height: 4px; background: #e5e7eb; border-radius: 99px; }
.pls-rng-fill { position: absolute; top: 9px; height: 4px; background: #1f497d; border-radius: 99px; }
.pls-rng input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; }
.pls-rng input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.pls-rng input[type=range]::-moz-range-track { height: 4px; background: transparent; }
.pls-rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; margin-top: -7px; width: 18px; height: 18px; border-radius: 50%; background: #1f497d; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .3); cursor: pointer; }
.pls-rng input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #1f497d; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .3); cursor: pointer; }
.pls-rng input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(31,73,125,.4); }
.pls-rng input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(31,73,125,.4); }

/* ── Date-range modal ─────────────────────────────────────── */
.pls-dt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.pls-dt-overlay.open { display: flex; }
.pls-dt-modal {
  position: relative;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 18px;
  width: min(396px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(15, 23, 42, .3);
}
.pls-dt-header {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: 0;
}
.pls-dt-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f8fafc;
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pls-dt-close:hover { background: #f3f4f6; color: #111827; }
.pls-dt-close:focus-visible { outline: 2px solid #1f497d !important; outline-offset: 2px; }

.pls-dt-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow-y: auto;
  padding: 54px 18px 18px;
}
/* The calendar is the only editable control: the filter is date-based, and the
   selected From/To values remain visible on the trigger. */
.pls-dt-calendar-wrap {
  display: flex;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  margin: auto;
}
.pls-dt-picker-anchor {
  position: absolute;
  left: -9999px;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}

.pls-dt-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}
.pls-dt-btn {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: .2px;
}
.pls-dt-btn:focus-visible { outline: 2px solid #1f497d !important; outline-offset: 2px; }
.pls-dt-outline {
  background: #fff;
  color: #6b7280;
  border: 1.5px solid #e5e7eb;
}
.pls-dt-outline:hover { border-color: #1f497d; color: #1f497d; }
.pls-dt-primary {
  background: #1f497d;
  color: #fff;
  border: 1.5px solid #1f497d;
}
.pls-dt-primary:hover { background: #163a6b; border-color: #163a6b; }

/* Litepicker theming inside the modal. Litepicker paints today red (#f44336)
   and hovers in its own blue; the site palette has no red, so both are navy. */
#plsDtInlinePicker {
  display: flex;
  justify-content: center;
  width: 100%;
  --litepicker-is-today-color: #1f497d;
  --litepicker-day-color-hover: #1f497d;
  --litepicker-button-prev-month-color-hover: #1f497d;
  --litepicker-button-next-month-color-hover: #1f497d;
}
#plsDtInlinePicker .litepicker .container__days .day-item.is-today { font-weight: 800; }
#plsDtInlinePicker .litepicker {
  max-width: 100%;
  font-family: inherit;
  box-shadow: none;
}
#plsDtInlinePicker .litepicker .container__months .month-item-header { font-weight: 800; color: #1f497d; padding: 8px; }
#plsDtInlinePicker .litepicker .container__days .day-item.is-locked { color: #d1d5db; opacity: .6; }
#plsDtInlinePicker .litepicker .container__days .day-item.is-start-date,
#plsDtInlinePicker .litepicker .container__days .day-item.is-end-date {
  background: #1f497d; color: #fff; border-radius: 8px;
}
#plsDtInlinePicker .litepicker .container__days .day-item.is-in-range {
  background: #f0f7ff; color: #1f497d;
}

/* Mobile keeps the same single, centered calendar treatment. */
@media (max-width: 767px) {
  .pls-dt-overlay { padding: 12px; }
  .pls-dt-modal {
    width: min(396px, calc(100vw - 24px));
    border-radius: 16px;
  }
  .pls-dt-content { padding: 52px 12px 16px; }
  .pls-dt-footer { padding: 12px 14px 14px; }
}
@media (max-width: 360px) {
  .pls-dt-content { padding-left: 6px; padding-right: 6px; }
  .pls-dt-footer .pls-dt-btn { flex: 1 1 0; }
}

/* ── Search column: sticky on desktop ────────────── */
/* Sticky needs no scrolling ancestor between the column and the page: a
   .page-section (overflow:hidden) around it must be overridden to
   overflow:clip by the page. Each page also turns sticky off below the height
   its own card needs (a stuck card taller than the window hides its lower
   controls until the end of the list). */
.pls-search-col {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/* Results area while a filter change is being fetched */
.pls-results-loading { opacity: .45; transition: opacity .15s; }

/* Tablet (768–991): the column is ~230px wide — tighter padding, two-up rows
   stack, and the date range shows From over To so neither date is cut off. */
@media (min-width: 768px) and (max-width: 991px) {
  .pls-search-hd { padding: 14px 14px 12px; }
  .pls-search-bd { padding: 16px 14px 18px; }
  .pls-form-row { grid-template-columns: 1fr; }
  .pls-trip-range-values { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pls-trip-range-arrow { display: none; }
  .pls-trip-range-part--end { text-align: left; }
}

@media (max-width: 767px) {
  .pls-form-row { grid-template-columns: 1fr; }

  /* Search panel always appears first on mobile so position never shifts */
  .pls-search-col {
    order: -1;
    position: static;
    margin-bottom: 16px;
  }
  /* Mobile collapsible — show toggle button, collapse body by default */
  .pls-search-toggle { display: inline-flex; }
  .pls-search-hd {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pls-active-chips { cursor: pointer; }
  .pls-search-card.is-collapsed .pls-active-chips { display: flex; }
  .pls-search-card:not(.is-collapsed) .pls-active-chips { display: none; }
  .pls-search-bd {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease, opacity .2s ease, visibility 0s;
  }
  /* visibility (after the slide) keeps the hidden fields out of the tab order. */
  .pls-search-card.is-collapsed .pls-search-bd {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height .35s ease, padding .25s ease, opacity .2s ease, visibility 0s linear .35s;
  }
}