/* ==================== CARLENGINE THEME FOR 4GET ==================== */
/* Single color: #00ff00 — matrix green on pure black                  */

/* ---------- 4get theme variable overrides ---------- */
:root {
  --1d2021: #000000;
  --282828: #000000;
  --3c3836: #0a0a0a;
  --504945: #00ff00;
  --928374: #00ff00;
  --a89984: #00ff00;
  --bdae93: #00ff00;
  --8ec07c: #00ff00;
  --ebdbb2: #00ff00;
  --comment: #00ff00;
  --default: #00ff00;
  --keyword: #00ff00;
  --string:  #00ff00;
  --green:   #00ff00;
  --yellow:  #00ff00;
  --red:     #00ff00;
}

/* ==================== GLOBAL RESET ==================== */
/* IMPORTANT: we DON'T put `max-width:100% !important` on the universal */
/* selector — that was overriding every fixed max-width (800/900/etc.)  */
/* in this file (they lacked !important) and stretching the whole page. */
/* Overflow is contained by body overflow-x + the media rule below.     */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
  color: #00ff00 !important;
  font-family: sans-serif;
}

*:not(#popup-num):not(#popup-title) { color: #00ff00 !important; }

/* Media overflow guard (replaces the blanket universal rule).          */
/* NOT the popup image (4get's JS controls its size).                   */
img:not(#popup-image),
video,
svg,
canvas,
iframe,
table,
pre {
  max-width: 100% !important;
  height: auto;
}
img:not(#popup-image),
video, svg, canvas, iframe { height: auto !important; }

a, a:visited, a:hover, a:active {
  color: #00ff00 !important;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
b, strong { color: #00ff00 !important; }

::selection { background: #00ff00; color: #000000; }
::-moz-selection { background: #00ff00; color: #000000; }

/* ==================== SELECT / DROPDOWN STYLING ==================== */
select,
select:focus,
select:hover {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #00ff00 !important;
  -webkit-text-fill-color: #00ff00 !important;
  border-color: #00ff00 !important;
}

option,
select option {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #00ff00 !important;
  -webkit-text-fill-color: #00ff00 !important;
}

option:checked,
option[selected],
select option:checked,
select option[selected],
select option:hover,
select option:focus {
  background: #001a00 !important;
  background-color: #001a00 !important;
  color: #00ff00 !important;
  -webkit-text-fill-color: #00ff00 !important;
  box-shadow: 0 0 10px #00ff00 inset !important;
}

select option:checked {
  background: linear-gradient(#001a00, #001a00) !important;
}

/* ==================== HIDE GOOGLE + GOOGLE API SCRAPERS ==================== */
.select [data-value="google"]:not([data-value*="cse"]),
.select [data-value="google_api"],
.select [data-id="google"]:not([data-id*="cse"]),
.select [data-id="google_api"],
.select [value="google"]:not([value*="cse"]),
.select [value="google_api"],
a[href*="scraper=google&"]:not([href*="googlecse"]),
a[href*="scraper=google_api"],
option[value="google"]:not([value*="cse"]),
option[value="google_api"] {
  display: none !important;
}

/* ==================== HOME PAGE ==================== */
body.home {
  background: url('/static/carlenginebackground.png') center/cover fixed no-repeat !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.home #center {
  width: 100% !important;
  max-width: 700px !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  text-align: center;
  position: static !important;
  top: auto !important;
  transform: none !important;
}

body.home .logo {
  width: 100% !important;
  max-width: 600px !important;
  height: auto !important;
  margin: 0 auto 40px !important;
  background: transparent !important;
  line-height: normal !important;
}
body.home .logo a { display: block; text-decoration: none; }
body.home .logo img {
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  background: transparent !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 12px rgba(0, 255, 0, 0.5));
}

/* ==================== SEARCH BOX (shared base) ==================== */
.searchbox {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: visible !important;
  padding-left: 0 !important;
}

.searchbox .wrapper {
  flex: 1;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #00ff00;
  border-radius: 50px;
  display: flex !important;
  align-items: center;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
  overflow: visible !important;
  order: 1 !important;
  float: none !important;
}
.searchbox:focus-within .wrapper {
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.6);
}

.searchbox input[type=text] {
  all: unset !important;
  width: 100% !important;
  color: #00ff00 !important;
  background: transparent !important;
  font-family: sans-serif !important;
  padding: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.searchbox input[type=text]::placeholder {
  color: #00ff00 !important;
  opacity: 0.6 !important;
  text-align: left !important;
}

.searchbox input[type=submit] {
  all: unset !important;
  order: 2 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 2px solid #00ff00 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3) !important;
  font-size: 0 !important;
  flex-shrink: 0 !important;
  transition: box-shadow 0.15s !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.searchbox input[type=submit]:hover {
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.6) !important;
}

body.home .searchbox {
  max-width: 750px !important;
  gap: 12px;
}
body.home .searchbox .wrapper {
  border-width: 3px;
  height: 56px;
  padding: 0 25px;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.4);
}
body.home .searchbox:focus-within .wrapper {
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.7);
}
body.home .searchbox input[type=text] {
  height: 56px !important;
  line-height: 56px !important;
  font-size: 18px !important;
}
body.home .searchbox input[type=submit] {
  width: 56px !important;
  height: 56px !important;
  border-width: 3px !important;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.4) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300ff00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
  background-size: 24px 24px !important;
}
body.home .searchbox input[type=submit]:hover {
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.7) !important;
}

body:not(.home) .searchbox {
  flex: 1 !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 10px;
}
body:not(.home) .searchbox .wrapper {
  height: 44px;
  padding: 0 20px;
}
body:not(.home) .searchbox input[type=text] {
  height: 44px !important;
  line-height: 44px !important;
  font-size: 15px !important;
}
body:not(.home) .searchbox input[type=submit] {
  width: 44px !important;
  height: 44px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300ff00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
  background-size: 20px 20px !important;
}

/* ==================== RESULTS PAGE ==================== */
body:not(.home) {
  padding: 30px 20px 60px !important;
  margin: 0 auto !important;
}

body:not(.home) .navigation { display: none !important; }

.results-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
}

.results-logo {
  flex-shrink: 0;
  text-decoration: none !important;
  display: block;
}
.results-logo img {
  width: 64px !important;
  height: 64px !important;
  display: block;
  filter: none !important;
  transition: transform 0.15s;
}
.results-logo:hover img { transform: scale(1.05); }

.tabs {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid #003300;
  display: flex;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  white-space: nowrap;
}
.tabs .tab {
  color: #00ff00 !important;
  text-decoration: none !important;
  padding: 8px 18px !important;
  display: inline-block;
  border-radius: 6px 6px 0 0;
  transition: background 0.15s;
  font-size: 14px;
}
.tabs .tab:hover { background: rgba(0, 255, 0, 0.1) !important; }
.tabs .tab.selected {
  border-bottom: 2px solid #00ff00 !important;
  background: rgba(0, 255, 0, 0.15) !important;
  font-weight: bold;
}

.filters {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.filters .filter {
  display: inline-block;
  vertical-align: bottom;
  flex: 0 0 auto;
}
.filters .filter .title {
  font-size: 12px !important;
  color: #00ff00 !important;
  opacity: 0.8;
  margin: 0 0 4px !important;
  display: block;
  text-align: center;
}
.filters .filter input,
.filters .filter select {
  all: unset !important;
  display: block !important;
  border: 1px solid #00ff00 !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #00ff00 !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  width: 120px !important;
  height: 28px !important;
  cursor: pointer;
  box-sizing: border-box !important;
  text-align: center;
}
.filters .filter input:focus,
.filters .filter select:focus {
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.5) !important;
}
.filters .filter select option {
  background: #000000 !important;
  color: #00ff00 !important;
}

.timetaken {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 16px;
  font-size: 13px;
  color: #00ff00 !important;
  font-weight: normal !important;
  text-align: center;
  opacity: 0.8;
}

/* ==================== RESULTS LAYOUT + WIDGET ORDER ==================== */
/* #overflow.web has two children, in SOURCE order:                      */
/*   1. .right-wrapper  -> .right-right + .right-left  (sidebar widgets)  */
/*   2. .left           -> web text results, related, next page          */
/*                                                                        */
/* 4get builds the widgets (infobox / images / videos / news) as          */
/* .answer-wrapper blocks and DEALS them alternately into .right-right    */
/* and .right-left, so source order alone can't give a clean stack.       */
/* Fix: flex-column the whole thing, dissolve the two sidebar columns     */
/* with display:contents so every widget becomes a direct child of        */
/* .right-wrapper, then force the order explicitly:                       */
/*       infobox  ->  images  ->  videos / news  ->  text results         */

.web {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.web .right-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  order: 1 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.web .left {
  width: 100% !important;
  max-width: 900px !important;
  order: 2 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Dissolve the two sidebar columns -> their widgets become orderable
   direct children of .right-wrapper */
.web .right-right,
.web .right-left {
  display: contents !important;
}

/* Hide 4get's collapse (spoiler) controls — content is always shown */
.web .answer-wrapper > input.spoiler,
.web .answer-wrapper > .spoiler-button,
.web .answer-wrapper input[type=checkbox] {
  display: none !important;
}

/* Each widget = one centered block */
.web .answer-wrapper {
  width: 100% !important;
  max-width: 880px !important;
  margin: 0 0 22px !important;
  order: 1;                 /* generic answers (calculators, etc.) up top */
  box-sizing: border-box !important;
}
.web .answer-wrapper:has(.images)      { order: 2; }   /* image strip      */
.web .answer-wrapper:has(.text-result) { order: 3; }   /* videos / news    */

/* Widget headings (Images / Videos / News + infobox <h1>) */
.web .answer-title {
  text-align: center !important;
  margin: 0 0 12px !important;
  display: block !important;
}
.web .answer-title a { text-decoration: none !important; }
.web .answer-title h1,
.web .answer-title h2 {
  color: #00ff00 !important;
  margin: 0 !important;
  line-height: 1.2;
}
.web .answer-title h2 { font-size: 18px !important; }
.web .answer-title h1 { font-size: 26px !important; }

/* ==================== WIKIPEDIA INFOBOX / ANSWER CARD ==================== */
/* (the ".answer-wrapper" that contains ".wiki-head" — the Hamburg box)   */
.web .answer-wrapper:has(.wiki-head) {
  max-width: 720px !important;
  order: 1 !important;
  margin: 0 0 24px !important;
  padding: 22px 26px !important;
  border: 2px solid #00ff00 !important;
  border-radius: 12px !important;
  background: rgba(0, 20, 0, 0.3) !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.25) !important;
}
.web .answer-wrapper:has(.wiki-head) .wiki-head { text-align: center; }
.web .answer-wrapper:has(.wiki-head) .answer { width: 100%; }

/* Title + URL link centered */
.web .answer-wrapper:has(.wiki-head) .answer-title { margin-bottom: 6px !important; }
.web .answer-wrapper:has(.wiki-head) .url {
  text-align: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
}

/* Thumbnail (a.photo > img.openimg) — centered, capped */
.web .answer-wrapper:has(.wiki-head) .description .photo {
  display: block !important;
  float: none !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
}
.web .answer-wrapper:has(.wiki-head) .description img {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 240px !important;
  max-height: 220px !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 2px solid #00ff00 !important;
  border-radius: 6px !important;
  background: #000 !important;
}

/* Description paragraph — left aligned for readability inside the card */
.web .answer-wrapper:has(.wiki-head) .description {
  color: #00ff00 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  opacity: 0.9;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.web .answer-wrapper:has(.wiki-head) .description i { opacity: 0.85; }

/* Infobox key/value table — centered block, left-aligned rows */
.web .answer-wrapper:has(.wiki-head) table {
  margin: 16px auto 0 !important;
  border-collapse: collapse !important;
  max-width: 100% !important;
  text-align: left !important;
}
.web .answer-wrapper:has(.wiki-head) td,
.web .answer-wrapper:has(.wiki-head) th {
  padding: 3px 14px 3px 0 !important;
  vertical-align: top !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  word-break: break-word;
}
.web .answer-wrapper:has(.wiki-head) tr td:first-child,
.web .answer-wrapper:has(.wiki-head) tr th:first-child {
  font-weight: bold !important;
  white-space: nowrap !important;
  opacity: 0.95;
}

/* Social / external links — single centered row */
.web .answer-wrapper:has(.wiki-head) .socials {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  margin-top: 18px !important;
}
.web .answer-wrapper:has(.wiki-head) .socials a { text-decoration: none !important; }
.web .answer-wrapper:has(.wiki-head) .socials .center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
}
.web .answer-wrapper:has(.wiki-head) .socials img {
  width: 30px !important;
  height: 30px !important;
}
.web .answer-wrapper:has(.wiki-head) .socials .title { font-size: 12px !important; }

/* ==================== IMAGE STRIP (web-tab preview) ==================== */
/* Real structure: .answer-wrapper > .answer > .images > a.image > img    */
.web .answer-wrapper:has(.images) {
  max-width: 920px !important;
}
.web .images {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  white-space: normal !important;   /* override base single-row strip */
  padding: 0 !important;
  margin: 0 auto !important;
}
.web .images .image {
  display: block !important;
  float: none !important;
  width: 150px !important;
  flex: 0 0 150px !important;
  margin: 0 !important;
  padding: 6px !important;
  background: rgba(0, 20, 0, 0.3) !important;
  border: 2px solid #00ff00 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: box-shadow 0.15s !important;
  text-decoration: none !important;
  overflow: hidden !important;
}
.web .images .image:hover {
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
}
.web .images .image img {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  background: #000 !important;
  display: block !important;
  border-radius: 4px !important;
}
.web .images .image .duration {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid #00ff00 !important;
  color: #00ff00 !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
}

/* ==================== TEXT RESULT CARDS ==================== */
/* Used by the main web results AND by the video/news widget items.       */
.web .text-result {
  background: rgba(0, 20, 0, 0.3);
  border: 2px solid #00ff00;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 auto 14px !important;
  max-width: 800px;
  transition: box-shadow 0.15s;
  text-align: center;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.web .text-result:hover {
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.web .text-result .title {
  color: #00ff00 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.web .text-result a:visited .title { opacity: 0.7; }
.web .text-result .hover:hover .title { text-decoration: underline; }

.web .url {
  margin-bottom: 8px;
  text-align: center;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.web .url .part {
  color: #00ff00 !important;
  font-size: 13px !important;
  text-decoration: none;
  opacity: 0.85;
  word-break: break-all;
}
.web .url .part:hover { text-decoration: underline; opacity: 1; }
.web .separator::before { color: #00ff00 !important; opacity: 0.5; }

.web .description {
  color: #00ff00 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: pre-line;
  text-align: center;
  opacity: 0.85;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.web .text-result .thumb-wrap {
  float: none !important;
  margin: 10px auto !important;
  display: block !important;
  width: 160px;
  max-width: 100% !important;
  height: auto;
}
.web .text-result .thumb-wrap img.thumb {
  width: 100% !important;
  max-width: 160px !important;
  max-height: 120px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

.web .sublinks {
  margin: 0 auto;
  max-width: 700px;
}
.web .sublinks table { margin: 0 auto; max-width: 100% !important; }
.web .info-table {
  margin: 10px auto !important;
  max-width: 600px;
}

.web .favicon,
.favicon-dropdown { display: none !important; }

/* ==================== IMAGE GRID (Images tab) ==================== */
#images {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#images .image-wrapper {
  width: 220px !important;
  flex: 0 0 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

#images .image {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  background: rgba(0, 20, 0, 0.3) !important;
  border: 2px solid #00ff00 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.15s !important;
  overflow: hidden !important;
}
#images .image:hover {
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
}

#images a {
  display: block !important;
  color: #00ff00 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
#images a:hover .title { text-decoration: underline; }

#images .thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 280px !important;
  height: auto !important;
  margin-bottom: 10px !important;
  position: relative !important;
  background: #000000 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
#images .thumb img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #000000 !important;
  display: block !important;
}

#images .thumb.thumb-broken {
  background: repeating-linear-gradient(
    45deg,
    #000000 0,
    #000000 10px,
    rgba(0, 255, 0, 0.08) 10px,
    rgba(0, 255, 0, 0.08) 20px
  ) !important;
}
#images .thumb.thumb-broken::after {
  content: "no thumbnail";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #00ff00;
  opacity: 0.5;
}

#images .duration {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  border: 1px solid #00ff00 !important;
  background: rgba(0, 0, 0, 0.9) !important;
  color: #00ff00 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
}

#images .image .title {
  color: #00ff00 !important;
  font-size: 13px !important;
  font-weight: bold !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#images .image .description {
  color: #00ff00 !important;
  opacity: 0.85 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ==================== INFOBOX (fortune / status messages) ==================== */
/* NOTE: this is 4get's generic .infobox (errors, fortunes), NOT the      */
/* Wikipedia answer card above (that one is .answer-wrapper:has(.wiki-head)) */
.infobox {
  border: 1px dashed #00ff00 !important;
  background: rgba(0, 20, 0, 0.3) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  color: #00ff00 !important;
  text-align: center !important;
  max-width: 700px !important;
  margin: 30px auto !important;
}
.infobox a { color: #00ff00 !important; }
.infobox h1,
.infobox h2,
.infobox h3 {
  color: #00ff00 !important;
  text-align: center;
  margin-bottom: 12px;
}
.infobox ul {
  list-style: none;
  padding: 0;
  text-align: left;
  display: inline-block;
  margin: 8px auto 0;
}
.infobox li { margin: 6px 0; }
.infobox .code {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #00ff00;
  padding: 8px 12px;
  margin: 10px auto;
  display: inline-block;
  border-radius: 6px;
  font-family: monospace;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ==================== RELATED SEARCHES ==================== */
.related {
  width: 100% !important;
  max-width: 800px !important;
  margin: 30px auto !important;
  text-align: center !important;
}

.related table,
.related tbody,
.related tr,
.related td {
  text-align: center !important;
  width: auto !important;
}

.related td {
  width: 50% !important;
  padding: 4px 10px !important;
}

.related a {
  display: block !important;
  text-align: center !important;
  color: #00ff00 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

/* Headings inside .related */
.related h1,
.related h2,
.related h3,
.related h4 {
  text-align: center !important;
  color: #00ff00 !important;
  margin: 0 auto 16px !important;
}

/* Headings that come right before .related (4get renders the      */
/* "Related searches" h2/h3 OUTSIDE the .related div, so we catch  */
/* any heading whose next sibling is .related)                     */
h1:has(+ .related),
h2:has(+ .related),
h3:has(+ .related),
h4:has(+ .related) {
  text-align: center !important;
  color: #00ff00 !important;
  max-width: 800px !important;
  margin: 30px auto 0 !important;
}
/* ==================== 4GET NATIVE IMAGE POPUP ==================== */
/* 4get's JS sets top/left/width/height inline on #popup. CSS must     */
/* NOT constrain max-width/max-height or the popup ends up tiny.       */
/* The image fills the popup container with object-fit: contain.       */

#popup {
  display: none;
  position: fixed !important;
  top: 0;
  left: 0;
  cursor: grab;
  user-select: none;
  pointer-events: none;
  z-index: 5;
  max-width: none !important;
  max-height: none !important;
  box-sizing: content-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#popup:active {
  cursor: grabbing;
}

#popup-image {
  border: 2px solid #00ff00 !important;
  display: block !important;
  margin: 0 auto !important;
  pointer-events: all !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  background: #000000 !important;
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.6);
  box-sizing: border-box !important;
  padding: 0 !important;
}

#popup-status {
  display: none;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  max-width: none !important;
  height: 35px !important;
  background: #000000 !important;
  border-bottom: 2px solid #00ff00 !important;
  z-index: 4;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#popup-bg {
  background: #000000 !important;
  opacity: 0.85 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  display: none;
  z-index: 3;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#popup-status select {
  display: block !important;
  width: 250px !important;
  background: #000000 !important;
  color: #00ff00 !important;
  border: 1px solid #00ff00 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
}

#popup-num,
#popup-title {
  display: table-cell;
  width: 0;
  word-wrap: normal;
  padding: 0 10px;
  line-height: 35px;
  color: #00ff00 !important;
  text-decoration: none;
}

#popup-title:hover {
  text-decoration: underline;
}

#popup-title {
  width: initial;
  overflow: hidden;
  height: 35px;
  display: block;
}

