/* ===========================================================
   Checkout page – clean, token‑driven layout
   =========================================================== */

.checkout-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-primary-300);
    border-radius: var(--radius-lg);
    padding: var(--padding-xl);
}

/* Header */
.checkout-header {
    text-align: center;
    margin-bottom: var(--gap-xl);
}

.checkout-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--gap-xs) 0;
}

.checkout-price {
    font-size: var(--font-size-lg);
    color: var(--color-primary-700);
    font-weight: var(--font-weight-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

.checkout-price__option strong {
    font-size: var(--font-size-xl);
}

.checkout-price__separator {
    color: var(--color-primary-300);
}

.checkout-price__badge {
    display: inline-block;
    background: var(--color-success);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    margin-left: var(--gap-xs);
    vertical-align: middle;
}

/* Features list */
.checkout-features-section {
    margin-bottom: var(--gap-xl);
}

.checkout-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--gap-sm);
}

.checkout-features li {
    padding-left: var(--gap-lg);
    position: relative;
    color: var(--color-text-primary);
    line-height: var(--line-height-md);
}

.checkout-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}

.checkout-features__note {
    color: var(--color-primary-600);
    font-size: var(--font-size-sm);
}

/* Message (donation / sponsorship) */
.checkout-message {
    margin-bottom: var(--gap-xl);
    color: var(--color-text-primary);
    line-height: var(--line-height-md);
}

/* Wallet section */
.wallet-section {
    background: var(--color-primary-100);
    border: 1px solid var(--color-primary-300);
    border-radius: var(--radius-md);
    padding: var(--padding-lg);
    margin-bottom: var(--gap-lg);
}

.wallet-section__title {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--gap-sm) 0;
    color: var(--color-text-primary);
}

.wallet-section__instruction {
    color: var(--color-text-primary);
    margin-bottom: var(--gap-md);
    line-height: var(--line-height-md);
}

.wallet-address {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin: var(--gap-md) 0;
}

.wallet-address code {
    background: var(--color-surface-muted);
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-sm);
    word-break: break-all;
    flex: 1;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.wallet-section__contact {
    color: var(--color-text-primary);
    margin-bottom: 0;
}

.wallet-section__contact a {
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
}

.wallet-section__contact a:hover {
    color: var(--color-link-hover);
}

.wallet-section__contact-note {
    color: var(--color-warning);
    font-size: var(--font-size-sm);
}

/* Copy button */
.btn-copy {
    background: var(--color-primary-500);
    color: var(--color-text-primary);
    border: none;
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    transition: background 0.2s ease;
    white-space: nowrap;
}

.btn-copy:hover {
    background: var(--color-primary-300);
}

.btn-copy[disabled],
.btn-copy[aria-disabled="true"] {
    opacity: 0.7;
    cursor: default;
}

/* Back link */
.checkout-footer {
    text-align: center;
}