/* ========================================================================== */
/* DARK MODE — CHECKOUT + PAYMENT PANEL                                       */
/* ========================================================================== */

body.dark-mode .checkout-card {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
}

body.dark-mode .checkout-card-header { border-bottom: 1px solid var(--dm-border-subtle); }

body.dark-mode .checkout-card-header h2,
body.dark-mode .checkout-product-title,
body.dark-mode .checkout-product-price,
body.dark-mode .option-title,
body.dark-mode .option-price,
body.dark-mode .checkout-total-value,
body.dark-mode .payment-specification h3,
body.dark-mode .payment-specification h4 { color: var(--dm-text-heading); }

body.dark-mode .checkout-card-header p,
body.dark-mode .checkout-product-price .period,
body.dark-mode .option-sub,
body.dark-mode .checkout-total-label { color: var(--dm-text-secondary); }

body.dark-mode .checkout-product-image { background: var(--dm-surface-deep); border-color: var(--dm-border-medium); }
body.dark-mode .checkout-divider { background: var(--dm-border-medium); }
body.dark-mode .checkout-total { border-top: 1px solid var(--dm-border-medium); }

body.dark-mode .checkout-option {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-medium);
}
body.dark-mode .checkout-option:hover {
    background: var(--dm-surface-raised);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
}

body.dark-mode .checkout-option input { accent-color: #3da5ff; }
body.dark-mode .checkout-auth-logo { filter: brightness(0) invert(1) opacity(0.9); }

body.dark-mode .payment-specification input,
body.dark-mode .payment-specification textarea {
    background: var(--dm-surface-deep); color: var(--dm-text);
    border: 1px solid var(--dm-border-strong);
}

/* ── payment panel ── */
body.dark-mode .paypanel,
body.dark-mode .paypanel-top,
body.dark-mode .payrow { color: var(--dm-text); }

body.dark-mode .paypanel-title,
body.dark-mode .payitem-name,
body.dark-mode .payitem-plan,
body.dark-mode .payitem-addon { color: var(--dm-text-heading); }

body.dark-mode .paypanel-sub,
body.dark-mode .payrow .label { color: var(--dm-text-secondary); }

body.dark-mode .paypanel-badge {
    background: linear-gradient(135deg, #1f2937, #111827);
    color: var(--dm-text); border: 1px solid var(--dm-border-medium);
}

body.dark-mode .paypanel-summary {
    background: linear-gradient(135deg, var(--dm-surface), #333);
    border: 1px solid var(--dm-border);
}

body.dark-mode .payrow .value       { color: var(--dm-text-heading); }
body.dark-mode .payrow.total .value { color: #fff; }
body.dark-mode .paypanel-divider    { background: var(--dm-border-medium); }
body.dark-mode .items-title         { color: var(--dm-text-heading); }

body.dark-mode .items-count {
    background: var(--dm-surface-deep);
    color: rgba(255, 255, 255, 0.80);
    border: 1px solid var(--dm-border-medium);
}

body.dark-mode .payitem {
    background: var(--dm-surface); border: 1px solid var(--dm-border);
}

body.dark-mode .addon-chip {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.05);
}