/* search-editors.css
 * ---------------------------------------------------------------------------
 * Fits the SHARED date/guest editors (shared/components/booking-editors.js)
 * into the search page's popovers.
 *
 * Two things had to be reconciled when the search page stopped rendering its
 * own calendar:
 *
 *   1. ONE panel, not two. `.search-date-picker` / `.search-guests-picker` are
 *      already liquid-glass surfaces; the editor used to draw a second card
 *      inside them. The editor is mounted with `flat: true` (see
 *      .co-editor--flat) so the glass panel is the only banner, and the few
 *      leftovers below make the inner controls sit on glass rather than on
 *      the opaque background they assume elsewhere.
 *
 *   2. SCALE. The popover was 850px because the old picker showed two months
 *      side by side. One month stretched across that width gave ~110px cells —
 *      a calendar the size of the page. The popover now hugs a single month at
 *      a normal size.
 *
 * Loaded after search.css and booking-editors.css so it wins both.
 *
 * The picker rules (sections 2-3) also serve the Explorar globe's manual
 * filters (home-map-filters.js mounts the same panels and lazy-loads this
 * file), scoped via :is() at the same specificity as before.
 * ------------------------------------------------------------------------- */

/* ---- 1. One width for all three popovers --------------------------------
 * They were 392 / 430 / 440 — three panels hanging off the same bar, each a
 * different size. The widest (the destinations list, which has to fit long
 * place names) sets the number, and the other two adopt it so the row reads
 * as one system. Each keeps its own anchoring; only the width is shared. */
body.search-page {
  --search-popover-w: min(440px, calc(100vw - 32px));
}

body.search-page .search-page__date-popover,
body.search-page .search-page__guests-popover,
body.search-page .search-page__place-suggestions {
  width: var(--search-popover-w);
}
/* The guests panel is right-anchored off the bar's centre; that offset was
   hard-coded to its old 430px width. */
body.search-page .search-page__guests-popover {
  right: max(0px, calc(50% - var(--search-popover-w)));
}

/* ---- 2. One banner, in the SAME glass as everything else ----------------
 * The popovers were built on `--liquid-glass-float` (rgba(235,241,248,.94)),
 * which is 94% opaque — a flat card, not glass. The sidebar rail, the mobile
 * menu panel and the search bar itself all use the translucent recipe:
 * `--liquid-glass-surface[-strong]` over `blur(26px) saturate(1.28)`.
 *
 * These popovers hang off the search bar, so they take the bar's exact value —
 * `--liquid-glass-surface-strong` (.26) — and read as the same pane of glass
 * extending downward rather than a separate opaque sheet dropped on top. */
:is(body.search-page, body.index-page) .search-date-picker,
:is(body.search-page, body.index-page) .search-guests-picker {
  display: block;
  padding: 16px;
  gap: 0;
}

/* The calendar and the guests panel. The destinations list is the «Onde»
 * picker (place-search.css), which dresses its own panel. */
:is(body.search-page, body.index-page) .search-date-picker,
:is(body.search-page, body.index-page) .search-guests-picker {
  background: var(--liquid-glass-surface-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  backdrop-filter: blur(26px) saturate(1.28);
  border: 1px solid var(--liquid-glass-border);
  box-shadow: var(--liquid-glass-shadow);
}

/* The sheen + inner hairline the other glass surfaces carry. Both tokens are
   transparent in the light theme and pick up colour in night mode, so this
   costs nothing where the design does not want it. */
:is(body.search-page, body.index-page) .search-date-picker::before,
:is(body.search-page, body.index-page) .search-guests-picker::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--liquid-glass-top-sheen);
  pointer-events: none;
}
:is(body.search-page, body.index-page) .search-date-picker::after,
:is(body.search-page, body.index-page) .search-guests-picker::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid var(--liquid-glass-inner-border);
  border-radius: inherit;
  pointer-events: none;
}
:is(body.search-page, body.index-page) .search-date-picker > *,
:is(body.search-page, body.index-page) .search-guests-picker > * {
  position: relative;
  z-index: 1;
}

/* The month header the editor draws is the panel's only title now, so give it
   the weight the old <strong>Datas da estadia</strong> header carried. */
:is(body.search-page, body.index-page) .search-date-picker .co-cal__month {
  font-size: .95rem;
  font-weight: 700;
}

/* Glass wants a little more contrast on the divider lines than the opaque
   surfaces this component was built against. */
:is(body.search-page, body.index-page) .search-guests-picker .co-editor__row + .co-editor__row {
  border-top-color: var(--liquid-glass-inner-border, var(--co-line));
}

