/* ===== MCPRM Search styles (popup live + results page) ===== */
/* File: /search/search.css */

/* ---------- Design tokens ---------- */
:root{
  --sp-bg: #0b0f16;
  --sp-card: rgba(13,16,23,.86);
  --sp-border: #ffffff22;
  --sp-text: #fff;
  --sp-muted: #cbd5e1;
  --sp-accent: #ff2b5d;      /* brand color */
  --sp-radius: 14px;
  --sp-shadow: 0 12px 36px rgba(0,0,0,.45);
}

/* ========== POPUP (overlay) ========== */
.search__popup{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,43,93,.12), transparent 60%),
    rgba(10,13,18,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: auto;
}
.search__popup .container{ max-width: 980px; margin: 0 auto; }
.search__wrapper{ padding: 32px 0 40px; }
.search__top{ margin-bottom: 16px; }

/* close button */
.search__close .search__close-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--sp-border); background: transparent; color: var(--sp-text);
  cursor: pointer;
}
.search__close .search__close-btn:hover{ border-color:#ffffff44; }

/* ---------- PANEL (holds input + results; keeps everything inside) ---------- */
.search__panel{
  position: relative;
  max-width: 920px;
  margin: 28px auto 0;
  padding: 18px;
  background: rgba(11,15,21,.96);
  border: 1px solid var(--sp-border);
  border-radius: 20px;
  box-shadow: var(--sp-shadow);
  overflow: hidden;           /* ничего не выходит за панель */
}

/* ---------- Form & input ---------- */
.search__form{ position: relative; color: var(--sp-text); }
.search__input{ position: relative; }

.search__input input{
  height: 56px; width: 100%;
  border-radius: 16px;
  border: 1px solid var(--sp-border);
  background: rgba(16,20,27,.85);
  color: var(--sp-text);
  padding: 0 52px 0 16px;
  outline: none;
}
.search__input input::placeholder{ color:#94a3b8; }
.search__input input:focus{
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 4px rgba(255,43,93,.18);
}

.search__input .search-submit{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 12px; border:0;
  background: var(--sp-accent); color:#fff; cursor:pointer;
}
.search__input .search-submit:hover{ filter: brightness(1.05); }
.search__input .search-submit:active{ transform: translateY(-50%) scale(.98); }

/* loader spinner */
.search__loader{
  position:absolute; right:66px; top:22px; width:16px; height:16px;
  border-radius:50%;
  border:2px solid #fff; border-top-color: transparent;
  animation: sp-spin .8s linear infinite;
}
@keyframes sp-spin{ to{ transform: rotate(360deg); } }

/* ---------- LIVE results list (inside panel) ---------- */
.search__live{
  margin-top: 14px;
  max-height: clamp(220px, calc(100dvh - 300px), 60vh); /* ограничение высоты внутри панели */
  overflow: auto;
  scrollbar-width: thin;
  display: grid; gap: 10px;
}

/* item */
.search__item{
  display:block;
  padding:12px 14px;
  border-radius: 14px;
  background: rgba(16,20,27,.70);
  border:1px solid var(--sp-border);
  text-decoration:none; color: var(--sp-text);
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.search__item:hover{ background: rgba(22,27,36,.92); border-color: #ff2b5d66; transform: translateY(-1px); }
.search__item[aria-selected="true"]{ outline: 2px solid #ff2b5d99; outline-offset: 2px; }

.search__item-title{ font-weight:700; margin-bottom:4px; }
.search__item-snippet{ font-size:14px; color: var(--sp-muted); line-height:1.6; }
.search__item-snippet mark{
  background: rgba(255,43,93,.22);
  color: var(--sp-text);
  border-radius:4px; padding:0 2px;
}

/* empty state */
.search__nores{
  padding: 12px 14px; border:1px dashed var(--sp-border);
  border-radius:14px; color: var(--sp-muted);
  background: rgba(16,20,27,.6);
}

/* footer inside panel */
.search__footer{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:10px; }
.search__hint{ color:#94a3b8; font-size:12px; }
.search__more{
  color:#fff; text-decoration:none; padding:8px 12px; border-radius:12px;
  border:1px solid var(--sp-border);
}
.search__more:hover{ border-color:#ff2b5d66; }

/* Не даём глобальным стилям испортить подсветку в попапе */
.search__popup mark{ background: rgba(255,43,93,.22); color:#fff; border-radius:4px; padding:0 2px; }

/* ========== RESULTS PAGE (full page) ========== */
.search-page{ color: var(--sp-text); padding: 32px 0 60px; }
.search-page h1{ font-size:28px; line-height:1.2; margin:0 0 18px; }

.search-page__form{ display:flex; gap:10px; margin-bottom:18px; }
.search-page__form input[type="text"]{
  flex:1 1 auto; height:48px; padding:0 14px;
  border:1px solid var(--sp-border); border-radius: var(--sp-radius);
  background: rgba(12,15,20,.85); color: var(--sp-text);
  outline:none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.search-page__form input::placeholder{ color:#94a3b8; }
.search-page__form input:focus{
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px rgba(255,43,93,.18);
}
.search-page__form button{
  height:48px; padding:0 16px; border:0; border-radius: var(--sp-radius);
  background: var(--sp-accent); color:#fff; font-weight:600; cursor:pointer;
}
.search-page__form button:hover{ filter: brightness(1.05); }
.search-page__form button:active{ transform: translateY(1px); }

.search-page__results{ display:grid; gap:12px; }
.search-card{
  border:1px solid var(--sp-border);
  background: var(--sp-card);
  border-radius: var(--sp-radius);
  padding: 14px 16px;
  box-shadow: var(--sp-shadow);
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.search-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,43,93,.35);
}
.search-card__title{
  display:inline-block; font-size:18px; font-weight:700;
  margin-bottom:6px; color: var(--sp-text); text-decoration:none;
}
.search-card__title:hover{ color: var(--sp-accent); }

.search-card__snippet{
  font-size:14px; line-height:1.6; color: var(--sp-muted);
  overflow: hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
.search-card__snippet mark{
  background: rgba(255,43,93,.20); color: var(--sp-text);
  padding:0 2px; border-radius:4px;
}

/* ========== Adaptive ========== */
@media (max-width: 640px){
  .search__wrapper{ padding: 22px 0 30px; }
  .search__panel{ margin-top: 14px; padding: 14px; border-radius:16px; }
  .search__input input{ height:52px; }
  .search__input .search-submit{ width:42px; height:42px; }
  .search__live{ max-height: clamp(200px, calc(100dvh - 260px), 56vh); }
  .search-page{ padding:22px 0 40px; }
  .search-page h1{ font-size:22px; }
  .search-page__form{ gap:8px; }
  .search-page__form input[type="text"], .search-page__form button{ height:44px; }
  .search-card{ padding:12px; }
  .search-card__title{ font-size:16px; }
}

/* Optional: smooth scrollbars (WebKit) */
.search__live::-webkit-scrollbar{ width: 8px; }
.search__live::-webkit-scrollbar-thumb{ background:#222a; border-radius:8px; }
.search__live::-webkit-scrollbar-thumb:hover{ background:#333b; }