@import url('./brand.css');

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background: #080812;
  color: #fff;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-x: hidden;
}

/* ===== BACKGROUND ===== */
.bg-wheel {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}
.bg-wheel::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 180vmax; height: 180vmax;
  transform: translate(-50%,-50%);
  background: conic-gradient(
    from 0deg,
    rgba(220,50,50,.05), rgba(255,140,0,.05),
    rgba(255,210,0,.07), rgba(50,180,80,.05),
    rgba(30,120,255,.05), rgba(160,60,220,.05),
    rgba(255,60,100,.05), rgba(220,50,50,.05)
  );
  animation: spin-bg 40s linear infinite;
  border-radius: 50%;
}
@keyframes spin-bg {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

.orb {
  position: fixed; border-radius: 50%;
  filter: blur(90px);
  pointer-events: none; z-index: 0;
  animation: float-orb 9s ease-in-out infinite;
}
.orb-1 { width:320px; height:320px; background:rgba(255,180,0,.11);  top:-130px; right:-110px; animation-delay:0s; }
.orb-2 { width:220px; height:220px; background:rgba(140,0,255,.09);  bottom:-90px; left:-90px; animation-delay:-4.5s; }
.orb-3 { width:160px; height:160px; background:rgba(255,60,0,.09);   bottom:28%; right:-50px; animation-delay:-2s; }
@keyframes float-orb {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-22px) scale(1.06); }
}

/* ===== CARD ===== */
.main-card {
  position: relative; z-index: 1; overflow: hidden;
  width: 100%; max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 26px;
  padding: 36px 30px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 36px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  animation: card-in .65s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes card-in {
  from { opacity:0; transform: translateY(44px) scale(.95); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}
@media (max-width:400px) {
  .main-card { padding: 28px 20px; }
}

/* ===== HEADER ===== */
.card-header-area {
  text-align: center;
  margin-bottom: 28px;
}
.wheel-emoji {
  width: 80px; height: 80px;
  display: block; margin: 0 auto 10px;
  animation: wobble 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255,200,0,.45));
}
@keyframes wobble {
  0%,100% { transform: rotate(-4deg); }
  50%     { transform: rotate(4deg); }
}
.card-title {
  font-size: 30px; font-weight: 900; letter-spacing: -.5px;
  background: linear-gradient(135deg,#FFD700 0%,#FF8C00 50%,#FFD700 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.card-sub {
  margin-top: 5px;
  font-size: 14px; color: rgba(255,255,255,.45);
}

/* ===== SECTION LABEL ===== */
.field-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 8px;
}

/* ===== CODE BOXES ===== */
.code-section { margin-bottom: 22px; }
.code-boxes {
  display: flex; gap: 7px; justify-content: center;
}
.code-box {
  flex: 1; min-width: 0; max-width: 62px;
  aspect-ratio: 1;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 13px;
  color: #fff; font-size: 22px; font-weight: 700;
  text-align: center; text-transform: uppercase;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
  caret-color: var(--gold);
  -webkit-tap-highlight-color: transparent;
}
.code-box:focus {
  border-color: var(--gold);
  background: rgba(255,215,0,.08);
  box-shadow: 0 0 0 3px var(--gold-glow);
  transform: scale(1.06);
}
.code-box.filled {
  border-color: rgba(255,215,0,.55);
  color: var(--gold);
}
.code-box.invalid { border-color: var(--red) !important; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}
.code-box.shake { animation: shake .38s ease; }

/* ===== DIVIDER ===== */
.section-divider {
  border: none; border-top: 1px solid rgba(255,255,255,.08);
  margin: 6px 0 20px;
}

/* ===== INPUTS ===== */
.field-group { margin-bottom: 14px; }
.input-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
@media (max-width:360px) { .input-row { grid-template-columns: 1fr; } }

.input-wrap { position: relative; }
.form-input {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 13px;
  color: #fff; font-size: 16px;
  padding: 14px 44px 14px 16px;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: rgba(255,255,255,.22); }
.form-input:focus {
  border-color: var(--gold);
  background: rgba(255,215,0,.06);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.form-input.is-valid   { border-color: var(--green); }
.form-input.is-invalid { border-color: var(--red); }

.val-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 17px; opacity: 0;
  transition: opacity .18s;
  pointer-events: none; user-select: none;
}
.form-input.is-valid   ~ .val-icon { opacity: 1; color: var(--green); }
.form-input.is-invalid ~ .val-icon { opacity: 1; color: var(--red); }

