/* ===== NEO Padel Hub — WAITLIST MODAL =====
   Shared by the Immersive, Journal and Post pages. Pairs with
   waitlist.js. Uses the brand tokens from colors_and_type.css.   */

.wl{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.2,.7,.2,1)}
.wl.is-open{opacity:1;pointer-events:auto}
/* scrim + panel fill deliberately match .modal__scrim / .modal__panel in immersive.css
   so the waitlist reads as the same component family as the sponsor/partner modals */
.wl__scrim{position:absolute;inset:0;background:rgba(6,9,32,.72);backdrop-filter:blur(3px)}

.wl__panel{position:relative;width:100%;max-width:440px;background:var(--ink,#0A0F33);color:#fff;
  padding:40px 36px 36px;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 42px) 0,100% 42px,100% 100%,42px 100%,0 calc(100% - 42px));
  transform:translateY(20px) scale(.97);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.wl.is-open .wl__panel{transform:translateY(0) scale(1)}
body.sharp .wl__panel{clip-path:none;border-radius:0}
body.round .wl__panel{clip-path:none;border-radius:22px}

.wl__in{position:relative}

.wl__close{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:999px;cursor:pointer;transition:background .16s}
.wl__close:hover{background:rgba(255,255,255,.2)}
.wl__close svg{width:17px;height:17px}

.wl__kick{font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--neo-orange)}
.wl__t{font-weight:800;text-transform:uppercase;font-size:30px;line-height:.98;letter-spacing:-.02em;
  margin:12px 0 10px;color:#fff}
.wl__sub{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 26px}

/* ---------- field ---------- */
.wl__field{position:relative;margin-bottom:8px}
.wl__input{width:100%;font-family:var(--font-sans);font-size:16px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.07);border:1.6px solid rgba(255,255,255,.18);border-radius:var(--r-sm);
  padding:15px 46px 15px 16px;transition:border-color .18s,background .18s}
.wl__input::placeholder{color:rgba(255,255,255,.38)}
.wl__input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.wl__field.is-valid .wl__input{border-color:#1E9E6A}
.wl__field.is-invalid .wl__input{border-color:#E5342B}

/* live type indicator (email / phone) + validity tick */
.wl__mark{position:absolute;top:50%;right:14px;transform:translateY(-50%);display:flex;align-items:center;
  gap:6px;pointer-events:none;opacity:0;transition:opacity .18s}
.wl__field.is-valid .wl__mark{opacity:1}
.wl__mark svg{width:19px;height:19px;color:#1E9E6A}

.wl__kind{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);min-height:17px;margin-bottom:18px;
  opacity:0;transform:translateY(-3px);transition:opacity .18s,transform .18s}
.wl__kind.show{opacity:1;transform:translateY(0)}
.wl__kind svg{width:13px;height:13px;color:var(--neo-orange)}
.wl__kind.err{color:#FF8A80}

/* ---------- submit button with state animation ---------- */
.wl__submit{position:relative;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;font-size:15px;border:none;cursor:pointer;padding:16px 28px;
  background:var(--neo-orange);color:#fff;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,15px 100%,0 calc(100% - 15px));
  transition:transform .16s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .16s}
body.sharp .wl__submit{clip-path:none;border-radius:0}
body.round .wl__submit{clip-path:none;border-radius:14px}
.wl__submit:hover:not(:disabled){background:#ff5d16;transform:translateY(-2px);box-shadow:0 14px 34px rgba(253,77,1,.4)}
.wl__submit:active:not(:disabled){transform:scale(.98)}
.wl__submit:disabled{opacity:.45;cursor:not-allowed}
.wl__submit svg{width:18px;height:18px}

/* label swaps out while the states animate */
.wl__submit .lbl{display:inline-flex;align-items:center;gap:10px;transition:opacity .18s,transform .18s}
.wl__submit.loading .lbl,.wl__submit.done .lbl{opacity:0;transform:translateY(-6px)}

/* spinner */
.wl__spin{position:absolute;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;opacity:0;animation:wlspin .7s linear infinite}
.wl__submit.loading .wl__spin{opacity:1}
@keyframes wlspin{to{transform:rotate(360deg)}}

/* success tick — stroke draws itself on */
.wl__submit.done{background:#1E9E6A}
.wl__tick{position:absolute;width:26px;height:26px;opacity:0}
.wl__submit.done .wl__tick{opacity:1}
.wl__tick circle,.wl__tick path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wl__tick circle{stroke-dasharray:76;stroke-dashoffset:76}
.wl__tick path{stroke-dasharray:26;stroke-dashoffset:26}
.wl__submit.done .wl__tick circle{animation:wldraw .4s cubic-bezier(.2,.7,.2,1) forwards}
.wl__submit.done .wl__tick path{animation:wldraw .28s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes wldraw{to{stroke-dashoffset:0}}

.wl__fine{font-size:12px;line-height:1.5;color:rgba(255,255,255,.45);margin:16px 0 0;text-align:center}

/* ---------- success view ---------- */
.wl__done{display:none;text-align:center;padding:14px 0 6px}
.wl.is-done .wl__form{display:none}
.wl.is-done .wl__done{display:block}
.wl__done .ring{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(30,158,106,.16);border:2px solid #1E9E6A;animation:wlpop .42s cubic-bezier(.2,1.4,.4,1) both}
.wl__done .ring svg{width:34px;height:34px;color:#1E9E6A}
@keyframes wlpop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.wl__done h4{font-weight:800;text-transform:uppercase;font-size:24px;letter-spacing:-.01em;margin:0 0 10px;color:#fff}
.wl__done p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 24px}
.wl__done .wl__val{color:#fff;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .wl,.wl__panel,.wl__submit,.wl__kind,.wl__mark{transition:none}
  .wl__spin{animation:none}
  .wl__tick circle,.wl__tick path,.wl__done .ring{animation:none;stroke-dashoffset:0}
}

@media (max-width:520px){
  .wl__panel{padding:34px 22px 28px}
  .wl__t{font-size:25px}
}