/*!
 * Quick Auto Center — /book/ Date & time step (story 1.W2.24).
 * Port of the approved prototype (design/prototypes/part-2/part-2.css, "Date & time", flow-part-2.md 3.1):
 * drop-off only, a strip of days with arrows, 1-hour windows, the 3 PM note next to the chosen window.
 * Tokens only (var(--*) or calc() over them); DESIGN.md bans apply: no background gradient, blur, glass,
 * emoji, Unicode glyph icons, or pill shape outside .tag. Targets >= 44px, focus is the site's 2px ring.
 */

/* Continue before a window is chosen carries aria-disabled but keeps its normal look (approved prototype):
   a click explains what is missing. No style here on purpose. */

/* Time-zone line — ADAPT of .hours__status (site.css): Lucide clock + bold caption */
.tz{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--type-caption);font-weight:var(--weight-semibold);color:var(--text-heading);}
.tz .ic{color:var(--action-primary);flex:none;}

#step-datetime-body{display:flex;flex-direction:column;gap:var(--space-3);}
#step-datetime-body .step__lede{margin:0;}
.dt-body{display:flex;flex-direction:column;gap:var(--space-3);}
.dt-body[hidden],.dt-load[hidden],#step-datetime-body .notice[hidden],.dt-lost[hidden]{display:none;}
.dt-fs{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
.dt-fs [aria-invalid="true"] .day:not(.is-off),.dt-fs [aria-invalid="true"] .slot{border-color:var(--status-danger);}
.dt-fs [role="radiogroup"]:focus{outline:none;}
.dt-note{margin:0;}
.dt-lost{margin:0;font-size:var(--type-caption);font-weight:var(--weight-semibold);color:var(--text-heading);}
#dt-notice:focus{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* DayStrip — CREATE (owner decision: a strip of days with arrows, not a month calendar), derived from .opt:
   bordered tile, Royal border + Royal 050 + bold when chosen. Every day of the horizon is a native radio in one
   horizontally scrolling track; the two arrows page it and are disabled at the ends. Closed day / day with no
   time left = muted tile, radio disabled, reason in screen-reader text. The page itself never scrolls sideways. */
.days__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);}
.days__head .field__label{margin:0;}
.days__nav{display:flex;gap:var(--space-1);}
.days__arrow{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--surface-card);
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);color:var(--action-primary);cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard);}
.days__arrow:hover{border-color:var(--border-brand);}
.days__arrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.days__arrow:disabled{color:var(--qac-bdazzled-300);border-color:var(--border-hairline);cursor:default;}
.days__track{position:relative;display:flex;gap:var(--space-1);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scroll-padding-inline:var(--space-1);padding:var(--space-1);margin:calc(-1 * var(--space-1));scrollbar-width:none;overscroll-behavior-x:contain;}
.days__track::-webkit-scrollbar{display:none;}
.day{position:relative;flex:0 0 calc((100% - var(--space-1) * 4) / 5);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(var(--space-12) + var(--space-1));padding:var(--space-1);background:var(--surface-card);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);line-height:var(--leading-tight);cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard);}
@media (min-width:560px){ .day{flex-basis:calc((100% - var(--space-1) * 6) / 7);} }
@media (min-width:1024px){ .day{flex-basis:calc((100% - var(--space-1) * 9) / 10);} }
.day input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.day__dow{font-size:var(--type-caption);font-weight:var(--weight-semibold);color:var(--text-muted);}
.day__date{font-size:var(--type-body-sm);font-weight:var(--weight-bold);color:var(--text-heading);font-variant-numeric:tabular-nums;white-space:nowrap;}
.day.is-today .day__dow{color:var(--action-primary);font-weight:var(--weight-bold);}
.day:hover{border-color:var(--border-brand);}
.day:has(input:checked){border-color:var(--border-brand);box-shadow:inset 0 0 0 1px var(--border-brand);background:var(--qac-royal-050);}
.day:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;}
.day.is-off{background:var(--surface-muted);border-color:transparent;cursor:not-allowed;}
.day.is-off .day__dow,.day.is-off .day__date{color:var(--text-muted);font-weight:var(--weight-regular);}
.day.is-off input{cursor:not-allowed;}

/* TimeSlots — ADAPT of .opt and the DayStrip tile: grid of 1-hour windows, native radio laid over the tile
   (the tile is the 44px target), chosen = Royal border + Royal 050 + bold */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--space-24) + var(--space-1))),1fr));gap:var(--space-2);}
.slot{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-1) var(--space-2);background:var(--surface-card);
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);font-size:var(--type-body-sm);font-weight:var(--weight-semibold);
  color:var(--text-heading);font-variant-numeric:tabular-nums;text-align:center;cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard);}
.slot input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.slot:hover{border-color:var(--border-brand);}
.slot:has(input:checked){border-color:var(--border-brand);box-shadow:inset 0 0 0 1px var(--border-brand);background:var(--qac-royal-050);font-weight:var(--weight-bold);}
.slot:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;}

/* Waiting / empty line for the slot area — ADAPT of .booking__summary (site.css) */
.dt-wait{display:flex;align-items:center;gap:var(--space-2);min-height:44px;margin:0;padding:var(--space-2) var(--space-3);
  background:var(--surface-muted);border-radius:var(--radius-md);font-size:var(--type-body-sm);font-weight:var(--weight-semibold);color:var(--text-heading);}
.dt-wait:focus{outline:2px solid var(--focus-ring);outline-offset:2px;}
.dt-load{display:flex;flex-direction:column;gap:var(--space-2);}

@media (prefers-reduced-motion: reduce){
  .days__track{scroll-behavior:auto;}
  .day,.slot,.days__arrow{transition:none;}
}