/**
 * SwissFans 2.0 — global-search-ui-v2.css (Reference redesign)
 * Loaded only when global_search_ui_v2 (+ ui_v2) is true.
 * UI only. Preserve #search_creator, .sb_items, overlay data-* hooks.
 * Overlay z-index stays 10050 (defined in layout.css).
 */

body.sf-global-search-v2 {
  --sf-v2-bg: #0e071a;
  --sf-v2-bg-mid: #150a24;
  --sf-v2-card: #181025;
  --sf-v2-card-soft: #1d142c;
  --sf-v2-card-3: #221733;
  --sf-v2-line: rgba(255, 255, 255, 0.08);
  --sf-v2-border: rgba(225, 34, 146, 0.2);
  --sf-v2-text: #ffffff;
  --sf-v2-muted: #c4b8d4;
  --sf-v2-pink: #e12292;
  --sf-v2-pink-hover: #f02aa6;
  --sf-v2-radius: 16px;
  --sf-v2-shadow: 0 10px 28px rgba(8, 2, 18, 0.45);
  color: var(--sf-v2-text);
  background-color: var(--sf-v2-bg);
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(225, 34, 146, 0.22), transparent 62%),
    linear-gradient(180deg, var(--sf-v2-bg-mid) 0%, var(--sf-v2-bg) 48%, #0b0614 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% auto;
  overflow-x: clip;
}

/* Legacy header search field */
body.sf-global-search-v2 .i_search #search_creator,
body.sf-global-search-v2 #search_creator.i_s_input {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--sf-v2-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--sf-v2-text);
  padding-inline: 1rem;
  box-sizing: border-box;
  max-width: 100%;
}

body.sf-global-search-v2 .i_search #search_creator:focus,
body.sf-global-search-v2 #search_creator:focus {
  outline: 2px solid rgba(225, 34, 146, 0.65);
  outline-offset: 2px;
}

/* Legacy dropdown results */
body.sf-global-search-v2 .i_general_box_search_container.generalBox {
  background: var(--sf-v2-card) !important;
  border: 1px solid var(--sf-v2-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sf-v2-shadow) !important;
  color: var(--sf-v2-text);
  overflow: hidden;
  max-width: min(420px, calc(100vw - 1.25rem));
  max-height: min(70vh, 420px) !important;
}

body.sf-global-search-v2 .i_box_messages_header {
  padding: 0.85rem 1rem 0.45rem;
  color: var(--sf-v2-muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.sf-global-search-v2 .sb_items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem 0.85rem;
}

body.sf-global-search-v2 .sb_items a,
body.sf-global-search-v2 .sb_items .i_message_wrapper,
body.sf-global-search-v2 .sb_items .search_result_item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--sf-v2-line);
  background: var(--sf-v2-card-soft);
  color: var(--sf-v2-text) !important;
  text-decoration: none;
  box-sizing: border-box;
}

body.sf-global-search-v2 .sb_items a:hover,
body.sf-global-search-v2 .sb_items .search_result_item:hover {
  border-color: var(--sf-v2-border);
  background: #221733;
}

/* Optional category wrappers if present in response HTML */
body.sf-global-search-v2 .sb_items .sf-search-group,
body.sf-global-search-v2 .search_group,
body.sf-global-search-v2 .search_section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