.field-error {
  font-size: 12px; color: var(--red);
  margin-top: 5px; padding-left: 4px;
  display: none;
}
.field-error.visible {
  display: block;
  animation: err-in .2s ease both;
}
@keyframes err-in {
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ===== PHONE ===== */
.phone-row { display: flex; gap: 8px; }
.phone-select {
  width: 90px; flex-shrink: 0;
  background: var(--input-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  border: 1.5px solid var(--input-border);
  border-radius: 13px;
  color: #fff; font-size: 14px;
  padding: 14px 26px 14px 11px;
  outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.phone-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.phone-select option { background: #1a1a2e; }
.phone-input-wrap { flex: 1; position: relative; }

/* ===== CHECKBOX ===== */
.agb-wrap {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer;
  padding: 13px 14px; border-radius: 13px;
  border: 1.5px solid var(--input-border);
  background: var(--input-bg);
  transition: border-color .2s, background .2s;
  margin-bottom: 18px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.agb-wrap.checked {
  border-color: rgba(0,230,118,.55);
  background: rgba(0,230,118,.06);
}
.agb-cb-input { display: none; }
.agb-box {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 7px;
  border: 2px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  transition: background .2s, border-color .2s;
  font-size: 13px; font-weight: 700; color: #fff;
}
.agb-wrap.checked .agb-box {
  background: var(--green); border-color: var(--green);
}
.agb-check-icon {
  opacity: 0; transform: scale(0);
  transition: opacity .15s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.agb-wrap.checked .agb-check-icon { opacity: 1; transform: scale(1); }
.agb-text {
  font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.55;
}
.agb-text a { color: var(--gold); text-decoration: none; }
.agb-text a:hover { text-decoration: underline; }

/* ===== BUTTON ===== */
.btn-play {
  width: 100%; padding: 16px;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 700; letter-spacing: .3px;
  color: #111;
  background: linear-gradient(135deg, #FFD700 0%, #FF9500 100%);
  cursor: pointer;
  transition: transform .14s, box-shadow .14s, opacity .2s;
  box-shadow: 0 8px 32px rgba(255,175,0,.38);
  position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn-play::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent);
  opacity: 0; transition: opacity .2s;
}
.btn-play:hover  { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(255,175,0,.48); }
.btn-play:hover::after { opacity: 1; }
.btn-play:active { transform: scale(.98); box-shadow: 0 4px 18px rgba(255,175,0,.3); }
.btn-play:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-inner { display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn-spinner {
  display: none;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(0,0,0,.25);
  border-top-color: #111;
  border-radius: 50%;
  animation: spin .55s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-play.loading .btn-inner  { display: none; }
.btn-play.loading .btn-spinner { display: block; }

/* ===== STATE SCREENS ===== */
.state-screen { display: none; text-align: center; padding: 8px 0; }
.state-screen.active {
  display: block;
  animation: card-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.state-emoji {
  font-size: 72px; line-height: 1.1;
  display: block; margin-bottom: 14px;
}
.state-emoji.pulse {
  animation: pulse-icon 2.2s ease-in-out infinite;
}
@keyframes pulse-icon {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(255,200,0,.3)); }
  50%     { transform: scale(1.07); filter: drop-shadow(0 0 28px rgba(255,200,0,.6)); }
}
.state-title {
  font-size: 26px; font-weight: 800; margin-bottom: 10px;
}
.state-sub {
  font-size: 15px; color: rgba(255,255,255,.52); line-height: 1.65;
}

/* ===== PAYMENT SCREEN ===== */
.payment-price-wrap {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin-top: 4px;
}
.payment-price {
  font-size: 36px; font-weight: 800; color: var(--gold);
  text-shadow: 0 2px 16px rgba(255,215,0,.3);
}
.payment-price-original {
  font-size: 18px; color: rgba(255,255,255,.35);
  text-decoration: line-through; display: none;
}
.payment-price-original.visible { display: inline; }
.payment-discount-badge {
  display: inline-block; margin-top: 6px;
  background: rgba(0,230,118,.15); color: var(--green);
  font-size: 13px; font-weight: 600; padding: 3px 12px;
  border-radius: 20px; border: 1px solid rgba(0,230,118,.25);
}
.coupon-section { margin-bottom: 16px; }
.coupon-input-wrap {
  display: flex; gap: 8px; align-items: stretch;
}
.coupon-input {
  flex: 1; padding: 10px 14px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 10px; color: #fff; font-size: 14px;
  text-transform: uppercase; letter-spacing: .5px;
  outline: none; transition: border-color .2s;
}
.coupon-input:focus { border-color: var(--gold); }
.coupon-input::placeholder { color: rgba(255,255,255,.3); text-transform: none; letter-spacing: 0; }
.coupon-btn {
  padding: 10px 18px; border: none; border-radius: 10px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s; white-space: nowrap;
}
.coupon-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.coupon-btn.loading { pointer-events: none; opacity: .5; }
.coupon-btn.applied {
  background: rgba(0,230,118,.15); color: var(--green);
  pointer-events: none;
}
.coupon-result {
  font-size: 13px; margin-top: 6px; text-align: center; min-height: 0;
}
.coupon-result.success { color: var(--green); }
.coupon-result.error { color: var(--red); }
.payment-hint {
  font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.6;
  margin: 0 0 16px; text-align: center;
}
.payment-element-wrap {
  margin-bottom: 16px; text-align: left; min-height: 80px;
}
.payment-processing {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,.6); padding: 16px 0;
}
#paymentScreen .field-error.visible { display: block; }
.prize-badge {
  display: inline-block;
  background: linear-gradient(135deg,#FFD700,#FF8C00);
  color: #111; font-size: 22px; font-weight: 900;
  padding: 11px 28px; border-radius: 50px;
  margin: 16px 0;
  box-shadow: 0 8px 32px rgba(255,175,0,.42);
  animation: prize-pop .5s cubic-bezier(.34,1.56,.64,1) .2s both;
}
@keyframes prize-pop {
  from { opacity:0; transform: scale(.4); }
  to   { opacity:1; transform: scale(1); }
}
.prize-desc {
  display: inline-block;
  font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.5;
  margin: 0 0 12px; text-align: center;
  background: rgba(255,215,0,.12);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 12px;
  padding: 8px 18px;
  backdrop-filter: blur(4px);
  animation: prize-pop .5s cubic-bezier(.34,1.56,.64,1) .35s both;
}

/* ===== BUZZER ===== */
.buzzer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.buzzer-outer {
  width: 200px; height: 200px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(230,57,70,.12);
  box-shadow: 0 0 0 16px rgba(230,57,70,.08), 0 0 0 32px rgba(230,57,70,.04);
  animation: buzzer-ring 2.2s ease-in-out infinite;
  margin-bottom: 28px;
}
@keyframes buzzer-ring {
  0%,100% { box-shadow: 0 0 0 16px rgba(230,57,70,.08), 0 0 0 32px rgba(230,57,70,.04); }
  50%     { box-shadow: 0 0 0 22px rgba(230,57,70,.14), 0 0 0 44px rgba(230,57,70,.07); }
}
.buzzer-btn {
  width: 160px; height: 160px;
  border-radius: 50%;
  border: none; outline: none;
  cursor: pointer;
  position: relative;
  background: radial-gradient(circle at 38% 32%, #ff6b6b 0%, #e63946 45%, #9b0000 100%);
  box-shadow:
    0 8px 0 #7a0000,
    0 10px 30px rgba(230,57,70,.7),
    inset 0 4px 16px rgba(255,255,255,.22),
    inset 0 -4px 12px rgba(0,0,0,.28);
  transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
  animation: buzzer-glow 2.2s ease-in-out infinite;
}
@keyframes buzzer-glow {
  0%,100% { box-shadow: 0 8px 0 #7a0000, 0 10px 30px rgba(230,57,70,.7),  inset 0 4px 16px rgba(255,255,255,.22), inset 0 -4px 12px rgba(0,0,0,.28); }
  50%     { box-shadow: 0 8px 0 #7a0000, 0 10px 60px rgba(230,57,70,.95), inset 0 4px 16px rgba(255,255,255,.22), inset 0 -4px 12px rgba(0,0,0,.28); }
}
.buzzer-btn::before {
  content: '';
  position: absolute; top: 14%; left: 22%;
  width: 36%; height: 22%;
  background: rgba(255,255,255,.28);
  border-radius: 50%;
  transform: rotate(-30deg);
}
.buzzer-btn:active:not(.buzzer-pressed) {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 #7a0000,
    0 4px 14px rgba(230,57,70,.6),
    inset 0 2px 8px rgba(255,255,255,.15),
    inset 0 -2px 8px rgba(0,0,0,.28);
}
.buzzer-label {
  font-size: 30px; font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  position: relative; z-index: 1;
  user-select: none;
}
.buzzer-btn.buzzer-pressed {
  opacity: .55; cursor: not-allowed;
  animation: none;
  transform: translateY(4px);
  box-shadow:
    0 4px 0 #7a0000,
    0 6px 18px rgba(230,57,70,.4),
    inset 0 4px 16px rgba(255,255,255,.12),
    inset 0 -4px 12px rgba(0,0,0,.28);
}
.buzzer-hint {
  margin-top: 14px;
  font-size: 14px; color: rgba(255,255,255,.45);
  text-align: center; line-height: 1.55;
  min-height: 2.6em;
  transition: color .3s;
}
.buzzer-spinner {
  display: none;
  width: 22px; height: 22px;
  border: 2.5px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  margin: 10px auto 0;
}
.buzzer-hint.spinning .buzzer-spinner { display: block; }

/* ===== QUEUE POSITION BADGE ===== */
.queue-position-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .3s, border-color .3s, color .3s;
  /* Default: wartend */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
}
.queue-position-badge.queue-pos-current {
  background: rgba(0,230,118,.1);
  border-color: rgba(0,230,118,.35);
  color: var(--green);
}
.queue-position-badge.queue-pos-next {
  background: rgba(255,215,0,.1);
  border-color: rgba(255,215,0,.35);
  color: var(--gold);
}
.queue-position-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ===== SOCIAL LOGIN ===== */
#socialLogin {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.btn-google,
.btn-apple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  height: 48px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.btn-google:hover,
.btn-apple:hover  { background: #e8e8e8; }
.btn-google:active,
.btn-apple:active { background: #d4d4d4; }
.btn-google.loading svg,
.btn-apple.loading svg { visibility: hidden; }
.btn-google.loading::after,
.btn-apple.loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.social-hint {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  text-align: center;
  line-height: 1.5;
}
.social-hint a { color: rgba(255,215,0,.6); text-decoration: none; }
.social-hint a:hover { text-decoration: underline; }

.social-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.social-divider::before,
.social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}
.social-divider span {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
}

/* ===== PHONE MODAL ===== */
.phone-modal {
  position: absolute; inset: 0;
  background: rgba(8,8,18,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  animation: card-in .35s cubic-bezier(.34,1.56,.64,1) both;
}
.phone-modal-inner {
  width: 100%;
  padding: 32px 24px;
  text-align: center;
}

/* ===== CONFETTI ===== */
.confetti-wrap {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -20px;
  animation: confetti-fall linear both;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ===== FORM SECTION (Step 2 Slide-In) ===== */
.form-section {
  display: none;
  overflow: hidden;
}
.form-section.visible {
  display: block;
  animation: form-slide-in .45s cubic-bezier(.34,1.15,.64,1) both;
}
/* Hinweistext oben im Formular */
.form-hint {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.4;
  display: none;
}
/* Kompaktere Abstände im Formular */
.form-section .field-group { margin-bottom: 10px; }
.form-section .input-row { margin-bottom: 10px; gap: 8px; }
.form-section .form-input { padding: 11px 40px 11px 14px; }
.form-section .phone-select { padding: 11px 26px 11px 11px; }
.form-section .agb-wrap { padding: 10px 12px; margin-bottom: 12px; }
.form-section .section-divider { margin: 4px 0 14px; }
.form-section .social-divider { margin-bottom: 14px; }
@keyframes form-slide-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== CODE LOADING INDICATOR ===== */
.code-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
}
.code-loading.active {
  display: flex;
  animation: err-in .2s ease both;
}
.code-loading-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* ===== CODE BOX STATES ===== */
.code-box.code-valid {
  border-color: var(--green);
  color: var(--green);
}
.code-boxes.loading .code-box {
  pointer-events: none;
  opacity: .6;
}

/* ===== CODE SUBMIT BUTTON ===== */
.code-submit-btn {
  margin-top: 16px;
  animation: form-slide-in .3s cubic-bezier(.34,1.15,.64,1) both;
}