/* Autofliper Dark — Sloj 2: Motors + Elementor override.
   Generated by tracing REAL computed styles on the live site (home,
   /buy-a-car/, a single listing, /services/), not by guessing from
   spec section 3 alone — that table is the starting point, this file
   fills what it didn't cover (e.g. select2/jQuery-UI form controls,
   Header Footer Elementor's flyout menu, pagination).

   STRATEGY: rather than re-issuing every one of the ~1800 individual
   color declarations found across Motors' ~30 CSS files (most of
   which are unused Bootstrap boilerplate that never renders), this
   targets the shared THIRD-PARTY LIBRARY classes Motors builds on
   (select2, jQuery UI, Elementor's own section/widget wrappers,
   Header-Footer-Elementor's flyout) plus Motors' own reused component
   classes (.filter-sidebar, .stm-*, .page-numbers). Because these
   classes repeat across every page that uses that library/component,
   targeting them once covers search filters, listing cards, static
   Elementor pages and the mobile menu flyout all at once, instead of
   needing a separate rule per page.

   SPECIFICITY: every rule is prefixed with html.af-dark and reuses
   the ORIGINAL class combination — since html.af-dark adds a real
   specificity unit on top of Motors' own selector, this always beats
   the original declaration regardless of how specific it was,
   without needing to guess/replicate deeper compound selectors.
   Loaded dead last (see autofliper-dark.php) so source-order also
   favors these rules for any remaining same-specificity ties.

   REGENERATING AFTER A MOTORS UPDATE: this file was built by reading
   REAL computed styles (getComputedStyle) on the live site in dark
   mode, not by parsing Motors' CSS text — only an actual browser
   resolves the real cascade, a static parser can't. Sloj 3 (Phase 3)
   is that same technique wired up permanently: it walks the DOM in
   dark mode, flags any light background or low-contrast text left
   over, and logs the exact selectors to the console. After a Motors
   update, open the site in dark mode, check that console output, and
   add whatever's new here — not a fully automatic rewriter on
   purpose, third-party CSS is too easy to mis-parse; a human reviews
   the diff. */

/* ─────────────────────────────────────────────────────────
   1) GENERIC SURFACES — Elementor's own section/widget wrappers,
   used on every Elementor-built page (home, services, contact,
   vehicle-inspection, car-dealerships, info…). Only overrides when
   Elementor/Sergio actually set a light background — a transparent
   section is untouched, so this never paints over a section that's
   deliberately using a background image or a color Sergio chose on
   purpose elsewhere.
   ───────────────────────────────────────────────────────── */
html.af-dark .elementor-section:not([style*="background-color"]),
html.af-dark .elementor-widget-wrap.elementor-element-populated:not([style*="background"]) {
    background-color: transparent !important;
}
html.af-dark .elementor-section,
html.af-dark .elementor-widget-wrap,
html.af-dark .elementor-element {
    color: var(--af-ink) !important;
}

/* Motors' own page-title wrapper — sits BEFORE the Elementor content on
   pages like /contact/, so it's not caught by any .elementor-* rule
   above. Confirmed live: a bare, unclassed <h2> here still had the
   light-mode #181818 ink color, unreadable on a dark page. */
html.af-dark .page-content {
    color: var(--af-ink) !important;
}
html.af-dark .elementor-widget-wrap[style*="background-color: #fff"],
html.af-dark .elementor-widget-wrap[style*="background-color: #FFF"],
html.af-dark .elementor-widget-wrap[style*="background-color: #ffffff"],
html.af-dark .elementor-widget-wrap[style*="background-color: #FFFFFF"] {
    background-color: var(--af-surface) !important;
}

/* Elementor's "Link" button skin — meant as a minimal/outline style, but
   found live (Sloj 3 scanner, homepage hero "Buy a Car! / Flip my car! /
   Sell my car!" CTAs) with an explicit white background set via the
   widget's own color picker. Swap to the dark surface token; the button's
   own text color (the brand red) is untouched and still reads fine on it. */
