.ck-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.93); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.ck-overlay.open{ opacity:1; pointer-events:all; }
.ck-box{
  background:var(--black-card); border:1px solid rgba(255,255,255,.2);
  border-radius:10px; width:100%; max-width:540px; max-height:92vh;
  overflow-y:auto; transform:translateY(20px); transition:transform .3s;
}
.ck-overlay.open .ck-box{ transform:translateY(0); }
.steps{
  display:flex; background:#000; border-radius:10px 10px 0 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.step{ flex:1; text-align:center; padding:.9rem .4rem; position:relative; }
.step-n{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  color:var(--text-muted); display:flex; align-items:center; justify-content:center;
  margin:0 auto .25rem; font-family:'Bebas Neue',sans-serif; font-size:.85rem;
}
.step.active .step-n{ background:var(--accent); color:var(--black); border-color:var(--accent); box-shadow:0 0 15px var(--gold-neon-glow); }
.step-l{
  font-family:'Barlow Condensed',sans-serif; font-size:.7rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted);
}
.step.active .step-l{ color:var(--accent); text-shadow:0 0 10px var(--gold-neon-glow); }

.ck-step{ display:none; padding:1.5rem; }
.ck-step.active{ display:block; }
.ck-step h3{
  font-family:'Bebas Neue',sans-serif; font-size:1.3rem;
  color:var(--accent); letter-spacing:1.5px; margin-bottom:.4rem;
  text-shadow:0 0 15px var(--gold-neon-glow);
}
.ck-step .sub{ color:var(--text-muted); font-size:.85rem; margin-bottom:1.2rem; }

.fg{ margin-bottom:.75rem; }
.fl{
  display:block; font-family:'Barlow Condensed',sans-serif;
  font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:.3rem;
  text-shadow:0 0 10px var(--gold-neon-glow);
}
.fc{
  width:100%; padding:.6rem .85rem;
  background:rgba(20,20,20,.95); border:1px solid rgba(255,255,255,.2);
  border-radius:4px; color:var(--white); font-family:'Barlow',sans-serif;
  font-size:.9rem; outline:none;
  color-scheme: dark;
}
.fc:focus{ border-color:var(--accent); box-shadow:0 0 15px var(--gold-neon-glow); }
.fc option,
select.fc option{ background:#1a1a1a; color:#F5F5F0; }

.order-summ{
  display:flex; flex-direction:column; gap:.5rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  padding:.85rem; border-radius:6px; margin-bottom:.6rem;
}
.os-item{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--silver); }
.os-item b{ color:var(--white); }
.os-total{
  border-top:1px solid rgba(255,255,255,.2); padding-top:.6rem; margin-top:.4rem;
  display:flex; justify-content:space-between;
}
.os-total span:last-child{
  font-family:'Bebas Neue',sans-serif; color:var(--accent); font-size:1.5rem;
  text-shadow:0 0 20px var(--gold-neon-glow);
}

.clubs-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.4rem;
  max-height:240px; overflow-y:auto; padding:.4rem 0;
}
.club-pill{
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.78rem;
  padding:.4rem .6rem; border-radius:4px; cursor:pointer;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.03);
  color:var(--silver); text-align:center; transition:all .2s;
}
.club-pill:hover{ border-color:var(--accent); color:var(--accent); text-shadow:0 0 10px var(--gold-neon-glow); }
.club-pill.active{ background:rgba(255,255,255,.18); color:var(--accent); border-color:var(--accent); box-shadow:0 0 15px var(--gold-neon-glow); }

.ck-nav{
  display:flex; gap:.6rem; justify-content:space-between;
  padding:1rem 1.5rem; border-top:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.6);
}
.btn-back, .btn-next{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.85rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:.7rem 1.4rem; border-radius:4px; cursor:pointer; border:none;
}
.btn-back{ background:rgba(255,255,255,.05); color:var(--silver); border:1px solid rgba(255,255,255,.12); }
.btn-next{ background:var(--accent); color:var(--black); box-shadow:0 0 20px var(--gold-neon-glow); }
.btn-pay{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); box-shadow:0 0 25px var(--gold-neon-glow); }
.success-screen{ text-align:center; padding:1rem; }
.stripe-btn{
  display:inline-block; padding:1rem 2.5rem;
  background:var(--accent); color:var(--black);
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1rem; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; border-radius:4px;
  box-shadow:0 0 25px var(--gold-neon-glow);
}

@media (max-width: 768px){
  .ck-overlay{ padding:.4rem; align-items:flex-start; }
  .ck-box{ max-height:98vh; margin-top:.5rem; }
  .steps{ padding:.2rem; }
  .step{ padding:.7rem .2rem; }
  .step-n{ width:22px; height:22px; font-size:.75rem; }
  .step-l{ font-size:.6rem; letter-spacing:1px; }
  .ck-step{ padding:1.1rem; }
  .ck-step h3{ font-size:1.05rem; }
  .ck-step .sub{ font-size:.78rem; }
  .fl{ font-size:.7rem; }
  .fc{ font-size:16px; padding:.55rem .75rem; }
  .clubs-grid{
    grid-template-columns:repeat(auto-fill,minmax(95px,1fr));
    gap:.35rem; max-height:200px;
  }
  .club-pill{ font-size:.72rem; padding:.35rem .5rem; }
  .ck-nav{ padding:.85rem 1.1rem env(safe-area-inset-bottom, .85rem); }
  .btn-back, .btn-next{ font-size:.78rem; padding:.65rem 1rem; letter-spacing:1.2px; }
  .order-summ{ padding:.7rem; }
  .os-item{ font-size:.8rem; }
  .os-total span:last-child{ font-size:1.3rem; }
  .stripe-btn{ padding:.85rem 1.8rem; font-size:.92rem; }
}