/* ============================================================================
   PandaSale Search — storefront styles (autocomplete dropdown + results page).
   Brand tokens from pandasale.css (:root): --brand, --brand-dd, --brand-wash,
   --ink, --ink-soft, --muted, --line, --accent, --gold, --radius, --shadow-lg.
   Lime only for backgrounds/accents; text stays --ink/--brand-dd (contrast).
   Animations limited to transform/opacity; prefers-reduced-motion respected.
   ============================================================================ */

/* ---------- search form (header) ---------- */
.pss-searchform { position: relative; }
.pss-searchform .ps-search-clear {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: 46px; width: 30px; height: 30px; border: 0; background: transparent;
  color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 8px;
  transition: background .15s, color .15s;
}
.pss-searchform .ps-search-clear:hover { color: var(--ink); background: var(--bg-soft); }
.pss-searchform .ps-search-submit {
  /* выравнивается с базовой капсулой #search из pandasale.css */
}

/* ---------- autocomplete panel ---------- */
.ps-ac-overlay {
  position: fixed; inset: 0; background: rgba(29,29,27,.28);
  z-index: 1190; opacity: 0; transition: opacity .16s ease;
}
.ps-ac-overlay.is-open { opacity: 1; }

.ps-ac-panel {
  position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 70vh; overflow-y: auto;
  opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease;
}
.ps-ac-panel.is-open { opacity: 1; transform: translateY(0); }

#ps-ac-list { padding: 6px 0; }

.ps-ac-section { padding: 6px 0; border-top: 1px solid var(--line-soft); }
.ps-ac-section:first-child { border-top: 0; }
.ps-ac-section-h {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 8px 16px 4px;
}

.ps-ac-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  cursor: pointer; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent; transition: background .12s ease;
}
.ps-ac-item:hover, .ps-ac-item.is-active {
  background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand);
}
.ps-ac-item mark, #ps-ac-list mark { background: var(--brand-wash); color: inherit; font-weight: 700; padding: 0; }

.ps-ac-thumb {
  flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
  background: var(--bg-cream); border: 1px solid var(--line-soft);
}
.ps-ac-body { flex: 1 1 auto; min-width: 0; }
.ps-ac-name { font-size: 14px; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ac-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ps-ac-price { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.ps-ac-price .old { font-weight: 600; font-size: 12px; color: var(--muted); text-decoration: line-through; margin-left: 6px; }
.ps-ac-price.sale .now { color: var(--accent); }

.ps-ac-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ps-ac-dot.in { background: var(--brand); }
.ps-ac-dot.low { background: var(--gold); }
.ps-ac-dot.out { background: var(--muted); }

.ps-ac-stickers { display: inline-flex; gap: 4px; }
.ps-ac-sticker { font-size: 10px; font-weight: 800; color: #fff; border-radius: 5px; padding: 1px 5px; line-height: 1.5; }
.ps-ac-sticker.sale { background: var(--accent); }
.ps-ac-sticker.hit { background: var(--gold); }
.ps-ac-sticker.new { background: var(--brand-dd); }

.ps-ac-count { font-size: 12px; color: var(--muted); margin-left: auto; }
.ps-ac-ic { flex: none; width: 18px; height: 18px; color: var(--brand-dd); }
.ps-ac-arrow { margin-left: auto; color: var(--muted); width: 16px; height: 16px; flex: none; }

.ps-ac-footer { padding: 4px; border-top: 1px solid var(--line-soft); }
.ps-ac-footer a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 12px; background: var(--brand-wash);
  color: var(--brand-dd); font-weight: 700; text-decoration: none; transition: background .14s ease;
}
.ps-ac-footer a:hover { background: var(--brand); color: var(--ink); }

/* skeleton (delayed via JS) */
.ps-ac-skeleton { padding: 8px 16px; }
.ps-ac-skeleton .row { height: 48px; border-radius: 10px; background: linear-gradient(90deg, var(--line-soft), var(--bg-soft), var(--line-soft)); background-size: 200% 100%; animation: psAcShimmer 1.1s linear infinite; margin-bottom: 8px; }
@keyframes psAcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ps-ac-empty { padding: 22px 16px; text-align: center; color: var(--muted); }
.ps-ac-empty .ps-ic { width: 48px; height: 48px; color: var(--brand); margin-bottom: 8px; }

/* ---------- results page ---------- */
.pss-page .pss-title { margin: 6px 0 14px; }
.pss-skip { position: absolute; left: -9999px; }
.pss-skip:focus { position: static; display: inline-block; margin: 8px; padding: 8px 14px; background: var(--brand); color: var(--ink); border-radius: 10px; }

.pss-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pss-count { font-weight: 700; color: var(--ink); }

.pss-fix, .pss-ai, .pss-degraded {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--radius-sm); margin: 0 0 14px; font-size: 14px;
}
.pss-fix { background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); }
.pss-fix strong { color: var(--ink); }
.pss-fix-ic { color: var(--brand-dd); width: 16px; height: 16px; }
.pss-fix-link, .pss-ai-off { color: var(--brand-dd); font-weight: 700; text-decoration: underline; }
.pss-fix-link:hover, .pss-ai-off:hover { color: var(--brand); }

