/* Motchill Search UI — uses tokens from motchill-tokens.css */
/* ── Scope: kill browser / Bootstrap bleed ── */
.motchill-search-form,
.motchill-search-modal,
.motchill-search-modal__box,
.motchill-header-modern .myui-header__search {
  color-scheme: dark;
  accent-color: var(--mtc-search-primary);
  -webkit-tap-highlight-color: rgba(var(--accent-hot-rgb), 0.18);
}

.motchill-search-form input,
.motchill-search-modal__input,
.motchill-header-modern .myui-header__search .search_wd,
.motchill-header-modern .myui-header__search .form-control {
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--mtc-search-border) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    var(--mtc-search-surface-2) !important;
  color: var(--mtc-search-text) !important;
  -webkit-text-fill-color: var(--mtc-search-text);
  caret-color: var(--mtc-search-primary-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition:
    border-color 0.2s var(--mtc-search-ease),
    box-shadow 0.2s var(--mtc-search-ease),
    background-color 0.2s var(--mtc-search-ease);
}

.motchill-search-form input::placeholder,
.motchill-search-modal__input::placeholder,
.motchill-header-modern .myui-header__search .search_wd::placeholder {
  color: var(--mtc-search-text-muted) !important;
  opacity: 1 !important;
}

.motchill-search-form input:focus,
.motchill-search-form input:focus-visible,
.motchill-search-modal__input:focus,
.motchill-search-modal__input:focus-visible,
.motchill-header-modern .myui-header__search .search_wd:focus,
.motchill-header-modern .myui-header__search .form-control:focus,
.motchill-header-modern .myui-header__search li.search-box .form-control:focus,
.motchill-header-modern .myui-header__search .motchill-search-form:focus-within .search_wd {
  outline: none !important;
  border-color: var(--mtc-search-primary) !important;
  box-shadow:
    0 0 0 3px var(--mtc-search-primary-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    var(--mtc-search-surface-2) !important;
}

.motchill-search-form input:-webkit-autofill,
.motchill-search-modal__input:-webkit-autofill,
.motchill-header-modern .myui-header__search .search_wd:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--mtc-search-surface-2) inset !important;
  -webkit-text-fill-color: var(--mtc-search-text) !important;
  border-color: var(--mtc-search-border) !important;
  transition: background-color 9999s ease-out 0s;
}

/* ── Search icons / actions ── */
.motchill-header-modern .myui-header__search .motchill-search-form .submit,
.motchill-header-modern .myui-header__search li.search-box .submit,
.motchill-search-modal__submit {
  color: var(--mtc-search-primary) !important;
}

.motchill-header-modern .myui-header__search .motchill-search-form .submit svg,
.motchill-header-modern .myui-header__search li.search-box .submit svg,
.motchill-search-modal__submit svg {
  color: var(--mtc-search-primary) !important;
  fill: currentColor;
}

.motchill-search-modal__close {
  border: 1px solid var(--mtc-search-border) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--mtc-search-text-muted) !important;
  transition:
    color 0.2s var(--mtc-search-ease),
    background-color 0.2s var(--mtc-search-ease),
    border-color 0.2s var(--mtc-search-ease);
}

.motchill-search-modal__close:hover,
.motchill-search-modal__close:focus-visible {
  color: var(--mtc-search-text) !important;
  border-color: var(--mtc-search-primary-border) !important;
  background: var(--mtc-search-primary-hover) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--mtc-search-primary-ring) !important;
}

/* ── Dropdown containers (header + modal) ── */
.motchill-header-modern .myui-header__search li.search-box .dropdown-box,
.motchill-search-modal__box .motchill-search-modal__dropdown,
.motchill-search-modal__box .search-dropdown-hot {
  background: var(--mtc-search-dropdown) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--mtc-search-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.65) !important;
  padding: 10px !important;
}

/* ── Suggestions list ── */
.motchill-search-suggestions {
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.35) transparent;
}

.motchill-search-suggestions::-webkit-scrollbar {
  width: 4px;
}

.motchill-search-suggestions::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.35);
  border-radius: 999px;
}

.motchill-search-suggestions::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.55);
}

.motchill-search-group__title {
  color: var(--mtc-search-primary-text) !important;
  letter-spacing: 0.04em;
}

.motchill-search-suggestion {
  border: 1px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mtc-search-text) !important;
  transition:
    background-color 0.18s var(--mtc-search-ease),
    border-color 0.18s var(--mtc-search-ease),
    color 0.18s var(--mtc-search-ease);
}

.motchill-search-suggestion:hover {
  background: var(--mtc-search-primary-hover) !important;
  border-color: transparent !important;
  border-left-color: var(--mtc-search-primary) !important;
  color: #fff !important;
}

.motchill-search-suggestion:active,
.motchill-search-suggestion:focus-visible,
.motchill-search-suggestion.is-active {
  background: var(--mtc-search-primary-active) !important;
  border-left-color: var(--mtc-search-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.motchill-search-suggestion__rank {
  background: rgba(245, 158, 11, 0.72) !important;
  color: #14100c !important;
}

.motchill-search-suggestion__rank--top1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #14100c !important;
}

.motchill-search-suggestion__rank--top2 {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af) !important;
  color: #14100c !important;
}

.motchill-search-suggestion__rank--top3 {
  background: linear-gradient(135deg, #fdba74, #ea580c) !important;
  color: #14100c !important;
}

.motchill-search-suggestion--keyword {
  align-items: center;
}

.motchill-search-results[hidden],
.motchill-search-trending[hidden] {
  display: none !important;
}

.motchill-search-suggestion__avatar {
  border-color: var(--mtc-search-primary-border) !important;
  background: var(--mtc-search-primary-soft) !important;
  color: var(--mtc-search-primary-text) !important;
}

.motchill-search-suggestion__body strong {
  color: var(--mtc-search-text) !important;
  font-weight: 600 !important;
}

.motchill-search-suggestion__body small,
.motchill-search-suggestion__body em,
.motchill-search-empty,
.motchill-search-loading {
  color: var(--mtc-search-text-muted) !important;
}

.motchill-search-empty b,
.motchill-search-summary strong {
  color: var(--mtc-search-primary-text) !important;
}

.motchill-search-view-all {
  border: 1px solid var(--mtc-search-primary-border) !important;
  border-radius: 10px !important;
  background: var(--mtc-search-primary-soft) !important;
  color: var(--mtc-search-text) !important;
  font-weight: 600 !important;
  transition:
    background-color 0.18s var(--mtc-search-ease),
    border-color 0.18s var(--mtc-search-ease),
    transform 0.18s var(--mtc-search-ease);
}

.motchill-search-view-all:hover,
.motchill-search-view-all:focus-visible {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.48) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--mtc-search-primary-ring) !important;
}

/* ── Overlays ── */
.motchill-search-backdrop.is-active,
.motchill-search-modal__backdrop {
  background: rgba(5, 8, 13, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.motchill-search-summary {
  border-bottom-color: var(--mtc-search-border) !important;
  color: var(--mtc-search-text-muted) !important;
}