/* =========================================================
   Searchable custom dropdown — user side (JS: assets/js/custom-select.js — user themes ki shared copy).
   Markup: <select class="searchable-select [has-search|no-search]">. Colors theme ke var(--c-primary) se.
   ========================================================= */
.search-select-wrapper{ position:relative; width:100%; }
.search-select-wrapper.opens-up .search-select-panel{ top:auto; bottom:calc(100% + 6px); }
.search-select-wrapper.opens-left .search-select-panel{ left:auto; right:0; }

.search-select-control{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; height:46px; padding:0 14px;
  border:1px solid #d5dae1; border-radius:8px;
  background:#fff; color:#0f172a; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.search-select-control:hover{ border-color:var(--c-primary); }
.search-select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.search-select-value i{ color:var(--c-primary); flex:0 0 auto; }
.search-select-caret{ color:#9aa3b2; flex:0 0 auto; font-size:12px; transition:transform .18s ease; }
.search-select-wrapper.is-open .search-select-caret{ transform:rotate(180deg); }
.search-select-wrapper.is-open .search-select-control{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14); }

/* disabled (asli <select disabled>) */
.search-select-wrapper.is-disabled .search-select-control{ background:#f6f9fa; color:#8b9a9f; cursor:not-allowed; }
.search-select-wrapper.is-disabled .search-select-control:hover{ border-color:#d5dae1; }

.search-select-panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20000; min-width:170px;
  background:#fff; border:1px solid #e1e7ea; border-radius:10px;
  box-shadow:0 14px 30px rgba(20,24,40,.14); padding:6px; display:none;
}
.search-select-wrapper.is-open .search-select-panel{ display:block; }

.search-select-input{
  width:100%; height:38px; padding:0 12px; margin-bottom:6px;
  border:1px solid #d5dae1; border-radius:7px; font-size:14px; outline:none;
}
.search-select-input:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12); }

.search-select-list{ max-height:320px; overflow-y:auto; }

/* har option alag row — beech mein line, icon | naam | badge */
.search-select-option{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px;
  font-size:14px; font-weight:600; color:#334047; cursor:pointer; line-height:1.35;
  border-bottom:1px solid #eef2f4;
}
.search-select-option + .search-select-option{ margin-top:2px; }
.search-select-option:last-child{ border-bottom:0; }
/* icon seedha (flag ki tarah, koi dabba nahi) */
.search-select-option i{
  flex:0 0 auto; width:24px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-primary-dark); font-size:20px; line-height:1;
}
.search-select-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-select-note{
  flex:0 0 auto; margin-left:auto; padding:3px 9px; border-radius:20px;
  background:#f1f5f7; color:#4b5b61; font-size:12.5px; font-weight:700; white-space:nowrap;
}
.search-select-option:hover{ background:rgba(var(--c-primary-rgb),.07); border-bottom-color:transparent; }
.search-select-option.is-selected{ background:var(--c-primary); color:#fff; border-bottom-color:transparent; }
.search-select-option.is-selected i{ color:#fff; }
.search-select-option.is-selected .search-select-note{ background:rgba(255,255,255,.22); color:#fff; }

/* control (band dropdown) mein bhi icon + badge */
.search-select-value i{ width:22px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.search-select-value .search-select-note{ margin-left:6px; }

/* flag: fixed size (service icons ke barabar) */
.search-select-option i.flag-icon, .search-select-value i.flag-icon{
  width:22px; height:16px; background-color:transparent; background-size:cover; border-radius:2px;
}

.search-select-group{
  padding:9px 12px 4px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:#9aa3b2; pointer-events:none; user-select:none;
}
.search-select-empty{ padding:12px; font-size:13px; color:#9aa3b2; }

/* flag icons (data-icon="flag-icon flag-icon-xx") */
.search-select-value .flag-icon, .search-select-option .flag-icon{ border-radius:2px; }

/* harf avatar (brand icon na ho): rang JS inline deta (data-color / data-fg), chuni row mein bhi wahi rehta */
.search-select-option i.search-select-letter,
.search-select-value i.search-select-letter{
  width:22px; height:22px; border-radius:6px;
  font-style:normal; font-family:inherit; font-weight:800; font-size:12px; letter-spacing:0;
}

/* Sort (data-sort wale dropdown) — search ke neeche alag hissa: label + segmented control */
.search-select-sort{
  background:#f4f7f8; border:1px solid #e6ecee; border-radius:10px;
  padding:8px; margin-bottom:8px;
}
.search-select-sort-label{
  display:flex; align-items:center; gap:6px; padding:0 2px 7px;
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#7c8b91;
}
.search-select-sort-label i{ color:var(--c-primary); font-size:12px; }
.search-select-sort-seg{ display:flex; gap:4px; background:#fff; border:1px solid #e1e8eb; border-radius:8px; padding:3px; }   /* rang Buy page ke Normal/Smart tabs jaisa */
.search-select-sort-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:0; background:transparent; color:#5a6b72; border-radius:6px;
  padding:7px 6px; font-size:13px; font-weight:700; cursor:pointer; line-height:1.2;
  transition:background .15s, color .15s, box-shadow .15s;
}
.search-select-sort-btn i{ font-size:12px; opacity:.8; }
.search-select-sort-btn:hover{ color:var(--c-primary-dark); background:rgba(var(--c-primary-rgb),.07); }
.search-select-sort-btn.is-active, .search-select-sort-btn.is-active:hover{ background:var(--c-primary); color:#fff; box-shadow:0 1px 3px rgba(var(--c-primary-rgb),.35); }
.search-select-sort-btn.is-active i{ color:#fff; opacity:1; }
.search-select-sort-btn:focus, .search-select-sort-btn:active{ outline:none; }

/* Custom dropdown banne se pehle asli <select> na dikhe (page load pe "simple phir custom" flash nahi),
   lekin jagah utni hi rahe (46px) taake page na hile. JS bante hi select ko display:none kar deta. */
select.searchable-select{ visibility:hidden; height:46px; width:100%; display:block; }

/* do line wala option (data-sub): upar naam, neeche chhoti line (jaise success % · stock) */
.search-select-option.has-sub .search-select-text{ display:flex; flex-direction:column; white-space:normal; }
.search-select-main{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-select-sub{ margin-top:2px; font-size:12px; font-weight:600; color:#8b9a9f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-select-option.is-selected .search-select-sub{ color:rgba(255,255,255,.85); }