/* ============================================================
   CANADA CRICKET WORLD CUP — WhatsApp Registration widget
   Self-contained styles (own variables) so the widget looks the
   same on every page regardless of that page's own :root.
   Palette matches the site: deep navy + metallic gold + glass,
   with WhatsApp green reserved for the launcher + CTA only.
============================================================ */
.e11-wa{
  --wa-navy:#6E0D0D;
  --wa-navy-2:#5A0A0A;
  --wa-navy-deep:#4A0808;
  --wa-gold:#D4AF37;
  --wa-gold-soft:#E8CD7A;
  --wa-green:#25D366;
  --wa-green-deep:#128C4A;
  --wa-text:#F5F7FB;
  --wa-dim:rgba(245,247,251,0.68);
  --wa-line:rgba(255,255,255,0.14);
  --wa-radius:20px;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}
.e11-wa *{ box-sizing:border-box; }

/* ---------- floating launcher ---------- */
.wa-launcher{
  position:fixed; right:22px; bottom:22px; z-index:1150;
  width:60px; height:60px; border-radius:50%;
  border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #34e37c, var(--wa-green) 55%, var(--wa-green-deep));
  box-shadow:0 12px 34px -8px rgba(37,211,102,0.55), 0 4px 12px rgba(2,8,22,.45);
  color:#04140b;
  backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease;
}
.wa-launcher:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 44px -8px rgba(37,211,102,0.75); }
.wa-launcher:focus-visible{ outline:3px solid var(--wa-gold-soft); outline-offset:3px; }
.wa-launcher svg{ width:28px; height:28px; position:relative; z-index:1; }

/* gentle pulse ring every few seconds */
.wa-launcher::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,0.55);
  animation:wa-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.75; }
  75%{ transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
@media (max-width:560px){
  .wa-launcher{ right:16px; bottom:16px; width:54px; height:54px; }
}

/* ---------- modal overlay ---------- */
.wa-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(3,9,26,0.72);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.e11-wa.open .wa-overlay{ opacity:1; pointer-events:auto; }

.wa-box{
  position:relative;
  width:100%; max-width:480px;
  max-height:88vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--wa-navy-2), var(--wa-navy-deep));
  border:1px solid var(--wa-line);
  border-radius:var(--wa-radius);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03);
  padding:30px 28px 26px;
  transform:translateY(18px) scale(.97);
  transition:transform .32s cubic-bezier(.16,.84,.44,1);
}
.e11-wa.open .wa-box{ transform:translateY(0) scale(1); }

.wa-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--wa-line); background:rgba(255,255,255,0.05);
  color:var(--wa-text); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.wa-close:hover{ background:rgba(255,255,255,0.12); transform:rotate(90deg); }
.wa-close:focus-visible{ outline:2px solid var(--wa-gold-soft); outline-offset:2px; }

.wa-head-icon{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #34e37c, var(--wa-green) 60%, var(--wa-green-deep));
  box-shadow:0 10px 22px -8px rgba(37,211,102,.6);
  margin-bottom:14px;
}
.wa-head-icon svg{ width:24px; height:24px; color:#04140b; }

.wa-box h3{
  margin:0 0 6px; color:var(--wa-text);
  font-family:'Anton','Bebas Neue',sans-serif;
  font-size:clamp(20px,2.6vw,25px); letter-spacing:.01em;
}
.wa-box .wa-sub{
  margin:0 0 22px; color:var(--wa-dim);
  font-size:14px; line-height:1.5;
}

.wa-row{ margin-bottom:16px; }
.wa-row label{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--wa-dim);
}
.wa-row label em{ color:var(--wa-gold-soft); font-style:normal; }
.wa-row input,
.wa-row textarea{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--wa-line);
  border-radius:12px;
  padding:11px 13px;
  color:var(--wa-text);
  font-family:inherit; font-size:14px;
  transition:border-color .2s ease, background .2s ease;
}
.wa-row input::placeholder,
.wa-row textarea::placeholder{ color:rgba(245,247,251,0.38); }
.wa-row input:focus,
.wa-row textarea:focus{
  outline:none; border-color:var(--wa-gold); background:rgba(255,255,255,0.08);
}
.wa-row textarea{ resize:vertical; min-height:70px; }
.wa-row.wa-invalid input,
.wa-row.wa-invalid textarea{ border-color:#ef5470; background:rgba(239,84,112,0.08); }
.wa-err{
  display:none; margin-top:6px; font-size:12px; color:#ff8fa3;
}
.wa-row.wa-invalid .wa-err{ display:block; }

.wa-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:420px){ .wa-grid-2{ grid-template-columns:1fr; } }

