@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

:root{
  --bg:#000000;
  --panel:#0f0f15;
  --panel2:#141421;
  --gold:#d4af37;
  --gold2:#f5e7a3;
  --text:#f7f7f7;
  --muted:#bdbdbd;
  --danger:#ff6b6b;
  --ok:#9ef0b1;
  --line:rgba(255,255,255,0.08);
  --soft:rgba(212,175,55,.14);
  --anim:420ms;
}

#bayside-vip-preorder-root *{box-sizing:border-box}

#bayside-vip-preorder-root{
  font-family:"Bebas Neue", system-ui, sans-serif;
  font-weight:400;
  letter-spacing:.8px;
  color:var(--text);
  background: var(--bg);
  padding:22px 12px 42px;
}

.bvp-wrap{width:100%; max-width:960px; margin:0 auto; display:flex; justify-content:center;}
.bvp-card{
  width:100%; max-width:780px;
  background:linear-gradient(180deg, var(--panel) 0%, #0c0c12 100%);
  border:1px solid var(--soft);
  border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset, 0 12px 40px rgba(0,0,0,.85);
  position:relative; overflow:hidden;
  padding:20px 20px 24px;
}
.bvp-card:before{
  content:""; position:absolute; inset:-60% -30% auto auto;
  width:520px;height:520px;
  background: radial-gradient(circle, rgba(212,175,55,.22), transparent 60%);
  filter: blur(35px); transform: rotate(18deg); pointer-events:none;
}

.bvp-logo{text-align:center; letter-spacing:5px; text-transform:uppercase; font-size:28px; color:var(--gold2); font-weight:400;}
.bvp-subtitle{text-align:center; color:var(--muted); font-size:14px; margin:6px 0 16px; letter-spacing:1px; font-weight:400;}

.bvp-hidden{display:none !important;}
.bvp-fade{animation: bvpFade var(--anim) ease;}
@keyframes bvpFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.bvp-vip-screen{min-height:70vh; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:10px 6px 20px;}
.bvp-vip-panel{
  background:linear-gradient(180deg, #0d0d13, #09090e);
  border:1px solid var(--line);
  border-radius:0;
  padding:18px 18px 16px;
  position:relative; overflow:hidden;
}
.bvp-vip-panel:after{
  content:""; position:absolute; left:-30%; top:-20%; width:160%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(245,231,163,.95), transparent);
  opacity:.9; animation: bvpScan 2.8s ease-in-out infinite; filter: blur(.6px);
}
@keyframes bvpScan{
  0%{transform:translateY(0); opacity:0;}
  8%{opacity:1;}
  50%{transform:translateY(340px); opacity:.9;}
  85%{opacity:.3;}
  100%{transform:translateY(520px); opacity:0;}
}

.bvp-h3{text-align:center; margin:0 0 6px; letter-spacing:2px; font-size:22px; font-weight:400;}

.bvp-field{margin-top:12px;}
.bvp-label{display:block; font-size:16px; margin-bottom:6px; letter-spacing:1px; font-weight:400;}
.bvp-input, .bvp-textarea{
  width:100%; background:var(--panel2);
  border:1px solid var(--line);
  border-radius:0; padding:10px 12px; color:var(--text);
  font-size:16px; outline:none;
  transition:border var(--anim), box-shadow var(--anim);
  font-family:"Bebas Neue", system-ui, sans-serif;
  font-weight:400; letter-spacing:1px;
}
.bvp-input:focus, .bvp-textarea:focus{
  border-color: rgba(212,175,55,.7);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.bvp-input[readonly]{background:#0c0c12; color:#dedede; border-style:dashed;}

.bvp-hint{color:var(--muted); font-size:13px; margin-top:4px; letter-spacing:.6px; font-weight:400;}
.bvp-checkbox-inline{display:flex; align-items:center; gap:8px; margin-top:6px; font-size:14px; color:#eaeaea; font-weight:400;}

.bvp-btn{
  width:100%; margin-top:16px; padding:11px 12px;
  border-radius:0; border:1px solid rgba(0,0,0,.7);
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  color:#0a0a0a; font-size:18px; text-transform:uppercase; letter-spacing:2px;
  cursor:pointer; box-shadow:0 7px 18px rgba(212,175,55,.28);
  transition:transform 160ms ease, opacity 160ms ease;
  font-family:"Bebas Neue", system-ui, sans-serif; font-weight:400;
}
.bvp-btn:hover{transform:translateY(-1px); opacity:.96;}
.bvp-btn.secondary{background:#0c0c12; color:var(--text); border:1px solid var(--line); box-shadow:none; letter-spacing:1.5px;}

.bvp-btn-row{display:flex; gap:8px; margin-top:14px;}
.bvp-error{margin-top:8px; font-size:14px; color:var(--danger); letter-spacing:1px; font-weight:400;}
.bvp-scarcity{margin-top:8px; font-size:13.5px; color:#eaeaea; text-align:center; opacity:.9; letter-spacing:1px; font-weight:400;}

.bvp-stepper{display:flex; align-items:center; gap:10px; margin:8px 0 16px;}
.bvp-step{flex:1; background:#0c0c12; border:1px solid var(--line); border-radius:0; height:10px; position:relative; overflow:hidden;}
.bvp-step-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--gold), var(--gold2)); transition:width var(--anim) ease;}
.bvp-step-labels{display:grid; grid-template-columns:repeat(4,1fr); font-size:13.5px; color:var(--muted); margin-top:4px; letter-spacing:1px; text-align:center; font-weight:400;}

.bvp-section{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.bvp-section-title{font-size:16px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; letter-spacing:1.5px; font-weight:400;}

.bvp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media(max-width:720px){.bvp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.bvp-grid{grid-template-columns:1fr;}}

.bvp-opt{
  background:#0c0c12; border:1px solid var(--line); border-radius:0;
  padding:12px 12px; cursor:pointer; min-height:76px; position:relative;
  transition:transform 160ms ease, border var(--anim), box-shadow var(--anim), background var(--anim);
  display:flex; flex-direction:column; justify-content:center; gap:6px; font-weight:400;
}
.bvp-opt:hover{
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  background:#0e0e16;
}
.bvp-opt.selected{
  border-color:rgba(212,175,55,.9);
  box-shadow:0 0 0 3px rgba(212,175,55,.14);
  background:linear-gradient(180deg, #0e0e16, #0b0b10);
}
.bvp-opt .title{font-size:17px; letter-spacing:1px; font-weight:400;}
.bvp-opt .desc{font-size:13px; color:var(--muted); letter-spacing:.8px; font-weight:400;}
.bvp-badge{
  position:absolute; top:8px; right:8px; font-size:11px; padding:3px 6px;
  border-radius:0; background:rgba(212,175,55,.14); color:var(--gold2);
  border:1px solid rgba(212,175,55,.35); letter-spacing:1px; text-transform:uppercase; font-weight:400;
}

.bvp-info{
  background:#0c0c12; border:1px solid var(--soft); border-radius:0;
  padding:10px 12px; font-size:14px; line-height:1.5; margin-top:10px; letter-spacing:.8px; font-weight:400;
}

.bvp-summary{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; font-size:14px; font-weight:400;}
.bvp-summary .item{background:#0c0c12; border:1px solid var(--line); border-radius:0; padding:8px 10px; font-weight:400;}
.bvp-summary .k{color:var(--muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:400;}
.bvp-summary .v{margin-top:4px; font-size:16px; font-weight:400;}
@media(max-width:620px){.bvp-summary{grid-template-columns:1fr;}}

.bvp-ok{color:var(--ok); letter-spacing:1.5px; font-weight:400;}

.bvp-signature-box{margin-top:12px; border:1px solid var(--line); background:#0c0c12; border-radius:0; padding:14px 14px 10px;}
.bvp-signature-label{font-size:12px; color:var(--muted); letter-spacing:1px; margin-bottom:8px;}
.bvp-signature-line{height:1px; background:linear-gradient(90deg, transparent, rgba(245,231,163,.8), transparent); margin-top:8px;}
#bvp-sigSvg{display:block;}
#bvp-sigStroke{stroke-dasharray:1000; stroke-dashoffset:1000;}

.bvp-foot{text-align:center; color:var(--muted); font-size:12.5px; margin-top:16px; opacity:.9; letter-spacing:1px; font-weight:400;}


/* Emphase Full Performance */
.bvp-info.emph{
  border-color: rgba(212,175,55,.85);
  background:#050505;
  box-shadow:0 0 0 2px rgba(212,175,55,.10) inset;
  font-size:15.5px;
  letter-spacing:1px;
}