/* =========================================================================
 * date-picker.css — the pop-out calendar on /reservar and /en/reservar
 * -------------------------------------------------------------------------
 * Extracted from a <style> block inside reservar/index.html on 2026-08-15.
 *
 * WHY IT MOVED. It was inline, on the Spanish page only, which is why
 * js/date-picker.js was never loaded on /en/reservar/ — booking-slots.js
 * documented the reason in its own header: "/en/reservar/ never loaded the
 * calendar (it has none of its CSS)". So an English-speaking guest — most of
 * the tourist traffic this venue sells to — got a bare <input type="date">
 * with no Thursday–Sunday rule visible on it, while the Spanish page got the
 * real thing. Andrew tested on a phone and reported "there's no popup
 * calendar"; on /en/ that was literally true.
 *
 * A stylesheet cannot be loaded on one page and forgotten on the other in the
 * same way an inline block can, which is the whole point of the move.
 * ========================================================================= */

/* The native input stays in the DOM for form data + validation, but is taken
   out of sight and out of the tab order so there is one control, not two. */
.dp-wrap { position: relative; }
.dp-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dp-trigger { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.dp-trigger.is-empty { color: var(--gray, #8a8a8a); }

/* ── The floating WhatsApp button was eating date taps ────────────────────
   .whatsapp-float is position:fixed at z-index 9999, bottom-right. The
   calendar sat at z-index 60, so on a 390px screen the FAB rendered ON TOP of
   the bottom-right corner of the grid — which is where the last week of the
   month lives, and where Thursday–Sunday always land because the grid starts
   on Monday. A guest tapping the 30th got the WhatsApp chat instead.
   Caught by rendering at 390x844 and looking; no HTML or text check can see
   two fixed elements overlapping.
   Both halves are needed: the raised z-index wins the tap, and hiding the FAB
   while the calendar is open stops a green circle sitting over the dates. */
.dp-pop {
  position: absolute; z-index: 10050; top: calc(100% + 6px); left: 0;
  padding: 0.9rem;
  background: #121011; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; box-shadow: 0 18px 46px rgba(0,0,0,0.6);
  /* A 7-column grid inside a form field is narrower than the field: at 300px
     the cells come out ~42px, under the 44px touch minimum. The popup is
     absolutely positioned, so let it break out of the field's width rather
     than squeezing the days. */
  min-width: 342px;
}
@media (max-width: 420px) {
  .dp-pop { left: 50%; transform: translateX(-50%); width: min(94vw, 380px); min-width: 0; }
}

.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.dp-title { font-family: var(--font-mono, monospace); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* 44px hit areas — this is a phone-first form. */
.dp-nav { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 8px; }
.dp-nav:disabled { opacity: 0.25; cursor: default; }
.dp-nav:not(:disabled):hover { background: rgba(255,255,255,0.08); }

.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span { text-align: center; font-family: var(--font-mono, monospace); font-size: 0.66rem; opacity: 0.55; padding: 0.3rem 0; }
.dp-blank { display: block; }
.dp-day {
  min-height: 44px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.05); color: inherit;
  font-family: var(--font-mono, monospace); font-size: 0.9rem;
}
.dp-day:hover:not([disabled]) { background: var(--ember, #D9621E); color: #0b0908; }
.dp-day:focus-visible { outline: 2px solid var(--ember, #D9621E); outline-offset: 2px; }
/* Closed nights stay legible but inert — the guest reads the Thu–Sun pattern
   off the grid instead of learning it from a rejected submission. */
.dp-day.is-off { background: transparent; opacity: 0.22; cursor: default; text-decoration: line-through; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.dp-day.is-sel { background: var(--ember, #D9621E); color: #0b0908; font-weight: 700; }
.dp-note { margin: 0.7rem 0 0; font-family: var(--font-mono, monospace); font-size: 0.66rem; opacity: 0.6; letter-spacing: 0.06em; }

/* Set on <body> by js/date-picker.js while the grid is open. The FAB is a
   permanent fixture on every page; it just must not sit over a control the
   guest is actively using. It comes straight back on close. */
body.dp-open .whatsapp-float { opacity: 0; pointer-events: none; }