/* eplie.com/checkout: a calm, centred two-column checkout. Ivory summary (42%) beside a white payment panel (58%). */
body.co { background: var(--ivory); color: var(--text); font-size: 15px; }
.co-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 40px; }
.muted { color: var(--text-2); } .small { font-size: 13px; }

.co-head { border-bottom: 1px solid var(--line); background: var(--white); }
.co-head__row { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.co-head img { height: 22px; width: auto; }
.co-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.co-back:hover { color: var(--text); }
.co-back svg, .perks svg, .acct__icon svg, .secure svg, .state__icon svg, .sum__toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.co-back svg { width: 16px; height: 16px; }

.co-grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 40px; align-items: start; padding-top: 40px; padding-bottom: 40px; }

/* Summary */
.sum { background: var(--warm); border: 1px solid var(--line); border-radius: 16px; padding: 28px; position: sticky; top: 24px; }
.sum__toggle { display: none; }
.label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.test-pill { padding: 2px 8px; border-radius: 99px; background: #fff3cd; color: #7a5b00; font-size: 11px; letter-spacing: 0; text-transform: none; }
.sum__title { margin-top: 8px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sum__desc { margin-top: 4px; font-size: 14px; color: var(--text-2); }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 20px; padding: 4px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); }
.seg button { height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button[aria-checked="true"] { background: var(--text); color: #fff; }
.seg button:disabled { cursor: default; }
.seg button:not([aria-checked="true"]):not(:disabled):hover { color: var(--text); }
.seg button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.seg__save { padding: 1px 6px; border-radius: 6px; background: var(--good-tint); color: var(--good); font-size: 11px; font-weight: 700; }
.seg button[aria-checked="true"] .seg__save { background: rgb(255 255 255 / .18); color: #fff; }

.plan-line { display: grid; gap: 2px; margin-top: 16px; font-size: 14px; }
.plan-line strong { font-size: 15px; }
.plan-line [data-plan-note] { font-size: 13px; }

.perks { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 14px; color: #34383d; }
.perks li { display: flex; align-items: center; gap: 10px; }
.perks svg { width: 16px; height: 16px; flex: none; color: var(--coral); stroke-width: 2.4; }

.order { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; }
.order > div { display: flex; justify-content: space-between; gap: 16px; }
.order dt { color: var(--text-2); }
.order dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.order__total { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--line); align-items: baseline; }
.order__total dt { color: var(--text); font-weight: 600; }
.order__total dd { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.recur { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.coupon { margin-top: 14px; }
.coupon__open { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.coupon__row { display: flex; gap: 8px; margin-top: 10px; }
.coupon__row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--white); font: inherit; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
.coupon__row input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }
.coupon__apply { height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--text); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.coupon__apply:disabled { opacity: .55; cursor: default; }
.coupon__msg { margin-top: 8px; font-size: 13px; }
.coupon__msg--ok { color: var(--good); } .coupon__msg--bad { color: var(--bad); }
.sum__links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--text-3); }
.sum__links a { color: var(--text-2); }

/* Payment */
.pay { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 28px 32px; box-shadow: 0 1px 2px rgb(16 24 40 / .04); min-width: 0; }
.pay__title { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.acct { margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; display: flex; align-items: center; gap: 12px; }
.acct small { display: block; font-size: 12px; color: var(--text-2); }
.acct--ok { background: var(--good-tint); border-color: transparent; }
.acct__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; flex: none; }
.acct__icon svg { width: 15px; height: 15px; stroke-width: 2.6; }
.alert { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bad-tint); color: var(--bad); font-size: 14px; }

.paddle-box { position: relative; min-height: 450px; margin-top: 16px; }
.paddle-checkout { min-width: 286px; }
.frame-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; }
.frame-loading .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.secure svg { width: 14px; height: 14px; }

