/* ==========================================================================
   Kosmik Theme for SearXNG — Leafy Server
   A mystical, deep-blue dark profile layered on top of leafy.css.
   Select it via Preferences -> Theme style -> "Kosmik" (reuses the
   built-in "black" style slot, so it needs no core SearXNG changes).
   Every rule below is scoped under html.theme-black so it is 100%
   additive: the default green "leafy" look is completely untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kosmik Color Variables (overrides leafy.css's variable set)
   -------------------------------------------------------------------------- */
:root.theme-black, html.theme-black {
  --color-base-background: #0a0d1f;
  --color-base-background-mobile: #0a0d1f;
  --color-base-font: #e4e9fc;
  --color-base-font-rgb: 228, 233, 252;

  --color-url-font: #60a5fa;
  --color-url-visited-font: #a5b4fc;

  --color-header-background: rgba(10, 13, 31, 0.9);
  --color-header-border: rgba(99, 102, 241, 0.18);
  --color-footer-background: transparent;
  --color-footer-border: rgba(99, 102, 241, 0.18);

  --color-sidebar-border: rgba(99, 102, 241, 0.18);
  --color-sidebar-font: #e4e9fc;
  --color-sidebar-background: rgba(99, 102, 241, 0.04);

  --color-backtotop-font: #38bdf8;
  --color-backtotop-border: rgba(99, 102, 241, 0.3);
  --color-backtotop-background: #11173a;

  --color-btn-background: #3b82f6;
  --color-btn-font: #ffffff;
  --color-show-btn-background: rgba(99, 102, 241, 0.14);
  --color-show-btn-font: #e4e9fc;

  --color-search-border: rgba(99, 102, 241, 0.3);
  --color-search-shadow: 0 4px 28px -2px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(99, 102, 241, 0.1);
  --color-search-background: rgba(30, 27, 75, 0.38);
  --color-search-font: #e4e9fc;
  --color-search-background-hover: #3b82f6;

  --color-error: #f87171;
  --color-error-background: #2b1212;
  --color-warning: #fbbf24;
  --color-warning-background: #2b2310;
  --color-success: #22d3ee;
  --color-success-background: #082f33;

  --color-categories-item-selected-font: #93c5fd;
  --color-categories-item-border-selected: #3b82f6;
  --color-categories-item-selected: rgba(59, 130, 246, 0.2);

  --color-autocomplete-font: #e4e9fc;
  --color-autocomplete-border: rgba(99, 102, 241, 0.25);
  --color-autocomplete-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  --color-autocomplete-background: #11173a;
  --color-autocomplete-background-hover: rgba(99, 102, 241, 0.14);

  --color-answer-font: #e4e9fc;
  --color-answer-background: rgba(99, 102, 241, 0.05);

  --color-result-background: rgba(99, 102, 241, 0.045);
  --color-result-border: rgba(99, 102, 241, 0.14);
  --color-result-url-font: #7dd3fc;
  --color-result-vim-selected: rgba(59, 130, 246, 0.14);
  --color-result-vim-arrow: #60a5fa;
  --color-result-description-highlight-font: #a5b4fc;
  --color-result-link-font: #93c5fd;
  --color-result-link-font-highlight: #bfdbfe;
  --color-result-link-visited-font: #c4b5fd;
  --color-result-publishdate-font: #8891c5;
  --color-result-engines-font: #7dd3fc;
  --color-result-search-url-border: rgba(99, 102, 241, 0.25);
  --color-result-search-url-font: #7dd3fc;
  --color-result-image-span-font: #e4e9fc;
  --color-result-image-span-font-selected: #ffffff;
  --color-result-image-background: #11173a;

  --color-settings-tr-hover: rgba(99, 102, 241, 0.08);
  --color-settings-engine-description-font: #8891c5;
  --color-toolkit-badge-background: rgba(59, 130, 246, 0.18);
  --color-toolkit-badge-font: #93c5fd;
  --color-toolkit-kbd-background: rgba(99, 102, 241, 0.12);
  --color-toolkit-kbd-font: #e4e9fc;
  --color-toolkit-dialog-background: #11173a;
  --color-toolkit-dialog-border: rgba(99, 102, 241, 0.25);
  --color-toolkit-select-background: #11173a;
  --color-toolkit-select-background-hover: #171f4d;
  --color-toolkit-select-border: rgba(99, 102, 241, 0.25);
}