#popup-num {
  font-weight: bold;
}

#popup-dropdown {
  display: table-cell;
  vertical-align: middle;
  width: 0;
}

/* ==================== AUTOCOMPLETE ==================== */
.autocomplete {
  background: rgba(0, 0, 0, 0.95) !important;
  border: 2px solid #00ff00 !important;
  border-radius: 12px !important;
  margin-top: 8px;
}
.autocomplete .entry {
  color: #00ff00 !important;
  padding: 8px 25px !important;
}
.autocomplete .entry:hover,
.autocomplete .entry:focus {
  background: rgba(0, 255, 0, 0.15) !important;
}

/* ==================== NEXT PAGE ==================== */
.nextpage {
  border: 2px solid #00ff00 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #00ff00 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-size: 16px;
  font-weight: bold;
  transition: background 0.15s, box-shadow 0.15s;
  display: block;
  text-align: center;
  margin: 20px auto;
  max-width: 300px;
}
.nextpage:hover {
  background: rgba(0, 255, 0, 0.15) !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  text-decoration: none !important;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track  { background: #000000; border: 1px solid #00ff00; }
::-webkit-scrollbar-thumb  { background: #000000; border: 1px solid #00ff00; }
::-webkit-scrollbar-thumb:hover {
  background: #001a00;
  box-shadow: 0 0 6px #00ff00;
}
* { scrollbar-width: thin; scrollbar-color: #00ff00 #000000; }

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media only screen and (min-width: 1600px) {
  #images .image-wrapper {
    width: 240px !important;
    flex: 0 0 240px !important;
  }
  #images .thumb { max-height: 260px !important; }
}

@media only screen and (max-width: 1200px) {
  #images .image-wrapper {
    width: 200px !important;
    flex: 0 0 200px !important;
  }
  .web .images .image {
    width: 130px !important;
    flex: 0 0 130px !important;
  }
}

@media only screen and (max-width: 900px) {
  #images {
    gap: 10px !important;
  }
  #images .image-wrapper {
    width: calc(33.333% - 10px) !important;
    flex: 0 0 calc(33.333% - 10px) !important;
    max-width: 220px !important;
  }
  #images .thumb { max-height: 240px !important; }
  .filters .filter input,
  .filters .filter select {
    width: 100px !important;
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 700px) {
  body:not(.home) {
    padding: 20px 8px 60px !important;
  }
  .results-header,
  .tabs,
  .filters,
  .timetaken,
  .web,
  #images {
    width: 100% !important;
  }
  .results-logo img {
    width: 44px !important;
    height: 44px !important;
  }
  #images {
    gap: 6px !important;
  }
  #images .image-wrapper {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: none !important;
  }
  #images .image { padding: 5px !important; }
  #images .thumb { max-height: 200px !important; }
  #images .image .title { font-size: 11px !important; }
  #images .image .description { font-size: 10px !important; }
  #images .duration {
    font-size: 10px !important;
    padding: 1px 4px !important;
  }

  /* Infobox card — tighter on phones */
  .web .answer-wrapper:has(.wiki-head) {
    padding: 16px 16px !important;
  }
  .web .answer-wrapper:has(.wiki-head) .description { font-size: 13px !important; }
  .web .answer-wrapper:has(.wiki-head) td,
  .web .answer-wrapper:has(.wiki-head) th {
    font-size: 12px !important;
    padding: 2px 10px 2px 0 !important;
  }
  .web .answer-title h1 { font-size: 22px !important; }

  /* Image strip — 3 per row */
  .web .images { gap: 6px !important; }
  .web .images .image {
    width: calc(33.333% - 6px) !important;
    flex: 0 0 calc(33.333% - 6px) !important;
  }

  .filters {
    gap: 6px !important;
    padding: 4px 0 !important;
  }
  .filters .filter {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: 160px !important;
  }
  .filters .filter .title {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  .filters .filter input,
  .filters .filter select {
    width: 100% !important;
    height: 28px !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
  }
  .tabs .tab {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .web .text-result { padding: 12px 14px; }
  .web .text-result .title { font-size: 15px !important; }
  .web .text-result .thumb-wrap {
    width: 120px;
    max-height: 90px;
  }
  .web .text-result .thumb-wrap img.thumb {
    max-width: 120px !important;
    max-height: 90px !important;
  }
  .related td {
    display: block !important;
    width: 100% !important;
  }
}

@media only screen and (max-width: 500px) {
  #images .thumb { max-height: 180px !important; }
  .web .images .image {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
  }
  body.home .searchbox input[type=text] { font-size: 16px !important; }
  body.home .logo img { max-width: 360px !important; }
}

@media only screen and (max-width: 400px) {
  #images .image-wrapper {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
  }
  #images .thumb { max-height: 160px !important; }
  .filters .filter {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: none !important;
  }
  .filters .filter input,
  .filters .filter select { width: 100% !important; }
  body.home .logo img { max-width: 280px !important; }
}