/* Retro FindPal 1999-2003 Style Override */

body {
  background: url("bg.gif") !important;
  background-color: #ffffff !important;
  color: #333333 !important;
  text-align: center;
  font-family: verdana, helvetica, sans-serif !important;
  font-size: 10px !important;
  line-height: 1.3em !important;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: verdana, helvetica, sans-serif !important;
  font-size: 12px !important;
  color: #000000;
  font-weight: bold;
}

a {
  color: #000099 !important;
  background-color: transparent;
  text-decoration: underline !important;
}

a:hover {
  color: #cc0000 !important;
  text-decoration: none !important;
}

#mainer {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;
  padding: 0 10px; /* Optional mobile padding */
}

#layout-columns {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-start;
}

#header {
  color: #000000;
  background-color: #ffffff;
  background-image: url("eye.gif");
  background-repeat: no-repeat;
  background-position: 1% 50%;
  text-align: center;
  padding: 1em 0;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid #000000;
}

#header b i {
  font-size: 10px;
  display: block;
  margin-top: 5px;
}

#contenter {
  flex: 1;
  min-width: 0;
}

#righter {
  width: 200px;
  flex-shrink: 0;
}

#results {
  color: #333333;
  background-color: #FFFFFF;
  border-color: #666666;
  border-width: 0px 3px 5px 0px;
  border-style: solid;
  padding: 1.5em;
  margin-bottom: 15px;
  text-align: left;
}

.content {
  color: #333333;
  background-color: #FFFFFF;
  border-color: #666666;
  border-width: 0px 3px 5px 0px;
  border-style: solid;
  padding: 1.5em;
  margin-bottom: 15px;
  text-align: left;
  position: static !important;
  display: block !important;
  float: none !important;
}

.content h4 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 12px;
}

.content p {
  margin: 0;
}

.dir-block {
  margin-bottom: 20px;
}

.rightbox {
  color: #333333;
  background-color: #ffffff;
  border-color: #666666;
  margin-bottom: 15px;
  border-width: 0px 3px 5px 0px;
  border-style: solid;
  text-align: left;
  position: static !important;
  display: block !important;
  float: none !important;
}

.rightbox h4 {
  padding: 0.5em 1em 0.5em 1.5em;
  margin: 0;
  font-weight: bold;
  border-bottom: 1px solid #000000;
  color: #470886;
  background-color: #FFFFFF;
}

.rightbox p {
  margin: 0;
  padding: 1em 1em 1.5em 1em;
}

.rightbox a {
  color: #4F0046 !important;
  text-decoration: underline !important;
}

.rightbox a:hover {
  text-decoration: none !important;
  color: #470886 !important;
}

#footerer {
  clear: both;
  text-align: center;
  width: 100%;
}

#footer {
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 1em 0;
  position: relative;
  text-align: center;
}

#footer a {
  color: #4F0046 !important;
}

/* SearXNG Specific Result Styling (Organic 1999) */
form#search {
  display: none !important;
}

.favicon, svg.ionicon {
  display: none !important;
}

/* Category Tabs Styling */
.search-row {
  margin-bottom: 8px;
}

#category-tabs {
  margin-top: 10px;
  font-size: 11px !important;
}

.category-tab {
  background: none !important;
  border: none !important;
  color: #000099 !important;
  text-decoration: underline !important;
  font-family: verdana, helvetica, sans-serif !important;
  font-size: 11px !important;
  padding: 0 4px !important;
  cursor: pointer;
  box-shadow: none !important;
}

.category-tab:hover {
  text-decoration: none !important;
  color: #cc0000 !important;
}

.category-tab.active {
  color: #000000 !important;
  text-decoration: none !important;
  font-weight: bold;
}

.tab-sep {
  color: #999999;
}

.result {
  border: none !important;
  padding: 0 0 1.5em 0 !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  text-align: left;
}

.result h3 {
  margin-bottom: 2px !important;
  font-size: 14px !important;
  font-weight: bold;
}

.result h3 a {
  color: #000099 !important;
  text-decoration: underline !important;
}

.result .content {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  color: #333333 !important;
}

.result .url_wrapper, .result .url_o1, .result .url_o2 {
  color: #007700 !important; 
  font-size: 10px !important;
  display: block;
}

.result .engines {
  font-size: 9px !important;
  color: #666666 !important;
}

/* Hide result content that shows HTML entities as literal text (double-escaped) */
p.content {
  font-size: 11px !important;
  color: #333333 !important;
}

/* Hide social media content with HTML entity patterns */
[class*="category-social"] p.content,
.category-social\.media p.content,
article.category-social.media p.content {
  display: none !important;
}

/* Hide modern UI elements */
#links_on_top, nav.nav-settings, .sidebar {
  display: none !important;
}

/* Organic Pager Styling */
nav#pagination {
  margin-top: 20px;
  text-align: center;
  font-family: verdana, helvetica, sans-serif !important;
  font-size: 12px !important;
  clear: both;
}

