/* SEARCH RUST MARKET — dark Steam top-up + dark mobile bottom nav v11.4.8 */

/* ---------- Steam top-up: dark theme, desktop + mobile ---------- */
html[data-theme="dark"] #steam-topup.steam-topup,
html[data-theme="dark"] #steam-topup {
    color: #f8fafc !important;
    border: 1px solid #263b5b !important;
    background:
        radial-gradient(circle at 100% 100%, rgba(37,99,235,.16), transparent 22%),
        linear-gradient(135deg, #101827 0%, #142239 58%, #172b4b 100%) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] #steam-topup::after {
    background: rgba(37,99,235,.10) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] #steam-topup .steam-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] #steam-topup .steam-subtitle {
    color: #60a5fa !important;
}

html[data-theme="dark"] #steam-topup .steam-control label {
    color: #dbe7f7 !important;
}

html[data-theme="dark"] #steam-topup .steam-control input,
html[data-theme="dark"] #steam-topup input[type="text"],
html[data-theme="dark"] #steam-topup input[type="number"] {
    color: #f8fafc !important;
    border-color: #31435e !important;
    background: #0b1422 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

html[data-theme="dark"] #steam-topup .steam-control input::placeholder,
html[data-theme="dark"] #steam-topup input::placeholder {
    color: #6f819c !important;
    opacity: 1 !important;
}

html[data-theme="dark"] #steam-topup .steam-control input:focus,
html[data-theme="dark"] #steam-topup input[type="text"]:focus,
html[data-theme="dark"] #steam-topup input[type="number"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.14) !important;
}

html[data-theme="dark"] #steam-topup .steam-login-status,
html[data-theme="dark"] #steam-topup .steam-note,
html[data-theme="dark"] #steam-topup .hint {
    color: #8190a8 !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-heading,
html[data-theme="dark"] #steam-topup .steam-payment-section-head > span {
    color: #67a9ff !important;
}

/* Default payment cards */
html[data-theme="dark"] #steam-topup .steam-payment-card {
    color: #eaf2ff !important;
    border: 1px solid #314968 !important;
    background: linear-gradient(135deg, #18263a 0%, #1b3150 100%) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-card::before {
    background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 48%) !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-card:hover {
    border-color: #4a72a8 !important;
    background: linear-gradient(135deg, #1b2d45 0%, #203b60 100%) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-card strong {
    color: #f5f8ff !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-card small {
    color: #9eb0ca !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-icon {
    color: #8fc1ff !important;
    background: rgba(59,130,246,.13) !important;
    border: 1px solid rgba(96,165,250,.08) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-fee {
    color: #8fc1ff !important;
    background: rgba(37,99,235,.16) !important;
    border-color: rgba(96,165,250,.10) !important;
}

/* Selected payment: same "outlined/light-blue" logic as balance top-up, adapted for dark UI */
html[data-theme="dark"] #steam-topup .steam-payment-option input:checked + .steam-payment-card {
    border: 2px solid #3b82f6 !important;
    background: linear-gradient(135deg, #223a5d 0%, #1d3557 100%) !important;
    box-shadow:
        0 0 0 3px rgba(59,130,246,.10),
        0 12px 24px rgba(0,0,0,.22) !important;
    transform: none !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-option input:checked + .steam-payment-card strong {
    color: #ffffff !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-option input:checked + .steam-payment-card .steam-payment-icon {
    color: #a9d0ff !important;
    background: rgba(59,130,246,.22) !important;
    border-color: rgba(96,165,250,.18) !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-option input:checked + .steam-payment-card .steam-payment-fee {
    color: #b9d8ff !important;
    background: rgba(59,130,246,.22) !important;
}

/* Disabled payment */
html[data-theme="dark"] #steam-topup .steam-payment-option.is-disabled .steam-payment-card {
    color: #70819a !important;
    border-color: #29384d !important;
    background: #121c2a !important;
    box-shadow: none !important;
    opacity: .58 !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-option.is-disabled .steam-payment-card strong,
html[data-theme="dark"] #steam-topup .steam-payment-option.is-disabled .steam-payment-card small {
    color: #8290a4 !important;
}

html[data-theme="dark"] #steam-topup .steam-payment-option.is-disabled .steam-payment-icon {
    color: #72849d !important;
    background: rgba(148,163,184,.08) !important;
}

/* Pay button */
html[data-theme="dark"] #steam-topup .steam-submit,
html[data-theme="dark"] #steam-topup button[type="submit"].steam-submit {
    color: #ffffff !important;
    border-color: #2f78df !important;
    background: linear-gradient(135deg, #2563eb 0%, #178cd3 100%) !important;
    box-shadow: 0 10px 24px rgba(37,99,235,.20) !important;
}

html[data-theme="dark"] #steam-topup .steam-submit:disabled,
html[data-theme="dark"] #steam-topup button[type="submit"].steam-submit:disabled {
    color: #8997aa !important;
    border-color: #344255 !important;
    background: #202b3a !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    html[data-theme="dark"] #steam-topup.steam-topup,
    html[data-theme="dark"] #steam-topup {
        border-color: #263b5b !important;
        background:
            radial-gradient(circle at 100% 100%, rgba(37,99,235,.13), transparent 26%),
            linear-gradient(145deg, #111a29 0%, #14233a 100%) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.24) !important;
    }

    html[data-theme="dark"] #steam-topup .steam-payment-methods,
    html[data-theme="dark"] #steamPaymentMethods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html[data-theme="dark"] #steam-topup .steam-payment-card {
        min-height: 68px !important;
        border-radius: 13px !important;
    }

    /* Dark mobile bottom navigation */
    html[data-theme="dark"] .mobile-bottom-nav {
        border: 1px solid #24344b !important;
        background: rgba(12,19,30,.96) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        backdrop-filter: blur(18px) !important;
        box-shadow:
            0 18px 44px rgba(0,0,0,.36),
            inset 0 1px 0 rgba(255,255,255,.025) !important;
    }

    html[data-theme="dark"] .mobile-bottom-nav-grid {
        background: transparent !important;
    }

    html[data-theme="dark"] .mobile-bottom-link {
        color: #a8b4c6 !important;
        background: transparent !important;
    }

    html[data-theme="dark"] .mobile-bottom-link i {
        color: #60a5fa !important;
    }

    html[data-theme="dark"] .mobile-bottom-link:hover,
    html[data-theme="dark"] .mobile-bottom-link.active {
        color: #f8fafc !important;
        background: rgba(37,99,235,.15) !important;
    }

    html[data-theme="dark"] .mobile-bottom-link.active i,
    html[data-theme="dark"] .mobile-bottom-link:hover i {
        color: #93c5fd !important;
    }

    html[data-theme="dark"] .mobile-bottom-link b {
        color: inherit !important;
    }
}