/* Dark theme polish for the homepage budget picker block. */

:root[data-theme="dark"] .home-picker-v2--mockup {
    background:
        radial-gradient(circle at 10% 18%, rgba(255, 122, 0, .16), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(59, 115, 255, .26), transparent 32%),
        linear-gradient(135deg, #07101f, #101b31) !important;
    border-color: rgba(147, 197, 253, .24) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

:root[data-theme="dark"] .home-picker-v2--mockup::after {
    background: radial-gradient(circle, rgba(59, 115, 255, .22), transparent 68%) !important;
}

:root[data-theme="dark"] .home-picker-v2__copy h2 {
    color: #f8fbff !important;
    text-shadow: none !important;
}

:root[data-theme="dark"] .home-picker-v2__copy p:not(.eyebrow) {
    color: #c8d4ea !important;
    text-shadow: none !important;
}

:root[data-theme="dark"] .home-picker-v2__copy .eyebrow,
:root[data-theme="dark"] .home-picker-v2__copy .eyebrow span {
    background: rgba(96, 165, 250, .18) !important;
    color: #c7d7ff !important;
    border-color: rgba(147, 197, 253, .28) !important;
}

:root[data-theme="dark"] .home-picker-v2__link {
    background: rgba(96, 165, 250, .16) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(147, 197, 253, .26) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
}

:root[data-theme="dark"] .home-picker-v2__link:hover {
    background: rgba(96, 165, 250, .24) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .budget-picker a {
    background:
        radial-gradient(circle at 92% 0, rgba(255, 122, 0, .12), transparent 34%),
        linear-gradient(180deg, rgba(20, 31, 52, .98), rgba(10, 18, 34, .98)) !important;
    border-color: rgba(147, 197, 253, .22) !important;
    color: #f8fbff !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .30) !important;
}

:root[data-theme="dark"] .budget-picker a::after {
    background: radial-gradient(circle, rgba(255, 122, 0, .18), transparent 66%) !important;
}

:root[data-theme="dark"] .budget-picker a:hover {
    border-color: rgba(147, 197, 253, .38) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .38) !important;
}

:root[data-theme="dark"] .budget-picker span {
    background: rgba(255, 122, 0, .16) !important;
    color: #ffb06a !important;
    border: 1px solid rgba(255, 184, 108, .24) !important;
}

:root[data-theme="dark"] .budget-picker b {
    color: #f8fbff !important;
    text-shadow: none !important;
}

:root[data-theme="dark"] .budget-picker small {
    color: #c6d3ea !important;
    text-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .home-picker-v2--mockup {
        background:
            radial-gradient(circle at 10% 18%, rgba(255, 122, 0, .16), transparent 30%),
            radial-gradient(circle at 92% 8%, rgba(59, 115, 255, .26), transparent 32%),
            linear-gradient(135deg, #07101f, #101b31) !important;
        border-color: rgba(147, 197, 253, .24) !important;
        color: var(--dm-text) !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
    }

    :root:not([data-theme="light"]) .home-picker-v2__copy h2,
    :root:not([data-theme="light"]) .budget-picker b {
        color: #f8fbff !important;
        text-shadow: none !important;
    }

    :root:not([data-theme="light"]) .home-picker-v2__copy p:not(.eyebrow),
    :root:not([data-theme="light"]) .budget-picker small {
        color: #c8d4ea !important;
        text-shadow: none !important;
    }

    :root:not([data-theme="light"]) .home-picker-v2__link {
        background: rgba(96, 165, 250, .16) !important;
        color: #dbeafe !important;
        border: 1px solid rgba(147, 197, 253, .26) !important;
    }

    :root:not([data-theme="light"]) .budget-picker a {
        background:
            radial-gradient(circle at 92% 0, rgba(255, 122, 0, .12), transparent 34%),
            linear-gradient(180deg, rgba(20, 31, 52, .98), rgba(10, 18, 34, .98)) !important;
        border-color: rgba(147, 197, 253, .22) !important;
        color: #f8fbff !important;
        box-shadow: 0 16px 42px rgba(0, 0, 0, .30) !important;
    }

    :root:not([data-theme="light"]) .budget-picker span {
        background: rgba(255, 122, 0, .16) !important;
        color: #ffb06a !important;
        border: 1px solid rgba(255, 184, 108, .24) !important;
    }
}