/* ---- 3. Calendar proportions -------------------------------------------- */
/* The panel width now sets the cell size, so the grid fills it edge to edge
   instead of sitting in a narrower block inside a wider panel. At 440px that
   is roughly 55px a day — a generous tap target that still reads as a month. */
:is(body.search-page, body.index-page) .search-date-picker .co-cal__grid {
  gap: 3px;
  justify-items: stretch;
}
:is(body.search-page, body.index-page) .search-date-picker .co-cal__day {
  font-size: .86rem;
}

/* The actions row reads as part of the panel, not as a sub-card. */
:is(body.search-page, body.index-page) .search-date-picker .co-editor__actions,
:is(body.search-page, body.index-page) .search-guests-picker .co-editor__actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--liquid-glass-inner-border, var(--co-line));
}

/* ---- 4. Motion: the «Onde» picker's, so the three panels move as one -----
 * place-search.css: the panel grows out of the bar (a 10px slide + scale
 * .955, slight overshoot), its contents follow in a 32ms cascade, and it
 * leaves in 150ms (.is-closing on the popover, set by search-page.js and
 * home-map-filters.js). Opacity and transform only — see CLAUDE.md. The
 * keyframes are mirrored, not shared: either file can load without the other.
 * `backwards`, not `both`: once played, nothing keeps holding a transform. */
:is(body.search-page, body.index-page) :is(.search-date-picker, .search-guests-picker) {
  --ps-from: -10px;
  transform-origin: 50% 0;
  animation: editor-panel-in .34s cubic-bezier(.16, .94, .3, 1.06) backwards;
}
body.search-page .search-guests-picker { transform-origin: calc(100% - 48px) 0; }
/* Explorar: the panels sit above the bar, so they rise out of it. */
body.index-page :is(.search-date-picker, .search-guests-picker) {
  --ps-from: 12px;
  transform-origin: 50% 100%;
}
body.index-page .search-guests-picker { transform-origin: calc(100% - 48px) 100%; }

:is(body.search-page, body.index-page) :is(.search-date-picker, .search-guests-picker) .co-editor > * {
  animation: editor-panel-row-in .38s cubic-bezier(.2, .85, .25, 1) backwards;
  animation-delay: calc(70ms + var(--i, 0) * 32ms);
}
:is(body.search-page, body.index-page) .co-editor > :nth-child(2) { --i: 1; }
:is(body.search-page, body.index-page) .co-editor > :nth-child(3) { --i: 2; }
:is(body.search-page, body.index-page) .co-editor > :nth-child(4) { --i: 3; }
:is(body.search-page, body.index-page) .co-editor > :nth-child(5) { --i: 4; }
:is(body.search-page, body.index-page) .co-editor > :nth-child(n+6) { --i: 5; }

/* Re-rendered while open (a pick, a cleared count): no second entrance. */
:is(body.search-page, body.index-page) :is(.search-date-picker, .search-guests-picker).is-stable,
:is(body.search-page, body.index-page) .is-stable .co-editor > * {
  animation: none;
}

:is(body.search-page, body.index-page) .is-closing > :is(.search-date-picker, .search-guests-picker) {
  animation: editor-panel-out .15s cubic-bezier(.4, 0, 1, 1) both;
  pointer-events: none;
}

@keyframes editor-panel-in {
  from { opacity: 0; transform: translateY(var(--ps-from)) scale(.955); }
  to { opacity: 1; transform: none; }
}
@keyframes editor-panel-out {
  to { opacity: 0; transform: translateY(calc(var(--ps-from) * .5)) scale(.975); }
}
@keyframes editor-panel-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(body.search-page, body.index-page) :is(.search-date-picker, .search-guests-picker),
  :is(body.search-page, body.index-page) :is(.search-date-picker, .search-guests-picker) .co-editor > *,
  :is(body.search-page, body.index-page) .is-closing > :is(.search-date-picker, .search-guests-picker) {
    animation: none;
  }
}

@media (max-width: 900.98px) {
  /* Narrow the shared token, not one popover, so all three stay in step. */
  body.search-page {
    --search-popover-w: min(380px, calc(100vw - 24px));
  }
  /* Phones: every panel spans the bar, edge to edge — as on Explorar, where
     they fill the dock. (The hero is the bar's width and their containing
     block; the entrance animations run on the pickers inside, not on these.) */
  body.search-page .search-page__date-popover,
  body.search-page .search-page__guests-popover,
  body.search-page .search-page__place-suggestions {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }
  :is(body.search-page, body.index-page) .search-date-picker,
  :is(body.search-page, body.index-page) .search-guests-picker {
    padding: 14px;
  }
}