.pss-ai { background: var(--brand-wash); border: 1px solid var(--brand); color: var(--ink); }
.pss-ai-ic { color: var(--brand-dd); width: 18px; height: 18px; flex: none; }
.pss-ai-txt { flex: 1 1 auto; }
.pss-ai-off { margin-left: auto; }

.pss-degraded { background: var(--accent-wash); border: 1px solid var(--accent); color: var(--ink-soft); }

/* ---------- empty / start / zero ---------- */
.pss-empty { padding: 18px 0 40px; }
.pss-empty-hero { text-align: center; padding: 26px 0 18px; }
.pss-empty-mascot { display: inline-grid; place-items: center; color: var(--brand); margin-bottom: 8px; }
.pss-empty-title { margin: 0 0 6px; }
.pss-empty-lead { color: var(--muted); margin: 0; }
.pss-empty-block { margin: 22px 0; }
.pss-empty-h { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 0 0 12px; }

.pss-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pss-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-size: 13.5px; font-weight: 600; transition: background .14s, border-color .14s, transform .14s;
}
.pss-chip svg { color: var(--gold); }
.pss-chip:hover { background: var(--brand-wash); border-color: var(--brand); transform: translateY(-1px); }
.pss-chip-occ svg { color: var(--accent); }

.pss-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pss-tile {
  display: flex; align-items: center; padding: 16px; border-radius: var(--radius-sm);
  background: var(--bg-cream); border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; font-weight: 700; transition: box-shadow .16s, transform .16s, border-color .16s;
}
.pss-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--brand); }

.pss-empty-grid { margin-top: 6px; }
.pss-empty-act { text-align: center; margin-top: 26px; }

/* ---------- mobile bottom sheet for autocomplete ---------- */
@media (max-width: 640px) {
  .ps-ac-panel.is-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 82vh; border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(8px);
  }
  .ps-ac-panel.is-sheet.is-open { transform: translateY(0); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-ac-panel, .ps-ac-overlay, .pss-chip, .pss-tile, .ps-ac-item, .ps-ac-skeleton .row { transition: none !important; animation: none !important; }
}

/* Убрать нативные браузерные виджеты поля поиска (стрелка автозаполнения/крестик/иконки type=search) */
.pss-searchform input::-webkit-search-decoration,
.pss-searchform input::-webkit-search-cancel-button,
.pss-searchform input::-webkit-search-results-button,
.pss-searchform input::-webkit-search-results-decoration,
.pss-searchform input::-webkit-calendar-picker-indicator { -webkit-appearance: none; appearance: none; display: none; }
.pss-searchform input[name='search'] { -webkit-appearance: none; appearance: none; }

/* Крестик-очистка: перебиваем общий "header #search button" (он делал крестик зелёной
   кнопкой поверх лупы + display:grid игнорил [hidden] → торчала нижняя половина X как «˅»). */
header #search .ps-search-clear { right: 46px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: transparent; color: var(--muted); border-radius: 8px; }
header #search .ps-search-clear:hover { background: var(--bg-soft); color: var(--ink); }
header #search .ps-search-clear[hidden] { display: none; }