/* Kompaktní výběr věku pro filtr seznamu/fotoseznamky.
   Základ = nativní <select> (funguje i bez JS). S JS se skryjí a nahradí je
   chip „od–do", který otevírá bottom-sheet s rotujícím kolečkem + šipkami.
   Barevný akcent laděný na odkazovou modrou webu (#005B99). */

.vek-picker { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; white-space:nowrap; }
.vek-picker .vek-dash { color:var(--nofoto-text); }

/* chip se ukáže až s JS; nativní selecty se pak schovají */
.vek-chip { display:none; }
.vek-js .vek-picker .vek-native { display:none; }
.vek-js .vek-picker .vek-dash { display:none; }
.vek-js .vek-unit { display:none; } /* „let" je v JS režimu uvnitř chipu */
/* Chip sladěný s ostatními prvky filtru (viz styles.css: .input-search-*, select) */
/* Výšku neurčujeme pevně — chip se roztáhne na výšku řádku (= výška selectů),
   takže se srovná v každém prohlížeči sám (nativní selecty mají různou výšku). */
.vek-js .vek-picker { align-self: stretch; }
.vek-js .vek-chip {
    display:inline-flex; align-items:center; justify-content:center; align-self:stretch;
    flex:0 0 auto; white-space:nowrap;
    margin:0; padding:0 12px; min-height:26px;
    border:1px solid var(--border-mid); border-radius:5555px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    background:var(--surface); font-family:inherit; font-size:0.8em; font-weight:400; color:inherit; cursor:pointer;
}
.vek-chip:active { background:var(--surface-form); }
.vek-chip:focus-visible { outline:2px solid #005B99; outline-offset:2px; }
.vek-chip-val { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- bottom sheet ---- */
.vek-backdrop {
    position:fixed; inset:0; background:rgba(15,15,20,.42);
    opacity:0; visibility:hidden; transition:opacity .22s; z-index:9998;
}
.vek-backdrop.open { opacity:1; visibility:visible; }

.vek-sheet {
    position:fixed; left:50%; bottom:0; width:100%; max-width:460px;
    transform:translate(-50%,102%);
    background:var(--surface); border-radius:20px 20px 0 0; z-index:9999;
    padding:10px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 40px rgba(15,15,20,.22);
    transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.vek-sheet.open { transform:translate(-50%,0); }
.vek-grip { width:38px; height:4px; border-radius:2px; background:var(--border-mid); margin:2px auto 12px; }
.vek-sheet-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vek-sheet-t { font-weight:700; font-size:16px; }
.vek-now { font-weight:700; font-size:15px; color:var(--link-blue); font-variant-numeric:tabular-nums; }

.vek-wheels { display:flex; gap:14px; align-items:stretch; justify-content:center; }
.vek-wblock { flex:1; max-width:150px; }
.vek-sep { align-self:center; color:var(--text-subtle); font-size:18px; }
.vek-cap { text-align:center; font-size:12px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }

.vek-wrap { position:relative; }
.vek-band {
    position:absolute; left:0; right:0;
    border-top:1px solid var(--border-mid); border-bottom:1px solid var(--border-mid);
    background:var(--bg-info); border-radius:7px; pointer-events:none; z-index:1;
}
.vek-wheel {
    overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
    position:relative; z-index:2; scrollbar-width:none; -ms-overflow-style:none; border-radius:9px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
}
.vek-wheel::-webkit-scrollbar { display:none; }
.vek-wheel:focus-visible { outline:2px solid #005B99; outline-offset:2px; }
.vek-item {
    display:grid; place-items:center; scroll-snap-align:center;
    font-size:19px; color:var(--text-subtle); font-weight:500; font-variant-numeric:tabular-nums;
    transition:color .12s, transform .12s, font-weight .12s;
}
.vek-item.active { color:var(--link-blue); font-weight:800; transform:scale(1.05); }

.vek-arrow {
    display:block; width:100%; border:1px solid var(--border-mid); background:var(--surface);
    color:var(--link-blue); border-radius:8px; padding:5px 0; font-size:12px; line-height:1; cursor:pointer;
}
.vek-arrow:active { background:var(--bg-info); }
.vek-arrow:focus-visible { outline:2px solid #005B99; outline-offset:2px; }
.vek-arrow.up { margin-bottom:6px; }
.vek-arrow.down { margin-top:6px; }

.vek-btn {
    width:100%; margin-top:16px; border:0; border-radius:12px;
    background:#005B99; color:#fff; font:inherit; font-size:16px; font-weight:700; padding:14px; cursor:pointer;
}
.vek-btn:active { background:#00436f; }
.vek-btn:focus-visible { outline:2px solid #00436f; outline-offset:2px; }
.vek-btn.vek-ghost { background:transparent; color:var(--text-subtle); font-weight:600; margin-top:4px; padding:10px; }

@media (prefers-reduced-motion: reduce) {
    .vek-backdrop, .vek-sheet { transition:none; }
    .vek-item { transition:none; }
}