/* MSearXNG – persönliche UI-Anpassungen
 * Basis: SearXNG 2026.9.15-94218a3ac
 */

:root {
  --color-search-background: #fff;
  --color-search-font: #222;
  --color-search-background-hover: #890114;

  --color-btn-background: #890114;
  --color-btn-font: #fff;

  --color-categories-item-selected-font: #890114;
  --color-categories-item-border-selected: #890114;

  --color-settings-tr-hover: #890114;
  --color-toolkit-select-background-hover: #890114;

  --color-favicon-background-color: #ffffff00;
  --color-favicon-border-color: #ffffff00;
}


/* =========================================================
   DARK MODE
   ========================================================= */

:root.theme-dark {
  --color-search-background: #2b2e36;
  --color-search-font: #fff;
  --color-search-background-hover: #890114;

  --color-btn-background: #890114;
  --color-btn-font: #fff;

  --color-categories-item-selected-font: #890114;
  --color-categories-item-border-selected: #890114;

  --color-settings-tr-hover: #890114;
  --color-toolkit-select-background-hover: #890114;

  --color-favicon-background-color: #ffffff00;
  --color-favicon-border-color: #ffffff00;
}


/* =========================================================
   SCHWARZES THEME
   ========================================================= */

:root.theme-black {
  --color-search-background: #2b2e36;
  --color-search-font: #fff;
  --color-search-background-hover: #890114;

  --color-btn-background: #890114;
  --color-btn-font: #fff;

  --color-categories-item-selected-font: #890114;
  --color-categories-item-border-selected: #890114;

  --color-settings-tr-hover: #890114;
  --color-toolkit-select-background-hover: #890114;

  --color-favicon-background-color: #ffffff00;
  --color-favicon-border-color: #ffffff00;
}


/* =========================================================
   AUTO DARK MODE
   ========================================================= */

@media (prefers-color-scheme: dark) {

  :root.theme-auto {
    --color-search-background: #2b2e36;
    --color-search-font: #fff;
    --color-search-background-hover: #890114;

    --color-btn-background: #890114;
    --color-btn-font: #fff;

    --color-categories-item-selected-font: #890114;
    --color-categories-item-border-selected: #890114;

    --color-settings-tr-hover: #890114;
    --color-toolkit-select-background-hover: #890114;

    --color-favicon-background-color: #ffffff00;
    --color-favicon-border-color: #ffffff00;
  }
}


/* =========================================================
   Suchfeld
   ========================================================= */

#q {
  color: var(--color-search-font) !important;
}


/* =========================================================
   Kategorien – Hover ROT
   ========================================================= */

#categories_container .category_checkbox label:hover,
#categories_container button.category_button:hover {
  color: #890114 !important;
}

#categories_container .category_checkbox label:hover svg,
#categories_container button.category_button:hover svg {
  color: #890114 !important;
}


/* =========================================================
   Ausgewählte Kategorie ROT
   ========================================================= */

#categories_container .category_checkbox input[type="checkbox"]:checked + label,
#categories_container button.category_button.selected,
#categories_container button.category_button:active {
  color: #890114 !important;
}


/* =========================================================
   Settings / Tabellen-Hover
   ========================================================= */

tr:hover {
  background: var(--color-settings-tr-hover) !important;
}


/* =========================================================
   Toolkit / Select
   ========================================================= */

select:hover,
select:focus {
  background-color: var(--color-toolkit-select-background-hover) !important;
}


/* =========================================================
   MSearXNG Logo neben Suchleiste
   Suchleiste ist effektiv ca. 46 px hoch.
   Logo daher exakt 46 × 46 px.
   auf dem Handy kleiner 32 x 32 px.
   ========================================================= */

#search_logo {
  padding: 0;
}

#search_logo svg {
  width: 46px;
  height: 46px;
  flex: none;
  margin: 0;
  transform: translate(-6px, 3px);
}

@media screen and (max-width: 50em) {
  #search_logo svg {
    width: 32px;
    height: 32px;
    transform: translate(1px, 2px);
  }
}


/* =========================================================
   Sehr kleine Displays:
   SearXNG blendet das Logo dort ohnehin aus.
   ========================================================= */

@media screen and (max-width: 20rem) {
  #search_logo {
    display: none;
  }
}


/* =========================================================
   Such-Lupe beim Hover:
   rot, aber transparenter Hintergrund
   (Hell + Dark + Auto-Dark)
   ========================================================= */

#send_search:hover {
  background-color: transparent !important;
  color: #890114 !important;
}

#send_search:hover svg {
  color: #890114 !important;
}


/* =========================================================
   Größe der Favicons 1.1 x 1.1 rem
   auf dem Handy kleiner 0.8 x 0.8 rem
   ========================================================= */


/* Result favicons: legacy size */
.favicon img {
  width: 1.1rem;
  height: 1.1rem;
}

/* Result favicons: smaller on mobile */
@media screen and (max-width: 50em) {
  .favicon img {
    width: 0.8rem;
    height: 0.8rem;
  }
}