/* ============================================================
   LFG Runs Registration - native form replacing the Fillout embed.
   Loaded only on index.html. Brand-matched (black + LFG green).
   ============================================================ */

.lfgrf {
  background: #111;
  border: 1px solid rgba(153, 153, 102, 0.3);
  position: relative;
  padding: 26px 24px 22px;
  font-family: 'Barlow', sans-serif;
  color: #fff;
}
.lfgrf::before, .lfgrf::after {
  content: ''; position: absolute; width: 28px; height: 28px; pointer-events: none;
}
.lfgrf::before { top: -1px; left: -1px; border-top: 2px solid #999966; border-left: 2px solid #999966; }
.lfgrf::after  { bottom: -1px; right: -1px; border-bottom: 2px solid #999966; border-right: 2px solid #999966; }

.lfgrf-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.05; margin: 0 0 6px;
}
.lfgrf-h em { font-style: normal; color: #999966; }
.lfgrf-sub { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }

/* Progress dots */
.lfgrf-progress { display: flex; gap: 6px; margin-bottom: 18px; }
.lfgrf-progress span {
  flex: 1; height: 3px; background: rgba(255,255,255,0.1); transition: background .3s;
}
.lfgrf-progress span.done { background: #999966; }
.lfgrf-progress span.active { background: #fff; }

/* Steps */
.lfgrf-step { display: none; }
.lfgrf-step.active { display: block; animation: lfgrfIn .35s ease-out both; }
@keyframes lfgrfIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Field rows */
.lfgrf-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.lfgrf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lfgrf-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.lfgrf-label.req::after { content: ' *'; color: #999966; }
.lfgrf-hint { font-size: 11px; color: rgba(255,255,255,0.35); font-style: italic; }

.lfgrf input[type="text"],
.lfgrf input[type="email"],
.lfgrf input[type="tel"],
.lfgrf input[type="date"],
.lfgrf select,
.lfgrf textarea {
  width: 100%;
  background: #0c0c0c;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  padding: 11px 12px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.lfgrf textarea { resize: vertical; min-height: 64px; }
.lfgrf input:focus, .lfgrf select:focus, .lfgrf textarea:focus { border-color: #999966; background: #0f0f0c; }
.lfgrf select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999966' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* Phone group (country code + number) */
.lfgrf-phone { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.lfgrf-phone select { padding-right: 22px; font-size: 13px; }

/* DOB picker - Day · Month · Year, explicit order */
.lfgrf-dob { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; }
.lfgrf-dob select { padding-right: 26px; font-size: 14px; }

/* Instagram handle field - @ baked into the placeholder (no overlapping prefix) */
.lfgrf-ig-wrap { position: relative; }
.lfgrf-ig-wrap input { padding-left: 12px; }

/* Radio cards for level */
.lfgrf-radio-group { display: flex; flex-direction: column; gap: 8px; }
.lfgrf-radio {
  display: block; cursor: pointer; padding: 12px 14px;
  background: #0c0c0c; border: 1px solid rgba(255,255,255,0.08);
  transition: all .2s; position: relative;
}
.lfgrf-radio:hover { border-color: rgba(153,153,102,0.5); }
.lfgrf-radio input { position: absolute; opacity: 0; pointer-events: none; }
.lfgrf-radio .lr-h {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1; margin-bottom: 3px;
}
.lfgrf-radio .lr-sub { font-size: 12px; color: rgba(255,255,255,0.5); }
.lfgrf-radio.sel { border-color: #999966; background: rgba(153,153,102,0.10); }
.lfgrf-radio.sel .lr-h { color: #999966; }

/* Consent */
.lfgrf-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5;
  background: rgba(255,255,255,0.025); padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.06);
}
.lfgrf-consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: #999966; flex-shrink: 0; }

/* Nav buttons */
.lfgrf-nav {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);
}
.lfgrf-back {
  background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7);
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer; transition: all .2s;
}
.lfgrf-back:hover { border-color: #fff; color: #fff; }
.lfgrf-next, .lfgrf-submit {
  background: #999966; color: #0A0A0A; border: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  padding: 12px 22px; cursor: pointer; transition: all .2s;
  margin-left: auto;
}
.lfgrf-next:hover, .lfgrf-submit:hover { box-shadow: 0 0 22px rgba(153,153,102,0.5); }
.lfgrf-next:disabled, .lfgrf-submit:disabled { opacity: .5; cursor: wait; }

/* Logged-in member RSVP card (swaps in for the wizard) */
.lfgrf-rsvp-run { margin: 14px 0 4px; padding: 12px 14px; background: #0c0c0c; border: 1px solid rgba(153,153,102,0.4); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.lfgrf-rsvp-actions { display: flex; gap: 10px; margin-top: 16px; }
.lfgrf-rsvp-btn { flex: 1; padding: 14px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.8); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .18s; }
.lfgrf-rsvp-btn:hover { border-color: #999966; color: #fff; }
.lfgrf-rsvp-btn.sel { background: #999966; color: #0A0A0A; border-color: #999966; }
.lfgrf-rsvp-btn:disabled { opacity: .6; cursor: wait; }
.lfgrf-rsvp-count { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: .02em; min-height: 16px; }
.lfgrf-rsvp-count b { color: #999966; }

/* Honeypot - visually hidden but still in the DOM */
.lfgrf-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Error message */
.lfgrf-error {
  background: rgba(220,80,80,0.10); border: 1px solid rgba(220,80,80,0.3);
  color: #e58a8a; font-size: 13px; padding: 10px 12px; margin-bottom: 14px;
}

/* ===== Success state ===== */
.lfgrf-success { text-align: center; padding: 12px 4px 4px; }
.lfgrf-success-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border: 2px solid #999966; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #999966; line-height: 1;
}
.lfgrf-success-h {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: 28px; text-transform: uppercase; line-height: 1; margin: 0 0 10px;
}
.lfgrf-success-h em { font-style: normal; color: #999966; }
.lfgrf-success-sub { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; margin: 0 0 22px; }

.lfgrf-upsell {
  background: linear-gradient(180deg, rgba(153,153,102,0.08), rgba(153,153,102,0.02));
  border: 1px solid rgba(153,153,102,0.35);
  padding: 18px 18px 16px; margin-top: 6px;
  text-align: left;
}
.lfgrf-upsell-tag {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: #999966; margin-bottom: 6px;
}
.lfgrf-upsell-h {
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800;
  text-transform: uppercase; line-height: 1.1; margin: 0 0 6px;
}
.lfgrf-upsell-sub { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0 0 14px; }
.lfgrf-upsell a {
  display: inline-flex; align-items: center; gap: 8px;
  background: #999966; color: #0A0A0A; padding: 11px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.lfgrf-upsell a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(153,153,102,0.35); }

/* Responsive */
@media (max-width: 540px) {
  .lfgrf { padding: 22px 18px 18px; }
  .lfgrf-row-2 { grid-template-columns: 1fr; }
}