/* ========================================================
   TIPZ SECONDARY PAGES — DARK THEME
   ========================================================
   Covers: checkout, my_subscription, crypto_*, per_match_*, per_day_*
   Loaded via base.html — scoped by page-specific class selectors.
   To revert: remove the <link> from base.html.
   ======================================================== */

/* ========== 0. PAGE CONTAINERS — dark background ========== */
/* Scoped: only these page wrappers. Landing, auth, admin, guild NOT affected. */

/* Container backgrounds + body override via :has() */
/* :has() ensures body is dark ONLY when these containers are present */
body:has(.checkout-container),
body:has(.crypto-checkout-container),
body:has(.per-day-container),
body:has(.per-match-container),
body:has(.history-container),
body:has(.success-container),
body:has(.subscription-container) {
    background-color: #0f0f12 !important;
}

.checkout-container,
.crypto-checkout-container,
.per-day-container,
.per-match-container,
.history-container,
.success-container,
.subscription-container {
    background: #0f0f12 !important;
    /* Navbar fijo mide ~106px (logo 80px + padding). 110px deja clearance + margen. */
    min-height: calc(100vh - 110px);
}

/* ========== TOKENS ========== */

:root {
    --sdk-bg: #0f0f12;
    --sdk-base: #141416;
    --sdk-elevated: #1a1a1e;
    --sdk-card: #1f1f24;
    --sdk-hover: #26262c;
    --sdk-text: #f0f2f5;
    --sdk-text-2: #9ca3b0;
    --sdk-text-3: #5c6370;
    --sdk-border: rgba(255, 255, 255, 0.06);
    --sdk-border-hover: rgba(255, 255, 255, 0.12);
    --sdk-divider: rgba(255, 255, 255, 0.03);
    --sdk-green: #00A859;
    --sdk-green-dim: rgba(0, 168, 89, 0.12);
    --sdk-amber: #f59e0b;
    --sdk-amber-dim: rgba(245, 158, 11, 0.12);
    --sdk-red-dim: rgba(239, 68, 68, 0.12);
    --sdk-blue-dim: rgba(59, 130, 246, 0.12);
}


/* ==========================================================
   1. SUBSCRIPTION CHECKOUT (subscriptions/checkout.html)
   ========================================================== */

.checkout-container {
    color: var(--sdk-text) !important;
}

.checkout-container h1,
.checkout-container h2,
.checkout-container h3,
.checkout-container h4,
.checkout-container h5 {
    color: var(--sdk-text) !important;
}

.checkout-container p,
.checkout-container small,
.checkout-container label {
    color: var(--sdk-text-2) !important;
}

