/* =====================================================================
   Select / Dropdown ทั้งระบบ — ใช้ร่วมกับ select-ui.js
   • ตัว <select> ยังเป็นตัวจริง (ฟอร์ม/validation/label/change event ทำงานตามปกติ) → ตกแต่งด้วย CSS ล้วน
   • รายการตัวเลือกตอนเปิดเป็นกล่องของเราเอง (.sx-pop) แทนกล่องของเบราว์เซอร์ — ปิด JS ก็ยังใช้ได้ (กลับไปใช้กล่องมาตรฐาน)
   โทเค็นสีดึงจากธีมของระบบ: --primary|--red · --text|--ink · --bg · --line · --muted
   ===================================================================== */
select,.sx-pop{--sx-acc:var(--primary,var(--red,#ef4444));--sx-tx:var(--text,var(--ink,#f3f4f6));--sx-mu:var(--muted,#9ca3af);--sx-ln:var(--line,rgba(255,255,255,.12));--sx-bg:var(--bg,#0b0b0f)}

/* ---------- ตัว select ---------- */
select:not([multiple]):not([size]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  padding-right:42px!important;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%),linear-gradient(var(--sx-ln),var(--sx-ln))!important;
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px),calc(100% - 36px) 50%!important;
  background-size:5px 5px,5px 5px,1px 52%!important;background-repeat:no-repeat!important;
  transition:border-color .18s,box-shadow .18s,background-color .18s}
select:not([multiple]):not([size]):hover:not(:disabled){border-color:color-mix(in srgb,var(--sx-acc) 55%,var(--sx-ln))}
select:not([multiple]):not([size]):focus-visible,select.sx-open{outline:0;border-color:var(--sx-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-acc) 22%,transparent)}
select:disabled{opacity:.5;cursor:not-allowed}
select:has(option[value=""]:checked){color:var(--sx-mu)}                      /* ยังไม่ได้เลือก (placeholder) */
select option,select optgroup{background:var(--sx-bg);color:var(--sx-tx)}      /* กล่องมาตรฐาน กรณีไม่มี JS */

/* ---------- กล่องรายการ ---------- */
.sx-pop{position:fixed;z-index:99999;display:flex;flex-direction:column;box-sizing:border-box;max-width:min(94vw,520px);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--sx-acc) 30%,var(--sx-ln));border-radius:14px;color:var(--sx-tx);font:inherit;font-size:.92rem;
  background:color-mix(in srgb,var(--sx-bg) 92%,var(--sx-acc));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;transform-origin:50% 0;animation:sx-in .14s ease-out}
.sx-pop.sx-up{transform-origin:50% 100%}
@keyframes sx-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.sx-pop.sx-up{animation-name:sx-in-up}@keyframes sx-in-up{from{opacity:0;transform:translateY(6px) scale(.97)}}
.sx-q{flex:none;display:block;width:auto!important;min-height:0!important;margin:8px 8px 2px;padding:8px 12px!important;border:1px solid var(--sx-ln);border-radius:10px!important;background:color-mix(in srgb,var(--sx-bg) 70%,#000)!important;color:var(--sx-tx);font:inherit;font-size:.88rem;outline:0}
.sx-q:focus{border-color:var(--sx-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-acc) 20%,transparent)}
.sx-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;scrollbar-width:thin;scrollbar-color:var(--sx-ln) transparent}
.sx-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--sx-tx);line-height:1.35;white-space:normal;overflow-wrap:anywhere;cursor:pointer;user-select:none;-webkit-user-select:none}
.sx-opt+.sx-opt{margin-top:2px}
.sx-opt.hi{background:color-mix(in srgb,var(--sx-acc) 15%,transparent)}
.sx-opt.ph{color:var(--sx-mu)}
.sx-opt[aria-selected=true]{color:var(--sx-acc);font-weight:600;background:color-mix(in srgb,var(--sx-acc) 10%,transparent)}
.sx-opt[aria-selected=true].hi{background:color-mix(in srgb,var(--sx-acc) 20%,transparent)}
.sx-opt[aria-selected=true]::after{content:"";flex:none;width:15px;height:15px;margin-left:auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.sx-opt[aria-disabled=true]{opacity:.38;cursor:not-allowed}
.sx-grp{padding:10px 12px 4px;color:var(--sx-mu);font-size:.74rem;font-weight:600;letter-spacing:.03em}
.sx-opt.in-grp{padding-left:20px}
.sx-none{padding:18px 12px;color:var(--sx-mu);text-align:center;font-size:.86rem}
@media(max-width:560px){.sx-opt{padding:11px 12px}}
@media(prefers-reduced-motion:reduce){.sx-pop{animation:none}select:not([multiple]):not([size]){transition:none}}