@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

:root {
  --scs-orange: #F97316;
  --scs-orange-bg: #FFF3E0;
  --scs-orange-dark: #EA580C;
  --scs-green: #16A34A;
  --scs-green-bg: #F0FDF4;
  --scs-blue: #4F46E5;
  --scs-blue-bg: #EEF2FF;
  --scs-text: #1a1a2e;
  --scs-muted: #9CA3AF;
  --scs-border: #F0F0F0;
  --scs-bg: #ffffff;
  --scs-font: 'Cairo', -apple-system, sans-serif;
}

.scs-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  z-index: 99999 !important;
}

/* ══ Panel ══ */
.scs-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 99999;
  background: var(--scs-bg);
  border-radius: 14px;
  border: 1px solid #EDEDED;
  box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 20px 48px rgba(0,0,0,.12);
  display: none;
  overflow: hidden;
  max-height: 76vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scs-dropdown.scs-open {
  display: block;
  animation: scsIn 130ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes scsIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scs-inner { padding: 6px 0 12px; }

/* ══ Section header ══ */
.scs-sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 7px;
}
.scs-sl {
  font: 800 11px/1 var(--scs-font);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--scs-orange);
}
.scs-sl--neutral { color: var(--scs-text); }
.scs-sl--green   { color: var(--scs-green); }

.scs-clrh {
  font: 600 12px var(--scs-font);
  color: var(--scs-muted);
  background: none; border: none;
  cursor: pointer; padding: 0;
  transition: color .15s;
}
.scs-clrh:hover { color: var(--scs-orange); }

/* ══ Grid 2 colonnes ══ */
.scs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 2px 10px 6px;
}
.scs-grid--s { grid-template-columns: 1fr; }

/* ══ Item ══ */
.scs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--scs-text) !important;
  font: 700 14px/1.2 var(--scs-font);
  cursor: pointer;
  transition: background 110ms ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  overflow: hidden;
}
.scs-item:hover,
.scs-item.scs-active {
  background: var(--scs-orange-bg);
  text-decoration: none !important;
}
.scs-item:hover .scs-il,
.scs-item.scs-active .scs-il {
  color: var(--scs-orange-dark);
}

/* ══ Icon ══ */
.scs-ii {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 110ms;
}
.scs-ii svg {
  width: 16px; height: 16px;
  stroke: #AEAEB2; fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scs-item:hover .scs-ii,
.scs-item.scs-active .scs-ii {
  background: #FFE8D5;
}
.scs-item:hover .scs-ii svg,
.scs-item.scs-active .scs-ii svg {
  stroke: var(--scs-orange);
}

/* Type colors */
.scs-item--category  .scs-ii { background: var(--scs-blue-bg); }
.scs-item--category  .scs-ii svg { stroke: var(--scs-blue); }
.scs-item--trending  .scs-ii { background: var(--scs-orange-bg); }
.scs-item--trending  .scs-ii svg { stroke: var(--scs-orange); }
.scs-item--popular   .scs-ii { background: var(--scs-green-bg); }
.scs-item--popular   .scs-ii svg { stroke: var(--scs-green); }
.scs-item--history   .scs-ii { background: #F5F5F5; }
.scs-item--history   .scs-ii svg { stroke: #AEAEB2; }

/* ══ Label ══ */
.scs-il {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--scs-text);
  transition: color 110ms;
}
.scs-il mark {
  background: transparent;
  color: var(--scs-orange);
  font-weight: 800;
  padding: 0;
}

/* ══ Delete ══ */
.scs-del {
  flex-shrink: 0;
  background: none; border: none;
  padding: 2px; cursor: pointer;
  color: #D1D5DB;
  opacity: 0;
  display: flex; align-items: center;
  transition: opacity .15s, color .15s;
  line-height: 0;
}
.scs-item:hover .scs-del { opacity: 1; }
.scs-del:hover { color: var(--scs-orange); }
.scs-del svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; }

/* ══ Divider ══ */
.scs-divider {
  height: 1px;
  background: #F5F5F5;
  margin: 6px 18px;
}

/* ══ Loading ══ */
.scs-loading {
  padding: 28px;
  display: flex; align-items: center; justify-content: center;
}
.scs-spinner {
  width: 22px; height: 22px;
  border: 3px solid #F3F3F3;
  border-top-color: var(--scs-orange);
  border-radius: 50%;
  animation: scsSpin .45s linear infinite;
}
@keyframes scsSpin { to { transform: rotate(360deg); } }

/* ══ Empty ══ */
.scs-empty {
  padding: 24px 20px;
  text-align: center;
  font: 600 14px var(--scs-font);
  color: var(--scs-muted);
}

/* ══ Scrollbar ══ */
.scs-dropdown::-webkit-scrollbar { width: 3px; }
.scs-dropdown::-webkit-scrollbar-thumb { background: #EEE; border-radius: 3px; }

/* ══ Kill Woodmart + natives ══ */
.woodmart-search-results, .xts-search-results-holder, .xts-search-results,
.woodmart-search-result, .wd-search-results, .woodmart-search-popup,
.woodmart-ajax-search-results, .xts-ajax-search-results,
.dgwt-wcas-suggestions-wraper, .autocomplete-suggestions,
.live-search-result, .live-search-results, .ui-autocomplete {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* ══ Mobile ══ */
@media (max-width: 640px) {
  .scs-dropdown { border-radius: 0 0 14px 14px; left: -6px; right: -6px; }
  .scs-grid { grid-template-columns: 1fr 1fr; padding: 2px 6px 4px; gap: 2px; }
  .scs-item { font-size: 13px; padding: 9px 8px; gap: 8px; }
  .scs-ii { width: 30px; height: 30px; border-radius: 7px; }
}
@media (max-width: 400px) { .scs-grid { grid-template-columns: 1fr; } }