.checkout-options,
.checkout-summary {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

/* Override page-local title colors que usan var(--tipz-black) sobre fondo oscuro.
   Sin esto, los headings del checkout quedan invisibles (negro sobre #1f1f24). */
.checkout-options .section-title,
.checkout-options .period-name,
.checkout-options .payment-info h5,
.checkout-summary .section-title,
.checkout-summary .summary-title,
.checkout-summary .summary-row-label,
.checkout-summary .summary-row-value {
    color: var(--sdk-text) !important;
}

/* Texto secundario (var(--tipz-gray)) sobre fondo oscuro debe usar el segundo tono claro. */
.checkout-options .payment-info p,
.checkout-summary .summary-row-meta,
.checkout-summary .summary-period {
    color: var(--sdk-text-2) !important;
}

.period-option {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.period-option:hover,
.period-option.selected {
    border-color: var(--sdk-green) !important;
}

.period-option .period-name { color: var(--sdk-text) !important; }
.period-option .period-price,
.period-option .period-total { color: var(--sdk-text-2) !important; }

.period-discount {
    background: var(--sdk-green-dim) !important;
    color: var(--sdk-green) !important;
}

.payment-method {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.payment-method:hover,
.payment-method.selected {
    border-color: var(--sdk-green) !important;
}

.payment-method.disabled {
    background: var(--sdk-base) !important;
    opacity: 0.5;
}

.payment-method h5,
.payment-method strong { color: var(--sdk-text) !important; }
.payment-method p,
.payment-method small { color: var(--sdk-text-2) !important; }

.summary-row { border-bottom-color: var(--sdk-divider) !important; color: var(--sdk-text-2) !important; }
.summary-row strong { color: var(--sdk-text) !important; }
.summary-footer { border-top-color: var(--sdk-border) !important; }
.trust-indicators { border-top-color: var(--sdk-divider) !important; }

.secure-badge-item {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
}

.input-group-text,
.checkout-container .input-group-text[style] {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text-2) !important;
}

.checkout-container input[style],
.checkout-container .form-control[style] {
    border-color: var(--sdk-border) !important;
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text) !important;
}

.summary-plan {
    background: var(--sdk-green-dim) !important;
}


/* ==========================================================
   2. MY SUBSCRIPTION (subscriptions/my_subscription.html)
   ========================================================== */

.subscription-container {
    color: var(--sdk-text) !important;
    padding-bottom: 2rem !important;
}

.subscription-container h1,
.subscription-container h2,
.subscription-container h3,
.subscription-container h4,
.subscription-container h5 {
    color: var(--sdk-text) !important;
}

.subscription-container p,
.subscription-container small {
    color: var(--sdk-text-2) !important;
}

.subscription-card {
    background: var(--sdk-card) !important;
    border: 1px solid var(--sdk-border) !important;
    color: var(--sdk-text) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.subscription-body { color: var(--sdk-text) !important; }

.detail-row { border-bottom-color: var(--sdk-divider) !important; }
.detail-row .detail-label { color: var(--sdk-text-3) !important; }
.detail-row .detail-value { color: var(--sdk-text) !important; }

.subscription-actions {
    border-top-color: var(--sdk-border) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.subscription-actions .btn-outline-secondary {
    color: var(--sdk-text-2) !important;
    border-color: var(--sdk-border) !important;
}

.subscription-actions .btn-outline-secondary:hover {
    background: var(--sdk-hover) !important;
    color: var(--sdk-text) !important;
}

.subscription-actions .btn-outline-primary {
    color: var(--sdk-green) !important;
    border-color: var(--sdk-green) !important;
}

.subscription-actions .btn-outline-primary:hover {
    background: var(--sdk-green) !important;
    color: #fff !important;
}

.subscription-actions .btn-outline-danger {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.subscription-actions .btn-outline-danger:hover {
    background: var(--sdk-red-dim) !important;
}

/* Subscription link below card */
.subscription-container .btn-link {
    color: var(--sdk-text-3) !important;
}

/* Cancel modal */
.subscription-container + div .modal-content,
#cancelModal .modal-content {
    background: var(--sdk-card) !important;
    border: 1px solid var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

#cancelModal .modal-header {
    border-bottom-color: var(--sdk-divider) !important;
}

#cancelModal .modal-body {
    color: var(--sdk-text-2) !important;
}

#cancelModal .modal-body p { color: var(--sdk-text-2) !important; }
#cancelModal .modal-body strong { color: var(--sdk-text) !important; }

#cancelModal .modal-body .form-control {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

#cancelModal .modal-body .form-control::placeholder {
    color: var(--sdk-text-3) !important;
}

#cancelModal .modal-body .form-label {
    color: var(--sdk-text-2) !important;
}

#cancelModal .modal-footer {
    border-top-color: var(--sdk-divider) !important;
}

#cancelModal .btn-close {
    filter: invert(1) !important;
}


/* ==========================================================
   3. CRYPTO CHECKOUT (payments/crypto_checkout.html)
   ========================================================== */

.crypto-checkout-container {
    color: var(--sdk-text) !important;
}

.crypto-checkout-container h1,
.crypto-checkout-container h2,
.crypto-checkout-container h3,
.crypto-checkout-container h4,
.crypto-checkout-container h5 {
    color: var(--sdk-text) !important;
}