nav#pagination form {
  display: inline-block;
  margin: 0 2px;
}

nav#pagination button, nav#pagination input[type="submit"], nav#pagination input[type="button"] {
  background: none !important;
  border: none !important;
  color: #000099 !important;
  text-decoration: underline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
}

nav#pagination button:hover, nav#pagination input[type="submit"]:hover {
  text-decoration: none !important;
  color: #cc0000 !important;
}

nav#pagination input.page_number_current {
  color: #000000 !important;
  text-decoration: none !important;
  font-weight: bold;
}

input[type="text"], input[type="search"] {
  border: 1px solid #000000 !important;
  padding: 2px !important;
  font-family: inherit;
}

input[type="submit"] {
  border: 1px solid #000000 !important;
  background: #eeeeee !important;
  color: black !important;
  cursor: pointer;
  padding: 1px 6px !important;
}

/* Sidebar Infobox and Suggestions Styling */
#infoboxes.rightbox, #suggestions.rightbox {
  padding-bottom: 0px;
}

#infoboxes .infobox-content {
  padding: 10px;
}

#infoboxes .details, #infoboxes details, #suggestions details, #suggestions .details {
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#infoboxes summary, #suggestions summary {
  display: none !important; /* Hide SearXNG summary as we use h4 */
}

#infoboxes img {
  max-width: 100%;
  height: auto;
  border: 1px solid #000000;
  margin-bottom: 5px;
}

#infoboxes .title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 5px;
  display: block;
}

#infoboxes .attributes {
  font-size: 11px;
}

#infoboxes .attributes .property {
  font-weight: bold;
  margin-right: 5px;
}

#suggestions .wrapper {
  list-style: none;
  padding: 5px 10px 10px 10px !important;
  margin: 0;
}

#suggestions .wrapper li {
  margin-bottom: 4px;
}

#suggestions .suggestion {
  background: none !important;
  border: none !important;
  color: #000099 !important;
  text-decoration: underline !important;
  font-size: 11px !important;
  padding: 0 !important;
  cursor: pointer;
  text-align: left !important;
  box-shadow: none !important;
}

#suggestions .suggestion:hover {
  text-decoration: none !important;
  color: #cc0000 !important;
}

#suggestions .suggestion::before {
  content: "» ";
  color: #999999;
  text-decoration: none !important;
}

#engines_msg, .result .engines {
  display: none !important;
}

/* Image Search Specific Retro Styling */
body:has(.result-images) #righter {
  display: none !important;
}

body:has(.result-images) #contenter {
  width: 100% !important;
  flex: none !important;
}

body:has(.result-images) #results {
  text-align: center;
  padding: 10px;
  border: none !important;
}

body:has(.result-images) #urls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 15px !important;
}

.result-images {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  text-align: center;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: top;
}

.result-images > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  border: 1px solid #000000;
  padding: 5px;
  width: 160px;
  height: 160px;
}

.result-images img.image_thumbnail {
  max-width: 150px;
  max-height: 150px;
  display: block;
}

.result-images span.image_resolution,
.result-images span.title,
.result-images span.source,
.result-images .detail {
  display: none !important;
}

/* Video Search Specific Retro Styling */
body:has(.result-videos) #righter {
  display: none !important;
}

body:has(.result-videos) #contenter {
  width: 100% !important;
  flex: none !important;
}

body:has(.result-videos) #results {
  text-align: center;
  padding: 10px;
  border: none !important;
}

body:has(.result-videos) #urls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 15px !important;
}

.result-videos {
  display: inline-flex !important;
  flex-direction: column;
  float: none !important;
  width: 172px !important;
  text-align: center;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: top;
}

.result-videos .thumbnail_link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  border: 1px solid #000000;
  padding: 5px;
  width: 160px;
  height: auto;
  min-height: 160px;
  margin: 0 auto;
}

.result-videos img.thumbnail {
  max-width: 150px;
  max-height: 150px;
  display: block;
}

.result-videos .thumbnail_length {
  font-size: 10px;
  color: #666666;
  margin-top: 4px;
}

.result-videos h3 {
  font-size: 11px !important;
  margin: 5px auto 0 auto !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 160px;
}

.result-videos .url_header,
.result-videos .favicon,
.result-videos .url_wrapper,
.result-videos .published_date,
.result-videos .result_length,
.result-videos .result_views,
.result-videos .result_author,
.result-videos .highlight,
.result-videos .engines,
.result-videos .break,
.result-videos .altlink,
.result-videos .content,
.result-videos .embedded-video {
  display: none !important;
}

/* Music Search Specific Retro Styling */
body:has(.category-music) #righter {
  display: none !important;
}

body:has(.category-music) #contenter {
  width: 100% !important;
  flex: none !important;
}

