/* ============================================================================
   universal-search.css — Overlay Universal Search (implementasi-dan-referensi-
   fitur.md §3). Tema mengikuti CSS custom properties aplikasi (data-theme).
   ============================================================================ */

.us-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(4, 20, 14, .55);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.us-overlay.open { display: flex; }

.us-panel {
  width: 100%; max-width: 560px; max-height: 78vh;
  background: var(--c-surface, #fff);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
  animation: us-pop .18s ease-out;
}
@keyframes us-pop { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }

.us-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--c-border, #e5ece8); }
.us-glass { width: 22px; height: 22px; color: var(--c-muted, #8a9a92); flex: none; }
.us-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--c-text, #17251f);
}
.us-close { border: 0; background: transparent; color: var(--c-muted, #8a9a92); font-size: 17px; cursor: pointer; padding: 4px 6px; }

.us-tabs { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; border-bottom: 1px solid var(--c-border, #e5ece8); }
.us-tab {
  border: 1px solid var(--c-border, #e5ece8); background: transparent; color: var(--c-text, #17251f);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.us-tab.active { background: var(--c-primary, #087F5B); border-color: var(--c-primary, #087F5B); color: #fff; }

.us-results { overflow-y: auto; padding: 6px 8px 14px; flex: 1; }
.us-hint { text-align: center; color: var(--c-muted, #8a9a92); font-size: 14px; padding: 26px 18px; line-height: 1.6; }
.us-loading { text-align: center; color: var(--c-muted, #8a9a92); font-size: 14px; padding: 26px; }
.us-cat { font-size: 11px; letter-spacing: .12em; color: var(--c-muted, #8a9a92); margin: 12px 8px 4px; font-weight: 700; }

.us-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 10px; border-radius: 13px; text-decoration: none; color: inherit;
}
.us-item:hover, .us-item.sel { background: color-mix(in srgb, var(--c-primary, #087F5B) 9%, transparent); }
.us-ico { font-size: 19px; flex: none; margin-top: 1px; }
.us-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.us-title { font-weight: 600; font-size: 14.5px; }
.us-snippet {
  font-size: 13px; color: var(--c-muted, #66756d);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.us-snippet mark { background: color-mix(in srgb, var(--c-accent, #F7A333) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* kartu pencarian di halaman Jelajah men-trigger overlay yang sama */
.us-open-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--c-surface, #fff); border: 1.5px solid var(--c-border, #dbe7e1);
  border-radius: 16px; padding: 13px 15px; margin: 14px 0 4px;
  color: var(--c-muted, #66756d); font-size: 14.5px; cursor: pointer; text-decoration: none;
}