.crypto-checkout-container p,
.crypto-checkout-container small,
.crypto-checkout-container label {
    color: var(--sdk-text-2) !important;
}

.checkout-card {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.checkout-card h2,
.checkout-card h3,
.checkout-card h4,
.checkout-card h5,
.checkout-card strong { color: var(--sdk-text) !important; }

.checkout-card p,
.checkout-card small,
.checkout-card .text-muted,
.checkout-card label { color: var(--sdk-text-2) !important; }

/* --- Fix: plan-info section (amount, name, period) --- */
.plan-info {
    background: var(--sdk-green-dim) !important;
}

.plan-info .plan-name {
    color: var(--sdk-green) !important;
}

.plan-info .plan-period {
    color: var(--sdk-text-2) !important;
}

.plan-info .plan-amount {
    color: var(--sdk-text) !important;
}

.wallet-address-container {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-green) !important;
}

.wallet-address-container code,
.wallet-address-container .address-text { color: var(--sdk-text) !important; }

/* --- Fix: wallet address text invisible (#1A1A1A on #1a1a1e) --- */
.wallet-address {
    color: var(--sdk-text) !important;
}

.qr-container { background: var(--sdk-elevated) !important; }
/* Keep QR code white for scanability */
.qr-container #qr-code-container { background: #fff !important; }

/* --- Fix: QR label text --- */
.qr-container .qr-label {
    color: var(--sdk-text-3) !important;
}

.fee-warning {
    background: var(--sdk-amber-dim) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    color: var(--sdk-amber) !important;
}

.help-box {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
}

/* --- Fix: help-box h6 uses tipz-primary, not covered by h5 override --- */
.help-box h6 {
    color: var(--sdk-green) !important;
}

