/* ============================================================
   CSelect — themed dropdown (js/cselect.js)
   The button mimics the form's inputs; the panel is ours, so it can be
   capped in height and given the site's slim red scrollbar.
   ============================================================ */

.cs{ position:relative; display:block; }
.cs select{ display:none; }          /* kept for its value, never shown */

/* ---------- closed state ---------- */
.cs-btn{
  width:100%; display:flex; align-items:center; gap:8px; cursor:pointer; transition:.16s;
  padding:11px 34px 11px 37px; border-radius:10px; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  font-family:var(--body); font-size:13px; color:var(--text);
}
.cs-btn:hover:not(:disabled){ border-color:rgba(255,26,46,.3); }
.cs-btn:focus-visible{ outline:none; border-color:rgba(255,26,46,.55); background:rgba(255,26,46,.05); }
.cs-open .cs-btn{ border-color:rgba(255,26,46,.55); background:rgba(255,26,46,.05); }
.cs-btn:disabled{ opacity:.55; cursor:not-allowed; }

.cs-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-label.cs-ph{ color:#5e5e68; }     /* nothing chosen yet */

.cs-caret{
  position:absolute; right:14px; top:50%; width:0; height:0; pointer-events:none;
  transform:translateY(-50%);
  border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:5px solid #8b8b95; transition:.16s;
}
.cs-open .cs-caret{ border-top-color:var(--red); transform:translateY(-50%) rotate(180deg); }

/* a filled field keeps the red border, matching the text inputs */
.cs-btn:not(:disabled) .cs-label:not(.cs-ph){ color:var(--text); }
.cs-filled .cs-btn{ border-color:rgba(255,26,46,.55); }

/* the dial code sits in a narrow column — no room for a leading icon */
.cs-compact .cs-btn{ padding:11px 24px 11px 11px; font-size:12.5px; }
.cs-compact .cs-caret{ right:9px; }

/* ---------- the panel ---------- */
.cs-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  border-radius:10px; overflow:hidden;
  background:#100a0c; border:1px solid rgba(255,26,46,.4);
  box-shadow:0 18px 44px rgba(0,0,0,.65);
}
.cs-panel[hidden]{ display:none; }
.cs-panel.cs-up{ top:auto; bottom:calc(100% + 6px); }

.cs-search{ padding:8px; border-bottom:1px solid var(--line-soft); }
.cs-search input{
  width:100%; padding:8px 10px; border-radius:7px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-family:var(--body); font-size:12.5px; color:var(--text); outline:none;
}
.cs-search input:focus{ border-color:rgba(255,26,46,.5); background:rgba(255,26,46,.06); }
.cs-search input::placeholder{ color:#5e5e68; }

/* the point of the whole component: a capped list with our own scrollbar */
.cs-list{
  list-style:none; max-height:230px; overflow-y:auto; padding:5px;
  scrollbar-width:thin; scrollbar-color:rgba(255,26,46,.6) rgba(255,255,255,.04);
  overscroll-behavior:contain;
}
.cs-list::-webkit-scrollbar{ width:7px; }
.cs-list::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:4px; }
.cs-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--red),#7a0d16); border-radius:4px;
  box-shadow:0 0 8px rgba(255,26,46,.45);
}
.cs-list::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#ff4d5e,var(--red)); }

.cs-opt{
  padding:8px 10px; border-radius:7px; cursor:pointer; transition:.12s;
  font-size:12.5px; color:#c4c4ce; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-opt:hover, .cs-opt.cs-active{ background:rgba(255,26,46,.14); color:#fff; }
.cs-opt.on{
  background:rgba(255,26,46,.2); color:#fff;
  box-shadow:inset 2px 0 0 var(--red);
}
/* "Use “…”" — accepting whatever was typed, for towns no list contains */
.cs-opt.cs-custom{
  color:var(--red); border-bottom:1px solid var(--line-soft); border-radius:7px 7px 0 0;
  margin-bottom:3px;
}
.cs-opt.cs-custom:hover{ background:rgba(255,26,46,.18); color:#fff; }

.cs-empty{ padding:14px 12px; text-align:center; font-size:12px; color:#7f7f89; }

/* The form marks a missed field by putting .bad on the control — which is
   now the hidden <select>. js/cselect.js carries it out to the wrapper, or
   the message would appear with no red box to point at. */
.cs-bad .cs-btn{ border-color:#ff5a68; background:rgba(255,90,104,.07); }

@media (max-width:640px){
  .cs-list{ max-height:200px; }
}