/* ==========================================================================
   Axe Arena — plan checkout dialog, plan buttons and thank-you page.
   Uses the landing page tokens (landing.css); fallbacks keep it usable elsewhere.
   ========================================================================== */

/* ── Plan buttons ────────────────────────────────────────────────────── */
.axp .plan-cta { display: grid; gap: 10px; }
.axp .plan-cta.two { grid-template-columns: 1fr 1fr; }
.axp .plan-cta .btn { width: 100%; padding-left: 12px; padding-right: 12px; }
.axp .plan-cta .btn svg.i { width: 18px; height: 18px; }
.axp .nav .try + .try { margin-left: -16px; }
@media (max-width: 1100px) and (min-width: 768px) {
  .axp .plan-cta.two { grid-template-columns: 1fr; }
}

/* ── Checkout dialog ─────────────────────────────────────────────────── */
html.axs-lock { overflow: hidden; }
.axs-modal { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line-2, rgba(15,23,42,.14)); border-radius: var(--r-lg, 20px); background: var(--bg-2, #fff); color: var(--txt, #0f172a); box-shadow: var(--shadow-3, 0 24px 60px rgba(0,0,0,.25)); font-family: var(--f-sans, system-ui, sans-serif); overflow: auto; }
.axs-modal { color-scheme: light; }
[data-theme="dark"] .axs-modal { color-scheme: dark; }
.axs-modal::backdrop { background: rgba(8, 12, 30, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.axs-modal[open] { animation: axs-in .28s var(--ease, ease-out); }
@keyframes axs-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.axs-box { position: relative; display: grid; gap: 14px; padding: 28px 24px 22px; margin: 0; }
.axs-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line, rgba(15,23,42,.08)); background: transparent; color: var(--txt-2, #475569); font-size: 22px; line-height: 1; cursor: pointer; }
.axs-x:hover { background: var(--bg-3, #f1f5f9); color: var(--txt, #0f172a); }
.axs-eyebrow { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary, #635BFF); }
.axs-box h3 { margin: -8px 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--txt, #0f172a); }
.axs-sum { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3, #f1f5f9); font-size: .9rem; color: var(--txt-2, #475569); }
.axs-sum b { font-size: 1.15rem; color: var(--txt, #0f172a); white-space: nowrap; }
.axs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.axs-box label, .axs-lbl { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--txt-2, #475569); }
.axs-box input { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2, rgba(15,23,42,.14)); background: var(--bg-2, #fff); color: var(--txt, #0f172a); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.axs-box input:focus { outline: none; border-color: var(--c-primary, #635BFF); box-shadow: 0 0 0 3px rgba(99, 91, 255, .18); }
#axs-pay { display: grid; gap: 6px; }
#axs-pay[hidden] { display: none; }
.axs-card { min-height: 90px; }
.axs-sk { height: 50px; border-radius: 12px; background: var(--bg-3, #f1f5f9); animation: axs-pulse 1.4s ease-in-out infinite; }
@keyframes axs-pulse { 50% { opacity: .5; } }
.axs-test { margin: 0; font-size: .78rem; color: #B45309; background: rgba(245, 158, 11, .14); border-radius: 8px; padding: 6px 10px; }
.axs-err { padding: 10px 12px; border-radius: 10px; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); color: #DC2626; font-size: .88rem; }
[data-theme="dark"] .axs-err { color: #FCA5A5; }
.axs-go { width: 100%; min-height: 52px; font-size: 1.02rem; }
.axs-go[disabled] { opacity: .7; cursor: progress; transform: none; }
.axs-fine { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .76rem; color: var(--txt-3, #94a3b8); text-align: center; }
.axs-fine svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 480px) {
  .axs-row { grid-template-columns: 1fr; }
  .axs-box { padding: 24px 16px 18px; }
}

/* ── Thank-you page ──────────────────────────────────────────────────── */
.axs-ty { min-height: 100vh; background: radial-gradient(900px 480px at 50% -10%, rgba(99, 91, 255, .18), transparent 70%), var(--bg); }
.axs-ty-nav { height: var(--nav-h, 72px); display: flex; align-items: center; }
.axs-ty-nav .wrap { width: 100%; }
.axs-ty main { padding: 32px 16px 96px; }
.axs-ty-card { max-width: 620px; margin: 0 auto; padding: 44px 36px; border-radius: var(--r-xl, 28px); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); text-align: center; display: grid; gap: 18px; justify-items: center; }
.axs-ty-card h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.axs-ty-card .lead { margin: 0 auto; }
.axs-ty-check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 185, 129, .14); animation: axs-pop .5s var(--spring, ease-out); }
.axs-ty-check svg { width: 38px; height: 38px; fill: none; stroke: var(--c-success, #10B981); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: axs-draw .5s .25s ease-out forwards; }
@keyframes axs-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes axs-draw { to { stroke-dashoffset: 0; } }
.axs-ty-sum { width: 100%; margin: 4px 0; padding: 6px 18px; border-radius: 14px; background: var(--bg-3); text-align: left; }
.axs-ty-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.axs-ty-sum div:last-child { border-bottom: 0; }
.axs-ty-sum dt { color: var(--txt-3); }
.axs-ty-sum dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
.axp .axs-ty-dl { width: 100%; min-height: 56px; font-size: 1.05rem; white-space: normal; }
.axs-ty-dl small { opacity: .8; font-weight: 500; }
.axs-ty-hint { color: var(--txt-3); font-size: .88rem; margin: -6px 0 6px; }
@media (max-width: 480px) { .axs-ty-card { padding: 32px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .axs-modal[open], .axs-ty-check, .axs-ty-check svg, .axs-sk { animation: none; }
  .axs-ty-check svg { stroke-dashoffset: 0; }
}

/* Checkout button when landing.css is not on the page (checkout opened from any theme page) */
.axs-modal .axs-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--c-primary, #635BFF), var(--c-primary-2, #8B5CF6)); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(99, 91, 255, .35); }
.axs-modal .axs-go .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: axs-rot .7s linear infinite; }
@keyframes axs-rot { to { transform: rotate(360deg); } }

/* Plan picker inside the checkout (generic "Buy now" buttons) */
.axs-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.axs-pick[hidden] { display: none; }
.axs-pick button { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line-2, rgba(15,23,42,.14)); background: var(--bg-2, #fff); color: var(--txt, #0f172a); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.axs-pick button b { font-size: .9rem; }
.axs-pick button span { font-size: .8rem; color: var(--txt-3, #94a3b8); }
.axs-pick button:hover { border-color: color-mix(in srgb, var(--c-primary, #635BFF) 55%, transparent); }
.axs-pick button.on { border-color: var(--c-primary, #635BFF); background: color-mix(in srgb, var(--c-primary, #635BFF) 10%, var(--bg-2, #fff)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #635BFF) 18%, transparent); }
.axs-pick button.on span { color: var(--txt-2, #475569); }