.buy-page{ min-height: 100vh; min-height: 100dvh;} .buy-main{ padding: 28px 16px; align-items: flex-start;} .buy-wrapper{ width: 100%; max-width: 760px;} .buy-card{ width: 100%; padding: 30px 30px 26px;} .buy-title{ display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 0.5rem;} .buy-title::before, .buy-title::after{ content: ''; flex: 0 0 auto; width: 74px; height: 9px; background-image: radial-gradient(circle at center, #00d4aa 0 2.6px, transparent 3.1px), linear-gradient(to right, rgba(0, 212, 170, 0) 0%, rgba(0, 212, 170, 0.75) 100%); background-size: 9px 9px, 62px 2px; background-position: right center, left center; background-repeat: no-repeat; opacity: 0.85;} .buy-title::before{ transform: scaleX(-1);} .buy-lead{ margin: 0 0 1.2rem; font-size: 0.86rem; line-height: 1.9; color: rgba(255, 255, 255, 0.62); text-align: center;} .buy-help{ margin: 0.55rem 0 0; font-size: 0.76rem; line-height: 1.85; color: rgba(255, 255, 255, 0.55);} .buy-stages{ display: flex; align-items: flex-start; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: buy-stage;} .buy-page:not(.buy-mode-demo) .buy-stages[data-mode='demo'], .buy-page.buy-mode-demo .buy-stages[data-mode='paid'], .buy-page:not(.buy-mode-demo) .buy-title-demo, .buy-page.buy-mode-demo .buy-title-paid{ display: none;} .buy-title-paid, .buy-title-demo{ white-space: nowrap;} .buy-stage{ display: contents;} .buy-stage-body{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 76px;} .buy-stage-dot{ counter-increment: buy-stage; display: grid; place-items: center; width: 54px; height: 54px; font-size: 1.15rem; font-weight: 800; color: rgba(255, 255, 255, 0.9); border: 2px solid rgba(255, 255, 255, 0.24); border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.42)); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;} .buy-stage-dot::before{ content: counter(buy-stage);} @supports (content: counter(buy-stage, persian)){ .buy-stage-dot::before{ content: counter(buy-stage, persian);}} .buy-stage-name{ font-size: 0.76rem; font-weight: 700; line-height: 1.4; text-align: center; color: rgba(255, 255, 255, 0.45);} .buy-stage-body::after{ content: ''; width: 40px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.16);} .buy-stage.is-done .buy-stage-dot{ color: #7ff0d4; border-color: rgba(0, 212, 170, 0.5); background: radial-gradient(circle at 50% 38%, rgba(0, 212, 170, 0.16), rgba(0, 20, 18, 0.6));} .buy-stage.is-done .buy-stage-name{ color: rgba(255, 255, 255, 0.68);} .buy-stage.is-done .buy-stage-body::after{ background: rgba(0, 212, 170, 0.45);} .buy-stage.is-current .buy-stage-dot{ color: #7ff0d4; border-color: #00d4aa; background: radial-gradient(circle at 50% 38%, rgba(0, 212, 170, 0.22), rgba(0, 24, 20, 0.75)); box-shadow: 0 0 0 7px rgba(0, 212, 170, 0.07), 0 0 22px rgba(0, 212, 170, 0.42), inset 0 0 16px rgba(0, 212, 170, 0.28);} .buy-stage.is-current .buy-stage-name{ color: #ffffff;} .buy-stage.is-current .buy-stage-body::after{ background: #00d4aa; box-shadow: 0 0 10px rgba(0, 212, 170, 0.7);} .buy-stage-link{ flex: 1 1 auto; display: flex; align-items: center; height: 54px; min-width: 12px; color: rgba(255, 255, 255, 0.2); transition: color 0.25s ease;} .buy-stage-link svg{ display: block; width: 100%; height: 16px;} .buy-stage-link path{ fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;} .buy-stage-link.is-done{ color: #00d4aa;} .buy-step{ margin: 0 0 0.5rem; padding: 0; border: 0; min-width: 0;} .buy-step[hidden]{ display: none;} .buy-step .input-label + .input-label{ margin-top: 0.85rem;} .buy-plans{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0.8rem; margin-top: 0.35rem; align-items: stretch;} @media (min-width: 561px){ .buy-plans--many{ display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0.25rem 2px 0.5rem; --buy-plan-w: max(200px, calc((100% - 1.6rem) / 3 - 0.75rem));} .buy-plans--many::-webkit-scrollbar{ display: none;} .buy-plans--many::before, .buy-plans--many::after{ content: ''; flex: 0 0 max(0px, calc((100% - var(--buy-plan-w)) / 2));} .buy-plans--many .buy-plan{ flex: 0 0 var(--buy-plan-w); scroll-snap-align: center;}} .buy-plan-stage{ position: relative;} .buy-plan{ position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.05rem 1.05rem; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.035); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;} .buy-plan:hover{ transform: translateY(-2px); border-color: rgba(0, 212, 170, 0.45);} .buy-plan.is-picked{ border-color: rgba(0, 212, 170, 0.8); background: linear-gradient(180deg, rgba(0, 212, 170, 0.13) 0%, rgba(0, 212, 170, 0.05) 55%, rgba(255, 255, 255, 0.02) 100%); box-shadow: 0 0 0 1px rgba(0, 212, 170, 0.4), 0 14px 34px rgba(0, 0, 0, 0.38);} .buy-plan input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none;} .buy-plan-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem;} .buy-plan-id{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.28rem; min-width: 0;} .buy-plan-price{ display: flex; align-items: baseline; gap: 0.3rem; direction: rtl;} .buy-plan-amount{ font-size: 1.65rem; font-weight: 800; line-height: 1.15; color: #ffffff; letter-spacing: -0.01em;} .buy-plan-cur{ font-size: 0.78rem; font-weight: 700; color: #00d4aa; white-space: nowrap;} .buy-plan-per{ font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap;} .buy-plan-free{ font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: #ffe08a; letter-spacing: 0;} .buy-plan-feats{ display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.74rem; color: rgba(255, 255, 255, 0.78);} .buy-plan-feat{ display: flex; align-items: center; gap: 0.4rem; justify-content: flex-start;} .buy-check{ flex: 0 0 auto; width: 16px; height: 16px; color: #00d4aa;} .buy-plan-feat-text{ overflow-wrap: anywhere;} .buy-plan-cta{ display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: auto; padding: 0.5rem 0.8rem; font-size: 0.8rem; font-weight: 700; border: 1px solid rgba(0, 212, 170, 0.55); border-radius: 11px; color: #7ff0d4; background: rgba(0, 212, 170, 0.08); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;} .buy-plan:hover .buy-plan-cta{ background: rgba(0, 212, 170, 0.16);} .buy-plan.is-picked .buy-plan-cta{ color: #04231d; background: #00d4aa; border-color: #00d4aa;} .buy-plan-cta-on{ display: none;} .buy-plan.is-picked .buy-plan-cta-pick{ display: none;} .buy-plan.is-picked .buy-plan-cta-on{ display: inline;} .buy-plan-nav{ display: none; position: absolute; top: 50%; z-index: 2; place-items: center; width: 34px; height: 34px; padding: 0; transform: translateY(-50%); color: #7ff0d4; background: rgba(6, 26, 24, 0.9); border: 1px solid rgba(0, 212, 170, 0.4); border-radius: 50%; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease;} .buy-plan-nav svg{ width: 17px; height: 17px;} .buy-plan-nav:hover{ background: rgba(0, 212, 170, 0.22);} .buy-plan-nav[disabled]{ opacity: 0.28; cursor: default;} .buy-plan-strip .buy-plan{ opacity: 0.5; box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.65); transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;} .buy-plan-strip .buy-plan.is-before{ transform: scale(0.94); transform-origin: right center;} .buy-plan-strip .buy-plan.is-after{ transform: scale(0.94); transform-origin: left center;} .buy-plan-strip .buy-plan.is-before:hover, .buy-plan-strip .buy-plan.is-after:hover{ opacity: 0.82; transform: scale(0.94) translateY(-2px);} .buy-plan-strip .buy-plan.is-picked{ opacity: 0.68;} .buy-plan-strip .buy-plan.is-current{ opacity: 1; transform: none; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.95); z-index: 1;} .buy-plan-strip .buy-plan-nav{ display: grid;} .buy-plan-nav--prev{ right: -4px;} .buy-plan-nav--next{ left: -4px;} .buy-plan-stage.buy-plan-strip + .buy-plan-dots{ display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.6rem;} .buy-plan-dot{ width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;} .buy-plan-dot.is-active{ background: #00d4aa; transform: scale(1.3);} .buy-plan-art{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--art-color, #00d4aa); background: radial-gradient(closest-side, var(--art-glow, rgba(0, 212, 170, 0.15)) 0%, transparent 76%); animation: buy-art-float 5s ease-in-out infinite;} @keyframes buy-art-float{ 0%, 100%{ transform: translateY(0);} 50%{ transform: translateY(-3px);}} .buy-plan-art svg{ width: 64px; height: 64px; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 9px var(--art-glow, rgba(0, 212, 170, 0.15)));} .buy-plan[data-art="1"] .buy-plan-art{ --art-color: #00d4aa; --art-glow: rgba(0, 212, 170, 0.14);} .buy-plan[data-art="2"] .buy-plan-art{ --art-color: #2ee6c1; --art-glow: rgba(0, 212, 170, 0.21);} .buy-plan[data-art="3"] .buy-plan-art{ --art-color: #7ff0d4; --art-glow: rgba(127, 240, 212, 0.22);} .buy-plan[data-art="4"] .buy-plan-art{ --art-color: #ffe08a; --art-glow: rgba(245, 197, 24, 0.2);} .buy-plan[data-art="5"] .buy-plan-art{ --art-color: #f5c518; --art-glow: rgba(245, 197, 24, 0.27);} .buy-plan[data-art="demo"] .buy-plan-art{ --art-color: #ffe08a; --art-glow: rgba(245, 197, 24, 0.16);} .buy-plan.is-picked .buy-plan-art svg{ filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 15px var(--art-glow, rgba(0, 212, 170, 0.15)));} .buy-plan-name{ font-size: 1.05rem; font-weight: 800; line-height: 1.45; color: #ffffff; overflow-wrap: anywhere;} .buy-plan-tag{ font-size: 0.72rem; line-height: 1.7; color: rgba(255, 255, 255, 0.5); overflow-wrap: anywhere;} .buy-plan-badge{ display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.6rem; font-size: 0.66rem; font-weight: 700; line-height: 1.5; white-space: nowrap; color: #04231d; background: #00d4aa; border-radius: 999px;} .buy-plan-badge--demo{ color: #ffe08a; background: rgba(245, 197, 24, 0.16); box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.45);} .buy-plan-badge--none{ visibility: hidden;} .buy-badge-icon{ flex: 0 0 auto; width: 12px; height: 12px;} .buy-plan-dots{ display: none;} .buy-main .login-input, .buy-main .login-input[dir="rtl"]{ direction: rtl; text-align: right; font-family: 'Vazirmatn', 'Vazir', sans-serif;} .buy-main .login-input::placeholder{ direction: rtl; text-align: right;} .buy-ltr, .buy-main .login-input.buy-ltr, .buy-main .login-input[dir="ltr"]{ direction: ltr; text-align: left; unicode-bidi: plaintext; font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;} .buy-main .login-input[dir="auto"]{ direction: ltr; unicode-bidi: plaintext; text-align: start; font-family: 'Vazirmatn', 'Vazir', sans-serif;} .buy-field{ display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.05rem;} .buy-input{ position: relative; display: block;} .buy-input .login-input{ width: 100%;} .buy-tick, .buy-input.is-busy::after{ position: absolute; top: 50%; width: 1.35rem; height: 1.35rem; margin-top: -0.675rem; pointer-events: none;} .buy-input[data-side="rtl"] .buy-tick, .buy-input[data-side="rtl"].is-busy::after{ left: 0.85rem;} .buy-input[data-side="ltr"] .buy-tick, .buy-input[data-side="ltr"].is-busy::after{ right: 0.85rem;} .buy-input[data-side="rtl"] .login-input{ padding-left: 2.7rem;} .buy-input[data-side="ltr"] .login-input{ padding-right: 2.7rem;} .buy-tick{ display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(0.55); transition: opacity 0.18s ease, transform 0.18s ease;} .buy-tick-icon{ display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));} .buy-input.is-ok .buy-tick{ opacity: 1; transform: scale(1);} .buy-input.is-busy .buy-tick{ opacity: 0;} .buy-input.is-busy::after{ content: ''; border: 2px solid rgba(255, 255, 255, 0.22); border-top-color: #fff; border-radius: 50%; animation: buy-spin 0.75s linear infinite;} @keyframes buy-spin{ to{ transform: rotate(360deg);}} .buy-field-note{ margin: 0; font-size: 0.74rem; line-height: 1.75; color: rgba(255, 255, 255, 0.6);} .buy-field-note.is-bad{ color: #ff9d9d;} .buy-field-note.is-ok{ color: #7ff0d4;} .buy-hint{ display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-inline-start: 0.4rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; background: none; font: inherit; font-size: 0.68rem; line-height: 1; color: rgba(255, 255, 255, 0.72); cursor: help;} .buy-hint:hover, .buy-hint:focus, .buy-hint:focus-visible{ border-color: rgba(0, 212, 170, 0.7); color: #fff;} .buy-hint-bubble{ position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 5; width: max-content; max-width: min(24rem, 100%); padding: 0.5rem 0.65rem; border: 1px solid rgba(0, 212, 170, 0.35); border-radius: 0.6rem; background: #0a211c; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.88); font-size: 0.72rem; font-weight: 400; line-height: 1.85; text-align: right; overflow-wrap: anywhere; visibility: hidden; opacity: 0; transition: opacity 0.14s ease, visibility 0.14s ease; pointer-events: none;} .buy-hint:hover + .buy-hint-bubble, .buy-hint:focus + .buy-hint-bubble{ visibility: visible; opacity: 1;} .buy-step .input-label{ position: relative;} .buy-actions-note{ margin-top: 0.6rem; text-align: center;} .buy-toast{ margin: 0.7rem 0 0; padding: 0.6rem 0.85rem; font-size: 0.82rem; line-height: 1.9; text-align: right; color: #ffd68a; background: rgba(255, 184, 76, 0.1); border: 1px solid rgba(255, 184, 76, 0.32); border-radius: 12px;} .buy-toast[hidden]{ display: none;} .buy-ltr::placeholder{ direction: rtl; text-align: right; font-family: 'Vazirmatn', 'Vazir', sans-serif;} .buy-main .login-input.buy-ph-latin::placeholder{ direction: ltr; text-align: left; font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;} .buy-actions{ display: flex; gap: 0.6rem; margin-top: 1.35rem;} .buy-btn{ flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.85rem 1.1rem; font-family: inherit; font-size: 0.92rem; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;} .buy-btn[hidden]{ display: none;} .buy-btn--primary{ color: #04241f; background: linear-gradient(135deg, #00d4aa, #008080); box-shadow: 0 8px 24px rgba(0, 128, 128, 0.35);} .buy-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 212, 170, 0.4);} .buy-page:not(.buy-mode-demo) .buy-submit-demo, .buy-page.buy-mode-demo .buy-submit-paid{ display: none;} .buy-submit.is-locked, .buy-submit.is-locked:hover{ cursor: not-allowed; transform: none; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); box-shadow: none;} .buy-btn--ghost{ flex: 0 0 auto; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16);} .buy-btn--ghost:hover{ color: #ffffff; border-color: rgba(0, 212, 170, 0.45); background: rgba(0, 212, 170, 0.1);} .buy-alt{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin: 1.15rem 0 0; padding-top: 0.9rem; font-size: 0.82rem; text-align: center; color: rgba(255, 255, 255, 0.55); border-top: 1px solid rgba(255, 255, 255, 0.08);} .buy-alt-icon{ flex: 0 0 auto; width: 17px; height: 17px; color: #00d4aa;} .buy-alt a{ color: #00d4aa; font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(0, 212, 170, 0.45);} .buy-alt a:hover{ color: #7ff0d4;} .buy-alt-sep{ margin: 0 0.55rem; opacity: 0.45;} .buy-done{ text-align: center;} .buy-done-icon{ width: 58px; height: 58px; margin: 0 auto 0.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #04241f; background: linear-gradient(135deg, #00d4aa, #008080); border-radius: 50%; box-shadow: 0 0 0 6px rgba(0, 212, 170, 0.12), 0 12px 28px rgba(0, 0, 0, 0.35);} .buy-done-lead{ margin: 0 0 1.1rem; font-size: 0.88rem; line-height: 1.95; color: rgba(255, 255, 255, 0.78);} .buy-token-box{ display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1rem; padding: 0.85rem; text-align: left; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 212, 170, 0.3); border-radius: 14px;} .buy-token-row{ display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 0.5rem; align-items: center;} .buy-token-label{ font-size: 0.76rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); text-align: right; direction: rtl;} .buy-token-value{ padding: 0.45rem 0.6rem; font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace; font-size: 0.82rem; color: #7ff0d4; background: rgba(0, 212, 170, 0.08); border-radius: 8px; word-break: break-all; direction: ltr; text-align: left; unicode-bidi: plaintext;} .buy-copy{ padding: 0.4rem 0.65rem; font: inherit; font-size: 0.74rem; font-weight: 700; color: #00d4aa; cursor: pointer; background: rgba(0, 128, 128, 0.16); border: 1px solid rgba(0, 212, 170, 0.4); border-radius: 9px;} .buy-copy:hover{ color: #04241f; background: #00d4aa;} .buy-copy.is-copied{ color: #04241f; background: #00d4aa;} .buy-copy.is-refused{ color: #4a1109; background: #ffb4a2; border-color: rgba(255, 116, 92, 0.65);} .buy-copy-status{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);} .buy-warning{ margin: 0 0 1.1rem; padding: 0.75rem 0.9rem; font-size: 0.8rem; line-height: 1.9; color: #ffd9a0; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 12px;} .buy-notice{ position: fixed; top: 14px; right: 14px; z-index: 40; display: flex; align-items: flex-start; gap: 0.55rem; max-width: min(92vw, 26rem); padding: 0.7rem 0.8rem; font-size: 0.82rem; line-height: 1.9; text-align: right; color: #ffd0d0; background: rgba(60, 14, 14, 0.97); border: 1px solid rgba(255, 116, 92, 0.55); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); animation: buy-notice-in 0.22s ease-out;} .buy-notice[hidden]{ display: none;} @keyframes buy-notice-in{ from{ opacity: 0; transform: translateY(-6px);} to{ opacity: 1; transform: none;}} .buy-notice-mark{ flex: 0 0 auto; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 800; color: #3a0d0d; background: #ff9d8a; border-radius: 50%;} .buy-notice-body{ min-width: 0;} .buy-notice-text{ margin: 0;} .buy-notice-text + .buy-notice-text{ margin-top: 0.35rem;} .buy-notice-close{ flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; padding: 0; font: inherit; font-size: 1rem; line-height: 1; color: rgba(255, 208, 208, 0.75); background: none; border: 1px solid rgba(255, 116, 92, 0.4); border-radius: 8px; cursor: pointer;} .buy-notice-close:hover, .buy-notice-close:focus-visible{ color: #3a0d0d; background: #ff9d8a; border-color: #ff9d8a;} .buy-hp{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;} @media (max-width: 560px){ .buy-card{ padding: 22px 16px 20px;} .buy-plans{ display: flex; grid-template-columns: none; gap: 0.6rem; min-height: 190px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.25rem 2px 0.9rem;} .buy-plans::-webkit-scrollbar{ display: none;} .buy-plans::before, .buy-plans::after{ content: ''; flex: 0 0 7.5%;} .buy-plan{ flex: 0 0 85%; scroll-snap-align: center; min-height: 190px; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.8); transition: opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;} .buy-plan-amount{ font-size: 1.95rem;} .buy-plan-free{ font-size: 1.6rem;} .buy-plan-art, .buy-plan-art svg{ width: 84px; height: 84px;} .buy-plan-feats{ font-size: 0.79rem; gap: 0.55rem;} .buy-plan-cta{ min-height: 44px; font-size: 0.85rem;} .buy-plan-dots{ display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.6rem;} .buy-stage-body{ width: 58px; gap: 0.4rem;} .buy-stage-dot{ width: 40px; height: 40px; font-size: 0.92rem;} .buy-stage-name{ font-size: 0.64rem;} .buy-stage-body::after{ width: 26px;} .buy-stage-link{ height: 40px; min-width: 6px;} .buy-token-row{ grid-template-columns: 1fr;} .buy-token-label{ text-align: left;}} .buy-pay{ margin: 1rem 0 0; padding: 0.9rem 1rem; text-align: right; background: rgba(255, 224, 138, 0.07); border: 1px solid rgba(255, 224, 138, 0.3); border-radius: 14px;} .buy-pay--settled{ background: rgba(0, 212, 170, 0.07); border-color: rgba(0, 212, 170, 0.32);} .buy-pay--settled .buy-pay-title{ color: #7ff0d4;} .buy-done-icon--wait{ color: #3a2405; background: linear-gradient(135deg, #ffd479, #f59e0b); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.14), 0 12px 28px rgba(0, 0, 0, 0.35);} .buy-done-mark{ display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;} .buy-done-mark .buy-sand{ fill: currentColor; stroke: none;} .buy-done-mark .buy-sand-top, .buy-done-mark .buy-sand-mound, .buy-done-mark .buy-sand-drop, .buy-done-mark .buy-sand-stream{ transform-box: fill-box;} .buy-done-mark .buy-sand-top{ transform-origin: 50% 100%; animation: buySandSink 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;} .buy-done-mark .buy-sand-mound{ transform-origin: 50% 100%; animation: buySandRise 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;} .buy-done-mark .buy-sand-stream{ stroke-width: 1; animation: buySandStream 4.6s linear infinite;} .buy-done-mark .buy-sand-drop{ transform-origin: 50% 0; animation: buySandDrop 4.6s cubic-bezier(0.55, 0, 0.75, 0.42) infinite;} .buy-done-mark .buy-sand-drop--2{ animation-delay: 0.5s;} .buy-done-mark .buy-sand-drop--3{ animation-delay: 1s;} @keyframes buySandSink{ 0%{ transform: scaleY(1); opacity: 1;} 56%{ transform: scaleY(0.6); opacity: 1;} 61%{ transform: scaleY(1); opacity: 0.3;} 70%{ transform: scaleY(1); opacity: 1;} 100%{ transform: scaleY(1); opacity: 1;}} @keyframes buySandRise{ 0%{ transform: scaleY(0.6);} 56%{ transform: scaleY(1);} 61%{ transform: scaleY(0.6);} 100%{ transform: scaleY(0.6);}} @keyframes buySandStream{ 0%, 4%{ opacity: 0;} 11%{ opacity: 0.95;} 50%{ opacity: 0.85;} 58%{ opacity: 0;} 100%{ opacity: 0;}} @keyframes buySandDrop{ 0%, 5%{ transform: translateY(0); opacity: 0;} 13%{ opacity: 0.95;} 44%{ transform: translateY(3.2px); opacity: 0.95;} 52%{ transform: translateY(3.4px); opacity: 0;} 100%{ transform: translateY(0); opacity: 0;}} @media (prefers-reduced-motion: reduce){ .buy-done-mark .buy-sand-top, .buy-done-mark .buy-sand-mound, .buy-done-mark .buy-sand-stream, .buy-done-mark .buy-sand-drop{ animation: none;} .buy-done-mark .buy-sand-mound{ transform: scaleY(1);} .buy-done-mark .buy-sand-stream, .buy-done-mark .buy-sand-drop{ opacity: 0;}} .buy-pay-title{ display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.98rem; font-weight: 700; color: #ffe08a;} .buy-pay-tag{ padding: 0.1rem 0.5rem; border: 1px solid rgba(255, 224, 138, 0.45); border-radius: 999px; font-size: 0.68rem; font-weight: 600; color: #ffe08a;} .buy-pay-tag.is-ok{ color: #7ff0d4; border-color: rgba(0, 212, 170, 0.45); background: rgba(0, 212, 170, 0.1);}.buy-pay-body{ margin: 0.35rem 0 0; font-size: 0.8rem; line-height: 1.9; color: rgba(255, 255, 255, 0.78);} .buy-pay-row{ display: flex; flex-direction: column; gap: 0.3rem; margin: 0.9rem 0 0;} .buy-pay-select{ width: 100%; margin: 0;} .buy-pay-start{ margin-top: 0.9rem; width: 100%;} .buy-pay #buy-pay-details{ margin-top: 0.9rem;} @media (prefers-reduced-motion: reduce){ .buy-plan:hover, .buy-btn--primary:hover{ transform: none;} .buy-input.is-busy::after{ animation: none;} .buy-plans{ scroll-behavior: auto;} .buy-plan-art{ animation: none;}}