/*
 * HabboFont Habboween 2026 - Farbdesign
 * Zusatzstylesheet: nach index-OORLgIWf.css laden.
 * Keine Aenderungen an bestehenden Header-Bildern, React/JS oder Fonts.
 * Zum Deaktivieren nur den Link zu dieser Datei aus index.html entfernen.
 */

:root {
  --hw-bg: #211329;
  --hw-panel: #392044;
  --hw-panel-hover: #4a2958;
  --hw-border: #8655a4;
  --hw-purple-bright: #b57ed5;
  --hw-orange: #ff9b3d;
  --hw-orange-dark: #b95225;
  --hw-orange-pale: #ffca88;
  --hw-white: #fff8f1;
}

/* Seitenhintergrund */
html { background-color: var(--hw-bg); }
body {
  background: radial-gradient(ellipse at top, #42204b 0%, #2d193b 38%, var(--hw-bg) 100%);
  color: var(--hw-white);
  min-height: 100vh;
}

/* Das bestehende Header-Bild bleibt unangetastet. */
header .menu {
  background-color: rgba(35, 17, 46, .93);
  border-top: 2px solid var(--hw-orange);
  border-bottom: 2px solid var(--hw-orange-dark);
}
header .menu ul li a {
  color: var(--hw-white);
  transition: background-color .15s ease, color .15s ease;
}
header .menu ul li a:hover,
header .menu ul li a:focus-visible {
  background-color: var(--hw-orange);
  color: #28172f;
}

/* Vorschau, Eingabe, Filter und Schriftarten-Kacheln */
.box {
  background-color: var(--hw-panel);
  border-color: var(--hw-border);
}
.selected-logo {
  background-color: #2c193a;
  border-color: var(--hw-orange-dark);
  box-shadow: 0 4px 16px rgba(16, 7, 25, .22);
}
.logo-data .logo-text,
.logo-data .logo-link {
  /* Nur die Flaechenfarbe: die originalen kleinen Icons bleiben erhalten. */
  background-color: #4c2b5b;
  color: var(--hw-white);
}
.logo-data .logo-text:focus,
.logo-data .logo-link:focus {
  outline: 2px solid var(--hw-orange);
  outline-offset: -2px;
}
.logo-data .logo-text::placeholder,
.logo-data .logo-link::placeholder,
.logo-filter input[type="text"]::placeholder {
  color: #e1c9e6;
}
.logo-filter input[type="text"] {
  background-color: #301b3c;
  border-color: var(--hw-border);
  color: var(--hw-white);
}
.logo-filter input[type="text"]:focus {
  border-color: var(--hw-orange);
  outline: 1px solid var(--hw-orange);
}
.checkmark {
  background-color: #301b3c;
  border-color: var(--hw-border);
}
.checkbox-label:hover input ~ .checkmark {
  background-color: #553167;
}
.checkbox-label input:checked ~ .checkmark {
  background-color: var(--hw-orange-dark);
  border-color: var(--hw-orange-pale);
}
.checkbox-label input:focus-visible ~ .checkmark {
  outline: 2px solid var(--hw-orange);
  outline-offset: 2px;
}

/* Kategorien: Lila mit orangefarbenem Rand */
.group-container .group-title {
  background: linear-gradient(90deg, #58306a 0%, #41234f 100%);
  border-color: #a873c1;
  border-left: 5px solid var(--hw-orange);
  color: var(--hw-white);
  font-weight: 700;
  padding-left: 12px;
}
/* Halloween-Kategorie erkennbar hervorheben, ohne andere Kategorien zu verschieben. */
.group-container:has(.group-item a[title="Halloween"]) > .group-title {
  background: linear-gradient(90deg, #a84322 0%, #633055 100%);
  border-color: var(--hw-orange);
  border-left-color: var(--hw-orange-pale);
  color: #fff;
}
.group-container .container-items .group-item a.box {
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.group-container .container-items .group-item a.box:hover,
.group-container .container-items .group-item a.box:focus-visible {
  background-color: var(--hw-panel-hover);
  border-color: var(--hw-orange);
  transform: translateY(-2px);
}
.group-container .container-items .group-item a.box:focus-visible {
  outline: 2px solid var(--hw-orange-pale);
  outline-offset: 2px;
}
.group-container .container-items .group-item a span,
.group-container .no-fonts-found { color: var(--hw-white); }

/* Weitere Seitenbereiche */
.habbo-font-warning { background-color: #5b305f; }
.habbo-font-warning .message-container .button button {
  background-color: var(--hw-orange-dark);
  border-color: var(--hw-orange-pale);
  color: #fff;
}
.habbo-font-warning .message-container .button button:hover {
  background-color: #d2682a;
  border-color: var(--hw-orange);
}
.text-container a,
.addUsBox a { color: var(--hw-orange-pale); }
.text-container a:hover,
.addUsBox a:hover { color: #fff; }
.addUsBox .add-us-input {
  background-color: #301b3c;
  border-color: var(--hw-border);
}
footer { background-color: rgba(99, 56, 113, .55); }
footer a { color: var(--hw-orange-pale); }
footer a:hover { color: #fff; }

/* Menschen mit reduzierter Animation nicht animieren. */
@media (prefers-reduced-motion: reduce) {
  header .menu ul li a,
  .group-container .container-items .group-item a.box {
    transition: none;
  }
  .group-container .container-items .group-item a.box:hover,
  .group-container .container-items .group-item a.box:focus-visible {
    transform: none;
  }
}
.group-container .container-items .group-item a.box {
    position: relative;
}

.new-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ff8c2a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}