/* ======================================================================
   Sales Source - shared form widget styles (language multi-select +
   searchable country dropdown). Used by the careers page and every
   per-vacancy application form so they render identically.
   ====================================================================== */

/* Languages dropdown (multi-select) */
.lang-select{ position:relative; border:1.5px solid var(--line); border-radius:12px; background:#fff; transition:border-color .18s ease, box-shadow .18s ease; }
.lang-select[open]{ border-color:var(--green); box-shadow:0 0 0 3px rgba(52,163,86,.12); }
.lang-select summary{ list-style:none; cursor:pointer; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ink); font-weight:600; }
.lang-select summary::-webkit-details-marker{ display:none; }
.lang-select summary::after{ content:""; width:10px; height:10px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg); margin-top:-4px; transition:transform .2s; flex:none; }
.lang-select[open] summary::after{ transform:rotate(-135deg); margin-top:3px; }
.lang-text.placeholder{ color:var(--ink-faint); font-weight:500; }
.lang-panel{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; padding:10px; border-top:1px solid var(--line); }
@media(max-width:480px){ .lang-panel{ grid-template-columns:1fr; } }
.lang-opt{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; font-weight:600; font-size:.92rem; color:var(--ink); }
.lang-opt:hover{ background:var(--bg-soft); border-color:#CFE6D7; }
.lang-opt:has(input:checked){ border-color:var(--green); background:rgba(52,163,86,.06); }
.lang-opt img{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--line); }
.lang-opt .loc-globe{ width:20px; height:20px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,#1E8F5C,#15786E); }
.lang-opt .loc-globe svg{ width:13px; height:13px; }
.lang-opt span{ flex:1; }
.lang-opt input{ accent-color:var(--green); width:17px; height:17px; flex:none; }

/* Country dropdown (single-select, searchable) */
.cs-current{ display:flex; align-items:center; gap:10px; min-width:0; }
.cs-flag{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--line); }
.country-panel{ border-top:1px solid var(--line); }
.cs-search{ padding:10px; border-bottom:1px solid var(--line); }
.cs-search input{ width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; font:inherit; }
.cs-list{ list-style:none; margin:0; padding:6px; max-height:240px; overflow-y:auto; }
.cs-item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; cursor:pointer; font-weight:600; font-size:.92rem; color:var(--ink); }
.cs-item img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.cs-item:hover{ background:var(--bg-soft); }
.cs-item.sel{ background:rgba(52,163,86,.08); color:var(--green-deep); }
.cs-globe{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,#1E8F5C,#15786E); flex:none; }
.cs-globe svg{ width:14px; height:14px; }