/* ══════════════════════════════════════════════════════════
   NEWSAK SEARCH OVERLAY — add to base.html <style> block
   or link as a separate search.css
   ══════════════════════════════════════════════════════════ */

/* ── OVERLAY SHELL ── */
#search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none;          /* JS toggles to flex */
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;      /* clears sticky nav */
}
#search-overlay.is-open,
#search-overlay.active { display: flex; }

/* ── BACKDROP ── */
#search-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,10,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: backdropIn .2s ease;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

/* ── PANEL ── */
#search-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px;
  background: var(--white);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.22),
    0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
  animation: panelIn .25s cubic-bezier(.32,.72,0,1);
  max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── INPUT ROW ── */
#search-input-row {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.2rem;
  border-bottom: 1.5px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
}
#search-icon-wrap {
  width: 22px; height: 22px; position: relative;
  flex-shrink: 0; color: var(--soft);
}
#search-icon-glass,
#search-icon-spinner {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity .2s;
}
#search-icon-spinner {
  opacity: 0;
  animation: searchSpin .7s linear infinite;
}
@keyframes searchSpin { to { transform: rotate(360deg); } }
.is-loading #search-icon-glass  { opacity: 0; }
.is-loading #search-icon-spinner { opacity: 1; }

#search-input {
  flex: 1; border: none; outline: none;
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  color: var(--ink); background: transparent;
  min-width: 0;
}
#search-input::placeholder { color: var(--soft); font-weight: 400; }
/* hide native clear button */
#search-input::-webkit-search-cancel-button { display: none; }

#search-clear {
  display: none;    /* shown when input has value */
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--border);
  cursor: pointer; color: var(--mid);
  align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
#search-clear svg { width: 13px; height: 13px; }
#search-clear:hover { background: var(--red); color: var(--white); }
.has-value #search-clear { display: flex; }

#search-close {
  display: flex; align-items: center; justify-content: center;
  padding: .3rem .6rem; border-radius: 6px;
  border: 1.5px solid var(--border); background: transparent;
  font-family: var(--sans); font-size: .65rem; font-weight: 600;
  color: var(--soft); cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
#search-close:hover { border-color: var(--ink); color: var(--ink); }

/* ── BODY ── */
#search-body {
  overflow-y: auto; flex: 1;
  padding: 1.2rem 1.4rem 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ── SECTION HEADER ── */
.search-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .8rem;
}
.search-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soft);
}
.search-section-action {
  font-size: .7rem; font-weight: 600; color: var(--red);
  background: none; border: none; cursor: pointer; transition: color .15s;
}
.search-section-action:hover { color: var(--red-dark); }

/* ── RECENT CHIPS ── */
.search-chip-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.4rem;
}
.search-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 500; color: var(--mid);
  padding: .35rem .85rem; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg);
  cursor: pointer; transition: all .15s;
}
.search-chip:hover { border-color: var(--red); color: var(--red); background: rgba(221,69,0,.04); }
.search-chip-icon { font-size: .75rem; opacity: .5; }
.search-chip-del {
  width: 14px; height: 14px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--soft); font-size: .7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; padding: 0; flex-shrink: 0;
}
.search-chip-del:hover { background: var(--red); color: var(--white); }

/* ── TRENDING TOPIC GRID ── */
.search-topic-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem; margin-bottom: 1.4rem;
}
.search-topic-card {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.search-topic-card:hover {
  border-color: var(--red); background: rgba(221,69,0,.04);
}
.search-topic-icon {
  width: 34px; height: 34px; border-radius: 7px;
  background: rgba(221,69,0,.08); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: background .15s;
}
.search-topic-card:hover .search-topic-icon { background: rgba(221,69,0,.15); }
.search-topic-name {
  font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.search-topic-count {
  font-size: .65rem; color: var(--soft); margin-top: .1rem;
}

/* ── PUBLISHER ROW ── */
.search-publisher-row {
  display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.search-publisher-pill {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.search-publisher-pill:hover { border-color: var(--red); }
.search-pub-logo {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .52rem; font-weight: 700; color: var(--white); overflow: hidden;
}
.search-pub-logo img { width: 100%; height: 100%; object-fit: contain; }
.search-pub-name { font-size: .78rem; font-weight: 500; color: var(--mid); }

/* ── FILTER BUTTONS ── */
#search-filters {
  display: flex; gap: .35rem;
}
.sf-btn {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  padding: .28rem .75rem; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--mid); cursor: pointer; transition: all .15s;
}
.sf-btn:hover { border-color: var(--red); color: var(--red); }
.sf-btn.active { background: var(--red); border-color: var(--red); color: var(--white); }

/* ── RESULTS LIST ── */
.search-results-list {
  list-style: none; display: flex; flex-direction: column; gap: 1px;
  margin-bottom: 1rem;
}
.search-result-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .85rem .6rem;
  border-radius: 8px;
  transition: background .15s;
  cursor: pointer; text-decoration: none;
  position: relative;
}
.search-result-item:hover { background: var(--bg); }
/* highlight matched text */
.search-result-item mark {
  background: rgba(221,69,0,.15);
  color: var(--red); border-radius: 2px; padding: 0 1px;
}

/* result thumbnail */
.sr-thumb {
  width: 72px; height: 58px; border-radius: 7px;
  flex-shrink: 0; overflow: hidden; background: #ddd;
}
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* result body */
.sr-body { flex: 1; min-width: 0; }
.sr-meta {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem;
}
.sr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.sr-source { font-size: .63rem; font-weight: 600; color: var(--soft); }
.sr-time   { font-size: .6rem; color: var(--soft); }
.sr-title {
  font-family: var(--serif); font-size: .92rem; font-weight: 600;
  line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--red); margin-top: .25rem; display: block;
}

/* publisher result type */
.search-result-item.type-publisher .sr-thumb {
  border-radius: 50%; width: 46px; height: 46px; align-self: center;
  border: 2px solid var(--border);
}
.search-result-item.type-publisher .sr-title { font-family: var(--sans); font-size: .88rem; }

/* topic result type */
.search-result-item.type-topic .sr-thumb {
  width: 46px; height: 46px; border-radius: 8px; align-self: center;
  background: rgba(221,69,0,.08);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}

/* ── SEE ALL BUTTON ── */
.search-see-all-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .75rem;
  border-radius: 8px; border: 1.5px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--red);
  background: var(--bg); transition: all .15s;
}
.search-see-all-btn:hover { background: var(--red); color: var(--white); border-color: var(--red); }

/* ── EMPTY STATE ── */
.search-empty {
  text-align: center; padding: 1.5rem 1rem 1rem;
}
.search-empty-icon { font-size: 2.5rem; opacity: .3; display: block; margin-bottom: .8rem; }
.search-empty-title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); margin-bottom: .4rem;
}
.search-empty-sub {
  font-size: .82rem; color: var(--soft); margin-bottom: 1.2rem;
}

/* ── KEYBOARD NAV FOCUS ── */
.search-result-item.is-focused { background: var(--bg); }
.search-result-item.is-focused .sr-title { color: var(--red); }

/* ── DIVIDERS between result types ── */
.sr-type-divider {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soft);
  padding: .5rem .6rem .2rem; display: block;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #search-overlay { padding-top: 0; align-items: flex-end; }
  #search-panel { border-radius: 16px 16px 0 0; max-height: 90vh; }
  .search-topic-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .search-topic-grid { grid-template-columns: 1fr 1fr; }
  #search-close span { display: none; }
  #search-panel { max-height: 85vh; }
}