.wa-actions{ display:flex; gap:12px; margin-top:20px; }
.wa-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:999px; cursor:pointer;
  padding:13px 18px; font-size:14px; font-weight:700; letter-spacing:.02em;
  font-family:inherit;
  transition:transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease, opacity .2s ease;
}
.wa-btn:focus-visible{ outline:2px solid var(--wa-gold-soft); outline-offset:2px; }
.wa-btn-send{
  background:linear-gradient(135deg, #34e37c, var(--wa-green) 55%, var(--wa-green-deep));
  color:#04140b;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
}
.wa-btn-send:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(37,211,102,.8); }
.wa-btn-send:disabled{ opacity:.6; cursor:progress; transform:none; }
.wa-btn-send svg{ width:18px; height:18px; }
.wa-btn-cancel{
  background:rgba(255,255,255,0.06); color:var(--wa-text);
  border:1px solid var(--wa-line);
}
.wa-btn-cancel:hover{ background:rgba(255,255,255,0.12); }

/* ---------- step wizard (welcome / details / price) ---------- */
.wa-progress{ display:flex; gap:6px; margin-bottom:18px; }
.wa-dot{
  height:5px; flex:1; border-radius:99px;
  background:rgba(255,255,255,0.12);
  transition:background .3s ease;
}
.wa-dot-active{ background:linear-gradient(90deg, var(--wa-gold), var(--wa-gold-soft)); }

.wa-step{ display:none; }
.wa-step.wa-step-active{ display:block; animation:wa-step-in .32s cubic-bezier(.16,.84,.44,1); }
@keyframes wa-step-in{
  from{ opacity:0; transform:translateX(10px); }
  to{ opacity:1; transform:translateX(0); }
}

.wa-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  color:var(--wa-dim); font-size:12.5px; font-weight:600;
  padding:0; margin-bottom:14px;
  transition:color .2s ease;
}
.wa-back svg{ width:14px; height:14px; }
.wa-back:hover{ color:var(--wa-gold-soft); }

/* welcome / join-another choice buttons */
.wa-choice-group{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.wa-choice{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--wa-line);
  border-radius:14px;
  padding:14px 16px;
  color:var(--wa-text);
  cursor:pointer;
  font-family:inherit;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.wa-choice:hover{ border-color:var(--wa-gold); background:rgba(255,255,255,0.08); transform:translateY(-1px); }
.wa-choice:focus-visible{ outline:2px solid var(--wa-gold-soft); outline-offset:2px; }
.wa-choice-emoji{ font-size:22px; line-height:1; }
.wa-choice-text{ display:flex; flex-direction:column; gap:2px; }
.wa-choice-text strong{ font-size:14.5px; }
.wa-choice-text small{ font-size:12px; color:var(--wa-dim); font-weight:500; }

.wa-choice-group-sm{ flex-direction:row; gap:10px; margin-top:10px; margin-bottom:18px; }
.wa-choice-sm{ padding:11px 12px; border-radius:12px; }
.wa-choice-sm .wa-choice-emoji{ font-size:17px; }
.wa-choice-sm .wa-choice-text strong{ font-size:12.5px; }
.wa-choice-selected{ border-color:var(--wa-gold); background:rgba(212,175,55,0.14); }
@media (max-width:420px){ .wa-choice-group-sm{ flex-direction:column; } }

.wa-mini-label{
  margin:20px 0 0; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--wa-dim);
}

.wa-row-hidden{ display:none; }

@keyframes wa-shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.wa-shake{ animation:wa-shake .4s ease; }

/* summary + price card on the final step */
.wa-summary{
  margin:20px 0 16px;
  border:1px solid var(--wa-line); border-radius:14px;
  background:rgba(255,255,255,0.04);
  padding:6px 16px;
}
.wa-summary-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.wa-summary-row:last-child{ border-bottom:none; }
.wa-summary-row span{ color:var(--wa-dim); }
.wa-summary-row strong{ color:var(--wa-text); text-align:right; }

.wa-price-card{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border-radius:16px; padding:20px 16px;
  background:linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  border:1px solid rgba(212,175,55,0.4);
  margin-bottom:6px;
  text-align:center;
}
.wa-price-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wa-gold-soft); }
.wa-price-amount{ font-family:'Anton','Bebas Neue',sans-serif; font-size:34px; letter-spacing:.02em; color:var(--wa-text); }

/* loading state shown briefly before the wa.me redirect */
.wa-loading{
  display:none; align-items:center; justify-content:center; gap:10px;
  margin-top:18px; padding:12px; border-radius:12px;
  background:rgba(37,211,102,0.08); border:1px solid rgba(37,211,102,.3);
  color:var(--wa-gold-soft); font-size:13px; font-weight:600;
}
.e11-wa.sending .wa-loading{ display:flex; }
.e11-wa.sending .wa-form-fields,
.e11-wa.sending .wa-actions{ opacity:.45; pointer-events:none; }
.wa-spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(232,205,122,0.35); border-top-color:var(--wa-gold-soft);
  animation:wa-spin 0.8s linear infinite;
}
@keyframes wa-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .wa-launcher::after{ animation:none; }
  .wa-spin{ animation-duration:1.4s; }
}