/* ============================================================
   rentie-apple-picker.css — Apple Calendar–inspired date + time
   picker. One bottom sheet, two steps: a month grid (today ringed
   in crimson, selected day filled crimson — Apple's grid language,
   on-brand color instead of their blue), then a scroll-snap "wheel"
   for time (hour / minute / AM-PM), styled after the iOS picker's
   centered highlight band.

   Day selection is click-driven. Time wheels are both: tapping a row
   selects it immediately, and flicking/scrolling a wheel and letting
   it settle auto-selects whatever lands in the centered band (see
   the "scroll" listener in buildWheel(), rentie-apple-picker.js) —
   matches a real iOS picker, no separate confirming tap needed.
   ============================================================ */
.ac-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(17,17,17,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.ac-sheet {
  background: #fff; width: 100%; max-width: 430px;
  border-radius: 28px 28px 0 0;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 40px -20px rgba(17,17,17,.5);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .ac-sheet { animation: ac-up .28s cubic-bezier(.2,0,0,1); }
}
@keyframes ac-up { from { transform: translateY(100%); } to { transform: none; } }
.ac-grab { width: 36px; height: 4px; border-radius: 999px; background: #e4e3d7; margin: 0 auto 14px; }

.ac-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; min-height: 32px; }
.ac-head-btn {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; background: transparent; border-radius: 999px; color: #1b1c15; cursor: pointer;
  font-family: 'Material Symbols Outlined'; font-size: 20px; flex-shrink: 0;
}
.ac-head-btn:active { background: #f5f4e8; }
.ac-head-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

/* ── month grid ─────────────────────────────────────────── */
.ac-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ac-cal-title { font-size: 17px; font-weight: 800; }
.ac-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 2px; }
.ac-dow span { text-align: center; font-size: 11px; font-weight: 700; color: #8e706e; }
.ac-days { display: grid; grid-template-columns: repeat(7,1fr); row-gap: 2px; }
.ac-day {
  /* z-index:0 (not just position:relative) is load-bearing: it's what makes
     this element establish its OWN stacking context, so ::after's z-index:-1
     stays scoped to "behind this day's own text" instead of escaping past
     .ac-day entirely and painting behind the sheet's white background —
     which is what made the selected (white-text) day invisible: white text,
     no crimson circle in front of it, sitting directly on white. */
  position: relative; z-index: 0; height: 42px; border: none; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #1b1c15; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ac-day::after { content: ''; position: absolute; inset: 3px 6px; border-radius: 999px; z-index: -1; }
.ac-day.today { color: #b31e2c; font-weight: 800; }
.ac-day.today::after { box-shadow: inset 0 0 0 1.5px #b31e2c; }
.ac-day.on { color: #fff; font-weight: 800; }
.ac-day.on::after { background: #b31e2c; }
.ac-day.on.today::after { box-shadow: none; }
.ac-day.muted { visibility: hidden; }
.ac-day:disabled { color: #c9c6ba; cursor: not-allowed; }
.ac-day:active:not(:disabled) { opacity: .6; }

/* ── time wheel ─────────────────────────────────────────── */
.ac-time { display: flex; gap: 6px; height: 190px; position: relative; margin-top: 4px; }
.ac-time::before {
  /* the centered selection band, iOS-picker style */
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  background: #f5f4e8; border-radius: 14px; pointer-events: none; z-index: 0;
}
.ac-wheel {
  flex: 1; overflow-y: auto; scroll-snap-type: y mandatory;
  padding: 73px 0; scrollbar-width: none; position: relative; z-index: 1;
}
.ac-wheel::-webkit-scrollbar { display: none; }
.ac-wheel-item {
  scroll-snap-align: center; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 19px; font-weight: 600; color: #8e706e;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.ac-wheel-item.on { color: #1b1c15; font-weight: 800; }

.ac-done {
  width: 100%; background: #b31e2c; color: #fff; border: none; border-radius: 999px;
  padding: 16px; margin-top: 18px;
  font-family: inherit; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer;
}
.ac-done:active { transform: scale(.98); }

/* ── host-page defense ──────────────────────────────────────
   The desktop dashboard's style.css styles EVERY bare <button> — top
   margin, 13px padding, a hard 4px offset shadow, and a hover/active
   translate. The picker's buttons must own their full box + shadow
   story or all of that leaks in (the offset shadow behind a transparent
   round .ac-head-btn is what drew "crescent moons" around the close and
   chevron buttons). On pages without global button styles — the whole
   customer funnel — every line below is a no-op. */
.ac-head-btn, .ac-day { margin: 0; padding: 0; }
.ac-head-btn, .ac-day, .ac-done { box-shadow: none; }
.ac-head-btn:hover, .ac-day:hover, .ac-done:hover,
.ac-head-btn:active, .ac-day:active { transform: none; box-shadow: none; }
/* .ac-done:active keeps its scale(.98) press: its own rule above outranks
   the host page's button:active translate. */