/* --------------------------------------------------------------------------
   Starfield & Ambient Nebula Glow
   -------------------------------------------------------------------------- */
html.theme-black body {
  background-color: #0a0d1f !important;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(199, 210, 254, 0.8), transparent 60%),
    radial-gradient(1px 1px at 22% 68%, rgba(147, 197, 253, 0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 30%, rgba(196, 181, 253, 0.7), transparent 60%),
    radial-gradient(1px 1px at 55% 80%, rgba(199, 210, 254, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(147, 197, 253, 0.7), transparent 60%),
    radial-gradient(1px 1px at 82% 55%, rgba(196, 181, 253, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 85%, rgba(199, 210, 254, 0.5), transparent 60%),
    radial-gradient(1px 1px at 15% 90%, rgba(147, 197, 253, 0.5), transparent 60%) !important;
  background-attachment: fixed !important;
  background-size: 100% 100% !important;
}

html.theme-black .leafy-ambient-glow {
  height: 620px !important;
  background:
    radial-gradient(ellipse 65% 320px at 30% 0%, rgba(99, 102, 241, 0.26), transparent 70%),
    radial-gradient(ellipse 65% 320px at 70% 0%, rgba(56, 189, 248, 0.18), transparent 70%) !important;
  animation: kosmik-drift 14s ease-in-out infinite alternate !important;
}

@keyframes kosmik-drift {
  0%   { opacity: 0.85; }
  100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Top Navigation
   -------------------------------------------------------------------------- */
html.theme-black #links_on_top a:hover {
  color: #93c5fd !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
  background: rgba(99, 102, 241, 0.14) !important;
}

/* --------------------------------------------------------------------------
   Front Page Hero
   -------------------------------------------------------------------------- */
html.theme-black .leafy-logo-hero {
  filter: drop-shadow(0 8px 22px rgba(99, 102, 241, 0.5)) drop-shadow(0 0 14px rgba(56, 189, 248, 0.3)) !important;
}

html.theme-black .leafy-tagline {
  color: #93c5fd !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.35) !important;
}

html.theme-black .leafy-title {
  text-shadow: 0 0 22px rgba(99, 102, 241, 0.25) !important;
}

html.theme-black .leafy-badge {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
}

html.theme-black .leafy-subtitle {
  color: #a5adce !important;
}

/* --------------------------------------------------------------------------
   Search Box
   -------------------------------------------------------------------------- */
html.theme-black .search_box:focus-within {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28), 0 0 24px rgba(56, 189, 248, 0.25), 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

html.theme-black #q::placeholder {
  color: #7d87b0 !important;
}

html.theme-black #send_search {
  color: #60a5fa !important;
}

html.theme-black #send_search:hover {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #93c5fd !important;
}

html.theme-black #clear_search:hover {
  color: #f87171 !important;
}

html.theme-black #search_logo:hover {
  filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6)) !important;
}

html.theme-black .leafy-nav-brand {
  color: #93c5fd !important;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3) !important;
}

/* --------------------------------------------------------------------------
   Mobile focus ring (matches base search box focus above)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 50em) {
  html.theme-black #search_view:focus-within .search_box {
    border: 1px solid #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28) !important;
  }
}

/* --------------------------------------------------------------------------
   Category Buttons
   -------------------------------------------------------------------------- */
html.theme-black .category_button:hover,
html.theme-black .category_checkbox label:hover {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #93c5fd !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

html.theme-black .category_button.selected,
html.theme-black .category_checkbox input:checked + label {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(99, 102, 241, 0.55) !important;
}

/* --------------------------------------------------------------------------
   Result Cards
   -------------------------------------------------------------------------- */
html.theme-black .result {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4) !important;
}

