/* ============================================================
   ParkingUnit · Redesign · Custom datepicker
   Pairs with /js/redesign/datepicker.js — a vanilla replacement
   for the previous Flatpickr wrapper. Markup matches the
   mockup (datepicker.jsx / Redesign v2.html ~line 122–186)
   so any styling tweaks in the design can be copy-pasted here.
   ============================================================ */

/* anchor wrap that the JS adds around inputs that don't already
   have a relatively-positioned parent. Keeps the popover glued
   to the input below. */
.pu-dp-anchor { position: relative; }

/* backdrop click-catcher — full-viewport invisible layer, traps
   clicks-outside to close the popover. z-index sits BELOW the popover
   (9998 vs popover's 9999) so clicks inside the popover hit the popover
   first; clicks elsewhere hit the backdrop and close. */
.popover-backdrop.pu-dp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
}

/* the popover itself — fixed-positioned to viewport, body-rendered so no
   parent stacking context / overflow clips it. Coordinates come from JS
   (Picker._position()) which reads input.getBoundingClientRect() and
   tracks scroll/resize. */
.datepicker.pu-dp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: var(--pu-card);
  border: 1px solid var(--pu-line);
  border-radius: 14px;
  box-shadow:
    0 4px 12px -2px rgba(14, 31, 51, 0.06),
    0 24px 60px -16px rgba(14, 31, 51, 0.30);
  padding: 20px;
  width: 380px;
  max-width: calc(100vw - 24px);
  font-family: var(--pu-f-sans);
  color: var(--pu-ink);
  animation: pu-dp-pop .18s cubic-bezier(.2,.9,.3,1);
  transform-origin: top left;
}

@keyframes pu-dp-pop {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* header — month / year + prev / next */
.pu-dp .dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pu-dp .dp-head .ttl {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pu-ink);
}
.pu-dp .dp-head .nav { display: flex; gap: 4px; }
.pu-dp .dp-head .nav button {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--pu-ink-2);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pu-dp .dp-head .nav button:hover {
  background: var(--pu-bg-alt);
  color: var(--pu-accent-2);
}

/* day grid */
.pu-dp .dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.pu-dp .dp-dow {
  font-size: 10px;
  color: var(--pu-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  padding: 8px 0;
}
.pu-dp .dp-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  color: var(--pu-ink-2);
  cursor: pointer;
  position: relative;
  transition: background-color .12s, color .12s;
}
.pu-dp .dp-day:hover:not(.disabled):not(.empty) {
  background: var(--pu-accent-soft);
  color: var(--pu-accent-2);
}
.pu-dp .dp-day.empty   { cursor: default; }
.pu-dp .dp-day.disabled{ color: var(--pu-line-2); cursor: not-allowed; }
.pu-dp .dp-day.today {
  font-weight: 700;
  color: var(--pu-accent-2);
}
.pu-dp .dp-day.today::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 99px;
  background: var(--pu-accent);
}
.pu-dp .dp-day.selected {
  background: var(--pu-accent);
  color: #fff;
  font-weight: 700;
}
.pu-dp .dp-day.selected::after { background: #fff; }
.pu-dp .dp-day.in-range {
  background: var(--pu-accent-soft);
  color: var(--pu-accent-2);
  border-radius: 0;
}
.pu-dp .dp-day.range-start {
  background: var(--pu-accent);
  color: #fff;
  border-radius: 8px 0 0 8px;
}
.pu-dp .dp-day.range-end {
  background: var(--pu-accent);
  color: #fff;
  border-radius: 0 8px 8px 0;
}

/* footer: preset chips + time select */
.pu-dp .dp-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pu-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pu-dp .dp-foot .pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pu-dp .dp-foot .pill-btn {
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid var(--pu-line);
  font-size: 11px;
  font-weight: 600;
  color: var(--pu-ink-2);
  background: var(--pu-card);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pu-dp .dp-foot .pill-btn:hover {
  border-color: var(--pu-accent);
  color: var(--pu-accent-2);
}
.pu-dp .dp-foot .time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pu-muted);
}
.pu-dp .dp-foot .time select {
  padding: 4px 8px;
  border: 1px solid var(--pu-line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--pu-card);
  color: var(--pu-ink);
  outline: 0;
  cursor: pointer;
}
.pu-dp .dp-foot .time select:focus { border-color: var(--pu-accent); }

/* mobile: full-width popover. JS still positions via top/left; we just
   shrink the max-width so it can't escape the viewport. */
@media (max-width: 480px) {
  .datepicker.pu-dp {
    width: calc(100vw - 24px);
  }
  .pu-dp .dp-foot { justify-content: flex-start; }
}

/* ===== Inline mode (booking modal): calendar renders in-flow under its field,
   no floating/jumping popover; both calendars visible at once. Date-only
   (time picker hidden — user: "не треба чекати на час"). ===== */
.pu-dp.pu-dp--inline {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto;
  width: 100%;
  max-width: none;
  margin-top: 8px;
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.pu-dp.pu-dp--inline.pu-dp--in { opacity: 1; transform: none; }
.pu-dp.pu-dp--inline .dp-foot .time { display: none; }