body.sf-global-search-v2 .sf-search-group__title,
body.sf-global-search-v2 .search_group_title,
body.sf-global-search-v2 .search_section_title {
  margin: 0.35rem 0.15rem;
  color: var(--sf-v2-pink);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* SF App search overlay — keep z-index 10050 from layout.css */
body.sf-global-search-v2 .sf-search-overlay,
body.sf-ui-consistency-v2 .sf-search-overlay,
body.sf-app-body .sf-search-overlay {
  z-index: 10050;
  padding: max(1rem, env(safe-area-inset-top)) 0.75rem max(1rem, env(safe-area-inset-bottom));
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Closed: never paint a full-screen blur layer (covers home/app content). */
body.sf-global-search-v2 .sf-search-overlay:not(.is-open) .sf-search-overlay__backdrop,
body.sf-ui-consistency-v2 .sf-search-overlay:not(.is-open) .sf-search-overlay__backdrop,
body.sf-app-body .sf-search-overlay:not(.is-open) .sf-search-overlay__backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.sf-global-search-v2 .sf-search-overlay.is-open .sf-search-overlay__backdrop,
body.sf-ui-consistency-v2 .sf-search-overlay.is-open .sf-search-overlay__backdrop,
body.sf-app-body .sf-search-overlay.is-open .sf-search-overlay__backdrop {
  background: rgba(8, 2, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.sf-global-search-v2 .sf-search-overlay__panel,
body.sf-ui-consistency-v2 .sf-search-overlay__panel,
body.sf-app-body .sf-search-overlay__panel {
  width: min(640px, 100%);
  max-height: min(86dvh, 720px);
  margin-top: 0.5rem;
  overflow: auto;
  background: #181025;
  border: 1px solid rgba(225, 34, 146, 0.2);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(8, 2, 18, 0.55);
}

body.sf-global-search-v2 .sf-search-overlay__input-wrap,
body.sf-ui-consistency-v2 .sf-search-overlay__input-wrap,
body.sf-app-body .sf-search-overlay__input-wrap {
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #1d142c;
}

body.sf-global-search-v2 .sf-search-overlay__input,
body.sf-ui-consistency-v2 .sf-search-overlay__input,
body.sf-app-body .sf-search-overlay__input {
  color: #fff;
  font-size: 1rem;
  min-height: 44px;
}

body.sf-global-search-v2 .sf-search-overlay__close,
body.sf-ui-consistency-v2 .sf-search-overlay__close,
body.sf-app-body .sf-search-overlay__close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #221733;
  color: #c4b8d4;
}

body.sf-global-search-v2 .sf-search-overlay__results,
body.sf-ui-consistency-v2 .sf-search-overlay__results,
body.sf-app-body .sf-search-overlay__results {
  padding: 0.75rem;
}

body.sf-global-search-v2 .sf-search-overlay__hint,
body.sf-ui-consistency-v2 .sf-search-overlay__hint,
body.sf-app-body .sf-search-overlay__hint {
  color: #c4b8d4;
  font-size: 0.82rem;
}

body.sf-global-search-v2 .sf-search-overlay__suggestions,
body.sf-ui-consistency-v2 .sf-search-overlay__suggestions,
body.sf-app-body .sf-search-overlay__suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

body.sf-global-search-v2 .sf-search-overlay__suggestion,
body.sf-ui-consistency-v2 .sf-search-overlay__suggestion,
body.sf-app-body .sf-search-overlay__suggestion,
body.sf-global-search-v2 .sf-search-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1d142c;
  color: #fff;
  cursor: pointer;
}

body.sf-global-search-v2 .sf-search-overlay__suggestion:hover,
body.sf-ui-consistency-v2 .sf-search-overlay__suggestion:hover,
body.sf-app-body .sf-search-overlay__suggestion:hover,
body.sf-global-search-v2 .sf-search-card:hover {
  border-color: rgba(225, 34, 146, 0.2);
  background: #221733;
}

body.sf-global-search-v2 .sf-search-group {
  margin-bottom: 0.85rem;
}

body.sf-global-search-v2 .sf-search-group__title {
  margin: 0 0 0.45rem;
  padding: 0 0.15rem;
  color: #e12292;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  body.sf-global-search-v2 .sf-search-overlay,
  body.sf-ui-consistency-v2 .sf-search-overlay,
  body.sf-app-body .sf-search-overlay {
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));
  }

  body.sf-global-search-v2 .sf-search-overlay__panel,
  body.sf-ui-consistency-v2 .sf-search-overlay__panel,
  body.sf-app-body .sf-search-overlay__panel {
    width: 100%;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-top: 0;
    border-radius: 16px;
  }

  body.sf-global-search-v2 .i_general_box_search_container.generalBox {
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sf-global-search-v2 *,
  body.sf-global-search-v2 *::before,
  body.sf-global-search-v2 *::after {
    transition: none !important;
    animation: none !important;
  }
}