html.af-dark .elementor-button.elementor-button-link {
    background-color: var(--af-surface) !important;
}

/* ─────────────────────────────────────────────────────────
   2) SELECT2 — every dropdown sitewide (Search Options make/model/
   body, Add Car form fields, anywhere Motors replaces a native
   <select>). Confirmed live: #F6F7F9 bg + #181818 text on
   .select2-selection, the same pattern the results dropdown itself
   uses.
   ───────────────────────────────────────────────────────── */
html.af-dark .select2-selection,
html.af-dark .select2-selection--single,
html.af-dark .select2-selection--multiple,
html.af-dark .select2-selection__rendered,
html.af-dark .select2-dropdown,
html.af-dark .select2-search__field,
html.af-dark .select2-results__option {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
html.af-dark .select2-results__option--highlighted {
    background-color: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
}
html.af-dark .select2-selection__placeholder,
html.af-dark .select2-selection__arrow b {
    color: var(--af-ink-2) !important;
}
html.af-dark input.form-control,
html.af-dark textarea.form-control,
html.af-dark select.form-control {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}

/* ─────────────────────────────────────────────────────────
   3) jQuery UI — the price-range slider on Search Options, and any
   other jQuery-UI-based widget Motors uses the same way.
   ───────────────────────────────────────────────────────── */
html.af-dark .ui-widget-content,
html.af-dark .stm-price-range.ui-slider {
    background-color: var(--af-surface-2) !important;
    border-color: var(--af-line) !important;
}
html.af-dark .ui-slider-range,
html.af-dark .ui-widget-header {
    background-color: var(--af-accent) !important;
}
html.af-dark .ui-slider-handle,
html.af-dark .ui-state-default {
    background-color: var(--af-surface) !important;
    border-color: var(--af-accent) !important;
}

/* ─────────────────────────────────────────────────────────
   4) SEARCH OPTIONS / FILTER SIDEBAR — the widget wrapper itself
   (confirmed live: solid white, distinct from the page background),
   plus its labels/headings.
   ───────────────────────────────────────────────────────── */
html.af-dark .filter-sidebar,
html.af-dark .ajax-filter,
html.af-dark form.search-filter-form,
html.af-dark .sticky-mobile-filter,
html.af-dark .stm-accordion-single-unit,
html.af-dark .stm-accordion-content {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
html.af-dark .filter-select,
html.af-dark .stm_select_overflowed {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
/* "Reset All" inside the mobile filter drawer — off-canvas (translated
   off-screen) until opened so not visible on desktop, but still a solid
   white pill underneath; flagged live by the Sloj 3 scanner. Scoped to
   the filter sidebar only, not every .button sitewide. */
html.af-dark .filter-sidebar .button,
html.af-dark .sticky-filter-actions .button {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
}

/* ─────────────────────────────────────────────────────────
   5) LISTING CARDS — search results + archive grid. The card itself
   has no background (confirmed live, transparent — the white look
   comes from the grid's own container), so this targets that
   container plus the card's own border and the specs/meta rows.
   ───────────────────────────────────────────────────────── */
html.af-dark .stm_listing_grid,
html.af-dark .listing-list-loop,
html.af-dark .stm-isotope-listing-item {
    background-color: var(--af-surface) !important;
    border-color: var(--af-line) !important;
    color: var(--af-ink) !important;
}
html.af-dark .listing-list-loop .meta-top,
html.af-dark .listing-list-loop .meta-bottom,
html.af-dark .car-info,
html.af-dark .stm-car-info-1,
html.af-dark .stm-car-info-2 {
    color: var(--af-ink-2) !important;
}
html.af-dark .listing-list-loop a {
    color: var(--af-accent) !important;
}
/* Favorite-heart overlay on each card's photo (translucent white circle,
   flagged live by the Sloj 3 scanner) — darkened to match, still reads
   the same as a subtle overlay against any photo. */
html.af-dark .stm-listing-favorite,
html.af-dark .stm-listing-photos-unit,
html.af-dark .stm-swiper-prev,
html.af-dark .stm-swiper-next,
html.af-dark .add-to-compare {
    background-color: rgba(0, 0, 0, .45) !important;
}
/* Default avatar placeholder (dealer/seller with no profile photo) — the
   same light-gray fill Motors uses across its form fields elsewhere. */
html.af-dark .no-avatar {
    background-color: var(--af-surface-2) !important;
}
/* Empty compare-slot placeholder (/compare/, "add car to compare") — a
   static theme image asset (compare-empty.jpg), not a CSS color, so it
   can't be retokenized — darkened with a filter instead. Found on final
   QA pass, not caught by the Sloj 3 scanner since it skips <img> tags
   (a real image is expected to keep its own colors almost everywhere
   else on the site). */
html.af-dark img[src*="compare-empty"] {
    filter: brightness(.7) contrast(.9);
}
/* Mobile-only sticky bottom bar (Show N Cars / Reset) — hidden on desktop
   via display:none, only ever painted on narrow viewports, but flagged
   live with a solid white background; fixed at the source so there's no
   chance of a white flash on a slow load, per the general rule that any
   resting state a script/media-query normally hides should still be
   correct on its own. */
html.af-dark .sticky-filter-actions {
    background-color: var(--af-surface) !important;
    border-color: var(--af-line) !important;
}

/* ─────────────────────────────────────────────────────────
   6) PAGINATION
   ───────────────────────────────────────────────────────── */
html.af-dark .page-numbers {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
html.af-dark .page-numbers.current,
html.af-dark .page-numbers:hover {
    background-color: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
}

/* ─────────────────────────────────────────────────────────
   7) HEADER FOOTER ELEMENTOR — the mobile flyout menu (confirmed
   live: solid white push panel) and its nav links.
   ───────────────────────────────────────────────────────── */
html.af-dark .hfe-flyout-content,
html.af-dark .hfe-nav-menu__layout-horizontal,
html.af-dark .hfe-dropdown {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
}
html.af-dark .hfe-menu-item,
html.af-dark .hfe-menu-item a {
    color: var(--af-ink) !important;
}

/* ─────────────────────────────────────────────────────────
   8b) LOGIN / REGISTER (/authorization/) — Motors' own
   motors-login-register widget. Confirmed live: all three of its
   <form> elements (sign in, forgot password, register) are bare,
   unclassed <form> tags with a literal white background — sign-up
   was visibly broken (white card, dark fields inside it, unreadable
   labels); sign-in only looked fine by comparison because the same
   bug is smaller/less visible there.
   ───────────────────────────────────────────────────────── */
html.af-dark .stm-login-register-form form {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
    border: 1px solid var(--af-line) !important;
}
html.af-dark .stm-login-register-form h3,
html.af-dark .stm-login-register-form h4,
html.af-dark .stm-login-register-form label {
    color: var(--af-ink) !important;
}

/* ─────────────────────────────────────────────────────────
   7b) MUTED LABEL TEXT — confirmed live (single listing spec table):
   Motors uses rgba(24,24,24,.5) — 50%-opacity BLACK — as its "muted
   secondary text" convention everywhere (spec section 3 measured this
   exact value 168 times sitewide). On a dark background that's
   basically invisible, not just low-contrast — same failure mode the
   spec singled out as why the first dark-mode attempt failed. Classes
   below are every one found via computed-style inspection — single
   listing page, plus /compare/'s row labels (.compare-value-*), found
   the same way. More will surface page by page in Phase 3.
   ───────────────────────────────────────────────────────── */
html.af-dark .item-label,
html.af-dark .stm-label,
html.af-dark .stm-dealer-name,
html.af-dark .stm-car-similar-meta,
html.af-dark .test-drive-car-name,
html.af-dark .form-modal-label,
html.af-dark .labeled,
html.af-dark .mvl-sign-in-forgot-pass,
html.af-dark .no-avatar,
html.af-dark [class*="compare-value-"] {
    color: var(--af-ink-2) !important;
}

/* ─────────────────────────────────────────────────────────
   8) ACCOUNT / LOGIN DROPDOWN (Motors' own, not autofliper-header's)
   ───────────────────────────────────────────────────────── */
html.af-dark .lOffer-account-dropdown,
html.af-dark .stm-login-form-unregistered,
html.af-dark .stm-login-form {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
/* WooCommerce's own My Account login/register form buttons (default
   plugin lavender-gray, not part of Motors' own styling) — confirmed
   live on /my-account/. */
html.af-dark .woocommerce-button,
html.af-dark .woocommerce-form-login__submit,
html.af-dark .woocommerce-form-register__submit {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}

/* ─────────────────────────────────────────────────────────
   9) FORMS — Add Car, Contact, generic Motors/Gravity-style fields
   sitewide, beyond the .form-control rule in section 2.
   ───────────────────────────────────────────────────────── */
html.af-dark input[type="text"],
html.af-dark input[type="email"],
html.af-dark input[type="tel"],
html.af-dark input[type="number"],
html.af-dark input[type="password"],
html.af-dark input[type="search"],
html.af-dark textarea,
html.af-dark select {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
html.af-dark ::placeholder {
    color: var(--af-ink-2) !important;
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────
   10) SINGLE LISTING — gallery frame, spec table, seller box (class
   names per Motors' single-listing template).
   ───────────────────────────────────────────────────────── */
html.af-dark .single-product-header,
html.af-dark .stm-single-car-info,
html.af-dark .stm-car-features,
html.af-dark .car-desc-sec,
html.af-dark .stm-seller-info,
html.af-dark .stm_single_product_gallery,
html.af-dark .listing-single-photos {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
html.af-dark .stm-car-features table,
html.af-dark .stm-car-features tr,
html.af-dark .stm-car-features td,
html.af-dark .stm-car-features th {
    background-color: transparent !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}

/* ─────────────────────────────────────────────────────────
   11) WORDPRESS / WOOCOMMERCE CORE NOTICES — outside the
   cart/checkout pages autofliper-credits already reskins.
   ───────────────────────────────────────────────────────── */
html.af-dark .woocommerce-message,
html.af-dark .woocommerce-info,
html.af-dark .woocommerce-error {
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
}

/* ─────────────────────────────────────────────────────────
   12) BETTER MESSAGES (/messages/) — third-party plugin ("bm-"
   prefixed classes), its own Tailwind-style gray scale confirmed
   live via computed styles on the guest (logged-out) view: white
   panels, #F9FAFB secondary panels, near-black #111827 text, #374151
   icons, #6B7280 muted text. The compose button already uses the
   site's own brand red (rgb(179,39,38) = --af-accent) so needs no
   change. NOTE: only the logged-out shell (empty state + the
   "Authorization Required" guest wall) could be verified this way —
   the actual conversation/message-bubble view needs a logged-in pass
   to confirm with the Sloj 3 scanner.
   ───────────────────────────────────────────────────────── */
html.af-dark .bm-card,
html.af-dark .bm-chat-empty,
html.af-dark .bm-thread-header {
    background-color: var(--af-surface) !important;
    color: var(--af-ink) !important;
    border-color: var(--af-line) !important;
}
html.af-dark .bm-guest-wall {
    background-color: color-mix(in srgb, var(--af-surface) 95%, transparent) !important;
    color: var(--af-ink) !important;
}
html.af-dark .bm-embedded-inbox,
html.af-dark .bm-ei-search__pinned,
html.af-dark .bm-footer-me__row,
html.af-dark .bm-chat-empty__disc {
    background-color: var(--af-surface-2) !important;
}
html.af-dark .bm-chat-empty__text,
html.af-dark .bm-ei-empty {
    color: var(--af-ink-2) !important;
}
/* Broad safety net for the parts of this plugin that couldn't be
   verified without logging in (the actual conversation/message-bubble
   view) — border-color is inert on anything without a border, so this
   is safe to apply everywhere under the "bm-" prefix. */
html.af-dark [class^="bm-"],
html.af-dark [class*=" bm-"] {
    border-color: var(--af-line) !important;
}