/* =========================================================
   CrabIsland · Custom Theme Overrides für SearXNG simple
   Wird NACH simple.min.css geladen und überschreibt gezielt.
   ========================================================= */

:root {
  --ci-accent: #e0612e;
  --ci-accent-hover: #f0703a;
  --ci-bg: #0a1622;
  --ci-bg-elev: #0f1e2d;
  --ci-bg-card: rgba(14, 26, 40, 0.92);
  --ci-border: rgba(255, 255, 255, 0.10);
  --ci-border-strong: rgba(255, 255, 255, 0.18);
  --ci-text: #e8eef5;
  --ci-text-dim: #9fb3c8;
  --ci-text-mute: #7a8fa3;
  --ci-link: #7fb3ff;
  --ci-link-visited: #b58bdc;
}

/* -----------------------------------------------------------
   GLOBAL: Background-Bild mit Overlay auf allen Seiten
   ----------------------------------------------------------- */
html {
  background: var(--ci-bg) !important;
  color: var(--ci-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body {
  background: transparent !important;
  color: var(--ci-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  position: relative;
  min-height: 100vh;
}

/* WICHTIG: alle SearXNG-Container transparent, damit der Background-Layer durchscheint */
#main_index,
#main_results,
#main_preferences,
#main_about,
#main_stats,
#main_search,
main,
#results,
#sidebar,
.container {
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/static/themes/simple/img/crabisland-bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(8, 18, 30, 0.78) 0%,
      rgba(8, 18, 30, 0.86) 50%,
      rgba(8, 18, 30, 0.92) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Auf der Startseite (Index) heller, damit Background sichtbarer ist */
body.index_endpoint::after,
body.page_index::after,
body.no-results::after {
  background: linear-gradient(180deg,
      rgba(8, 18, 30, 0.30) 0%,
      rgba(8, 18, 30, 0.50) 55%,
      rgba(8, 18, 30, 0.70) 100%);
}

/* -----------------------------------------------------------
   STARTSEITE: zentrales Logo (als Login-Link) + Suchfeld
   SearXNG simple nutzt #main_index als Container der Startseite
   ----------------------------------------------------------- */
#main_index {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 2vh !important;
  min-height: auto;
}

/* -----------------------------------------------------------
   LOGO auf der Startseite
   SearXNG rendert das Logo als CSS-Background auf einem <h1> im .title div,
   nicht als <img>. Wir setzen Größe und Verhältnis direkt am h1.
   ----------------------------------------------------------- */

/* Das .title-Element ist der Logo-Container */
#main_index .title,
.index .title {
  margin: 0 auto 34px auto !important;
  text-align: center;
  display: block !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Das h1 trägt das background-image (= unser Logo) */
#main_index .title h1,
.index .title h1,
.ci-login-logo h1,
.ci-login-logo .title h1 {
  width: min(520px, 84vw) !important;
  height: auto !important;
  aspect-ratio: 677 / 369 !important;
  max-width: 84vw !important;
  margin: 0 auto !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* Text "SearXNG" verstecken */
  text-indent: -9999px !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
}

/* Wrap-Link (durch JS um .title gelegt) */
a.ci-login-logo {
  display: block !important;
  width: min(520px, 84vw);
  margin: 0 auto 34px auto !important;
  text-decoration: none !important;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.55));
  transition: transform .18s ease, filter .18s ease;
  cursor: pointer;
}
a.ci-login-logo .title {
  margin: 0 !important;
}
a.ci-login-logo:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 12px 38px rgba(224, 97, 46, 0.45));
}

/* -----------------------------------------------------------
   SUCHFELD (Index + Results)
   ----------------------------------------------------------- */
#search,
#search_form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#q,
input#q {
  background: rgba(12, 24, 38, 0.72) !important;
  color: var(--ci-text) !important;
  border: 1px solid var(--ci-border-strong) !important;
  border-radius: 30px !important;
  padding: 14px 20px !important;
  font-size: 17px !important;
  outline: none !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  transition: border-color .18s ease, box-shadow .18s ease;
}
#q:focus,
input#q:focus {
  border-color: var(--ci-accent) !important;
  box-shadow: 0 6px 34px rgba(224, 97, 46, 0.28) !important;
}
#q::placeholder { color: var(--ci-text-mute) !important; }

