/* timepicker.css — optimized (non-breaking) */

/* Local tokens (scoped in :root to allow easy overrides if needed) */
:root{
  --tp-bg: rgba(15,20,32,.58);
  --tp-fg: #e9eef9;
  --tp-muted: #9aa3b2;
  --tp-muted-2: #cfd6e6;
  --tp-muted-3: #7a8396;
  --tp-accent: #4da3ff;
  --tp-border: rgba(120,160,255,.28);
  --tp-wheel-bg: rgba(18,26,43,.55);
  --tp-wheel-border: rgba(120,160,255,.18);
  --tp-shadow: 0 10px 30px rgba(0,0,0,.55);
  --tp-radius: 12px;
  --tp-radius-sm: 10px;
  --tp-z: 2147483647;
  --tp-z-backdrop: 2147483646;
  --tp-btn-bg: #121a2b;
  --tp-btn-bg-hover: #0f1a30;
  --tp-btn-border: #2a2e3a;
  --tp-colon-color: #bcd3ff;
}

/* Hide native indicator when enhanced */
.tp-enhanced::-webkit-calendar-picker-indicator{ display:none !important; }
.tp-enhanced{ caret-color: transparent; }

.tp-panel{
  position:fixed; z-index:var(--tp-z); display:none;
  width:264px; max-width:min(90vw,340px);
  padding:10px; border-radius:var(--tp-radius);
  background:var(--tp-bg);
  border:1px solid var(--tp-border);
  box-shadow:var(--tp-shadow);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity:0; transform:scale(.98);
  transition:opacity .12s ease, transform .12s ease;
}
.tp-panel.open{ display:block; opacity:1; transform:scale(1); }
/* helper for centered mode */
#tp-panel.tp-center{ left:50%; top:50%; transform:translate(-50%,-50%); }

/* Layout */
.tp-wheels{
  position:relative; display:grid; grid-template-columns:1fr 12px 1fr; align-items:center;
  gap:6px; padding:2px 0;
}
.tp-colon{ text-align:center; opacity:.6; color:var(--tp-colon-color); font-weight:600; }

.tp-wheel{
  height:calc(36px * 5); /* 5 visible rows */
  overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  border-radius:var(--tp-radius-sm);
  background:var(--tp-wheel-bg);
  border:1px solid var(--tp-wheel-border);
  scrollbar-width:none;
}
.tp-wheel::-webkit-scrollbar{ display:none; }

.tp-opt{
  height:36px; display:grid; place-items:center;
  scroll-snap-align:center;
  font-size:16px; color:var(--tp-muted-2);
}
.tp-opt.dim{ color:var(--tp-muted-3); }
.tp-opt.active{ color:#fff; font-weight:700; }

/* Central selection band */
.tp-wheels::before{
  content:""; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%);
  height:36px;
  border-top:2px solid var(--tp-accent);
  border-bottom:2px solid var(--tp-accent);
  background:linear-gradient(0deg, color-mix(in srgb, var(--tp-accent) 16%, transparent), color-mix(in srgb, var(--tp-accent) 16%, transparent));
  pointer-events:none; border-radius:8px; z-index:2;
}

/* Footer buttons */
.tp-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.tp-btn{
  height:32px; padding:0 10px; border-radius:var(--tp-radius-sm);
  border:1px solid var(--tp-btn-border); background:var(--tp-btn-bg); color:var(--tp-fg); cursor:pointer;
}
.tp-btn:hover{ background:var(--tp-btn-bg-hover); }
/* keyboard-visible focus */
.tp-btn:focus-visible{ outline:2px solid var(--tp-accent); outline-offset:2px; }
.tp-btn.ghost{ background:transparent; border-color:transparent; color:var(--tp-muted); }
.tp-btn.ghost:hover{ background:var(--tp-btn-bg); border-color:var(--tp-btn-border); color:var(--tp-fg); }

/* Backdrop for centered mode */
.tp-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:var(--tp-z-backdrop); display:none; }
.tp-backdrop.open{ display:block; }


/* from 5 to 7 rows everywhere */