/* ============================================================
   rentie-datetime.css — styles for the shared date+time picker.
   Neo-Classic Moto. Uses shared tokens with safe fallbacks so it
   works even on pages that don't load rentie-tokens.css.
   ============================================================ */
:root{
  --rzdt-parchment:#F4EBDD; --rzdt-obsidian:#111111; --rzdt-crimson:#B02829;
  --rzdt-ink:#2B2B2B; --rzdt-surface:#fff; --rzdt-divider:#E6D8BF;
  --rzdt-tertiary:#6b6256; --rzdt-muted:#8d8578;
}

/* trigger button that replaces a native date/time input.
   The value must NEVER wrap ("4:30 AM" breaking onto two lines reads broken) —
   one line, ellipsis when the box is narrow. */
.rz-dt-trigger{
  display:inline-flex; align-items:center; gap:7px; width:100%; min-width:0;
  background:transparent; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:800; color:var(--ink,var(--rzdt-ink));
  text-align:left; letter-spacing:-.01em; padding:4px 0; white-space:nowrap;
}
.rz-dt-trigger .rz-dt-ico{ font-family:'Material Symbols Outlined'; font-size:16px; color:var(--crimson,var(--rzdt-crimson)); line-height:1; flex-shrink:0; }
.rz-dt-trigger span + span{ overflow:hidden; text-overflow:ellipsis; }
.rz-dt-trigger.rz-dt-empty{ color:var(--muted,var(--rzdt-muted)); font-weight:700; }
.rz-dt-trigger:active{ transform:scale(.98); }
/* boxed variant — a fixed 48px control so date/time/Now all sit on one line height */
.rz-dt-trigger.rz-dt-boxed{ border:1px solid var(--divider,var(--rzdt-divider)); border-radius:12px; height:48px; padding:0 14px; background:var(--surface,var(--rzdt-surface)); }

/* overlay + sheet */
.rz-dt-overlay{ position:fixed; inset:0; background:rgba(17,17,17,.55); z-index:120;
  display:flex; align-items:flex-end; justify-content:center; }
.rz-dt-sheet{ background:var(--rzdt-surface); width:100%; max-width:430px;
  border-radius:24px 24px 0 0; padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 40px -20px rgba(17,17,17,.5); }
@media (prefers-reduced-motion:no-preference){ .rz-dt-sheet{ animation:rzdt-up .26s cubic-bezier(.2,0,0,1); } }
@keyframes rzdt-up{ from{ transform:translateY(100%);} to{ transform:none; } }
.rz-dt-grab{ width:40px; height:4px; border-radius:999px; background:var(--rzdt-divider); margin:0 auto 12px; }
.rz-dt-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rz-dt-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--rzdt-tertiary); }
.rz-dt-x{ border:none; background:var(--rzdt-parchment); width:30px; height:30px; border-radius:999px; font-size:17px; color:var(--rzdt-ink); cursor:pointer; line-height:1; }
.rz-dt-preview{ font-size:22px; font-weight:800; color:var(--rzdt-crimson); margin-bottom:14px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }

/* time picker */
.rz-dt-lbl{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--rzdt-tertiary); margin:0 0 7px; }
.rz-dt-hours{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:14px; }
.rz-dt-cell{ height:44px; border:1px solid var(--rzdt-divider); background:var(--rzdt-surface);
  border-radius:12px; font-family:inherit; font-size:15px; font-weight:800; color:var(--rzdt-ink);
  cursor:pointer; font-variant-numeric:tabular-nums; transition:transform .1s, background-color .12s, color .12s, border-color .12s; }
.rz-dt-cell:active{ transform:scale(.94); }
.rz-dt-cell.on{ background:var(--rzdt-crimson); color:#fff; border-color:var(--rzdt-crimson); }
.rz-dt-mins{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px; }
.rz-dt-ampm{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rzdt-divider); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.rz-dt-ampm button{ height:46px; border:none; background:var(--rzdt-surface); font-family:inherit; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--rzdt-tertiary); cursor:pointer; }
.rz-dt-ampm button.on{ background:var(--rzdt-obsidian); color:#fff; }

/* calendar — compact: fixed 38px rows instead of square cells, so the sheet
   stays around half the viewport instead of towering over it */
.rz-dt-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rz-dt-cal-title{ font-size:14px; font-weight:800; text-transform:uppercase; }
.rz-dt-nav{ border:1px solid var(--rzdt-divider); background:var(--rzdt-surface); width:34px; height:34px; border-radius:999px; cursor:pointer; font-family:'Material Symbols Outlined'; font-size:18px; color:var(--rzdt-ink); display:flex; align-items:center; justify-content:center; }
.rz-dt-nav:disabled{ opacity:.35; cursor:not-allowed; }
.rz-dt-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:3px; }
.rz-dt-dow span{ text-align:center; font-size:10px; font-weight:800; color:var(--rzdt-muted); text-transform:uppercase; }
.rz-dt-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:12px; }
.rz-dt-day{ height:38px; border:none; background:transparent; border-radius:10px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--rzdt-ink); cursor:pointer; font-variant-numeric:tabular-nums; transition:transform .1s, background-color .12s; }
.rz-dt-day:active{ transform:scale(.9); }
.rz-dt-day.muted{ visibility:hidden; }
.rz-dt-day.today{ box-shadow:inset 0 0 0 1.5px var(--rzdt-divider); }
.rz-dt-day.on{ background:var(--rzdt-crimson); color:#fff; }
.rz-dt-day:disabled{ color:var(--rzdt-muted); opacity:.4; cursor:not-allowed; }

.rz-dt-done{ width:100%; background:var(--rzdt-crimson); color:#fff; border:none; border-radius:14px; padding:15px; font-family:inherit; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; box-shadow:0 8px 18px -10px rgba(176,40,41,.6); }
.rz-dt-done:active{ transform:scale(.98); }