/* ta-select.css · lista wyboru dla <select data-ta-select> (2026-11-02, js/ta-select.js). Wygląd jak lista w formularzu „Dla firm” (ta-business.css). */
.ta-sel {
  position: fixed; z-index: 1000; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: 320px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none;
  border: 1px solid var(--ta-line); border-radius: var(--ta-radius-md, 8px); background: var(--ta-white);
  box-shadow: 0 18px 40px rgba(28, 28, 26, .14), 0 2px 6px rgba(28, 28, 26, .06);
  font-family: var(--ta-font); -webkit-font-smoothing: antialiased;
  animation: ta-sel-drop .18s var(--ta-ease, ease);
}
.ta-sel[data-up] { animation-name: ta-sel-drop-up; }
.ta-sel[hidden] { display: none; }
.ta-sel:focus { outline: none; }
.ta-sel .ta-sel__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; margin: 0; padding: 9px 12px; border-radius: var(--ta-radius-sm, 4px);
  font: 400 14px/1.35 var(--ta-font); color: var(--ta-ink); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.ta-sel .ta-sel__opt[data-active] { background: var(--ta-cream); }
.ta-sel:focus-visible .ta-sel__opt[data-active] { box-shadow: inset 0 0 0 2px var(--ta-green); }
.ta-sel .ta-sel__opt[aria-selected="true"] { font-weight: 500; color: var(--ta-green); }
.ta-sel .ta-sel__tick { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ta-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.ta-sel .ta-sel__opt[aria-selected="true"] .ta-sel__tick { visibility: visible; }
/* Pole z otwartą listą: obramowanie jak przy fokusie */
select[data-ta-sel-open] { border-color: var(--ta-green) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ta-green) 14%, transparent) !important; outline: none !important; }
@keyframes ta-sel-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ta-sel-drop-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ta-sel { animation: none; } }