/* BrandedPicker — shared DriverPage date/time picker styles.
   Used by the public booking form (id-scoped triggers/popovers) and by
   dashboard pages via BrandedPicker.attach (class-scoped .bp-*). Tokens come
   from base.html :root — never hardcode a new hex here.
   Scroll model for the wheel: CSS snap owns at-rest centering (mandatory, no
   scroll-snap-stop so flings glide); JS only READS the nearest row on
   scrollend and smooth-scrolls only on direct taps. */

/* --- triggers ------------------------------------------------------------- */
#date-trigger, #time-trigger, #datetime-trigger, .bp-trigger {
    flex: 1; display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 52px; padding: 0.75rem; margin: 0;
    background: var(--surface); border: 2px solid var(--border); border-radius: 1rem;
    font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--text);
    cursor: pointer; text-align: left;
}
#date-trigger:hover, #time-trigger:hover, #datetime-trigger:hover, .bp-trigger:hover { border-color: var(--text); }
#date-trigger:focus-visible, #time-trigger:focus-visible, #datetime-trigger:focus-visible, .bp-trigger:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
#time-trigger { justify-content: space-between; }
#time-trigger[aria-disabled="true"] { opacity: 0.6; cursor: default; }

.bp-wrap { position: relative; display: flex; gap: 0.5rem; flex: 1; min-width: 0; }
.bp-wrap > .bp-desktop { position: relative; display: flex; flex: 1; min-width: 0; }
.bp-wrap > .bp-merged { display: none; }
@media (max-width: 640px) {
    .bp-wrap > .bp-desktop { display: none; }
    .bp-wrap > .bp-merged { display: flex; flex: 1 1 100%; min-width: 0; }
}

/* --- popovers (month grid + time list) ------------------------------------- */
#dp-pop, #tp-pop, .bp-pop {
    position: absolute; left: 0; right: 0; max-width: 23rem; z-index: 20;
    background: var(--surface); border: 3px solid var(--text); border-radius: 1rem;
    box-shadow: 4px 4px 0 var(--border); padding: 0.75rem;
}
#tp-pop, .bp-pop-time { max-height: 18rem; overflow-y: auto; }
.tp-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tp-item {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0.6rem 0.75rem;
    background: var(--surface); border: 3px solid var(--text); border-radius: 9999px;
    box-shadow: 0 3px 0 var(--border);
    font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
    color: var(--text); cursor: pointer;
}
.tp-item[aria-selected="true"] { background: var(--primary); box-shadow: 0 3px 0 var(--text); }
.tp-item:hover:not([aria-selected="true"]) { background: var(--bg); }
.tp-item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.tp-empty { text-align: center; padding: 1rem; color: var(--muted); font-size: 0.95rem; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dp-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; }
.dp-nav {
    width: 44px; height: 44px; padding: 0; border: 3px solid var(--text); border-radius: 9999px;
    background: var(--surface); box-shadow: 0 3px 0 var(--border);
    font-family: 'Fredoka', sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1;
    color: var(--text); cursor: pointer;
}
.dp-nav:active { box-shadow: 0 1px 0 var(--border); transform: translateY(2px); }
.dp-nav:disabled { opacity: 0.35; cursor: default; box-shadow: none; transform: none; }
.dp-nav:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.dp-weekdays, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.dp-row { display: contents; }
.dp-weekdays span { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); padding: 0.25rem 0; }
.dp-day {
    min-height: 44px; padding: 0; border: 3px solid transparent; border-radius: 0.75rem;
    background: transparent; font-family: 'Fredoka', sans-serif; font-weight: 600;
    font-size: 1rem; color: var(--text); cursor: pointer;
}
.dp-day:hover:not(:disabled) { border-color: var(--text); }
.dp-day:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.dp-day.dp-today:not([aria-selected="true"]) { border-color: var(--border); }
.dp-day[aria-selected="true"] { background: var(--primary); border-color: var(--text); box-shadow: 0 3px 0 var(--text); }
.dp-day:disabled { opacity: 0.3; background: var(--bg); cursor: default; }

/* --- wheel sheet ------------------------------------------------------------ */
#wp-overlay, .bp-overlay {
    position: fixed; inset: 0; z-index: 200; /* above the cookie notice (100) */
    background: rgba(31, 41, 55, 0.4);
    display: flex; align-items: flex-end; justify-content: center;
}
#wp-sheet, .bp-sheet {
    background: var(--surface); border: 3px solid var(--text); border-bottom: none;
    border-radius: 1.25rem 1.25rem 0 0; box-shadow: 4px 4px 0 var(--border);
    width: 100%; max-width: 30rem;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.wp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.wp-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text); }
#wp-done, .bp-done {
    min-height: 44px; padding: 0 1.25rem; margin: 0;
    border: 3px solid var(--text); border-radius: 9999px;
    background: var(--primary); box-shadow: 0 3px 0 var(--border);
    font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
    color: var(--text); cursor: pointer;
}
#wp-done:active, .bp-done:active { box-shadow: 0 1px 0 var(--border); transform: translateY(2px); }
#wp-done:focus-visible, .bp-done:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.wp-wheels { display: flex; gap: 0.5rem; }
.wp-col { flex: 1; min-width: 0; }
#wp-day-col, .wp-col-wide { flex: 1.7; }
.wp-viewport {
    height: 240px; overflow-y: auto; padding: 96px 0;
    scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-radius: 0.75rem;
}
.wp-viewport::-webkit-scrollbar { display: none; }
.wp-viewport:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.wp-list { margin: 0; padding: 0; list-style: none; }
.wp-item {
    height: 48px; display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center;
    font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 1rem;
    color: var(--text); background: var(--surface);
    border: 3px solid transparent; border-radius: 0.75rem;
    cursor: pointer; user-select: none; -webkit-user-select: none;
}
.wp-item[aria-selected="true"] {
    font-family: 'Fredoka', sans-serif;
    background: var(--primary); border-color: var(--text); box-shadow: 0 3px 0 var(--text);
}
.wp-item.wp-placeholder { color: var(--muted); cursor: default; }

@media (max-width: 640px) {
    #dp-pop, #tp-pop, .bp-pop { left: -0.25rem; right: -0.25rem; max-width: none; padding: 0.5rem; }
    .dp-day { min-height: 48px; }
}