/* ============================= */
/* CALI'S MUSIKCAFE WUNSCHBOX */
/* NEON DESIGN */
/* ============================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: #ffffff;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 238, 255, 0.25), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(255, 0, 180, 0.25), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(110, 60, 255, 0.35), transparent 35%),
    linear-gradient(135deg, #050014, #090b35 45%, #130020);
}

.wb-page {
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-card {
  width: 100%;
  max-width: 760px;
  padding: 35px;
  border-radius: 26px;
  background: rgba(5, 8, 35, 0.92);
  border: 1px solid rgba(0, 234, 255, 0.38);
  box-shadow:
    0 0 25px rgba(0, 234, 255, 0.28),
    0 0 45px rgba(255, 0, 200, 0.12);
}

.wb-card h1 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 38px;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 0, 200, 0.85),
    0 0 20px rgba(0, 234, 255, 0.75);
}

.wb-subtitle {
  text-align: center;
  margin-bottom: 30px;
  color: #cfd6ff;
  font-size: 17px;
}

.wb-card label {
  display: block;
  margin: 16px 0 7px;
  font-weight: bold;
  color: #ffffff;
}

.wb-card input,
.wb-card select,
.wb-card textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(0, 234, 255, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: 16px;
  outline: none;
  box-shadow: inset 0 0 10px rgba(0, 234, 255, 0.08);
}

.wb-card input:focus,
.wb-card select:focus,
.wb-card textarea:focus {
  border-color: #ff00cc;
  box-shadow: 0 0 13px rgba(255, 0, 204, 0.55);
}

.wb-card select option {
  color: #000000;
}

.wb-check {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px !important;
  font-weight: normal !important;
  color: #e8e8ff !important;
  line-height: 1.45;
}

.wb-check input {
  width: auto;
  margin-top: 4px;
}

.wb-card button {
  display: block;
  margin: 28px auto 0;
  padding: 14px 32px;
  border: none;
  border-radius: 32px;
  background: linear-gradient(90deg, #ff00cc, #00eaff);
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 234, 255, 0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wb-card button:hover {
  transform: scale(1.04);
  box-shadow: 0 0 26px rgba(255, 0, 204, 0.9);
}

.wb-success,
.wb-error {
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: 14px;
  text-align: center;
  font-weight: bold;
}

.wb-success {
  background: rgba(0, 255, 170, 0.15);
  border: 1px solid rgba(0, 255, 170, 0.55);
  color: #9dffd8;
}

.wb-error {
  background: rgba(255, 0, 90, 0.15);
  border: 1px solid rgba(255, 0, 90, 0.6);
  color: #ffbfd1;
}

@media (max-width: 600px) {
  .wb-page {
    padding: 25px 12px;
  }

  .wb-card {
    padding: 24px 18px;
  }

  .wb-card h1 {
    font-size: 30px;
  }
}

.wb-password-box {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 234, 255, 0.06);
  border: 1px solid rgba(0, 234, 255, 0.22);
}

.wb-password-box h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.7);
}

.wb-small-button {
  margin-top: 10px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
}

/* Kleinere Buttons im Wunschbox-Dashboard */
.wb-status-form button,
.wb-delete-wish-button,
.wb-small-button,
.wb-delete-button {
  padding: 7px 14px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  min-width: auto !important;
}

/* Buttons bei den Musikwünschen nebeneinander anzeigen */
.wb-status-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.wb-delete-wish-form {
  display: inline-flex;
  margin-top: 12px;
  margin-left: 8px;
}

.wb-status-form button,
.wb-delete-wish-button {
  width: auto !important;
  min-width: auto !important;
  display: inline-block !important;
  padding: 7px 13px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
}

.wb-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 22px 0;
}

.wb-filter-actions a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 22px;
  border: 1px solid rgba(0, 234, 255, 0.35);
  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.18);
}