body:has(.category-music) #results {
  text-align: center;
  padding: 10px;
  border: none !important;
}

body:has(.category-music) #urls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 15px !important;
}

.category-music {
  display: inline-flex !important;
  flex-direction: column;
  float: none !important;
  width: 250px !important;
  text-align: center;
  margin-bottom: 10px !important;
  padding: 10px !important;
  border: 1px solid #000000 !important;
  background-color: #eeeeee !important;
  vertical-align: top;
}

.category-music h3 {
  font-size: 11px !important;
  margin: 0 0 5px 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.category-music .thumbnail_link {
  display: block;
  margin-bottom: 5px;
}

.category-music .thumbnail_link img {
  max-width: 150px;
  max-height: 150px;
  margin: 0 auto;
  display: block;
  border: 1px solid #000000;
}

.category-music .audio-control audio {
  width: 100%;
  height: 30px;
}

.category-music .url_header,
.category-music .favicon,
.category-music .url_wrapper,
.category-music .published_date,
.category-music .result_length,
.category-music .result_views,
.category-music .result_author,
.category-music .highlight,
.category-music .engines,
.category-music .break,
.category-music .altlink,
.category-music .content,
.category-music .embedded-content {
  display: none !important;
}

/* =========================================
   News Search Specific Retro Styling
   ========================================= */

/* Each news result gets a thin top border to separate like a newspaper column rule */
.result.category-news {
  border-top: 1px solid #cccccc !important;
  padding-top: 0.8em !important;
  padding-bottom: 0.8em !important;
  margin-bottom: 0 !important;
}

.result.category-news:first-child {
  border-top: none !important;
}

/* Publication date — styled like a dateline in old newspaper print */
.result.category-news .published_date {
  display: inline-block;
  font-size: 10px !important;
  color: #007700 !important;
  font-family: "Courier New", Courier, monospace !important;
  margin-bottom: 2px;
  margin-top: 2px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

/* Headline link — slightly larger for news */
.result.category-news h3 {
  font-size: 13px !important;
  margin-bottom: 2px !important;
  margin-top: 2px !important;
}

.result.category-news h3 a {
  color: #000099 !important;
  text-decoration: underline !important;
}

.result.category-news h3 a:hover {
  color: #cc0000 !important;
  text-decoration: none !important;
}

/* Snippet / content — standard size */
.result.category-news .content {
  font-size: 11px !important;
  color: #333333 !important;
  margin-top: 2px !important;
}

/* URL breadcrumb */
.result.category-news .url_header,
.result.category-news .url_wrapper,
.result.category-news .url_o1,
.result.category-news .url_o2 {
  font-size: 10px !important;
  color: #007700 !important;
  text-decoration: none !important;
}

/* Hide noisy metadata we don't need for the retro look */
.result.category-news .result_author,
.result.category-news .result_views,
.result.category-news .result_length,
.result.category-news .highlight,
.result.category-news .engines,
.result.category-news .break,
.result.category-news .altlink,
.result.category-news .cache_link {
  display: none !important;
}

/* Source thumbnail if present — small and bordered */
.result.category-news .thumbnail_link {
  float: right;
  margin: 0 0 6px 10px;
  border: 1px solid #999999;
  padding: 2px;
  background-color: #f5f5f5;
}

.result.category-news img.thumbnail {
  max-width: 80px;
  max-height: 60px;
  display: block;
}

/* Social Media Specific Retro Styling */
body:has(.category-social.media) #righter {
  display: none !important;
}

body:has(.category-social.media) #contenter {
  width: 100% !important;
  flex: none !important;
}

body:has(.category-social.media) #results {
  text-align: center;
  padding: 10px;
  border: none !important;
}

body:has(.category-social.media) #urls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 15px !important;
}

.category-social.media {
  display: inline-flex !important;
  flex-direction: column;
  float: none !important;
  width: 200px !important;
  text-align: center;
  margin-bottom: 10px !important;
  padding: 10px !important;
  border: 1px solid #000000 !important;
  background-color: #eeeeee !important;
  vertical-align: top;
}

.category-social.media h3 {
  font-size: 11px !important;
  margin: 0 0 5px 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.category-social.media .thumbnail_link {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  border: 1px solid #000000;
  padding: 5px;
  width: 160px;
  height: 160px;
  margin: 0 auto 5px auto;
}

.category-social.media img.thumbnail {
  max-width: 150px;
  max-height: 150px;
  display: block;
}

/* Hide clutter and text containing literal HTML */
.category-social.media .url_header,
.category-social.media .favicon,
.category-social.media .url_wrapper,
.category-social.media .published_date,
.category-social.media .result_length,
.category-social.media .result_views,
.category-social.media .result_author,
.category-social.media .highlight,
.category-social.media .engines,
.category-social.media .break,
.category-social.media .altlink,
.category-social.media .content,
.category-social.media .embedded-content {
  display: none !important;
}