/* --- Fix: help-box list items inherit but need explicit override --- */
.help-box li {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: error states dark text on dark bg --- */
.error-description {
    color: var(--sdk-text-2) !important;
}

.error-hint {
    color: var(--sdk-text-2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* --- Fix: trust footer badges --- */
.checkout-trust-footer {
    background: var(--sdk-base) !important;
    border-top-color: var(--sdk-border) !important;
    color: var(--sdk-text-3) !important;
}

.trust-badge {
    color: var(--sdk-text-3) !important;
}

.trust-badge i {
    color: var(--sdk-green) !important;
}

/* --- Fix: cancel button --- */
.cancel-container button {
    color: var(--sdk-text-3) !important;
}

.cancel-container button:hover {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: bg-light boxes on dark theme (verifying/confirming states) --- */
.crypto-checkout-container .bg-light {
    background: var(--sdk-elevated) !important;
}

/* --- Fix: alert-info on dark --- */
.crypto-checkout-container .alert-info {
    background: rgba(13, 202, 240, 0.08) !important;
    border-color: rgba(13, 202, 240, 0.15) !important;
    color: var(--sdk-text) !important;
}

/* --- Fix: alert-warning on dark --- */
.crypto-checkout-container .alert-warning {
    background: var(--sdk-amber-dim) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--sdk-amber) !important;
}

/* --- Fix: txid input on dark --- */
.crypto-checkout-container .txid-input {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.crypto-checkout-container .txid-input::placeholder {
    color: var(--sdk-text-3) !important;
}

.crypto-checkout-container .txid-input:focus {
    border-color: var(--sdk-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 168, 89, 0.25) !important;
}

.error-container.error-not-found {
    background: var(--sdk-amber-dim) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.error-container.error-critical {
    background: var(--sdk-red-dim) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.error-container.error-retry {
    background: var(--sdk-blue-dim) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.error-hint { background: rgba(255, 255, 255, 0.05) !important; }


/* ==========================================================
   4. CRYPTO HISTORY (payments/crypto_history.html)
   ========================================================== */

.history-container {
    color: var(--sdk-text) !important;
}

.history-container h1,
.history-container h2,
.history-container h3 {
    color: var(--sdk-text) !important;
}

.history-container p,
.history-container small {
    color: var(--sdk-text-2) !important;
}

.payment-card {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.payment-card h5,
.payment-card strong { color: var(--sdk-text) !important; }
.payment-card p,
.payment-card small,
.payment-card .text-muted { color: var(--sdk-text-2) !important; }

/* Status badges — dark variants */
.status-completed { background: var(--sdk-green-dim) !important; color: var(--sdk-green) !important; }
.status-confirming { background: var(--sdk-amber-dim) !important; color: var(--sdk-amber) !important; }
.status-initiated { background: var(--sdk-blue-dim) !important; color: #60a5fa !important; }
.status-expired { background: var(--sdk-red-dim) !important; color: #ef4444 !important; }
.status-failed { background: var(--sdk-red-dim) !important; color: #ef4444 !important; }
.status-cancelled { background: rgba(255, 255, 255, 0.06) !important; color: var(--sdk-text-3) !important; }

.empty-state {
    background: var(--sdk-card) !important;
    color: var(--sdk-text-2) !important;
}

.empty-state h4 { color: var(--sdk-text) !important; }


/* ==========================================================
   5. CRYPTO SUCCESS (payments/crypto_success.html)
   ========================================================== */

.success-container {
    color: var(--sdk-text) !important;
}

.success-card {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.success-card h2,
.success-card h3 { color: var(--sdk-text) !important; }
.success-card p { color: var(--sdk-text-2) !important; }

.payment-details { background: var(--sdk-elevated) !important; }
.payment-details .detail-row { border-bottom-color: var(--sdk-divider) !important; }


/* ==========================================================
   6. PER MATCH SELECT (payments/per_match_select.html)
   ========================================================== */

.per-match-container {
    color: var(--sdk-text) !important;
}

.per-match-container h1,
.per-match-container h2,
.per-match-container h3,
.per-match-container h4,
.per-match-container h5 {
    color: var(--sdk-text) !important;
}

.per-match-container p,
.per-match-container small {
    color: var(--sdk-text-2) !important;
}

.info-card {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.info-card h5,
.info-card h6,
.info-card strong { color: var(--sdk-text) !important; }
.info-card p { color: var(--sdk-text-2) !important; }

.info-card-icon.green { background: var(--sdk-green-dim) !important; }
.info-card-icon.blue { background: var(--sdk-blue-dim) !important; }
.info-card-icon.purple { background: rgba(139, 92, 246, 0.12) !important; }

.purchased-info {
    background: var(--sdk-green-dim) !important;
    border-color: rgba(0, 168, 89, 0.15) !important;
    color: var(--sdk-green) !important;
}

.per-match-container .match-card {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.per-match-container .match-card h5,
.per-match-container .match-card strong { color: var(--sdk-text) !important; }
.per-match-container .match-card p,
.per-match-container .match-card small,
.per-match-container .match-card .text-muted { color: var(--sdk-text-2) !important; }

.team-logo-wrapper { background: var(--sdk-elevated) !important; }

.match-meta {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
}

/* Risk badges — dark variants */
.per-match-container .risk-bajo { background: var(--sdk-green-dim) !important; color: var(--sdk-green) !important; }
.per-match-container .risk-medio-bajo { background: var(--sdk-amber-dim) !important; color: var(--sdk-amber) !important; }
.per-match-container .risk-medio { background: var(--sdk-amber-dim) !important; color: var(--sdk-amber) !important; }
.per-match-container .risk-alto { background: var(--sdk-red-dim) !important; color: #ef4444 !important; }

.confidence-bar { background: rgba(255, 255, 255, 0.08) !important; }

.no-matches {
    background: var(--sdk-card) !important;
    color: var(--sdk-text-2) !important;
}

.no-matches h4 { color: var(--sdk-text) !important; }
.no-matches-icon { background: var(--sdk-elevated) !important; }
.back-section { border-top-color: var(--sdk-border) !important; }

/* --- Fix: team names invisible (#1A1A1A on #1f1f24) --- */
.per-match-container .team-name {
    color: var(--sdk-text) !important;
}

/* --- Fix: confidence value low contrast --- */
.per-match-container .confidence-value {
    color: var(--sdk-green) !important;
}

/* --- Fix: back-section link color --- */
.per-match-container .back-section a {
    color: var(--sdk-text-3) !important;
}

.per-match-container .back-section a:hover {
    color: var(--sdk-green) !important;
}


/* ==========================================================
   7. PER MATCH CHECKOUT (payments/per_match_checkout.html)
   ========================================================== */

/* .checkout-card already covered in section 3 */

.match-preview {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
}

.match-preview h5,
.match-preview strong { color: var(--sdk-text) !important; }
.match-preview p,
.match-preview small { color: var(--sdk-text-2) !important; }

.benefit-item {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
}

.benefit-item:hover { background: var(--sdk-hover) !important; }

.payment-method-info {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
}

.checkout-links { border-top-color: var(--sdk-border) !important; }

/* --- Fix: team names invisible (#1A1A1A on #1a1a1e) --- */
.checkout-card .team-display .team-name {
    color: var(--sdk-text) !important;
}

/* --- Fix: league name invisible (#1A1A1A on #1a1a1e) --- */
.checkout-card .match-league-row span {
    color: var(--sdk-text) !important;
}

/* --- Fix: benefit text invisible (#1A1A1A on #1a1a1e) --- */
.checkout-card .benefit-item span {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: benefit check icons need contrast on dark --- */
.checkout-card .benefit-item i {
    color: var(--sdk-green) !important;
}

/* --- Fix: benefits header --- */
.checkout-card .benefits-header i {
    color: var(--sdk-amber) !important;
}

/* --- Fix: price section needs dark variant --- */
.checkout-card .price-section {
    background: var(--sdk-green-dim) !important;
    border-color: rgba(0, 168, 89, 0.15) !important;
}

.checkout-card .price-label {
    color: var(--sdk-text-2) !important;
}

.checkout-card .price-amount .currency,
.checkout-card .price-amount .value {
    color: var(--sdk-green) !important;
}

.checkout-card .price-amount .unit {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: price-note jarring white box on dark card --- */
.checkout-card .price-note {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
    box-shadow: none !important;
}

.checkout-card .price-note i {
    color: var(--sdk-green) !important;
}

.checkout-card .price-note span {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: security badges barely visible --- */
.checkout-card .security-badge {
    color: var(--sdk-text-3) !important;
}

.checkout-card .security-badge i {
    color: var(--sdk-green) !important;
}

/* --- Fix: checkout links invisible --- */
.checkout-card .checkout-links a {
    color: var(--sdk-text-3) !important;
}

.checkout-card .checkout-links a:hover {
    color: var(--sdk-green) !important;
}

/* --- Fix: payment method info text --- */
.checkout-card .payment-method-info span {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: referral feedback text --- */
.checkout-card #referral-feedback {
    color: var(--sdk-text-3) !important;
}

.checkout-card #referral-feedback.text-success {
    color: var(--sdk-green) !important;
}

.checkout-card #referral-feedback.text-danger {
    color: #ef4444 !important;
}


/* ==========================================================
   8. PER DAY CHECKOUT (payments/per_day_checkout.html)
   ========================================================== */

/* .checkout-card already covered in section 3 */

.price-highlight { background: var(--sdk-green-dim) !important; }

.per-day-container .benefit-item { border-bottom-color: var(--sdk-divider) !important; }

.use-cases {
    background: var(--sdk-elevated) !important;
    color: var(--sdk-text-2) !important;
}

.use-cases h5,
.use-cases h6,
.use-cases strong { color: var(--sdk-text) !important; }

/* --- Fix: use-cases list items inherit tipz-gray, invisible on dark --- */
.use-cases li {
    color: var(--sdk-text-2) !important;
}

/* --- Fix: use-cases icon color --- */
.use-cases h6 i {
    color: var(--sdk-amber) !important;
}

.timer-info {
    background: var(--sdk-amber-dim) !important;
    color: var(--sdk-amber) !important;
}

/* --- Fix: price-highlight secondary text invisible on dark --- */
.price-highlight .currency {
    color: var(--sdk-text-2) !important;
}

.price-highlight .duration {
    color: var(--sdk-text-2) !important;
}

.price-highlight .amount {
    color: var(--sdk-green) !important;
}

/* --- Fix: payment-info text invisible on dark --- */
.per-day-container .payment-info {
    color: var(--sdk-text-3) !important;
}

/* --- Fix: benefit-item text and icons for per-day --- */
.per-day-container .benefit-item span {
    color: var(--sdk-text-2) !important;
}

.per-day-container .benefit-item i {
    color: var(--sdk-green) !important;
}

.per-day-container .benefit-item strong {
    color: var(--sdk-green) !important;
}

/* --- Fix: referral feedback for per-day --- */
.per-day-container #referral-feedback {
    color: var(--sdk-text-3) !important;
}

.per-day-container #referral-feedback.text-success {
    color: var(--sdk-green) !important;
}

.per-day-container #referral-feedback.text-danger {
    color: #ef4444 !important;
}

/* --- Fix: cancel link --- */
.per-day-container .cancel-link a {
    color: var(--sdk-text-3) !important;
}

.per-day-container .cancel-link a:hover {
    color: var(--sdk-green) !important;
}


/* ==========================================================
   9. SHARED — Bootstrap overrides for secondary pages
   ========================================================== */

/* Form inputs */
.checkout-container .form-control,
.checkout-card .form-control,
.crypto-checkout-container .form-control {
    background: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

.checkout-container .form-control::placeholder,
.checkout-card .form-control::placeholder,
.crypto-checkout-container .form-control::placeholder {
    color: var(--sdk-text-3) !important;
}

.checkout-container .form-control:focus,
.checkout-card .form-control:focus,
.crypto-checkout-container .form-control:focus {
    border-color: var(--sdk-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 168, 89, 0.25) !important;
}

.checkout-container .form-select,
.crypto-checkout-container .form-select {
    background-color: var(--sdk-elevated) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}

/* Text overrides */
.checkout-container .text-muted,
.checkout-card .text-muted,
.payment-card .text-muted,
.subscription-card .text-muted,
.success-card .text-muted,
.per-match-container .text-muted,
.per-day-container .text-muted,
.history-container .text-muted {
    color: var(--sdk-text-3) !important;
}

.checkout-container .text-dark,
.checkout-card .text-dark,
.subscription-card .text-dark,
.per-match-container .text-dark,
.per-day-container .text-dark {
    color: var(--sdk-text) !important;
}

/* Alerts */
.checkout-container .alert-info,
.checkout-card .alert-info,
.crypto-checkout-container .alert-info {
    background: rgba(13, 202, 240, 0.08) !important;
    border-color: rgba(13, 202, 240, 0.15) !important;
    color: var(--sdk-text) !important;
}

.checkout-container .alert-warning,
.checkout-card .alert-warning,
.crypto-checkout-container .alert-warning {
    background: var(--sdk-amber-dim) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--sdk-amber) !important;
}

/* Borders */
.checkout-container hr,
.checkout-card hr,
.subscription-card hr,
.per-match-container hr,
.per-day-container hr {
    border-color: var(--sdk-divider) !important;
}

/* Cards inside containers */
.checkout-container .card,
.crypto-checkout-container .card,
.per-match-container .card,
.per-day-container .card,
.history-container .card {
    background: var(--sdk-card) !important;
    border-color: var(--sdk-border) !important;
    color: var(--sdk-text) !important;
}