/* ============================================================
   SmartSelect v1.0 — CSS
   Usage: <link rel="stylesheet" href="smartselect.css">
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --ss-accent:        #2563eb;
  --ss-accent-soft:   #eff4ff;
  --ss-accent-mid:    #bfcfff;
  --ss-accent-dark:   #1d4ed8;
  --ss-border:        #e2e8f0;
  --ss-border-hover:  #bbc8db;
  --ss-border-focus:  #2563eb;
  --ss-bg:            #ffffff;
  --ss-bg-group:      #f7f9fc;
  --ss-bg-hover:      #f0f4ff;
  --ss-bg-sel:        #eff4ff;
  --ss-text:          #0f172a;
  --ss-text-mid:      #475569;
  --ss-text-muted:    #94a3b8;
  --ss-shadow:        0 10px 40px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  --ss-radius:        10px;
  --ss-radius-sm:     6px;
  --ss-tag-bg:        #eff4ff;
  --ss-tag-border:    #c0d0ff;
  --ss-tag-text:      #1e40af;
  --ss-danger:        #ef4444;
  --ss-success:       #10b981;
  --ss-group-line:    #2563eb;
  --ss-transition:    .16s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ────────────────────────────────────────────────── */
.ss-wrap *, .ss-drop * { box-sizing: border-box; margin:0; padding:0; }

/* ── Wrap ─────────────────────────────────────────────────── */
.ss-wrap {
  position: relative;
  width: 100%;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
}

/* ── Trigger ──────────────────────────────────────────────── */
.ss-trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 40px;
  padding: 5px 38px 5px 11px;
  background: var(--ss-bg);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: border-color var(--ss-transition), box-shadow var(--ss-transition);
}
.ss-trigger:hover         { border-color: var(--ss-border-hover); }
.ss-trigger.focus         { border-color: var(--ss-border-focus); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.ss-trigger.ss-disabled   { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Placeholder */
.ss-ph { font-size: 13px; color: var(--ss-text-muted); line-height: 1; }

/* Single selected label */
.ss-single-label { font-size: 13.5px; color: var(--ss-text); font-weight: 500; }

/* ── Tags / Pills ─────────────────────────────────────────── */
.ss-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px 3px 9px;
  background: var(--ss-tag-bg);
  border: 1px solid var(--ss-tag-border);
  color: var(--ss-tag-text);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: ss-pill-in .12s ease;
}
@keyframes ss-pill-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
.ss-pill-x {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ss-tag-text);
  opacity: .6;
  font-size: 13px;
  transition: opacity var(--ss-transition), background var(--ss-transition);
}
.ss-pill-x:hover { opacity: 1; background: var(--ss-accent-mid); }

/* Count badge */
.ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--ss-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
}

/* Caret */
.ss-caret {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ss-text-muted);
  pointer-events: none;
  transition: transform var(--ss-transition), color var(--ss-transition);
  display: flex;
  align-items: center;
}
.ss-trigger.focus .ss-caret {
  transform: translateY(-50%) rotate(180deg);
  color: var(--ss-accent);
}

