/* Private Surfer – Wave Theme */

:root{
  --ps-bg: #07121f;
  --ps-card: rgba(255,255,255,0.06);
  --ps-border: rgba(255,255,255,0.12);
  --ps-text: rgba(255,255,255,0.92);
  --ps-muted: rgba(255,255,255,0.68);
  --ps-accent: #4fd1c5;     /* aqua */
  --ps-accent2: #7aa7ff;    /* soft blue */
  --ps-shadow: rgba(0,0,0,0.35);
}

body{
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(79,209,197,0.18), transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(122,167,255,0.18), transparent 55%),
    radial-gradient(1200px 900px at 40% 110%, rgba(79,209,197,0.10), transparent 60%),
    var(--ps-bg) !important;
  color: var(--ps-text) !important;
}

/* Make main container a bit nicer */
#main, .container{
  max-width: 980px;
}

/* Search box / form */
.search__form, .search_form, form.search{
  background: var(--ps-card) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  box-shadow: 0 20px 60px var(--ps-shadow) !important;
  backdrop-filter: blur(10px);
}

input[type="search"], input[type="text"]{
  background: transparent !important;
  color: var(--ps-text) !important;
}

::placeholder{
  color: var(--ps-muted) !important;
}

/* Buttons */
button, .btn, input[type="submit"]{
  border-radius: 14px !important;
  border: 1px solid var(--ps-border) !important;
  background: linear-gradient(135deg, rgba(79,209,197,0.25), rgba(122,167,255,0.25)) !important;
  color: var(--ps-text) !important;
}

button:hover, .btn:hover, input[type="submit"]:hover{
  filter: brightness(1.08);
}

/* Results cards */
.result, .result__body, .result__header, .infobox, .suggestions, .sidebar{
  background: var(--ps-card) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 50px var(--ps-shadow) !important;
}

/* Links */
a{
  color: var(--ps-accent2) !important;
}
a:hover{
  filter: brightness(1.12);
}

/* Subtle wave bar on top (works on most themes) */
header, .navbar, .header{
  position: relative;
}
header::before, .navbar::before, .header::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent2), var(--ps-accent));
  opacity: 0.9;
}

/* Footer */
footer, .footer{
  color: var(--ps-muted) !important;
  opacity: 0.9;
  /* Footer: keep original look, just align right badge */
.ps-footer{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;

  /* IMPORTANT: no big padding, so it doesn't look like a frame */
  padding: 0 !important;
  margin: 0 !important;

  /* IMPORTANT: no extra background/card look */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ps-footer-left p{
  margin: 0 !important;
}

.ps-footer-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ps-netcup-badge{
  max-height: 34px;
  opacity: 0.9;
}

/* Mobile: badge under links, centered */
@media (max-width: 700px){
  .ps-footer{
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* Replace SearXNG text logo (simple theme) */
.ps-logo-wrap{
  display:flex;
  justify-content:center;
  margin: 28px 0 18px;
}

.ps-logo{
  width: 100px;
  max-width: 80vw;
  height: auto;
  filter: drop-shadow(0 12px 35px rgba(79,209,197,0.25));
}
/* Kill SearXNG logo/wordmark that is rendered via CSS */
#search_logo,
#search_logo::before,
#search_logo::after,
#search_header #search_logo::before,
#search_header #search_logo::after {
  background: none !important;
  content: none !important;
}

#search_logo svg,
#search_logo .searxng-wordmark,
#search_logo img.logo,
#search_logo img[src*="searxng"],
#search_logo span {
  display: none !important;
}

/* Our logo */
#search_logo .ps-logo{
  display: block;
  width: 200px;        /* hier kannst du spielen: 200-320 */
  max-width: 70vw;
  height: auto;
  margin-left: 0 auto 10px;
  filter: drop-shadow(0 12px 35px rgba(79,209,197,0.25));
}

/* Optional: make header align center */
#search_header{
  justify-content: center !important;
}