.sk { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, #ece9e4 0%, #f6f4f1 50%, #ece9e4 100%); background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; vertical-align: middle; }
.sk--num { height: 12px; width: 60px; } .sk--big { height: 22px; width: 96px; } .sk--line { height: 12px; width: 60%; } .sk--field { height: 44px; width: 100%; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

/* States */
.state h2 { margin: 16px 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.state > p { color: var(--text-2); }
.state > p + p { margin-top: 10px; }
.state__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.state__icon svg { width: 22px; height: 22px; }
.state__icon--good { background: var(--good-tint); color: var(--good); }
.state__icon--bad { background: var(--bad-tint); color: var(--bad); }
.state__icon--wait { background: var(--warn-tint); color: var(--warn); }
.spinner { display: block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--coral); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.facts { margin: 4px 0 16px; padding: 14px 16px; border-radius: 10px; background: var(--ivory); border: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; }
.facts dt { color: var(--text-2); } .facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.hints { margin: 14px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-2); display: grid; gap: 4px; }
.hints a, .state a:not(.btn) { color: var(--coral-text); }
.state__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn { min-height: 44px; border-radius: 10px; }

.co-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 32px; font-size: 13px; color: var(--text-3); }
.co-foot nav { display: flex; gap: 18px; }
.co-foot a { color: var(--text-2); text-decoration: none; } .co-foot a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 1024px) { .co-wrap { padding-inline: 24px; } .co-grid { gap: 24px; } .pay { padding: 24px; } }
@media (max-width: 820px) {
  .co-wrap { padding-inline: 16px; }
  .co-grid { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .sum { position: static; padding: 0; overflow: hidden; }
  .sum__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
  .sum__toggle .muted { font-weight: 500; }
  .sum__toggle-end { display: inline-flex; align-items: center; gap: 8px; }
  .sum__toggle svg { width: 18px; height: 18px; transition: transform .2s; }
  .sum__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sum__body { display: none; padding: 0 16px 18px; border-top: 1px solid var(--line); }
  .sum__toggle[aria-expanded="true"] + .sum__body { display: block; }
  .sum__body .label { margin-top: 16px; }
  .pay { padding: 20px 16px; }
  .co-head__row { height: 56px; }
}
@media (max-width: 360px) { .seg__save { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* After payment: a separate, centred confirmation page (data-stage="done"). */
.done { min-height: calc(100vh - 64px - 72px); display: grid; place-items: center; padding: 48px 20px 56px; }
.done__panel { width: 100%; max-width: 560px; text-align: center; }
.done__label { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--good); }
.done__label.is-wait { color: var(--text-2); }
.done__title { margin-top: 8px; font: 700 clamp(28px, 4vw, 36px)/1.15 var(--body); letter-spacing: -.025em; }
.done__text { margin: 10px auto 0; max-width: 440px; font-size: 16px; color: var(--text-2); }
.receipt { margin: 28px 0 0; padding: 6px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: left; font-size: 14.5px; }
.receipt > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; }
.receipt > div + div { border-top: 1px solid #efede9; }
.receipt dt { color: var(--text-2); }
.receipt dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 500 !important; }
.done__status { margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.done__cta { min-width: 200px; }
.done__links { display: flex; justify-content: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--text-3); }
.done__links a, .linkish { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.linkish { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.done__fine { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.done__fine:empty { display: none; }

/* The mark: an outlined circle, a check that draws itself, six coral sparks, or a calm "working" ring. */
.mark { position: relative; width: 72px; height: 72px; margin: 0 auto; }
.mark__svg { width: 72px; height: 72px; overflow: visible; }
.mark__ring { fill: var(--good-tint); stroke: var(--good); stroke-width: 2.5; }
.mark__check { fill: none; stroke: var(--good); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.mark__spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--coral); opacity: 0; }
.mark__wait { display: none; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--coral); animation: spin 1s linear infinite; }
.mark.is-wait .mark__svg, .mark.is-wait .mark__spark { display: none; }
.mark.is-wait .mark__wait { display: block; }
.mark.is-info .mark__ring { fill: var(--warn-tint); stroke: #c58a00; }
.mark.is-info .mark__check { stroke: #c58a00; }

/* One-time celebration (class added once per confirmed purchase). Total about 1.3s. */
.mark.is-play .mark__svg { animation: mark-in .45s cubic-bezier(.2,.9,.3,1.25) both; }
.mark.is-play .mark__check { stroke-dashoffset: 40; animation: draw .4s .3s ease-out forwards; }
.mark.is-play .mark__spark { animation: spark .7s .55s ease-out both; }
.is-play-text .st { opacity: 0; animation: rise .45s ease-out forwards; }
.is-play-text .done__label { animation-delay: .6s; } .is-play-text .done__title { animation-delay: .7s; } .is-play-text .done__text { animation-delay: .8s; }
.is-play-text .receipt { animation-delay: .95s; } .is-play-text .done__actions { animation-delay: 1.05s; } .is-play-text .done__links, .is-play-text .done__fine, .is-play-text .done__status { animation-delay: 1.15s; }
@keyframes mark-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-30px) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-52px) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mark.is-play .mark__svg, .mark.is-play .mark__check, .is-play-text .st { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .mark.is-play .mark__spark { display: none; }
  .mark__wait { animation-duration: 3s; }
}
@media (max-width: 600px) { .done { padding: 32px 16px 40px; place-items: start center; } .done__cta { width: 100%; } .receipt { padding: 4px 14px; } }