/* ── Dropdown panel ───────────────────────────────────────── */
.ss-drop {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 99999;
  background: var(--ss-bg);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
}
.ss-drop.open {
  display: flex;
  animation: ss-drop-in .15s cubic-bezier(.22,.68,0,1.15);
  transform-origin: top center;
}
@keyframes ss-drop-in {
  from { opacity: 0; transform: scaleY(.93) translateY(-6px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ── Search ───────────────────────────────────────────────── */
.ss-search-area {
  padding: 9px 9px 8px;
  border-bottom: 1px solid var(--ss-border);
  background: var(--ss-bg-group);
}
.ss-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.ss-search-icon {
  position: absolute;
  left: 9px;
  color: var(--ss-text-muted);
  pointer-events: none;
  display: flex;
}
.ss-search-input {
  width: 100% !important;
  height: 34px;
  padding: 0 9px 0 31px;
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ss-text);
  background: var(--ss-bg);
  outline: none;
  transition: border-color var(--ss-transition), box-shadow var(--ss-transition);
}
.ss-search-input::placeholder { color: var(--ss-text-muted); }
.ss-search-input:focus {
  border-color: var(--ss-border-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ── Action bar (multiple mode only) ─────────────────────── */
.ss-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 11px;
  border-bottom: 1px solid #eef2f8;
  background: var(--ss-bg-group);
}
.ss-act-info { font-size: 11.5px; color: var(--ss-text-muted); font-weight: 500; }
.ss-act-info b { color: var(--ss-accent); }
.ss-act-btns { display: flex; gap: 5px; }
.ss-act-btn {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ss-transition);
}
.ss-btn-all  { background: var(--ss-accent-soft); color: var(--ss-accent); border-color: var(--ss-accent-mid); }
.ss-btn-all:hover  { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }
.ss-btn-none { background: #fff5f5; color: var(--ss-danger); border-color: #fed7d7; }
.ss-btn-none:hover { background: var(--ss-danger); color: #fff; border-color: var(--ss-danger); }

/* ── Options list ─────────────────────────────────────────── */
.ss-list { overflow-y: auto; padding: 3px 0; }
.ss-list::-webkit-scrollbar       { width: 4px; }
.ss-list::-webkit-scrollbar-track { background: transparent; }
.ss-list::-webkit-scrollbar-thumb { background: #dce3f0; border-radius: 8px; }
.ss-list::-webkit-scrollbar-thumb:hover { background: #b8c4d8; }

/* ── Group header ─────────────────────────────────────────── */
.ss-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 5px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ss-bg-group);
  border-top: 1px solid #eef2f8;
}
.ss-group-hd:first-child { border-top: none; }
.ss-group-hd-left { display: flex; align-items: center; gap: 7px; }
.ss-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ss-group-line);
  opacity: .45;
}
.ss-group-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ss-text-muted);
}
.ss-group-count {
  font-size: 10px;
  color: var(--ss-text-muted);
  background: #eef2f8;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* Per-group Select All button */
.ss-grp-selall {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--ss-accent-mid);
  background: var(--ss-accent-soft);
  color: var(--ss-accent);
  cursor: pointer;
  transition: all var(--ss-transition);
  white-space: nowrap;
}
.ss-grp-selall:hover          { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }
.ss-grp-selall.all-sel        { background: #e6faf4; color: #047857; border-color: #a7f0d4; }
.ss-grp-selall.all-sel:hover  { background: #10b981; color: #fff; border-color: #10b981; }

/* Group collapse toggle */
.ss-grp-toggle { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.ss-grp-arrow  { transition: transform var(--ss-transition); color: var(--ss-text-muted); display: flex; }
.ss-grp-arrow.collapsed { transform: rotate(-90deg); }
.ss-group-items.collapsed { display: none; }

/* ── Option row ───────────────────────────────────────────── */
.ss-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7.5px 13px 7.5px 15px;
  cursor: pointer;
  transition: background var(--ss-transition);
}
.ss-opt:hover     { background: var(--ss-bg-hover); }
.ss-opt.ss-sel    { background: var(--ss-bg-sel); }
.ss-opt.ss-hidden { display: none !important; }

/* Checkbox indicator (multiple mode) */
.ss-cb {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.8px solid #c8d5e8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .14s cubic-bezier(.34,1.56,.64,1);
}
.ss-opt.ss-sel .ss-cb {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  transform: scale(1.05);
}
.ss-cb-tick {
  opacity: 0;
  transform: scale(0) rotate(-15deg);
  transition: opacity .12s, transform .14s cubic-bezier(.34,1.56,.64,1);
}
.ss-opt.ss-sel .ss-cb-tick { opacity: 1; transform: scale(1) rotate(0); }

/* Radio indicator (single mode) */
.ss-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.8px solid #c8d5e8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .14s cubic-bezier(.34,1.56,.64,1);
}
.ss-opt.ss-sel .ss-radio { border-color: var(--ss-accent); }
.ss-radio-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ss-accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity .12s, transform .14s cubic-bezier(.34,1.56,.64,1);
}
.ss-opt.ss-sel .ss-radio-dot { opacity: 1; transform: scale(1); }

/* Option label text */
.ss-opt-txt {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ss-text-mid);
  font-size: 13px;
  transition: color var(--ss-transition);
}
.ss-opt.ss-sel .ss-opt-txt { color: var(--ss-text); font-weight: 600; }
.ss-opt-txt mark {
  background: #fef08a;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: inherit;
  color: inherit;
}

/* ── Empty state ──────────────────────────────────────────── */
.ss-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  color: var(--ss-text-muted);
  font-size: 12.5px;
  gap: 8px;
}
.ss-empty svg { opacity: .35; }

/* ── Footer ───────────────────────────────────────────────── */
.ss-footer {
  padding: 6px 12px;
  border-top: 1px solid #eef2f8;
  background: var(--ss-bg-group);
  font-size: 11px;
  color: var(--ss-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ss-footer-esc { font-size: 10.5px; color: #c0cad8; }