/* ==========================================================================
   WhatsApp checkout page (.lss-wac*)
   ========================================================================== */

.lss-wac-page{padding-top:var(--header-h)}
.lss-wac{min-height:calc(100vh - var(--header-h) - 200px);display:flex;align-items:center;justify-content:center;padding:36px 20px 60px}
.lss-wac__card{width:100%;max-width:640px;border-radius:24px;padding:34px 30px;position:relative;overflow:hidden}
.lss-wac__card::before{content:"";position:absolute;inset:0;padding:1px;border-radius:24px;background:var(--grad-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}

.lss-wac__head{text-align:center;margin-bottom:22px}
.lss-wac__title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;color:#fff;margin:0 0 8px;text-shadow:0 0 26px rgba(56,209,255,.3)}
.lss-wac__sub{font-size:14px;color:var(--silver-500);margin:0;line-height:1.7}

/* Steps */
.lss-wac__steps{display:flex;align-items:center;justify-content:center;gap:6px;margin:22px 0 26px}
.lss-wac__step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;width:96px;text-align:center}
.lss-wac__dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--silver-500);background:var(--navy-800);border:1px solid var(--glass-border)}
.lss-wac__step.done .lss-wac__dot{color:#fff;background:linear-gradient(135deg,var(--blue-500),var(--cyan-400));border-color:transparent}
.lss-wac__step.active .lss-wac__dot{color:#fff;background:#25d366;border-color:transparent;box-shadow:0 0 0 5px rgba(37,211,102,.18)}
.lss-wac__step small{font-size:11.5px;color:var(--silver-500)}
.lss-wac__step.active small,.lss-wac__step.done small{color:var(--silver-300)}
.lss-wac__bar{flex:1;height:2px;max-width:38px;background:var(--glass-border);border-radius:2px}
.lss-wac__bar.done{background:linear-gradient(90deg,var(--cyan-400),#25d366)}

/* Order summary */
.lss-wac__summary{border-radius:16px;padding:16px 16px 6px;margin-bottom:22px}
.lss-wac__sumhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12.5px;color:var(--silver-500);flex-wrap:wrap;gap:6px}
.lss-wac__ref{font-family:var(--font-display);font-weight:800;color:var(--cyan-400);direction:ltr;display:inline-block}
.lss-wac__item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lss-wac__item-img img{width:54px;height:54px;border-radius:12px;object-fit:cover;border:1px solid var(--glass-border)}
.lss-wac__item-name{font-size:13.5px;font-weight:700;color:var(--silver-100);line-height:1.5}
.lss-wac__item-qty{font-size:12px;color:var(--silver-500)}
.lss-wac__item-total{margin-inline-start:auto;font-weight:800;color:#fff;white-space:nowrap}
.lss-wac__total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px;font-family:var(--font-display)}
.lss-wac__total span:first-child{color:var(--silver-300);font-weight:700}
.lss-wac__total span:last-child{font-size:1.4rem;font-weight:800;color:#fff}

/* Countdown */
.lss-wac__countdown{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px}
.lss-wac__ring{position:relative;width:120px;height:120px}
.lss-wac__ring svg{transform:rotate(-90deg);width:120px;height:120px}
.lss-wac__ring .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:8}
.lss-wac__ring .prog{fill:none;stroke:#25d366;stroke-width:8;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(37,211,102,.7))}
.lss-wac__ring.run .prog{animation:wac-ring 5s linear forwards}
@keyframes wac-ring{to{stroke-dashoffset:339.29}}
.lss-wac__ring-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lss-wac__ring-icon svg{width:40px;height:40px;color:#25d366;transform:none;animation:wac-pulse 1.4s ease-in-out infinite}
@keyframes wac-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.lss-wac__count-text{font-size:14px;color:var(--silver-300);text-align:center}

/* Buttons */
.lss-wac__go{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;border:0;border-radius:16px;font-family:var(--font-display);font-size:16.5px;font-weight:800;color:#fff;background:#25d366;box-shadow:0 12px 34px -10px rgba(37,211,102,.75);transition:transform .25s,box-shadow .25s;margin-bottom:14px}
.lss-wac__go:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(37,211,102,.9)}
.lss-wac__go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lss-wac__go svg{width:24px;height:24px}
.lss-wac__go--brand{background:linear-gradient(135deg,var(--blue-500),var(--cyan-400) 60%,var(--magenta-400));box-shadow:0 12px 34px -10px rgba(46,155,255,.7)}
.lss-wac__links{display:flex;gap:18px;justify-content:center;margin-bottom:22px}
.lss-wac__links a{font-size:13px;color:var(--silver-500);transition:color .2s}
.lss-wac__links a:hover{color:var(--cyan-400)}

/* Trust + reassurance */
.lss-wac__trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.lss-wac__trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--silver-300);padding:7px 12px;border-radius:999px;background:var(--navy-800);border:1px solid var(--glass-border)}
.lss-wac__trust svg{width:15px;height:15px;color:var(--cyan-400)}
.lss-wac__reassure{text-align:center;font-size:12.5px;color:var(--silver-500);line-height:1.7;margin:0}

.lss-wac__cancelled{text-align:center;font-size:12.5px;color:#f0b429;margin:10px 0 0;display:none}
.lss-wac__cancelled.show{display:block}

/* Empty state */
.lss-wac__empty{text-align:center}
.lss-wac__empty-icon{display:flex;justify-content:center;color:var(--cyan-400);margin-bottom:14px;opacity:.85}
.lss-wac__empty .lss-wac__go{max-width:280px;margin-inline:auto}

@media(max-width:520px){
  .lss-wac__card{padding:26px 18px}
  .lss-wac__step{width:82px}
}
@media (prefers-reduced-motion: reduce){
  .lss-wac__ring.run .prog{animation:none;stroke-dashoffset:0}
  .lss-wac__ring-icon svg{animation:none}
}