/* === Global Dark Fireworks Theme === */

:root{
  --bg0:#070B18;
  --bg1:#0B1230;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(238,244,255,.92);
  --muted: rgba(238,244,255,.78);
  --muted2: rgba(238,244,255,.66);
  --glow: rgba(123,92,255,.55);
  --glow2: rgba(0,255,198,.30);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

html, body{
  height:100%;
  /* Stop "sideways dragging" på mobil (typisk pga. store pseudo-elementer/insets) */
  overflow-x: hidden;
}
body{
  background: radial-gradient(1200px 800px at 15% 0%, #1c2a66 0%, rgba(28,42,102,0) 55%),
              radial-gradient(900px 600px at 95% 20%, #3d1a6b 0%, rgba(61,26,107,0) 55%),
              linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%);
  color: var(--text);
}

/* Soft animated background shimmer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 700px at 40% 10%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(700px 500px at 70% 55%, rgba(0,255,198,.07) 0%, rgba(0,255,198,0) 60%),
    radial-gradient(800px 600px at 25% 75%, rgba(123,92,255,.08) 0%, rgba(123,92,255,0) 60%);
  filter: blur(0px);
  opacity: .9;
  animation: bgFloat 14s ease-in-out infinite alternate;
}
@keyframes bgFloat{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(0,-10px,0) scale(1.02); }
}

/* Global content wrapper */
.container{
  position: relative;
  z-index: 2;
}

/* Navbar */
.navbar{
  background: rgba(0,0,0,.35) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.navbar .nav-link, .navbar .navbar-brand{
  color: var(--text) !important;
}
.navbar .nav-link:hover{
  opacity: .92;
}

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  color: var(--text);
  border-radius: 18px;
  /* Forhindrer at ::after overlay gør siden bredere end viewport på mobil */
  overflow: hidden;
}
.card .text-dark-75, .text-dark-75{
  color: var(--muted) !important;
}

/* Buttons */
.btn-glow{
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset,
              0 14px 34px rgba(123,92,255,.20);
}
.btn-pop{
  animation: btnPop .18s ease-out;
}
@keyframes btnPop{
  from{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.02); }
  to{ transform: translateY(0) scale(1); }
}
.btn-outline-light{
  border-color: rgba(255,255,255,.22) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Hero wrapper (consistent everywhere) */
.hero-wrap{
  position: relative;
  padding: 22px 22px;
  border-radius: 22px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Fireworks global layer */
.fireworks-bg{
  position: absolute;
  inset: -40px;
  pointer-events:none;
  z-index: 0;
  opacity: .95;
}
.firework{
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: var(--x, 50%);
  top: var(--y, 40%);
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.45));
  opacity: .85;
}
.firework::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%);
  animation: pop 2.4s infinite ease-in-out;
}
.firework::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%,-50%) scale(.6);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,94,0,.85) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 85% 15%, rgba(0,255,198,.85) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 100% 50%, rgba(123,92,255,.85) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,.75) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 50% 100%, rgba(255,94,0,.85) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 15% 85%, rgba(0,255,198,.85) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 0% 50%, rgba(123,92,255,.85) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.75) 0 2px, rgba(0,0,0,0) 3px);
  animation: burst 2.4s infinite ease-in-out;
  opacity: .85;
}
@keyframes pop{
  0%{ transform: scale(.6); opacity:.35; }
  20%{ transform: scale(1.2); opacity:1; }
  40%{ transform: scale(.9); opacity:.65; }
  100%{ transform: scale(.6); opacity:.25; }
}
@keyframes burst{
  0%{ transform: translate(-50%,-50%) scale(.4); opacity:.0; }
  15%{ opacity: 1; }
  35%{ transform: translate(-50%,-50%) scale(1.1); opacity:.95; }
  100%{ transform: translate(-50%,-50%) scale(1.55); opacity:0; }
}

