/* ──────────────────────────────────────────────
   IH Header Search — Stylesheet v1.0.0
   Scoped tightly so it doesn't bleed into themes.
   ────────────────────────────────────────────── */

/* ── Variables ─────────────────────────────── */
:root {
  --ih-accent:        #1e7e34;   /* Islam Hashtag green */
  --ih-accent-light:  #e8f5ec;
  --ih-text:          #1a1a1a;
  --ih-muted:         #6b7280;
  --ih-border:        #e5e7eb;
  --ih-bg:            #ffffff;
  --ih-shadow:        0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --ih-radius:        10px;
  --ih-font:          inherit;
  --ih-transition:    200ms ease;
  --ih-z-dropdown:    99999;
  --ih-z-overlay:     99998;
}

/* ── Wrapper (li inside nav) ───────────────── */
.ih-search-menu-item {
  display:     flex !important;
  align-items: center !important;
  padding:     0 !important;
  list-style:  none;
}

.ih-search-wrap {
  position: relative;
  display:  inline-flex;
  align-items: center;
}

/* ── Toggle button ─────────────────────────── */
.ih-search-toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border:          none;
  border-radius:   50%;
  background:      transparent;
  color:           var(--ih-text);
  cursor:          pointer;
  transition:      background var(--ih-transition), color var(--ih-transition);
  padding:         0;
}
.ih-search-toggle:hover,
.ih-search-toggle[aria-expanded="true"] {
  background: var(--ih-accent-light);
  color:      var(--ih-accent);
}
.ih-search-toggle svg {
  width:  20px;
  height: 20px;
  display: block;
}

/* ── Dropdown panel ────────────────────────── */
.ih-search-box {
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  width:         420px;
  max-width:     calc(100vw - 32px);
  background:    var(--ih-bg);
  border-radius: var(--ih-radius);
  box-shadow:    var(--ih-shadow);
  border:        1px solid var(--ih-border);
  z-index:       var(--ih-z-dropdown);
  overflow:      hidden;
  animation:     ih-fadein 180ms ease both;
}
.ih-search-box[hidden] { display: none; }

@keyframes ih-fadein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Input row ─────────────────────────────── */
.ih-search-field-wrap {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     12px 16px;
  border-bottom: 1px solid var(--ih-border);
}
.ih-field-icon {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  color:       var(--ih-muted);
  display:     block;
}
.ih-search-input {
  flex:       1;
  border:     none !important;
  outline:    none !important;
  box-shadow: none !important;
  font-size:  15px !important;
  font-family: var(--ih-font);
  color:      var(--ih-text);
  background: transparent;
  padding:    0 !important;
  margin:     0 !important;
  min-width:  0;
}
.ih-search-input::placeholder { color: var(--ih-muted); }

.ih-search-clear {
  flex-shrink: 0;
  width:       26px;
  height:      26px;
  border:      none;
  border-radius: 50%;
  background:  var(--ih-border);
  color:       var(--ih-muted);
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     0;
  transition:  background var(--ih-transition);
}
.ih-search-clear:hover { background: #d1d5db; }
.ih-search-clear[hidden] { display: none; }
.ih-search-clear svg { width: 13px; height: 13px; display: block; }

/* ── Results list ──────────────────────────── */
.ih-search-results {
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:    8px 0;
}
.ih-search-results:empty { padding: 0; }

/* ── State: searching / empty ──────────────── */
.ih-search-status {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     16px 20px;
  color:       var(--ih-muted);
  font-size:   14px;
}
.ih-spinner {
  width:        18px;
  height:       18px;
  border:       2px solid var(--ih-border);
  border-top-color: var(--ih-accent);
  border-radius: 50%;
  animation:    ih-spin .65s linear infinite;
  flex-shrink:  0;
}
@keyframes ih-spin {
  to { transform: rotate(360deg); }
}

/* ── Section label (Products / Courses) ─────── */
.ih-section-label {
  font-size:   10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:       var(--ih-muted);
  padding:     10px 16px 4px;
  margin:      0;
}
.ih-section-label:first-child {
  padding-top: 6px;
}

/* ── Individual result item ─────────────────── */
.ih-result-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     9px 16px;
  text-decoration: none !important;
  color:       var(--ih-text) !important;
  transition:  background var(--ih-transition);
  cursor:      pointer;
}
.ih-result-item:hover,
.ih-result-item:focus {
  background:  var(--ih-accent-light);
  outline:     none;
}
.ih-result-item.is-active {
  background: var(--ih-accent-light);
}

/* Thumbnail */
.ih-result-thumb {
  width:         44px;
  height:        44px;
  border-radius: 6px;
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--ih-border);
}
.ih-result-thumb-placeholder {
  width:           44px;
  height:          44px;
  border-radius:   6px;
  background:      var(--ih-accent-light);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
}

/* Text block */
.ih-result-text {
  flex:        1;
  min-width:   0;
}
.ih-result-title {
  display:        block;
  font-size:      14px;
  font-weight:    600;
  line-height:    1.3;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  color:          var(--ih-text);
}
.ih-result-title mark {
  background: #fff3cd;
  color:      inherit;
  border-radius: 2px;
  padding:    0 1px;
}
.ih-result-meta {
  display:    block;
  font-size:  12px;
  color:      var(--ih-accent);
  font-weight: 600;
  margin-top: 2px;
}

/* Type badge */
.ih-result-badge {
  font-size:     10px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:        2px 7px;
  border-radius:  99px;
  flex-shrink:    0;
}
.ih-badge-product {
  background: #fef3c7;
  color:      #92400e;
}
.ih-badge-course {
  background: #dbeafe;
  color:      #1e3a8a;
}
.ih-badge-lesson {
  background: #f3e8ff;
  color:      #5b21b6;
}

/* ── Footer "View all" ─────────────────────── */
.ih-search-footer {
  border-top: 1px solid var(--ih-border);
  padding:    10px 16px;
}
.ih-search-footer[hidden] { display: none; }
.ih-view-all {
  display:     inline-flex;
  align-items: center;
  font-size:   13px;
  font-weight: 600;
  color:       var(--ih-accent) !important;
  text-decoration: none !important;
  gap:         4px;
}
.ih-view-all:hover { text-decoration: underline !important; }

/* ── Overlay (closes on outside click) ──────── */
.ih-search-overlay {
  position:   fixed;
  inset:      0;
  z-index:    var(--ih-z-overlay);
  background: transparent;
}
.ih-search-overlay[hidden] { display: none; }

/* ── Accessibility: reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  .ih-search-box { animation: none; }
  .ih-spinner    { animation: none; border-color: var(--ih-accent); }
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 600px) {
  .ih-search-box {
    position:  fixed;
    top:       0;
    left:      0;
    right:     0;
    width:     100%;
    max-width: 100%;
    border-radius: 0;
    border-top:    none;
    border-left:   none;
    border-right:  none;
  }
  .ih-search-results { max-height: 60vh; }
}