/* =====================================================================
   HeySwaey — the buy window (assets/js/checkout.js): a small Mac window
   over a blurred page, then Paddle's checkout.
   ===================================================================== */

.buy {
  width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0;
  border: 0; border-radius: 16px; background: transparent; color: var(--ink); overflow: visible;
}
.buy::backdrop { background: rgba(8, 20, 40, .28); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
.buy[open] { animation: buyIn .42s var(--ease-spring); }
.buy[open]::backdrop { animation: buyFade .3s var(--ease-out); }
@keyframes buyIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes buyFade { from { opacity: 0; } }

.buy-win { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-win), 0 40px 90px -30px rgba(8, 30, 70, .55); }
.buy-bar { position: relative; background: #f6f6f6; border-bottom: .5px solid rgba(0,0,0,.1); }
/* the red light closes the window, like on a Mac */
.buy-close {
  width: 12px; height: 12px; margin: 0; padding: 0; border-radius: 50%; flex: none;
  background: var(--tl-red); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); cursor: pointer; position: relative;
}
.buy-close::before, .buy-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 1.2px; border-radius: 1px;
  background: rgba(80, 0, 0, .75); opacity: 0; transition: opacity .15s;
}
.buy-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.buy-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.buy-bar:hover .buy-close::before, .buy-bar:hover .buy-close::after, .buy-close:focus-visible::before, .buy-close:focus-visible::after { opacity: 1; }
.buy-close:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }

.buy-body { padding: 24px 26px 22px; }
.buy-plan { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.buy-plan img { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 6px 12px rgba(10, 40, 90, .22)); }
.buy-plan b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.buy-plan span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--mute); }

.buy-label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.buy-input {
  display: block; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
  font: 400 16px/1 var(--font-sans); color: var(--ink); background: #f5f5f7;
  border: 1px solid rgba(0,0,0,.08); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.buy-input:focus { background: #fff; border-color: var(--electric); box-shadow: 0 0 0 4px rgba(var(--electric-rgb), .16); }
.buy-hint { margin: 8px 0 18px; font-size: 13.5px; color: var(--mute); }
.buy-error { margin: -8px 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: #8a1c12; background: #fff1ef; }
.buy-error[hidden] { display: none; }
.buy-go[disabled] { opacity: .7; pointer-events: none; }
.buy-fine { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 12.5px; color: var(--mute-2); text-align: center; }
.buy-fine svg { width: 12px; height: 12px; flex: none; }
.buy-soon { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .buy[open], .buy[open]::backdrop { animation: none; }
}