/* 4 fireworks positions + delays */
.fw1{ --x: 18%; --y: 30%; }
.fw2{ --x: 52%; --y: 22%; animation-delay: .6s; }
.fw3{ --x: 82%; --y: 35%; animation-delay: 1.2s; }
.fw4{ --x: 65%; --y: 60%; animation-delay: 1.8s; }
.fw2::before, .fw2::after{ animation-delay: .6s; }
.fw3::before, .fw3::after{ animation-delay: 1.2s; }
.fw4::before, .fw4::after{ animation-delay: 1.8s; }

/* Badges */
.badge{
  border: 1px solid rgba(255,255,255,.12);
}

/* Tables readability on dark */
.table{
  color: var(--text);
}
.table thead th{
  color: var(--muted);
  border-bottom-color: rgba(255,255,255,.12);
}
.table td, .table th{
  border-top-color: rgba(255,255,255,.10);
}

/* Inputs on dark */
.form-control, .form-select{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
}
.form-control::placeholder{
  color: rgba(238,244,255,.55);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(123,92,255,.55);
  box-shadow: 0 0 0 .2rem rgba(123,92,255,.18);
}

/* Links */
a{ color: rgba(180,200,255,.95); }
a:hover{ color: rgba(255,255,255,.95); }

/* Small helper for spacing */
.page-pad{ padding-top: 22px; padding-bottom: 40px; }

/* === Party upgrades: particles + disco sweep === */

/* Floating particles layer */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 1; /* above body bg, under content (.container is z-index 2) */
  opacity: .55;
  background:
    radial-gradient(circle, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,0) 2px) 0 0/70px 70px,
    radial-gradient(circle, rgba(0,255,198,.22) 0 1px, rgba(0,0,0,0) 2px) 20px 10px/90px 90px,
    radial-gradient(circle, rgba(123,92,255,.24) 0 1px, rgba(0,0,0,0) 2px) 10px 30px/110px 110px,
    radial-gradient(circle, rgba(255,94,0,.18) 0 1px, rgba(0,0,0,0) 2px) 40px 20px/140px 140px;
  animation: particleDrift 18s linear infinite;
  filter: blur(.1px);
}
@keyframes particleDrift{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -220px, 0); }
}

/* Disco sweep on hero + cards */
.hero-wrap::after,
.card::after{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(
    110deg,
    rgba(123,92,255,0) 0%,
    rgba(123,92,255,.18) 12%,
    rgba(0,255,198,.14) 30%,
    rgba(255,94,0,.12) 48%,
    rgba(255,255,255,.10) 62%,
    rgba(123,92,255,0) 78%,
    rgba(123,92,255,0) 100%
  );
  transform: translateX(-30%) rotate(8deg);
  animation: discoSweep 9.5s ease-in-out infinite;
  opacity: .55;
  mix-blend-mode: screen;
}
@keyframes discoSweep{
  0%   { transform: translateX(-40%) rotate(8deg); opacity:.15; }
  20%  { opacity:.55; }
  50%  { transform: translateX(40%) rotate(8deg); opacity:.50; }
  80%  { opacity:.35; }
  100% { transform: translateX(-40%) rotate(8deg); opacity:.15; }
}

/* Ensure content stays above sweep overlay */
.hero-wrap > .position-relative,
.card > *{
  position: relative;
  z-index: 2;
}

/* Make sure the fireworks layer is also behind content but above background */
.fireworks-bg{ z-index: 0; }

/* Stronger readable primary buttons on dark */
.btn-primary{
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 44px rgba(123,92,255,.22);
}

/* Dark-outline buttons: visible on dark background */
.btn-outline-dark{
  color: rgba(238,244,255,.92) !important;
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.06) !important;
}
.btn-outline-dark:hover{
  color: rgba(255,255,255,.98) !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* Also fix "text-bg-dark" badges to not disappear */
.text-bg-dark{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

#fw-bg{
  position: fixed;
  inset: 0;
  z-index: 0;            /* bag alt */
  pointer-events: none;  /* klik går igennem */
  opacity: .65;          /* skru op/ned */
}

/* Sørg for at din side ligger ovenpå */
.navbar, .container{
  position: relative;
  z-index: 2;
}