/* Telegram style dropdown: replaces native select boxes. The real select stays in the page (hidden), so every form keeps working. */
select.tg-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.tgs { position: relative; display: block; width: 100%; }
.tgs-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 44px; padding: 10px 14px; background: #fff; border: 1px solid var(--bd, #DCE3DA); border-radius: 14px; transition: border-color .18s, box-shadow .18s, background .18s; -webkit-tap-highlight-color: transparent; }
.tgs-btn:hover { border-color: #B9C8BC; }
.tgs-btn:focus-visible, .tgs.open .tgs-btn { outline: 0; border-color: var(--g, #0F4C3A); box-shadow: 0 0 0 4px rgba(15, 76, 58, .12); }
.tgs.bad .tgs-btn { border-color: #C0432E; box-shadow: 0 0 0 4px rgba(192, 67, 46, .12); }
.tgs.dis .tgs-btn { opacity: .55; cursor: not-allowed; background: #F3F5F1; }
.tgs-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgs-val.ph { color: #8A968E; }
.tgs-chev { flex: none; width: 18px; height: 18px; color: #7F8D84; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.tgs.open .tgs-chev { transform: rotate(180deg); color: var(--g, #0F4C3A); }

.tgs-pop { position: fixed; z-index: 400; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(20, 40, 30, .08); border-radius: 16px; box-shadow: 0 18px 48px rgba(20, 40, 30, .22), 0 2px 8px rgba(20, 40, 30, .08); padding: 6px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: top center; transition: opacity .16s ease, transform .22s cubic-bezier(.2, .9, .25, 1.1); scrollbar-width: thin; }
.tgs-pop.up { transform-origin: bottom center; transform: translateY(8px) scale(.96); }
.tgs-pop.in { opacity: 1; transform: none; }
.tgs-pop.out { opacity: 0; transform: translateY(-6px) scale(.97); transition-duration: .12s; }
.tgs-pop.up.out { transform: translateY(6px) scale(.97); }
.tgs-grp { padding: 8px 12px 4px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8A968E; font-weight: 700; }
.tgs-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; cursor: pointer; font-size: .94rem; line-height: 1.3; transition: background .12s; user-select: none; }
.tgs-opt .t { flex: 1; min-width: 0; }
.tgs-opt.hl { background: #EAF0E8; }
.tgs-opt.sel { color: var(--g, #0F4C3A); font-weight: 700; }
.tgs-opt .ck { flex: none; width: 18px; height: 18px; color: var(--g, #0F4C3A); opacity: 0; transform: scale(.4); transition: opacity .18s, transform .22s cubic-bezier(.2, 1.4, .4, 1); }
.tgs-opt.sel .ck { opacity: 1; transform: none; }
.tgs-opt.off { opacity: .4; cursor: not-allowed; }
.tgs-opt .rp { position: absolute; border-radius: 50%; background: rgba(15, 76, 58, .18); transform: scale(0); animation: tgs-rp .55s ease-out forwards; pointer-events: none; }
@keyframes tgs-rp { to { transform: scale(1); opacity: 0; } }
.tgs-empty { padding: 12px; color: #8A968E; font-size: .9rem; }

/* phones: a sheet that slides up from the bottom, like Telegram */
.tgs-back { position: fixed; inset: 0; z-index: 399; background: rgba(15, 25, 20, .42); opacity: 0; transition: opacity .22s; }
.tgs-back.in { opacity: 1; }
.tgs-pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-height: 70vh !important; border-radius: 22px 22px 0 0; padding: 14px 10px calc(14px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .2s; opacity: 1; background: #fff; }
.tgs-pop.sheet::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 4px; background: #D5DCD3; margin: 0 auto 10px; }
.tgs-pop.sheet.in { transform: none; } .tgs-pop.sheet.out { transform: translateY(100%); }
.tgs-pop.sheet .tgs-opt { padding: 14px 14px; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .tgs-pop, .tgs-chev, .tgs-opt .ck, .tgs-back { transition: none !important; } .tgs-opt .rp { display: none; } }