@charset "UTF-8";
/* Clock-style time picker (time_picker.js). Bottom sheet on phones, centred dialog on wider screens.
   Design-system tokens only. */

body.tp-noscroll{ overflow:hidden; }
.tp-overlay{ position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center; background:rgba(43,26,16,.45); opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
.tp-overlay.is-on{ opacity:1; }
.tp{ width:100%; max-width:360px; max-height:96vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:20px 20px calc(14px + env(safe-area-inset-bottom,0px)); background:var(--surface-card); border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--shadow-lg); transform:translateY(24px); transition:transform var(--dur-base) var(--ease-out); }
.tp-overlay.is-on .tp{ transform:none; }
@media (min-width:640px){ .tp-overlay{ align-items:center; } .tp{ border-radius:var(--radius-xl); } }
@media (max-width:420px){ .tp{ max-width:none; } }
@media (prefers-reduced-motion:reduce){ .tp-overlay,.tp{ transition:none; } }

.tp__title{ font:var(--weight-bold) var(--text-sm)/1.3 var(--font-display); color:var(--text-muted); }

/* 18 : 30 display — hour and minute are buttons that choose what the dial edits */
.tp__display{ display:flex; align-items:center; justify-content:center; gap:6px; }
.tp__seg,.tp__in{ width:96px; height:76px; border-radius:var(--radius-md); border:2px solid transparent; background:var(--surface-sunken); color:var(--text-heading); font:var(--weight-bold) 52px/1 var(--font-latin-display); text-align:center; cursor:pointer; }
.tp__seg.is-on{ background:var(--ganesh-orange-100); border-color:var(--ganesh-orange-500); color:var(--ganesh-orange-800); }
.tp__in{ cursor:text; font-size:44px; background:var(--ganesh-cream); border-color:var(--border-subtle); }
.tp__in:focus{ outline:none; border-color:var(--ganesh-orange-500); box-shadow:0 0 0 3px var(--ganesh-orange-100); }
.tp__colon{ font:var(--weight-bold) 48px/1 var(--font-latin-display); color:var(--text-heading); }
.tp__ranges{ text-align:center; font:var(--type-caption); color:var(--text-muted); }
.tp__error{ font:var(--weight-bold) var(--text-sm)/1.4 var(--font-display); color:var(--ganesh-red-600); text-align:center; }
.tp__error:empty{ display:none; }

/* Dial */
.tp__dial{ position:relative; width:min(256px,76vw); aspect-ratio:1; margin:4px auto; border-radius:50%; background:var(--surface-sunken); touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; }
.tp__svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tp__hand{ stroke:var(--ganesh-orange-500); stroke-width:2; }
.tp__knob{ fill:var(--ganesh-orange-500); }
.tp__pivot{ fill:var(--ganesh-orange-500); }
.tp__numbers{ position:absolute; inset:0; }
.tp__num{ position:absolute; width:36px; height:36px; margin:-18px 0 0 -18px; border:0; border-radius:50%; background:transparent; color:var(--text-heading); font:var(--weight-bold) var(--text-base)/1 var(--font-latin-display); cursor:pointer; display:grid; place-items:center; }
.tp__num--inner{ font-size:var(--text-sm); color:var(--text-body); }
.tp__num:disabled{ color:var(--ganesh-ink-300); cursor:default; }
.tp__num.is-selected{ color:var(--ganesh-paper); }
.tp__num:not(:disabled):not(.is-selected):hover{ background:var(--ganesh-orange-100); }
.tp__num:focus-visible{ outline:3px solid var(--ganesh-yellow-400); outline-offset:1px; }

/* Footer */
.tp__foot{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.tp__spacer{ flex:1; }
.tp__icon{ width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--text-muted); display:grid; place-items:center; cursor:pointer; }
.tp__icon:hover{ background:var(--surface-sunken); }
.tp__icon .g-icon{ width:22px; height:22px; }
.tp__btn{ min-height:44px; padding:0 16px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--text-link); font:var(--weight-bold) var(--text-base)/1 var(--font-display); cursor:pointer; }
.tp__btn:hover{ background:var(--ganesh-orange-050); }
.tp__btn--ok{ background:var(--action-primary-bg); color:var(--ganesh-paper); padding:0 22px; }
.tp__btn--ok:hover{ background:var(--action-primary-bg-hover); }
.tp__btn--ok:disabled{ background:var(--action-disabled-bg); color:var(--action-disabled-fg); cursor:default; }

/* The field on the order / booking form that opens the picker */
.tp-field{ display:flex; align-items:center; gap:12px; width:100%; max-width:320px; min-height:56px; padding:10px 16px; border:2px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); color:var(--text-heading); font:inherit; text-align:left; cursor:pointer; transition:all var(--dur-fast) var(--ease-out); }
.tp-field:hover{ border-color:var(--ganesh-orange-300); background:var(--ganesh-orange-050); }
.tp-field .g-icon{ width:22px; height:22px; color:var(--ganesh-orange-700); }
.tp-field__value{ flex:1; font:var(--weight-bold) var(--text-xl)/1 var(--font-latin-display); }
.tp-field__change{ font:var(--type-label); color:var(--text-link); }
.tp-field.is-empty{ border-color:var(--ganesh-orange-300); }
.tp-field.is-empty .tp-field__value{ font:var(--weight-regular) var(--text-base)/1.3 var(--font-display); color:var(--text-muted); }