/* Suchen-Button */
#send_search,
button#send_search,
button[type="submit"].search_submit {
  background: var(--ci-accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 24px !important;
  padding: 11px 22px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
#send_search:hover,
button#send_search:hover,
button[type="submit"].search_submit:hover {
  background: var(--ci-accent-hover) !important;
  transform: translateY(-1px);
}

/* -----------------------------------------------------------
   AUTOCOMPLETE-DROPDOWN (Suchvorschläge)
   Nur sichtbar wenn das <ul> Vorschläge enthält
   ----------------------------------------------------------- */
.search_box {
  position: relative !important;
}
.autocomplete,
#autocomplete {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 50 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.autocomplete ul,
#autocomplete ul {
  background: rgba(12, 24, 38, 0.95) !important;
  border: 1px solid var(--ci-border-strong) !important;
  border-radius: 16px !important;
  margin: 0 !important;
  padding: 6px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px);
  list-style: none !important;
  overflow: hidden;
}
/* Wenn das ul leer ist, gar nichts anzeigen */
.autocomplete ul:empty,
#autocomplete ul:empty {
  display: none !important;
}
#autocomplete li,
.autocomplete li {
  background: transparent !important;
  color: var(--ci-text) !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background .12s ease;
  border: none !important;
}
#autocomplete li:hover,
.autocomplete li:hover,
#autocomplete li.active,
.autocomplete li.active {
  background: rgba(224, 97, 46, 0.18) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------
   ERGEBNISSEITE
   ----------------------------------------------------------- */

/* WICHTIG: Topbar OHNE Background, OHNE Border, OHNE Backdrop-Filter.
   Die Elemente schweben direkt auf dem Insel-Hintergrund. */
#links_on_top,
#header_top,
header,
#main_results > #search,
#search.search_full_form,
.search_full_form {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Topbar-Layout: auf Startseite nur Einstellungen rechts.
   Auf allen anderen Seiten Schriftzug links, Einstellungen rechts. */
body.index_endpoint #links_on_top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 12px 22px !important;
  background: transparent !important;
  border: none !important;
}

body:not(.index_endpoint) #links_on_top {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  position: relative !important;
  z-index: 100 !important;
  flex-wrap: wrap;
  background: transparent !important;
  border: none !important;
}

/* Schriftzug oben links auf der Ergebnisseite – via Klasse aus Template-Override */
.ci-results-wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  /* schiebt alle anderen Top-Links nach rechts */
  margin-right: auto !important;
}
.ci-results-wordmark img {
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  transition: transform .15s ease, filter .15s ease;
}
.ci-results-wordmark:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 14px rgba(224, 97, 46, 0.4));
}

/* Treffer-Karten */
article.result,
.result {
  background: var(--ci-bg-card) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  color: var(--ci-text) !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
article.result:hover,
.result:hover {
  border-color: var(--ci-border-strong) !important;
}

.result h3, .result h3 a, .result a.url_header {
  color: var(--ci-link) !important;
  text-decoration: none !important;
}
.result h3 a:hover { text-decoration: underline !important; }
.result h3 a:visited { color: var(--ci-link-visited) !important; }
.result .url, .result .url_wrapper, .result cite {
  color: var(--ci-text-mute) !important;
  font-size: 12px !important;
}
.result p, .result .content {
  color: var(--ci-text-dim) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Engine-Tags */
.engines, .result .engines span {
  color: var(--ci-text-mute) !important;
}
.result .engines span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ci-border);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-right: 4px;
}

/* Allgemeine Links */
a { color: var(--ci-link); }
a:visited { color: var(--ci-link-visited); }

/* -----------------------------------------------------------
   SIDEBAR / FILTER auf Ergebnisseite
   ----------------------------------------------------------- */
