/**
 * AKSRT - Search Results Route Stylesheet
 *
 * 搜索结果页 (search.php) 专用样式：
 * 顶部 hero 卡片、Pill 形搜索框、清空按钮、提交按钮、
 * 工具栏、空状态、关键词高亮 mark。
 *
 * Tokens: 颜色 / 间距 / 圆角 / 阴影 全部来自 core/tokens.css
 */

/* ========== 搜索页大框 ========== */
.search-hero-form {
  max-width: 600px;
  margin: 0 auto 28px;
  position: relative;
}

.search-page-header {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-page));
}

.search-page-header__eyebrow {
  margin: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-page-header__summary {
  margin: 0;
  max-width: 720px;
  color: var(--color-ink-3);
}

.search-page-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
  margin: 0 0 16px;
}

.search-hero-form input[type="search"] {
  width: 100%;
  height: 52px;
  padding: 0 116px 0 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: 16px;
  background: var(--surface-2);
  color: var(--color-ink);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.search-hero-form input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(59, 130, 246, 0.16));
  background: var(--surface-page);
  outline: none;
}

.search-hero-form .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-4);
}

.search-hero-form .clear-search {
  position: absolute;
  right: 92px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--surface-3);
  cursor: pointer;
  color: var(--color-ink-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.search-hero-form .clear-search.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.search-hero-form .clear-search:hover {
  color: var(--color-ink);
  background: var(--color-line);
}

.search-page-form__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 74px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.search-page-form__submit:hover {
  background: var(--color-primary-active, var(--color-primary));
}

.search-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}

.search-page-filters {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.search-page-toolbar__count {
  color: var(--color-ink-3);
}

.search-page-toolbar__reset {
  color: var(--color-primary);
  font-weight: 600;
}

.search-page-filters {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.search-page-filters__group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.search-page-filters__label {
  min-width: 36px;
  padding-top: 6px;
  color: var(--color-ink-4);
  font-size: 13px;
  font-weight: 700;
}

.search-page-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-page-filters__chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--color-ink-3);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.search-page-filters__chip:hover,
.search-page-filters__chip.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft, rgba(59, 130, 246, 0.12));
}

/* ========== 分类筛选下拉 ========== */
.search-page-filters__select-wrap {
  position: relative;
}

.search-page-filters__select {
  appearance: none;
  min-height: 34px;
  padding: 0 32px 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--color-ink);
  font: 500 14px/1 var(--font-ui);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.search-page-filters__select-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-ink-3);
  pointer-events: none;
}

.search-page-filters__select:hover,
.search-page-filters__select:focus {
  border-color: var(--color-primary);
  outline: none;
}


.search-page-form__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.search-page-form__types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-page-form__type {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--color-ink-3);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.search-page-form__type:hover,
.search-page-form__type.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft, rgba(59, 130, 246, 0.12));
}

.search-page-form__category-wrap {
  position: relative;
}

.search-page-form__category {
  appearance: none;
  min-height: 36px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--color-ink);
  font: 500 14px/1 var(--font-ui);
  cursor: pointer;
}

.search-page-form__category-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-ink-3);
  pointer-events: none;
}

.search-page-form__category:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

/* ========== 空状态 ========== */
.search-page-empty {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding-top: 32px;
}

.search-page-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--color-ink-4);
}

.search-page-empty__icon svg {
  width: 36px;
  height: 36px;
}

.search-page-empty__text {
  margin: 0;
  color: var(--color-ink-4);
}

.search-page-empty__tips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
}

.search-page-empty__tips span,
.search-page-empty__chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--color-ink-3);
}

.search-page-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.search-page-empty__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .search-page-header {
    padding: 20px 16px;
  }

  .search-page-form {
    margin-bottom: 14px;
  }

  .search-hero-form input[type="search"] {
    height: 54px;
    padding-right: 100px;
  }

  .search-hero-form .clear-search {
    right: 76px;
    width: 36px;
    height: 36px;
  }

  .search-page-form__submit {
    min-width: 64px;
    height: 36px;
    padding: 0 14px;
  }

  .search-page-form__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .search-page-form__category-wrap {
    width: 100%;
  }

  .search-page-form__category {
    width: 100%;
  }

  .search-page-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-page-filters {
    padding: 14px;
  }

  .search-page-filters__group {
    flex-direction: column;
    gap: 8px;
  }

  .search-page-filters__label {
    min-width: 0;
    padding-top: 0;
  }
}