/* All overrides are opt-in through the visitor's saved theme choice. Light mode is untouched.
   Important declarations resolve legacy inline/page-specific light-only styles. */
@media all {

    :root:where([data-theme="dark"]) {
        color-scheme: dark;
        --sandy-dark-bg: #101114;
        --sandy-dark-surface: #181a20;
        --sandy-dark-surface-2: #20232b;
        --sandy-dark-text: #f3f4f6;
        --sandy-dark-muted: #b8beca;
        --sandy-dark-border: #454955;
        --sandy-dark-purple: #c4b5fd;
        --bs-body-bg: #101114;
        --bs-body-color: #f3f4f6;
        --bs-heading-color: #f3f4f6;
        --bs-secondary-color: #b8beca;
        --bs-border-color: #454955;
        --bs-tertiary-bg: #20232b;
        --bs-secondary-bg: #20232b;
        --bs-emphasis-color: #f3f4f6;
        --bs-link-color: #c4b5fd;
        --bs-link-hover-color: #ddd6fe;
    }

    html:where([data-theme="dark"]),
    :where(html[data-theme="dark"]) body,
    :where(html[data-theme="dark"]) main { background-color: var(--sandy-dark-bg) !important; color: var(--sandy-dark-text) !important; }

    :where(html[data-theme="dark"]) .bg-white,
    :where(html[data-theme="dark"]) .bg-light,
    :where(html[data-theme="dark"]) .card,
    :where(html[data-theme="dark"]) .contact-card,
    :where(html[data-theme="dark"]) .modal-content,
    :where(html[data-theme="dark"]) .dropdown-menu,
    :where(html[data-theme="dark"]) .toast,
    :where(html[data-theme="dark"]) .list-group-item,
    :where(html[data-theme="dark"]) .accordion-item,
    :where(html[data-theme="dark"]) .accordion-button,
    :where(html[data-theme="dark"]) .auth-card,
    :where(html[data-theme="dark"]) .left-panel,
    :where(html[data-theme="dark"]) .right-panel,
    :where(html[data-theme="dark"]) .main-content,
    :where(html[data-theme="dark"]) .topbar,
    :where(html[data-theme="dark"]) .content-wrapper,
    :where(html[data-theme="dark"]) .terms-page .card-box,
    :where(html[data-theme="dark"]) .condition-box,
    :where(html[data-theme="dark"]) #forgotPasswordPage .card-container {
        background: var(--sandy-dark-surface) !important;
        color: var(--sandy-dark-text) !important;
        border-color: var(--sandy-dark-border) !important;
    }

    :where(html[data-theme="dark"]) .text-muted,
    :where(html[data-theme="dark"]) .text-secondary,
    :where(html[data-theme="dark"]) .form-text,
    :where(html[data-theme="dark"]) .contact-info p,
    :where(html[data-theme="dark"]) .subtitle,
    :where(html[data-theme="dark"]) .login-text,
    :where(html[data-theme="dark"]) .confirmation-label,
    :where(html[data-theme="dark"]) .confirmation-subtitle {
        color: var(--sandy-dark-muted) !important;
    }

    :where(html[data-theme="dark"]) .text-dark:not(.badge),
    :where(html[data-theme="dark"]) .text-black,
    :where(html[data-theme="dark"]) .text-body,
    :where(html[data-theme="dark"]) .navbar .nav-link,
    :where(html[data-theme="dark"]) .dropdown-item,
    :where(html[data-theme="dark"]) .page-title,
    :where(html[data-theme="dark"]) .confirmation-price,
    :where(html[data-theme="dark"]) .pickup-form .form-label,
    :where(html[data-theme="dark"]) .main-content :is(h2,h3,h4,h5),
    :where(html[data-theme="dark"]) .table :is(th,td) {
        color: var(--sandy-dark-text) !important;
    }

    :where(html[data-theme="dark"]) body .text-purple,
    :where(html[data-theme="dark"]) body .cusprimary,
    :where(html[data-theme="dark"]) .privacy-page :is(h1,h2),
    :where(html[data-theme="dark"]) .terms-page h2,
    :where(html[data-theme="dark"]) .right-panel .title,
    :where(html[data-theme="dark"]) .contact-info a,
    :where(html[data-theme="dark"]) .condition-box h6,
    :where(html[data-theme="dark"]) .confirmation-summary-section h3 {
        color: var(--sandy-dark-purple) !important;
    }

    :where(html[data-theme="dark"]) .dropdown-item:is(:hover,:focus),
    :where(html[data-theme="dark"]) .list-group-item-action:is(:hover,:focus) {
        background: #302840 !important; color: #fff !important;
    }

    :where(html[data-theme="dark"]) .form-control,
    :where(html[data-theme="dark"]) .form-select,
    :where(html[data-theme="dark"]) .form-control.input-box,
    :where(html[data-theme="dark"]) .stylish-input,
    :where(html[data-theme="dark"]) .stylish-dropdown,
    :where(html[data-theme="dark"]) .input-group-text,
    :where(html[data-theme="dark"]) #forgotPasswordPage input {
        background-color: var(--sandy-dark-surface-2) !important;
        color: var(--sandy-dark-text) !important;
        border-color: #737080 !important;
    }

    :where(html[data-theme="dark"]) input::placeholder,
    :where(html[data-theme="dark"]) textarea::placeholder { color: #aeb4c1 !important; opacity: 1; }

    :where(html[data-theme="dark"]) .form-control:focus,
    :where(html[data-theme="dark"]) .form-select:focus { border-color: #c4b5fd !important; box-shadow: 0 0 0 .2rem #a78bfa40 !important; }

    :where(html[data-theme="dark"]) .form-control:disabled,
    :where(html[data-theme="dark"]) .form-control[readonly],
    :where(html[data-theme="dark"]) .form-select:disabled { background-color: #2a2d35 !important; color: #b8beca !important; }

    :where(html[data-theme="dark"]) .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ddd6fe' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); }

    :where(html[data-theme="dark"]) .form-check-input { background-color: #20232b; border-color: #9c95ad; }

    :where(html[data-theme="dark"]) .form-check-input:checked { background-color: #7040c5; border-color: #c4b5fd; }

    :where(html[data-theme="dark"]) .btn-outline-purple { color: #ddd6fe !important; border-color: #a78bfa !important; }

    :where(html[data-theme="dark"]) .btn-outline-purple:is(:hover,:focus,.active) { background: #6032b0 !important; color: #fff !important; }

    :where(html[data-theme="dark"]) body .text-primary,
    :where(html[data-theme="dark"]) .modal a:not(.btn) { color: #bca9ff !important; }

    :where(html[data-theme="dark"]) .btn-outline-dark { color: #f3f4f6; border-color: #9c95ad; }

    :where(html[data-theme="dark"]) .btn-outline-dark:is(:hover,:focus) { background: #302840; color: #fff; }

    :where(html[data-theme="dark"]) .btn-outline-success { color: #86efac; border-color: #4ade80; }

    :where(html[data-theme="dark"]) .btn-outline-success:is(:hover,:focus) { background: #166534; color: #fff; }

    :where(html[data-theme="dark"]) .btn-light,
    :where(html[data-theme="dark"]) .btn-light.text-purple { color: #54259a !important; }

    :where(html[data-theme="dark"]) .btn-primary,
    :where(html[data-theme="dark"]) .btn-purple,
    :where(html[data-theme="dark"]) .register-btn { background-color: #7040c5; color: #fff !important; }

    :where(html[data-theme="dark"]) .btn-close { filter: invert(1) grayscale(1); }

    :where(html[data-theme="dark"]) :is(a,button,input,select,textarea,[role="button"]):focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; }

    :where(html[data-theme="dark"]) .accordion-button:not(.collapsed) { background: #302840 !important; color: #ddd6fe !important; }

    :where(html[data-theme="dark"]) .accordion-button::after { filter: brightness(0) invert(1); }

    :where(html[data-theme="dark"]) .accordion-body { color: var(--sandy-dark-muted); }

    :where(html[data-theme="dark"]) .alert-danger { background: #3c2028 !important; border-color: #914451 !important; color: #ffb4b4 !important; }

    :where(html[data-theme="dark"]) .alert-success { background: #15372b !important; border-color: #36745a !important; color: #a7f3d0 !important; }

    :where(html[data-theme="dark"]) .alert-warning { background: #3b3019 !important; border-color: #8b7139 !important; color: #fde68a !important; }

    :where(html[data-theme="dark"]) .alert-info { background: #163443 !important; border-color: #367088 !important; color: #a5e6ff !important; }

    :where(html[data-theme="dark"]) .alert :is(p,li,strong,a) { color: inherit !important; }

    :where(html[data-theme="dark"]) .table { --bs-table-bg: #181a20; --bs-table-color: #f3f4f6; --bs-table-border-color: #454955; --bs-table-striped-bg: #20232b; --bs-table-striped-color: #f3f4f6; --bs-table-hover-bg: #302840; --bs-table-hover-color: #fff; }

    :where(html[data-theme="dark"]) .table-light,
    :where(html[data-theme="dark"]) .table thead { --bs-table-bg: #252833; --bs-table-color: #f3f4f6; }

    :where(html[data-theme="dark"]) .page-link { background-color: #20232b; color: #ddd6fe; border-color: #454955; }

    :where(html[data-theme="dark"]) .page-item.disabled .page-link { background-color: #181a20; color: #aeb4c1; border-color: #454955; }

    :where(html[data-theme="dark"]) .page-item.active .page-link { background-color: #7040c5; border-color: #a78bfa; color: #fff; }
    /* Homepage: remove light gradients, keeping brand assets in their original colors. */
    :where(html[data-theme="dark"]) #select-brand { background: linear-gradient(180deg,#15131d,#101114) !important; border-color: #454955; }

    :where(html[data-theme="dark"]) #select-brand .brand-card { background: linear-gradient(180deg,#24212d,#181a20) !important; border-color: #454955 !important; }

    :where(html[data-theme="dark"]) #select-brand .brand-card:is(:hover,:focus) { border-color: #c4b5fd !important; }

    :where(html[data-theme="dark"]) #select-brand :is(h2,h5,h6,.brand-device-mark) { color: #f3f4f6 !important; }

    :where(html[data-theme="dark"]) #select-brand .brand-section-heading p,
    :where(html[data-theme="dark"]) #select-brand .brand-card .brand-card-copy p { color: #b8beca !important; }

    :where(html[data-theme="dark"]) #select-brand .brand-section-heading p span { color: #c4b5fd; }

    :where(html[data-theme="dark"]) #select-brand .brand-logo-frame { background: #f5f6fa !important; border-color: #ded9ea !important; }

    :where(html[data-theme="dark"]) #select-brand .brand-logo { filter: none !important; }

    :where(html[data-theme="dark"]) #select-brand .brand-device-mark-gaming span { background: #302840; border-color: #655478; color: #ede9fe; }

    :where(html[data-theme="dark"]) #select-brand .brand-card-arrow { background: #352849; color: #ddd6fe; }

    :where(html[data-theme="dark"]) #select-brand .brand-card:hover .brand-card-arrow { background: #6032b0; color: #fff; }

    :where(html[data-theme="dark"]) .phone-card,
    :where(html[data-theme="dark"]) .category-card,
    :where(html[data-theme="dark"]) .model-card,
    :where(html[data-theme="dark"]) .device-card { background: #181a20 !important; border-color: #454955 !important; color: #f3f4f6 !important; }

    :where(html[data-theme="dark"]) .phone-card :is(h5,h6),
    :where(html[data-theme="dark"]) .category-card :is(h5,h6),
    :where(html[data-theme="dark"]) .model-card :is(h5,h6),
    :where(html[data-theme="dark"]) .device-card :is(h5,h6) { color: #f3f4f6 !important; }

    :where(html[data-theme="dark"]) .icon-circle,
    :where(html[data-theme="dark"]) .icon-box,
    :where(html[data-theme="dark"]) .cat-icon-box { background: #302840 !important; }

    :where(html[data-theme="dark"]) section[style*="background:#f9f8ff"],
    :where(html[data-theme="dark"]) section[style*="background: #f9f8ff"] { background: #15131d !important; }
    /* Slider variables separate dark surfaces from white button text. */
    :where(html[data-theme="dark"]) #sd-hero { --ink: #f3f4f6; --mist: #c5bfd3; --purple-tint: #302840; --purple-tint-2: #655478; background: #181a20; }

    :where(html[data-theme="dark"]) #sd-hero .sd-slide__bg { background: radial-gradient(65% 85% at 88% 8%,#7040c533,transparent 60%),#181a20; }

    :where(html[data-theme="dark"]) #sd-hero .sd-eyebrow { color: #c4b5fd; }

    :where(html[data-theme="dark"]) #sd-hero .sd-btn--primary { background: #7040c5; color: #fff !important; }

    :where(html[data-theme="dark"]) #sd-hero .sd-btn--ghost { color: #ddd6fe; border-color: #a78bfa; }

    :where(html[data-theme="dark"]) #sd-hero :is(.sd-arrow,.sd-pagination) { background: #20232b; color: #ddd6fe; }

    :where(html[data-theme="dark"]) #sd-hero .sd-pagination__dot.is-active { background: #c4b5fd; }

    :where(html[data-theme="dark"]) #sd-hero .sd-arrow:hover { background: #6032b0; color: #fff; }

    :where(html[data-theme="dark"]) .repair-page { --repair-ink: #f3f4f6; --repair-muted: #b8beca; --repair-purple-tint: #302840; --repair-purple-soft: #655478; background: linear-gradient(180deg,#181a20,#15131d) !important; }

    :where(html[data-theme="dark"]) .repair-page .repair-card { background: #20232b; }

    :where(html[data-theme="dark"]) .repair-page .repair-hero h1,
    :where(html[data-theme="dark"]) .repair-page .repair-card h2 { color: #f3f4f6 !important; }

    :where(html[data-theme="dark"]) .repair-page .repair-hero p,
    :where(html[data-theme="dark"]) .repair-page .repair-card p { color: #b8beca !important; }

    :where(html[data-theme="dark"]) .repair-page .repair-icon { background: #302840; color: #c4b5fd; }

    :where(html[data-theme="dark"]) .repair-page .repair-panel-cta { color: #4e2e8c !important; }

    :where(html[data-theme="dark"]) .auth-container { background: #101114 !important; }

    :where(html[data-theme="dark"]) body #forgotPasswordPage { --label-color: #f3f4f6; --border-color: #737080; --bg-gray: #20232b; --primary-color: #7040c5; }

    :where(html[data-theme="dark"]) #forgotPasswordPage .country-code { color: #ddd6fe; }

    :where(html[data-theme="dark"]) #forgotPasswordPage .error { color: #ffb4b4; }

    :where(html[data-theme="dark"]) #forgotPasswordPage .success { color: #a7f3d0; }

    :where(html[data-theme="dark"]) #forgotPasswordPage .divider { background: #454955; }

    :where(html[data-theme="dark"]) #forgotPasswordPage button:disabled { background: #39343f; color: #b8beca; }

    :where(html[data-theme="dark"]) .container-eval .page-title,
    :where(html[data-theme="dark"]) .order-confirmation-page .confirmation-price { color: #f3f4f6; }

    :where(html[data-theme="dark"]) .container-eval .yes-no-group .active-no { background: #a82c4a; }

    :where(html[data-theme="dark"]) .container-eval .yes-no-group .active-yes { background: #7040c5; }

    :where(html[data-theme="dark"]) #orderConfirmModal .ps5-review-row { border-color: #454955; }

    :where(html[data-theme="dark"]) .sd-ticker .sd-ticker__repair { color: #54259a !important; }

}