#sidebar, aside, .sidebar {
  color: var(--ci-text);
}
#sidebar .sidebar-collapsable,
.sidebar > div,
aside > div {
  background: var(--ci-bg-card) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px;
}

/* -----------------------------------------------------------
   KATEGORIEN-TABS
   ----------------------------------------------------------- */
#categories, .search_categories, #categories_container {
  border-bottom: 1px solid var(--ci-border) !important;
}
#categories label, .category {
  color: var(--ci-text-dim) !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 16px !important;
  font-weight: 600;
  border-bottom: 2px solid transparent !important;
  transition: all .15s ease;
}
#categories label:hover, .category:hover {
  color: var(--ci-text) !important;
}
#categories input[type="radio"]:checked + label,
.category.selected, .category.active {
  color: var(--ci-accent) !important;
  border-bottom-color: var(--ci-accent) !important;
}

/* -----------------------------------------------------------
   PAGINIERUNG
   ----------------------------------------------------------- */
#pagination button, .pagination a, .pagination button {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--ci-border-strong) !important;
  color: var(--ci-text) !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  transition: all .15s ease;
}
#pagination button:hover, .pagination a:hover, .pagination button:hover {
  background: var(--ci-accent) !important;
  border-color: var(--ci-accent) !important;
}

/* -----------------------------------------------------------
   EINSTELLUNGSSEITE (/preferences)
   ----------------------------------------------------------- */
#main_preferences, .preferences_back {
  background: transparent !important;
}
.preferences_main, fieldset, .tab-content {
  background: var(--ci-bg-card) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: 12px !important;
  color: var(--ci-text) !important;
}
.preferences_main h3, fieldset legend {
  color: var(--ci-text) !important;
}
select, input[type="text"], input[type="search"], input[type="number"], input[type="url"], textarea {
  background: rgba(12, 24, 38, 0.6) !important;
  color: var(--ci-text) !important;
  border: 1px solid var(--ci-border-strong) !important;
  border-radius: 8px !important;
}
#main_preferences button,
#main_preferences .button,
#main_preferences input[type="submit"],
.preferences_main button,
.preferences_main .button,
.preferences_main input[type="submit"] {
  background: var(--ci-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 8px 18px !important;
  font-weight: 600;
  cursor: pointer;
}
#main_preferences button:hover,
#main_preferences .button:hover,
#main_preferences input[type="submit"]:hover,
.preferences_main button:hover,
.preferences_main .button:hover,
.preferences_main input[type="submit"]:hover {
  background: var(--ci-accent-hover) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ci-accent); }

table { background: transparent !important; color: var(--ci-text) !important; }
table th, table td { border-color: var(--ci-border) !important; }

/* -----------------------------------------------------------
   FOOTER
   ----------------------------------------------------------- */
footer {
  background: transparent !important;
  color: var(--ci-text-mute) !important;
  border-top: 1px solid var(--ci-border) !important;
}
footer a { color: var(--ci-text-dim); }

/* -----------------------------------------------------------
   "Einstellungen"-Button (dezent, oben rechts)
   ----------------------------------------------------------- */
.ci-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ci-text-dim) !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  transition: all .18s ease;
}
.ci-settings-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.ci-settings-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* -----------------------------------------------------------
   CLEAR-SEARCH-Button (das kleine X im Suchfeld)
   Klein, dezent, Google-Style. SVG nutzt stroke, nicht fill!
   ----------------------------------------------------------- */
#clear_search {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  margin: 0 4px 0 4px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s ease, color .15s ease;
  font-size: 0 !important;
  cursor: pointer;
}
#clear_search:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}
#clear_search svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
}
#clear_search svg path {
  stroke: currentColor !important;
  fill: none !important;
}
/* Den Text "leeren" verstecken (kommt vom show_if_nojs span) */
#clear_search .show_if_nojs,
#clear_search .hide_if_nojs {
  display: inline-flex !important;
  font-size: 0 !important;
}
#clear_search .hide_if_nojs svg {
  display: inline-block !important;
}