/* ===============================
   Romantic Live Event Theme
================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg1:#0c0622;
  --bg2:#140a35;
  --bg3:#1c1048;

  --card: rgba(255,255,255,.05);
  --card-border: rgba(255,255,255,.15);

  --text:#f8f5ff;
  --muted:#b9a9e8;

  --rose:#ff4f9a;
  --violet:#7d5cff;
  --gold:#ffcc70;

  --radius:20px;
}

/* ===============================
   BASE
================================= */

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter, system-ui, sans-serif;
  color:var(--text);
  min-height:100vh;

  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(125,92,255,.4), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(255,79,154,.3), transparent 60%),
    radial-gradient(800px 400px at 50% 120%, rgba(255,204,112,.12), transparent 70%),
    linear-gradient(180deg,var(--bg1),var(--bg2),var(--bg3));

  background-size:200% 200%;
  animation:bgShift 28s ease infinite;
}

@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===============================
   LAYOUT
================================= */

.page{
  max-width:100%;
  margin:auto;
  padding:20px 28px 60px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.brand{
  font-family:'Playfair Display', serif;
  font-size:24px;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav a{
  margin-left:20px;
  color:var(--muted);
  font-weight:500;
  transition:.2s;
}
.nav a:hover{
  color:var(--text);
}

/* ===============================
   HERO LIVE
================================= */

.hero-live{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:50px;
  align-items:start;
  margin-top:30px;
}

.hero-left{
  position:relative;
}

.hero-left::after{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background: radial-gradient(circle, rgba(255,79,154,.25), transparent 60%);
  filter: blur(120px);
  top:-120px;
  left:-60px;
  z-index:-1;
}

.hero-live h1{
  font-family:'Playfair Display', serif;
  font-size:52px;
  line-height:1.1;
  margin-bottom:18px;
}

.hero-sub{
  font-size:18px;
  color:var(--muted);
  margin-bottom:18px;
}

.hero-text-block{
  margin-top:16px;
  font-size:15px;
  line-height:1.6;
  color:#d7cfff;
  max-width:640px;
}

.live-indicator{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  margin-top:16px;
}

/* Pulsing dot */

.pulse{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--rose);
  position:relative;
}

.pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--rose);
  animation:pulseAnim 2s infinite;
}

@keyframes pulseAnim{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(2.8);opacity:0}
  100%{opacity:0}
}

/* ===============================
   CARD / FORM
================================= */

.card{
  background:var(--card);
  border:1px solid var(--card-border);
  backdrop-filter: blur(16px);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);
  transition:.25s;
}

.card:hover{
  transform:translateY(-4px);
}

.live-form h2{
  font-family:'Playfair Display', serif;
  margin-bottom:6px;
}

.label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  display:block;
}

input, select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.35);
  color:var(--text);
  margin-bottom:16px;
  font-size:14px;
  transition:.2s;
}

input:focus, select:focus{
  outline:none;
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(255,79,154,.25);
}

/* ===============================
   EVENT TYPE SWITCH
================================= */

.event-type-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:18px;
}

.type-option input{
  display:none;
}

.type-card{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  text-align:center;
  font-size:14px;
  transition:.2s;
  cursor:pointer;
}

.type-title{
  font-weight:600;
  margin-bottom:2px;
}

.type-sub{
  font-size:11px;
  color:var(--muted);
}

.type-option input:checked + .type-card{
  background:linear-gradient(90deg,var(--rose),var(--violet));
  border-color:transparent;
  box-shadow:0 12px 30px rgba(255,79,154,.4);
}

.type-option input:checked + .type-card .type-sub{
  color:rgba(255,255,255,.9);
}

.type-card:hover{
  transform:translateY(-2px);
}

/* ===============================
   BUTTONS
================================= */

.btn{
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  border:none;
  cursor:pointer;
  transition:.25s;
}

.btn-primary{
  background:linear-gradient(90deg,var(--rose),var(--violet));
  color:white;
  box-shadow:
    0 8px 20px rgba(255,79,154,.4),
    0 0 40px rgba(125,92,255,.25);
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:
    0 15px 40px rgba(255,79,154,.6),
    0 0 60px rgba(125,92,255,.4);
}

.full{ width:100%; }

/* ===============================
   RESPONSIVE
================================= */

@media(max-width:1000px){

  .hero-live{
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero-live h1{
    font-size:38px;
    text-align:center;
  }

  .hero-left{
    text-align:center;
  }

  .hero-text-block{
    margin:auto;
  }
}

@media(max-width:600px){

  .page{
    padding:16px 16px 50px;
  }

  .hero-live h1{
    font-size:32px;
  }

  .event-type-switch{
    grid-template-columns:1fr;
  }
}