/* ===============================
   Influmo — Premium Signup (Black/Gold)
   Drops-in to your existing signup.html + signup.js
   =============================== */

:root{
  --gold:#C9A227;
  --gold-200:#f5c518;
  --bg:#0d0d0f;
  --bg2:#151518;
  --panel:#101012;
  --ink:#fff;
  --muted:#c7c7c7;
  --stroke:rgba(201,162,39,.18);
  --stroke2:rgba(255,255,255,.10);
  --glow:0 0 18px rgba(201,162,39,.55);
  --shadow:0 16px 40px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 520px at 25% 0%, rgba(201,162,39,.12), transparent 55%),
    radial-gradient(900px 420px at 80% 15%, rgba(201,162,39,.08), transparent 55%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

/* Your navbar.css handles navbar. We just ensure spacing for fixed navbar */
.signup-container{
  width: min(440px, 92%);
  margin: 110px auto 60px; /* space under fixed navbar */
  padding: 26px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--bg2);
  border: 1px solid var(--stroke);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, var(--shadow);
  text-align: center;
}

.signup-title{
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--gold-200);
  letter-spacing: .3px;
  margin-bottom: 14px;
}

#signupError{
  font-size:.9rem;
  color:#ff9aa9;
  min-height:18px;
  margin-bottom:12px;
}

/* Inputs */
.signup-form input,
.signup-form select{
  width:100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,15,.72);
  color: #fff;
  font-size: .95rem;
  outline: none;
  transition: .18s ease;
}

.signup-form input:focus,
.signup-form select:focus{
  border-color: rgba(201,162,39,.45);
  box-shadow: 0 0 0 2px rgba(201,162,39,.20);
}

.signup-form select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-200) 50%),
    linear-gradient(135deg, var(--gold-200) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Button */
.signup-btn{
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
  color: #14110a;
  background: linear-gradient(180deg, var(--gold-200), var(--gold));
  transition: .18s ease;
}

.signup-btn:hover{
  filter: brightness(1.05);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.signup-btn:disabled{
  opacity: .6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ===== Collaborator extras panel ===== */
.collab-extras{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(16,16,18,.85);
  border: 1px solid rgba(255,255,255,.10);
  text-align: left;
}

.collab-extras h2{
  font-size: .95rem;
  color: var(--gold-200);
  margin-bottom: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

.collab-mode-group{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.collab-mode-group label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92rem;
  color:#e7e7e7;
  cursor:pointer;
  line-height:1.35;
}

.collab-mode-group strong{
  color: var(--gold-200);
  font-weight: 900;
}

.collab-extras input[type="radio"],
.collab-extras input[type="checkbox"]{
  accent-color: var(--gold-200);
  transform: translateY(2px);
}

/* "Open to Influmo-selected teams" box */
#individualExtras{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#individualExtras label{
  font-size:.88rem;
  color: var(--muted);
}

/* Tiny helper link style if you add one later */
a{ text-decoration:none; color: var(--gold-200); }
a:hover{ text-shadow: 0 0 10px rgba(201,162,39,.55); }

/* Mobile */
@media (max-width: 520px){
  .signup-container{
    margin-top: 100px;
    padding: 22px 16px 18px;
    border-radius: 16px;
  }
  .signup-title{ font-size: 1.35rem; }
}
/* ===== Signup Type Toggle (Individual / Team) ===== */

.signup-choice {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.choice-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #ccc;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.choice-btn:hover {
  border-color: #f5c518;
  color: #f5c518;
}

.choice-btn.active {
  background: linear-gradient(to right, #f5c518, #ffcc00);
  color: #000;
  border-color: transparent;
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.45);
  transform: scale(1.02);
}
.choice-btn{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(245,197,24,.35);
  background:#0f0f0f;
  color:#f5c518;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

.choice-btn:hover{
  background:rgba(245,197,24,.08);
  box-shadow:0 0 12px rgba(245,197,24,.35);
  transform:translateY(-1px);
}

.choice-btn.active{
  background:rgba(245,197,24,.12);
  border-color:rgba(245,197,24,.75);
  box-shadow:0 0 18px rgba(245,197,24,.55);
}