/* static/shared/tw-select.css
   Custom Select Component — shared across all pages.
   Extracted from profile-v2.css; applies to .ep-select elements via tw-select.js.
   Do NOT duplicate these rules in page-specific CSS files.
*/

/* ── Z-index token — single source of truth ───────────────────
   9500: above all modals (max 2000) and below .tw-toast (9999).
   tw-select.js reads --tw-drop-z at runtime; never hardcode in JS. */
:root { --tw-drop-z: 9500; }

/* ── Wrapper ──────────────────────────────────────────────────── */
.sc-sel { position:relative; width:100%; display:block; }

/* ── Trigger button ───────────────────────────────────────────── */
.sc-sel-trg {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--color-surface-input); border:1px solid var(--color-border-default); border-radius:10px;
  color:var(--t1); font-family:inherit; font-size:.84rem; padding:10px 13px;
  cursor:pointer; text-align:right; direction:rtl; outline:none;
  transition:border-color .15s,box-shadow .15s; min-height:40px;
}
.sc-sel-trg:focus,
.sc-sel-open .sc-sel-trg { border-color:var(--ac); }
.sc-sel-trg:focus-visible { outline:2px solid var(--ac); outline-offset:2px; }

/* ── Error state (Validation Modifier = error, SEL-10) ────────── */
.sc-sel-err .sc-sel-trg {
  border-color:rgba(var(--color-status-danger-rgb),.7);
  box-shadow:0 0 0 2px rgba(var(--color-status-danger-rgb),.12);
}
/* Error state takes priority over focus-visible outline — keep error border color */
.sc-sel-err .sc-sel-trg:focus-visible {
  outline-color:rgba(var(--color-status-danger-rgb),.7);
}

/* ── Disabled state (Interaction = disabled, SEL-09) ─────────── */
.sc-sel-trg[disabled],
.sc-sel-trg:disabled { opacity:.45; cursor:not-allowed; }

/* ── Trigger text span ────────────────────────────────────────── */
.sc-sel-txt {
  flex:1; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px;
}
.sc-sel-ph { color:var(--t3) !important; }

/* ── Chevron arrow ────────────────────────────────────────────── */
.sc-sel-arr {
  flex-shrink:0; display:flex; align-items:center; color:var(--t3);
  transition:transform .15s;
}
.sc-sel-open .sc-sel-arr { transform:rotate(180deg); }

/* ── Dropdown portal (appended to body, position:fixed by JS) ── */
.sc-sel-drop {
  position:fixed; overflow-y:auto;
  background:var(--color-surface-glass); border:1px solid var(--color-border-medium);
  border-radius:11px; padding:4px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(var(--color-overlay-rgb),.55); direction:rtl;
  opacity:0; transform:translateY(-4px); transition:opacity .12s,transform .12s;
}
.sc-sel-drop-open { opacity:1; transform:translateY(0); }

/* ── Group headers (optgroup) ─────────────────────────────────── */
.sc-sel-grp {
  padding:5px 10px 2px; font-size:.68rem; font-weight:700;
  color:var(--t3); letter-spacing:.03em;
  border-top:1px solid var(--color-border-subtle); margin-top:3px;
}
.sc-sel-grp-first { border-top:none; margin-top:0; }

/* ── Dropdown items ───────────────────────────────────────────── */
.sc-sel-item {
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:7px;
  font-family:inherit; font-size:.82rem; color:var(--t1);
  cursor:pointer; direction:rtl; transition:background .1s; white-space:nowrap;
}
.sc-sel-item:hover:not(.sc-sel-item-dis),
.sc-sel-item-kb:not(.sc-sel-item-dis) { background:var(--color-surface-hover); }
.sc-sel-item-sel { color:var(--ac); background:rgba(var(--color-brand-primary-rgb),.07); }
.sc-sel-item-sel:hover { background:rgba(var(--color-brand-primary-rgb),.12) !important; }
.sc-sel-item-dis { color:var(--t3); opacity:.5; cursor:default; }
.sc-sel-ico { flex-shrink:0; }

/* ── Circular flag images (used with data-img on <option>) ─────── */
.tw-flag {
  width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 1.5px var(--color-border-strong), 0 1px 3px rgba(var(--color-overlay-rgb),.35);
  filter:brightness(1.03) saturate(1.08);
}