html.theme-black .result:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 8px 28px rgba(56, 189, 248, 0.14) !important;
}

html.theme-black .result .highlight {
  background: rgba(59, 130, 246, 0.22) !important;
}

html.theme-black .result .engines span {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

html.theme-black .result .cache_link {
  color: #7d87b0 !important;
}

html.theme-black .result .cache_link:hover {
  color: #93c5fd !important;
}

/* --------------------------------------------------------------------------
   Autocomplete
   -------------------------------------------------------------------------- */
html.theme-black .autocomplete li:hover,
html.theme-black .autocomplete li.autocomplete_selected {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #93c5fd !important;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
html.theme-black #pagination form.next_page button {
  background: #3b82f6 !important;
  border: 1px solid #6366f1 !important;
  box-shadow: 0 2px 14px rgba(59, 130, 246, 0.3) !important;
}

html.theme-black #pagination form.next_page button:hover {
  background: #6366f1 !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.4) !important;
}

html.theme-black .numbered_pagination form.page_number input:hover {
  border-color: #60a5fa !important;
  color: #93c5fd !important;
}

html.theme-black .numbered_pagination form.page_number input.page_number_current {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
}

html.theme-black #pagination .loader {
  border: 3px solid rgba(99, 102, 241, 0.18) !important;
  border-top: 3px solid #60a5fa !important;
}

html.theme-black #urls hr {
  border-top: 1px dashed rgba(99, 102, 241, 0.3) !important;
}

/* --------------------------------------------------------------------------
   Preferences Page
   -------------------------------------------------------------------------- */
html.theme-black #main_preferences input[type="submit"] {
  background: #3b82f6 !important;
  border: 1px solid #6366f1 !important;
  box-shadow: 0 2px 14px rgba(59, 130, 246, 0.3) !important;
}

html.theme-black #main_preferences input[type="submit"]:hover {
  background: #6366f1 !important;
}

html.theme-black #main_preferences .preferences_back a:hover {
  border-color: #60a5fa !important;
  color: #93c5fd !important;
}

html.theme-black #main_preferences .enable-all-engines:hover {
  border-color: #60a5fa !important;
  color: #93c5fd !important;
}

html.theme-black #copy-hash {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
}

/* --------------------------------------------------------------------------
   Filters, Forms & Toggles
   -------------------------------------------------------------------------- */
html.theme-black .search_filters select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

html.theme-black input[type="checkbox"]:checked,
html.theme-black input.checkbox-onoff[type="checkbox"]:checked {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

html.theme-black button.btn-primary,
html.theme-black input[type="submit"].btn-primary,
html.theme-black .btn_action {
  background: #3b82f6 !important;
  border: 1px solid #6366f1 !important;
}

html.theme-black button.btn-primary:hover,
html.theme-black input[type="submit"].btn-primary:hover,
html.theme-black .btn_action:hover {
  background: #6366f1 !important;
}

/* --------------------------------------------------------------------------
   Sidebar & Media
   -------------------------------------------------------------------------- */
html.theme-black #sidebar {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}

html.theme-black .result-images:hover {
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 8px 26px rgba(56, 189, 248, 0.18) !important;
}

html.theme-black .result-images .image_resolution {
  background: rgba(10, 13, 31, 0.8) !important;
  color: #7dd3fc !important;
}

html.theme-black .result-videos:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
}

/* --------------------------------------------------------------------------
   Back to Top & Footer
   -------------------------------------------------------------------------- */
html.theme-black #backToTop {
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  color: #93c5fd !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

html.theme-black #backToTop:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

html.theme-black footer {
  color: #8891c5 !important;
}

html.theme-black footer a {
  color: #93c5fd !important;
}

html.theme-black footer a:hover {
  color: #bfdbfe !important;
}

/* --------------------------------------------------------------------------
   Scrollbar (webkit browsers)
   -------------------------------------------------------------------------- */
html.theme-black ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.theme-black ::-webkit-scrollbar-track {
  background: #0a0d1f;
}

html.theme-black ::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.35);
  border-radius: 8px;
}

html.theme-black ::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.55);
}