/* ============================================================
   XpressCoupon — "The AliExpress Stack" section
   Diagram + live calculator + featured tool. Uses tokens from styles.css.
   ============================================================ */

/* ---------------------------------------------------------- 5-step diagram */
.stack-flow{
  display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;
  margin-bottom:clamp(32px,5vw,52px);
}
.stack-node{
  position:relative; flex:1 1 150px; min-width:150px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:22px 18px; box-shadow:var(--shadow-sm); text-align:center;
}
.stack-node .sn-num{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:13px; display:grid; place-items:center;
}
.stack-node .sn-ico{
  width:52px; height:52px; margin:6px auto 14px; border-radius:15px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.stack-node.opt .sn-ico{ background:var(--green-soft); color:oklch(0.45 0.13 150); }
.stack-node .sn-ico svg{ width:26px; height:26px; }
.stack-node h3{ font-size:16px; }
.stack-node p{ font-size:13px; color:var(--ink-soft); margin-top:7px; }
.stack-node .sn-opt{ display:inline-block; margin-top:9px; font-family:var(--font-display); font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:oklch(0.45 0.13 150); background:var(--green-soft); padding:3px 8px; border-radius:999px; }
.stack-plus{ align-self:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--accent); flex:none; }
.stack-result{
  flex:1 1 100%; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(120deg, oklch(0.97 0.03 150), var(--green-soft)); border:1px solid oklch(0.85 0.08 150);
  border-radius:var(--r-lg); padding:18px 24px; text-align:center; flex-wrap:wrap;
}
.stack-result .eq{ font-family:var(--font-display); font-weight:700; font-size:22px; color:oklch(0.45 0.13 150); }
.stack-result strong{ font-family:var(--font-display); font-size:clamp(20px,3vw,28px); color:oklch(0.4 0.14 150); }
.stack-result span{ color:var(--ink-soft); font-size:14.5px; }

/* ---------------------------------------------------------- calculator */
.calc{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-xl);
  box-shadow:var(--shadow-md); overflow:hidden;
}
.calc__controls{ padding:clamp(22px,3vw,34px); }
.calc__head{ margin-bottom:22px; }
.calc__head h3{ font-size:clamp(20px,2.6vw,26px); }
.calc__head p{ font-size:14px; color:var(--ink-soft); margin-top:6px; }

.calc-field{ padding:16px 0; border-top:1px solid var(--line-soft); }
.calc-field:first-of-type{ border-top:0; }
.cf-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cf-label{ display:flex; align-items:center; gap:11px; }
.cf-ico{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.cf-ico svg{ width:20px; height:20px; }
.calc-field.opt .cf-ico{ background:var(--green-soft); color:oklch(0.45 0.13 150); }
.cf-label b{ font-family:var(--font-display); font-weight:600; font-size:15px; display:block; }
.cf-label small{ font-size:12.5px; color:var(--ink-faint); }

/* base price input */
.price-input{ position:relative; }
.price-input .cur{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-weight:700; color:var(--ink-faint); }
.price-input input{ width:100%; padding:14px 16px 14px 34px; border-radius:12px; border:1.5px solid var(--line); font:inherit; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink); background:var(--bg); }
.price-input input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); }

/* toggle switch */
.switch{ position:relative; width:48px; height:28px; flex:none; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .2s; }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s; }
.switch input:checked + .track{ background:var(--green); }
.switch input:checked + .track::after{ transform:translateX(20px); }
.switch input:focus-visible + .track{ box-shadow:0 0 0 3px var(--accent-glow); }

/* sub-controls revealed when toggled */
.cf-sub{ display:none; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-left:49px; }
.calc-field.on .cf-sub{ display:flex; }
.mini{ display:flex; flex-direction:column; gap:4px; }
.mini label{ font-size:11.5px; color:var(--ink-faint); font-weight:500; }
.mini input, .mini select{ width:110px; padding:9px 12px; border-radius:9px; border:1.5px solid var(--line); font:inherit; font-size:14px; background:var(--bg); color:var(--ink); }
.mini input:focus, .mini select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.mini.full{ flex:1; }
.mini.full select{ width:100%; }
.cf-note{ font-size:12px; margin-top:8px; padding-left:49px; color:var(--accent); font-weight:600; }

/* slider */
.range-wrap{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.range-wrap input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:var(--line); outline:none; }
.range-wrap input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer; }
.range-wrap input[type=range]::-moz-range-thumb{ width:22px; height:22px; border:3px solid #fff; border-radius:50%; background:var(--accent); box-shadow:var(--shadow-sm); cursor:pointer; }
.range-wrap .val{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--accent); min-width:48px; text-align:right; }

