:root {
  /* 'Radikal' font-family is referenced via .font-radikal but no @font-face is
     registered yet, so it currently falls back to sans-serif everywhere it's used. */
  --placeholder-bg: #0D0D12;
  --accent-yellow: #F2C94C;
  --accent-pink: #E255A1;
  --accent-red: #E8543E;
  --accent-purple: #7B2FF7;
  --text-muted: #9A9AA5;
  --border-soft: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--placeholder-bg);
  color: #fff;
  margin: 0;
}

.font-radikal {
  font-family: 'Radikal', sans-serif;
}

.section {
  background: var(--placeholder-bg);
  width: 100%;
}

.grad-btn {
  background: linear-gradient(90deg, var(--accent-yellow), var(--accent-pink), var(--accent-purple));
  color: #000;
  font-weight: 600;
}

.card-border {
  border: 1px solid var(--border-soft);
}

.accordion-toggle svg {
  transition: transform 0.2s ease;
}

.accordion-item.open .accordion-toggle svg {
  transform: rotate(45deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.avatar-placeholder {
  background: repeating-conic-gradient(#e5e5e5 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
}

/* Stacked event-details card: front glass panel + back gradient panel peeking
   out behind it, sized as percentages of a fixed aspect-ratio wrapper. */
.stack-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 477/380;
}

.glass-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 91%;
  height: 90%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(90deg, rgba(191, 153, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 2;
}

.gradient-bg {
  position: absolute;
  top: 12%;
  left: 15%;
  width: 85%;
  height: 88%;
  border-radius: 8px;
  background: linear-gradient(135deg, #E55D4F 0%, #260D59 70.71%);
  z-index: 1;
}

/* Below Tailwind's sm breakpoint (640px), the fixed aspect-ratio box above
   can't grow to fit wrapped text (e.g. the "Where" line on an iPhone SE),
   so content overflows past the card's edges. Below 640px only, drop the
   fixed ratio and let the glass panel size itself to its content instead;
   the decorative gradient panel is hidden since it can no longer track a
   height that now varies with content. Untouched at sm and up. */
@media (max-width: 639px) {
  .stack-wrap {
    aspect-ratio: auto;
  }

  .glass-bg {
    position: static;
    width: 100%;
    height: auto;
  }

  .gradient-bg {
    display: none;
  }
}

/* Multi-step invitation form (Request Your Invitation card) */
.option-btn {
  width: 100%;
  text-align: left;
  border: 1px solid #333333;
  background: #1A1A1A;
  color: #E5E7EB;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, font-size .15s ease;
}

.option-btn:hover {
  border-color: #861BEE;
}

.option-btn.selected {
  border-color: #861BEE;
  background: rgba(134, 27, 238, 0.15);
  font-size: 13px;
  color: #FFFFFF;
}

/* Force font inheritance for form elements inside the apply card */
#apply-card input,
#apply-card textarea,
#apply-card select,
#apply-card button {
  font-family: inherit;
}

/* Override browser autofill styles which force a white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #1A1A1A inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* Attempt to style dropdown options for browsers that support it (e.g., Firefox) */
#apply-card select option {
  font-family: 'Radikal', sans-serif;
  font-weight: 400;
  font-size: 12px;
  background: #1A1A1A;
  color: #E5E7EB;
}

@keyframes pulse-bg {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(255, 225, 53, 0);
  }

  50% {
    transform: scale(1.04);
    /* Scales just the background */
    filter: brightness(1.15);
    /* Makes it brighter */
    box-shadow: 0 4px 20px 2px rgba(255, 225, 53, 0.4);
    /* Adds the glow */
  }
}

.animate-pulse-bg {
  animation: pulse-bg 2s ease-in-out infinite;
}

/* Target the animation inside the group when hovered */
.group:hover .animate-pulse-bg {
  animation: none;
}