.wb-filter-actions a:hover,
.wb-filter-actions a.active {
  background: linear-gradient(90deg, #00eaff, #ff00cc);
  color: #050510;
  box-shadow: 0 0 18px rgba(0, 234, 255, 0.65);
}

.wb-modi-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

.wb-modi-choice a {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 30px;
  background: linear-gradient(90deg, #00eaff, #ff00cc);
  color: #050510 !important;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 18px rgba(0, 234, 255, 0.55);
}

.wb-modi-choice a:hover {
  transform: scale(1.04);
  box-shadow: 0 0 26px rgba(255, 0, 204, 0.75);
}

.wb-back-choice {
  text-align: center;
  margin-top: 22px;
}

.wb-back-choice a {
  color: #00eaff;
  text-decoration: none;
  font-size: 14px;
}

.wb-back-choice a:hover {
  text-decoration: underline;
}

.wb-close-box {
  text-align: center;
  margin-top: 26px;
}

.wb-close-button {
  width: auto !important;
  min-width: auto !important;
  padding: 9px 20px !important;
  border-radius: 25px !important;
  font-size: 14px !important;
  background: linear-gradient(90deg, #00eaff, #ff00cc) !important;
  color: #050510 !important;
  font-weight: bold !important;
  box-shadow: 0 0 16px rgba(0, 234, 255, 0.55) !important;
}

.wb-close-button:hover {
  transform: scale(1.04);
  box-shadow: 0 0 24px rgba(255, 0, 204, 0.75) !important;
}

.wb-close-hint {
  display: none;
  margin-top: 12px;
  color: #ffd1d1;
  font-size: 13px;
}

.wb-modi-inactive {
  opacity: 0.65;
  border-color: rgba(255, 122, 0, 0.45) !important;
}

.wb-status-active {
  color: #00ff9d;
  font-weight: bold;
}

.wb-status-inactive {
  color: #ff9b3d;
  font-weight: bold;
}

.wb-modi-actions {
  margin-top: 14px;
}

.wb-active-button,
.wb-inactive-button {
  width: auto !important;
  min-width: auto !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 22px !important;
}

.wb-active-button {
  background: linear-gradient(90deg, #00ff9d, #00eaff) !important;
  color: #050510 !important;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.55) !important;
}

.wb-inactive-button {
  background: linear-gradient(90deg, #ffb000, #ff7a00) !important;
  color: #050510 !important;
  box-shadow: 0 0 16px rgba(255, 176, 0, 0.55) !important;
}

.mod-button.live {
  border: 2px solid #ffe600;
  box-shadow:
    0 0 12px #ffe600,
    0 0 25px #ff00cc,
    0 0 40px #00eaff;
  animation: livePulse 1.4s infinite;
  position: relative;
}

.mod-button.live::after {
  content: "LIVE";
  position: absolute;
  top: -12px;
  right: -12px;
  background: #ff004c;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 7px;
  border-radius: 999px;
  box-shadow: 0 0 10px #ff004c;
}

@keyframes livePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
  }
}

.wb-modi-choice a.live-modi {
  border: 2px solid #ffe600;
  box-shadow:
    0 0 12px #ffe600,
    0 0 25px #ff00cc,
    0 0 40px #00eaff;
  animation: livePulse 1.4s infinite;
  position: relative;
}

.wb-modi-choice a.live-modi::after {
  content: "LIVE";
  position: absolute;
  top: -13px;
  right: -14px;
  background: #ff004c;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 7px;
  border-radius: 999px;
  box-shadow: 0 0 10px #ff004c;
}

@keyframes livePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
  }
}

.sonic-hidden-dj {
  display: none !important;
}

#sonic_dj,
.sonic-hidden-dj {
  position: fixed !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.wb-modi-choice a.live-modi {
  border: 2px solid #ffe600 !important;
  box-shadow:
    0 0 12px #ffe600,
    0 0 25px #ff00cc,
    0 0 40px #00eaff !important;
  animation: livePulse 1.4s infinite;
  position: relative;
}

.wb-modi-choice a.live-modi::after {
  content: "LIVE";
  position: absolute;
  top: -13px;
  right: -14px;
  background: #ff004c;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 7px;
  border-radius: 999px;
  box-shadow: 0 0 10px #ff004c;
}

@keyframes livePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
  }
}