/* result panel */
.calc__result{ background:linear-gradient(160deg, var(--ink), oklch(0.30 0.03 35)); color:#fff; padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; }
.calc__result h4{ color:oklch(0.8 0.01 60); font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.res-orig{ font-size:16px; color:oklch(0.72 0.01 60); text-decoration:line-through; margin-top:8px; }
.res-final{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,7vw,58px); line-height:1; color:#fff; margin-top:4px; letter-spacing:-.02em; }
.res-save{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:16px; background:var(--green); color:#062; font-weight:700; font-family:var(--font-display); padding:8px 14px; border-radius:999px; font-size:15px; }
.res-bar{ height:10px; border-radius:999px; background:oklch(1 0 0 / .15); margin-top:18px; overflow:hidden; }
.res-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent-2), var(--green)); width:0; transition:width .4s cubic-bezier(.2,.8,.2,1); }
.res-pct{ font-size:13px; color:oklch(0.82 0.01 60); margin-top:8px; }
.res-break{ margin-top:20px; border-top:1px solid oklch(1 0 0 / .14); padding-top:16px; display:flex; flex-direction:column; gap:9px; }
.res-line{ display:flex; align-items:center; justify-content:space-between; font-size:14px; }
.res-line span:first-child{ color:oklch(0.82 0.01 60); display:flex; align-items:center; gap:8px; }
.res-line.muted{ opacity:.5; }
.res-line.muted span:last-child{ font-size:11.5px; }
.res-line b{ color:var(--accent-2); font-family:var(--font-display); }
.res-cta{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.res-cta .btn--primary{ background:var(--accent); }
.res-cta .btn--ghost{ background:transparent; color:#fff; border-color:oklch(1 0 0 / .35); }
.res-cta .btn--ghost:hover{ background:oklch(1 0 0 / .1); color:#fff; border-color:#fff; }

/* ---------------------------------------------------------- featured tool (XpressCoinsBot) */
.tool-feature{
  position:relative; overflow:hidden; margin-top:clamp(24px,4vw,40px);
  display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:center;
  border-radius:var(--r-xl); padding:clamp(26px,4vw,42px); color:#fff;
  background:linear-gradient(120deg, oklch(0.42 0.16 28), oklch(0.52 0.18 38) 60%, oklch(0.62 0.16 55));
  box-shadow:var(--shadow-lg);
}
.tool-feature .sparkle{ position:absolute; inset:0; background-image:radial-gradient(2px 2px at 18% 28%, oklch(1 0 0/.5), transparent), radial-gradient(2px 2px at 72% 64%, oklch(1 0 0/.4), transparent), radial-gradient(1.5px 1.5px at 48% 84%, oklch(1 0 0/.4), transparent); opacity:.7; }
.tool-feature__copy{ position:relative; z-index:1; }
.tf-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; background:oklch(1 0 0 / .18); padding:6px 13px; border-radius:999px; margin-bottom:14px; }
.tf-badge svg{ width:14px; height:14px; }
.tool-feature h3{ color:#fff; font-size:clamp(22px,3.4vw,32px); }
.tool-feature p{ color:oklch(1 0 0 / .9); margin-top:12px; max-width:46ch; }
.tf-feats{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; }
.tf-feats li{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; }
.tf-feats svg{ width:16px; height:16px; color:var(--accent-2); flex:none; }
.tool-feature .btn{ background:#fff; color:var(--accent); margin-top:22px; }
.tool-feature .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.tool-feature__visual{ position:relative; z-index:1; }
.coin-stack{ position:relative; height:180px; perspective:800px; }
.coin{ position:absolute; left:50%; width:108px; height:108px; border-radius:50%; transform:translateX(-50%); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:30px; color:oklch(0.42 0.12 70);
  background:radial-gradient(circle at 35% 30%, oklch(0.95 0.09 85), oklch(0.82 0.14 75) 60%, oklch(0.72 0.15 65));
  box-shadow:inset 0 -6px 10px oklch(0.6 0.13 60 / .5), 0 8px 16px oklch(0 0 0 / .25); border:3px solid oklch(0.88 0.12 80); }
.coin.c1{ bottom:0; animation:coinFloat 5s ease-in-out infinite; }
.coin.c2{ bottom:34px; transform:translateX(-50%) scale(.92); opacity:.95; animation:coinFloat 6s ease-in-out infinite reverse; }
.coin.c3{ bottom:70px; transform:translateX(-50%) scale(.84); opacity:.9; animation:coinFloat 7s ease-in-out infinite; }
@keyframes coinFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px){
  .calc{ grid-template-columns:1fr; }
  .tool-feature{ grid-template-columns:1fr; }
  .tool-feature__visual{ display:none; }
}
@media (max-width: 620px){
  .stack-node{ flex:1 1 100%; }
  .stack-plus{ transform:rotate(90deg); align-self:center; margin:-2px auto; }
  .cf-sub, .cf-note{ padding-left:0; }
  .mini input, .mini select{ width:100%; }
  .mini{ flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  .coin{ animation:none !important; }
}