/* AuctionForge (BidSpirit) override stylesheet — makes the plugin's own
   rendered UI match gunslinger-theme's design system, including dark/light
   mode via the same [data-theme] toggle the header/footer already use.

   Selectors below are copied straight from the plugin's own
   inc/controllers/StyleCssOutput.php (its admin color-settings CSS
   generator) rather than guessed from rendered HTML, so they're the
   authoritative "bp-" class names for each component. AuctionForge's own
   dynamic style output only fires when its admin settings differ from
   defaults, and we're leaving those untouched, so this file is the only
   override layer in play, no specificity fight with a second dynamic
   <style> block. !important is used throughout to match how AuctionForge's
   own generator overrides its base libs.css — that's the level required to
   win here, not stylistic preference. */

/* ── PAGE CHROME — AuctionForge sets no background of its own ── */
body.gs-body { background: var(--black); }
.bp-container,
.bp-container-fluid,
.bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content,
.bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content p,
.bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content span,
.bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content li { background: transparent; color: var(--white) !important; }
[data-theme="light"] body.gs-body { background: #f5f1eb; }
[data-theme="light"] .bp-container,
[data-theme="light"] .bp-container-fluid,
[data-theme="light"] .bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content,
[data-theme="light"] .bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content p,
[data-theme="light"] .bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content span,
[data-theme="light"] .bp-single-lot .bp-single-lot__body .bp-body__main .bp-body__main_content li { color: #1a1814 !important; }

/* ── 1. GLOBAL ── */
.bp-container, .bp-container-fluid { font-family: var(--font-body) !important; }
.bp-countdown,
.bp-single-lot .bp-single-lot__head,
.bp-lots .bp-lot.bp-lot_auction .bp-lot__title .bp-title,
.bp-lots .bp-lot.bp-lot_countdown .bp-lot__title .bp-title { font-family: var(--font-display) !important; }
.bp-single-lot .bp-single-lot__head,
.bp-single-lot .bp-control__notice .bp-bid,
.user_nav .menu a:hover span { color: var(--crimson-lit) !important; } /* dark-panel contexts, not the always-tan lot cards below */
/* Card subtitle/meta text — theme-split like every other card color below
   (see LOT + AUCTION CARDS section). */
.bp-lots .bp-lot .bp-lot__text,
.bp-lots .bp-lot .bp-lot__title,
.bp-lots .bp-lot .bp-lot__title p,
.bp-lots .bp-lot .bp-lot__title a { color: var(--muted) !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__text,
[data-theme="light"] .bp-lots .bp-lot .bp-lot__title,
[data-theme="light"] .bp-lots .bp-lot .bp-lot__title p,
[data-theme="light"] .bp-lots .bp-lot .bp-lot__title a { color: #55504a !important; }

/* ── 2/3. BUTTONS — primary / outline ── */
.bp-btn.bp-btn-default {
  background-color: var(--crimson) !important;
  color: var(--white) !important;
  border-color: var(--crimson-mid) !important;
}
.bp-btn.bp-btn-default:hover {
  background-color: var(--crimson-mid) !important;
  border-color: var(--crimson-lit) !important;
}
.bp-btn.bp-btn-outline-default {
  background-color: transparent !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}
.bp-btn.bp-btn-outline-default:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: var(--crimson-mid) !important;
}
[data-theme="light"] .bp-btn.bp-btn-outline-default { color: #1a1814 !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .bp-btn.bp-btn-outline-default:hover { background-color: rgba(0,0,0,0.05) !important; }

/* "I don't Agree" on the bid-confirmation modal — a bare-link button
   variant (bp-btn-border bp-btn-link), unstyled by anything above,
   confirmed via templates/parts/user-templates.php:191. */
.bp-btn.bp-btn-border.bp-btn-link {
  color: var(--white) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}
.bp-btn.bp-btn-border.bp-btn-link:hover { background: rgba(255,255,255,0.08) !important; }
[data-theme="light"] .bp-btn.bp-btn-border.bp-btn-link { color: #1a1814 !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .bp-btn.bp-btn-border.bp-btn-link:hover { background: rgba(0,0,0,0.05) !important; }

/* ── 4. BUTTONS — login / register ── */
.bp-btn.bp-btn-login {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}
.bp-btn.bp-btn-login:hover { background: rgba(255,255,255,0.08) !important; }
.bp-btn.bp-btn-register {
  background-color: var(--crimson) !important;
  border-color: var(--crimson) !important;
  color: var(--white) !important;
}
.bp-btn.bp-btn-register:hover { background-color: var(--crimson-mid) !important; }
[data-theme="light"] .bp-btn.bp-btn-login { color: #1a1814 !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .bp-btn.bp-btn-login:hover { background: rgba(0,0,0,0.05) !important; }

/* ── 5. BUTTONS — bid ── */
.bp-btn.bp-btn-black {
  background-color: var(--crimson) !important;
  color: var(--white) !important;
}
.bp-btn.bp-btn-black:hover { background-color: var(--crimson-mid) !important; }

/* ── 6/7. LOT + AUCTION CARDS ──
   Theme-split like every other component in this file — dark cards in dark
   mode, tan cards in light mode. Border wraps the WHOLE .bp-lot card (not
   just the photo), and the photo mat is transparent so it reads as one
   continuous card surface with no seam.
   NOTE: var(--crimson) (#620000) is the light-bg red — against the dark
   var(--panel) surface it's only ~1.28:1, the same AA trap documented
   elsewhere in this file (see .bp-desc h1 above). Dark-mode border/accent
   uses var(--crimson-lit) instead (~4.8:1 on panel). Hover shadow rules are
   left exactly as they were. */
.bp-lots .bp-lot,
.bp-lots .bp-lot.bp-lot_auction {
  background-color: var(--panel) !important;
  border: 2px solid var(--crimson-lit) !important;
  box-sizing: border-box !important;
}
.bp-lots .bp-lot.bp-lot_auction { box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; }
.bp-lots .bp-lot.bp-lot_auction:hover { box-shadow: 0 6px 20px rgba(98,0,0,0.15) !important; }
.bp-lots .bp-lot.bp-lot_auction .bp-lot__title .bp-title { color: var(--crimson-lit) !important; }
.bp-lots .bp-lot.bp-lot_auction .bp-lot__date { color: var(--muted) !important; }
.bp-lots .bp-lot:hover { box-shadow: 0 6px 20px rgba(98,0,0,0.35) !important; }
.bp-lots .bp-lot .bp-lot__wrp-image { background-color: transparent !important; }
.bp-lots .bp-lot .bp-lot__title .bp-title { color: var(--white) !important; }
.bp-lots .bp-lot .bp-lot__title { border-bottom-color: var(--border) !important; }
.bp-lots .bp-lot .bp-lot__tool,
.bp-lots .bp-lot .bp-lot__tool .bp-subtitle { color: var(--muted) !important; }
.bp-lots .bp-lot .bp-lot__tool .bp-price { color: var(--crimson-lit) !important; }
.bp-lots .bp-lot .bp-lot__tool.bp-lead { background-color: var(--crimson) !important; }
.bp-lots .bp-lot .bp-lot__tool.bp-lead .bp-subtitle,
.bp-lots .bp-lot .bp-lot__tool.bp-lead .bp-price { color: var(--white) !important; }

[data-theme="light"] .bp-lots .bp-lot,
[data-theme="light"] .bp-lots .bp-lot.bp-lot_auction {
  background-color: #f5f1eb !important;
  border: 2px solid var(--crimson) !important;
}
[data-theme="light"] .bp-lots .bp-lot.bp-lot_auction .bp-lot__title .bp-title { color: var(--crimson) !important; }
[data-theme="light"] .bp-lots .bp-lot.bp-lot_auction .bp-lot__date { color: #55504a !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__title .bp-title { color: #1a1814 !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__title { border-bottom-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__tool,
[data-theme="light"] .bp-lots .bp-lot .bp-lot__tool .bp-subtitle { color: #55504a !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__tool .bp-price { color: var(--crimson) !important; }

/* ── 8. COUNTDOWN TIMER ── */
.bp-countdown { background: var(--crimson) !important; }
.bp-countdown,
.bp-countdown .bp-countdown-text,
.bp-countdown .bp-countdown-time { color: var(--white) !important; }

/* ── 9. SINGLE LOT PAGE ── */
.bp-single-lot .bp-single-lot__head { color: var(--crimson-lit) !important; }
.bp-single-lot .bp-control {
  background-color: var(--panel) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.4) !important;
}
.bp-single-lot .bp-control .bp-control__commission,
.bp-single-lot .bp-control .bp-control__desc,
.bp-single-lot .bp-control .bp-control__price,
.bp-single-lot .bp-control .bp-control__estimate { color: var(--muted) !important; }
.bp-single-lot .bp-control__notice { background-color: rgba(98,0,0,0.18) !important; }
.bp-single-lot .bp-control__notice .bp-title { color: var(--white) !important; }
.bp-single-lot .bp-control__notice .bp-bid { color: var(--crimson-lit) !important; }
.bp-single-lot .bp-control__title,
.bp-single-lot .bp-start-countdown { color: var(--white) !important; }
[data-theme="light"] .bp-single-lot .bp-control { background-color: #ffffff !important; box-shadow: 0 2px 14px rgba(0,0,0,0.1) !important; }
[data-theme="light"] .bp-single-lot .bp-control .bp-control__commission,
[data-theme="light"] .bp-single-lot .bp-control .bp-control__desc,
[data-theme="light"] .bp-single-lot .bp-control .bp-control__price,
[data-theme="light"] .bp-single-lot .bp-control .bp-control__estimate { color: #55504a !important; } /* WCAG fix: --muted on white panel is 1.60:1, fails AA badly */
[data-theme="light"] .bp-single-lot .bp-control__title,
[data-theme="light"] .bp-single-lot .bp-start-countdown { color: #1a1814 !important; }

/* ── 13. LOT DESCRIPTION BODY (.bp-desc) ──
   Found via live-DOM inspection, not the plugin's own admin settings list:
   AuctionForge renders the lot title AND the full description as one block
   of rich-text content inside .bp-desc (the title is literally the first
   heading in that content, .bp-single-lot__head is a near-empty toolbar
   container after client-side render, not where the title text lives).
   .bp-desc has its own explicit black text color with no theme awareness
   at all, which is the "black text on our dark background" bug.
   Colors chosen to guarantee 4.5:1 AA regardless of what font size the
   describer's own rich-text content happens to use — not relying on the
   3:1 "large text" exception anywhere here. */
.bp-desc,
.bp-desc p, .bp-desc li, .bp-desc span, .bp-desc strong, .bp-desc em,
.bp-desc h2, .bp-desc h3, .bp-desc h4, .bp-desc h5, .bp-desc h6 { color: var(--white) !important; } /* 17.03:1 on #0b0c10 */
.bp-desc h1 { color: var(--crimson-lit) !important; } /* 5.24:1 on #0b0c10 */
.bp-desc a { color: var(--white) !important; text-decoration: underline; }
[data-theme="light"] .bp-desc,
[data-theme="light"] .bp-desc p, [data-theme="light"] .bp-desc li, [data-theme="light"] .bp-desc span,
[data-theme="light"] .bp-desc strong, [data-theme="light"] .bp-desc em,
[data-theme="light"] .bp-desc h2, [data-theme="light"] .bp-desc h3, [data-theme="light"] .bp-desc h4,
[data-theme="light"] .bp-desc h5, [data-theme="light"] .bp-desc h6 { color: #1a1814 !important; } /* 15.9:1 on #f5f1eb */
[data-theme="light"] .bp-desc h1 { color: var(--crimson) !important; } /* NOT crimson-lit (only 3.26:1, fails AA); --crimson is 12.51:1 */
[data-theme="light"] .bp-desc a { color: #1a1814 !important; text-decoration: underline; }

/* ── 14. MISC TEXT ELEMENTS surfaced by an automated contrast audit,
   not covered by the plugin's admin settings or the sections above ── */
.title { color: var(--muted) !important; }
/* Archive/listing page header (e.g. "Upcoming Auctions"): ships with a
   stock background photo (bg-auction.jpg) + dark overlay, white text
   assumes that photo is always there for contrast. Not our branding, and
   without it the white text has nothing dark behind it in light mode.
   Replace the photo with a solid on-brand background instead, same fix
   for both themes since the text itself is always white by design. */
.bp-header { background-image: none !important; background-color: var(--crimson) !important; }
.bp-info__link { color: var(--crimson-lit) !important; } /* replaces AuctionForge's un-themed Bootstrap blue */
.bp-single-lot strong:not([class]),
.bp-single-lot span:not([class]) { color: var(--muted) !important; }
[data-theme="light"] .title { color: #55504a !important; }
[data-theme="light"] .bp-header__time { color: #1a1814 !important; }
[data-theme="light"] .bp-info__link { color: var(--crimson) !important; } /* crimson-lit fails AA on light bg, see above */
[data-theme="light"] .bp-single-lot strong:not([class]),
[data-theme="light"] .bp-single-lot span:not([class]) { color: #55504a !important; }

/* Lot "quick facts" block (GSID/Make/Model labels) — the plugin sets these
   via inline style="color:#7a1414" (a dark maroon meant for the light
   theme it originally shipped with), not a class, so it isn't caught by
   any selector above. External !important still beats an inline style
   without its own !important. */
.bp-single-lot .body.bp-mb-15,
.bp-single-lot .body.bp-mb-15 p,
.bp-single-lot .body.bp-mb-15 span:not([style]),
.bp-single-lot .body.bp-mb-15 b { color: var(--white) !important; }
[data-theme="light"] .bp-single-lot .body.bp-mb-15,
[data-theme="light"] .bp-single-lot .body.bp-mb-15 p,
[data-theme="light"] .bp-single-lot .body.bp-mb-15 span:not([style]),
[data-theme="light"] .bp-single-lot .body.bp-mb-15 b { color: #1a1814 !important; }

/* Field-label spans (GSID/Make/Model/etc.) carry TALONS' own inline
   style="color:#7a1414" ("on-brand martyr red") — the :not([style]) rules
   above deliberately skip these so we don't strip that branding, but the
   original hex only hits 1.77:1 on our dark bg (fails AA badly; it was
   evidently authored for a light background). Swap in the same
   crimson-lit/crimson pair used everywhere else in this reskin instead of
   inventing a third red, keeps it on-brand and AA-compliant in both themes. */
.bp-single-lot .body.bp-mb-15 span[style] { color: var(--crimson-lit) !important; } /* 5.24:1 on dark bg */
[data-theme="light"] .bp-single-lot .body.bp-mb-15 span[style] { color: var(--crimson) !important; } /* 12.51:1 on light bg; crimson-lit alone is 3.26:1, fails AA */

/* Collapse TALONS' export artifact of tripled <br> tags between fields
   down to a single line break, without touching the stored content. */
.bp-single-lot .body.bp-mb-15 br + br { display: none; }

/* ── 10. MODALS ── */
.bp-modal .modal__overlay { background-color: rgba(0,0,0,0.7) !important; }
.bp-modal .modal__container {
  background-color: var(--panel) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55) !important;
}
.bp-modal .modal__header .modal__title { color: var(--white) !important; }
.bp-modal .modal__footer .modal_links__item { color: var(--crimson-lit) !important; }
.bp-modal .modal__btn-primary { background-color: var(--crimson) !important; }
.bp-modal .modal__subtitle,
.bp-modal .bp-text,
.bp-modal .bp-form-group__link { color: var(--muted) !important; }
[data-theme="light"] .bp-modal .modal__container { background-color: #f5f1eb !important; }
[data-theme="light"] .bp-modal .modal__header .modal__title { color: #1a1814 !important; }
[data-theme="light"] .bp-modal .modal__footer .modal_links__item { color: var(--crimson) !important; } /* WCAG fix: crimson-lit on light modal bg is 3.26:1, fails AA; crimson is 12.5:1 */
[data-theme="light"] .bp-modal .modal__subtitle,
[data-theme="light"] .bp-modal .bp-text,
[data-theme="light"] .bp-modal .bp-form-group__link { color: #55504a !important; }

/* Bid-confirmation modal (templates/parts/user-templates.php) — the plain
   label/value rows (Lot number, Lot name, Buyer's premium, Sales Tax,
   Total Price) and the agreement paragraph have no color class of their
   own at all, unstyled against the dark modal__container background. */
.bp-modal .modal__content,
.bp-modal .modal__content p,
.bp-modal .modal__content__item,
.bp-modal .modal__content__item strong,
.bp-modal .modal__content__item span { color: var(--white) !important; }
.bp-modal .bp-text-strong { color: var(--white) !important; font-weight: 700; }
/* Scoped to .modal__content (3 classes) rather than bare .bp-text-red (2)
   so it actually beats the generic .modal__content__item span rule above
   — same specificity tier as that rule, otherwise the warning/bid-value
   text silently renders white instead of red (still passed contrast by
   accident, but wasn't the intended color). */
.bp-modal .modal__content .bp-text-red { color: var(--crimson-lit) !important; } /* WCAG fix: literal CSS "red" is only 4.80:1 on dark, thin margin; crimson-lit is 5.24:1 */
/* Close button "✕" — a ::before pseudo-element forced to #000 by default,
   invisible on our dark modal background. */
.bp-modal .modal__close:before { color: var(--white) !important; }
[data-theme="light"] .bp-modal .modal__content,
[data-theme="light"] .bp-modal .modal__content p,
[data-theme="light"] .bp-modal .modal__content__item,
[data-theme="light"] .bp-modal .modal__content__item strong,
[data-theme="light"] .bp-modal .modal__content__item span { color: #1a1814 !important; }
[data-theme="light"] .bp-modal .bp-text-strong { color: #1a1814 !important; }
[data-theme="light"] .bp-modal .modal__content .bp-text-red { color: var(--crimson) !important; } /* WCAG fix: literal "red" is 3.55:1 on light, fails AA outright */
[data-theme="light"] .bp-modal .modal__close:before { color: #1a1814 !important; }

/* "I Agree" button — a third, unstyled button variant (bp-btn-primal),
   ships as teal at 0.7 opacity by default. On-brand crimson to match
   every other primary action button in this reskin, solid instead of
   translucent so contrast doesn't shift with whatever's behind it. */
.bp-btn.bp-btn-primal {
  background-color: var(--crimson) !important;
  opacity: 1 !important;
  color: var(--white) !important;
}
.bp-btn.bp-btn-primal:hover { background-color: var(--crimson-mid) !important; }

/* Custom checkboxes (real <input> hidden, box + checkmark drawn via
   label ::before/::after) — box border and checkmark are both hardcoded
   #000, invisible against any dark background. Theme-split like everything
   else here: the light-mode override restores dark, visible colors against
   the plugin's own light checkbox box (regression fix — an earlier version
   of this rule had no [data-theme="light"] block, so var(--white) as the
   checkmark color leaked into light mode too and made checks invisible
   there). Used everywhere: login/register forms, this bid modal, any other
   .bp-form-check-input on the site. */
.bp-from .bp-form-group input.bp-form-check-input + label::before { border-color: var(--muted) !important; }
.bp-from .bp-form-group input.bp-form-check-input:checked + label:after { border-color: var(--white) !important; }
[data-theme="light"] .bp-from .bp-form-group input.bp-form-check-input + label::before { border-color: #55504a !important; }
[data-theme="light"] .bp-from .bp-form-group input.bp-form-check-input:checked + label:after { border-color: #1a1814 !important; }

/* ── 11. WISHLIST HEART ── */
.bp__wishlist { background-color: transparent !important; }

/* ── 12. FORMS ── */
.bp-from .bp-form-group .bp-form-control {
  border-color: var(--border) !important;
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--white) !important;
}
.bp-from .bp-form-group label,
.bp-from .bp-form-group .bp-label { color: var(--muted) !important; }
.bp-from .bp-form-group .bp-text-error,
.bp-from .bp-form-group .bp-form-error { color: #e0554a !important; }
[data-theme="light"] .bp-from .bp-form-group .bp-form-control {
  border-color: rgba(0,0,0,0.2) !important;
  background-color: #ffffff !important;
  color: #1a1814 !important;
}
[data-theme="light"] .bp-from .bp-form-group label,
[data-theme="light"] .bp-from .bp-form-group .bp-label { color: #55504a !important; }

/* ── 15. .bp-header TEXT — always white, both themes ──
   Deliberately placed last in the file: .bp-header's background is pinned
   to crimson in both themes (section on .bp-header above), so its text
   needs its own light-independent color, overriding the generic light/dark
   split used for .title and .bp-header__time elsewhere on the page. Same
   specificity as those earlier rules, so source order is what makes this
   win — it has to come after them, not just be written with !important. */
.bp-header .title,
.bp-header .bp-header__time,
.bp-header .bp-header__content { color: var(--white) !important; }

/* ── 16. AUCTION-INFO ACCORDION ("View Auction Information") ──
   Ships as a plain white box with hardcoded #333/#000 text and a #555 SVG
   chevron fill (not currentColor, so a plain `color` override wouldn't
   touch it) — invisible seam against the dark page. Theme-split with an
   explicit [data-theme="light"] restore, same lesson as the checkbox fix
   above: an unguarded override leaks into light mode otherwise. */
#af-auction-info-accordion,
#af-auction-info-toggle { background-color: var(--panel) !important; border-color: var(--border) !important; }
.af-auction-accordion__title,
.af-auction-accordion__content,
.af-auction-accordion__content p { color: var(--white) !important; }
.af-auction-accordion__chevron svg,
.af-auction-accordion__chevron svg path { fill: var(--white) !important; }
[data-theme="light"] #af-auction-info-accordion { background-color: #fafafa !important; border-color: #e0e0e0 !important; }
[data-theme="light"] #af-auction-info-toggle { background-color: #f5f5f5 !important; border-color: #e0e0e0 !important; }
[data-theme="light"] .af-auction-accordion__title,
[data-theme="light"] .af-auction-accordion__content,
[data-theme="light"] .af-auction-accordion__content p { color: #1a1814 !important; }
[data-theme="light"] .af-auction-accordion__chevron svg,
[data-theme="light"] .af-auction-accordion__chevron svg path { fill: #555555 !important; }

/* ── 17. SELECT2 WIDGETS (sort/search toolbar, profile-page country/state
   pickers, everywhere else Select2 renders) ──
   Select2's own skin is white-box/black-text with no theme awareness, and
   it's used in more places than just the catalog toolbar (billing/shipping
   country+state selects on the account page, phone country code, etc.), so
   this is unscoped rather than tied to specific field wrapper classes.
   .bp-form-control (plain text/search inputs) already inherits correct
   colors from the FORMS section above — only Select2's own chrome
   (selection box, dropdown panel, search-within field, arrow) needs fixing
   here, plus the search-icon button. */
.select2-selection,
.select2-dropdown { background-color: var(--panel) !important; border-color: var(--border) !important; }
.select2-selection__rendered { color: var(--white) !important; }
.select2-selection__arrow b { border-top-color: var(--muted) !important; }
.select2-search__field { background-color: var(--panel) !important; color: var(--white) !important; border-color: var(--border) !important; }
.bp-btn-search,
.bp-btn-search i { color: var(--white) !important; }
[data-theme="light"] .select2-selection,
[data-theme="light"] .select2-dropdown { background-color: #ffffff !important; border-color: #aaaaaa !important; }
[data-theme="light"] .select2-selection__rendered { color: #000000 !important; }
[data-theme="light"] .select2-selection__arrow b { border-top-color: #888888 !important; }
[data-theme="light"] .select2-search__field { background-color: #ffffff !important; color: #000000 !important; border-color: #aaaaaa !important; }
[data-theme="light"] .bp-btn-search,
[data-theme="light"] .bp-btn-search i { color: #000000 !important; }

/* ── 18. ACCOUNT / PROFILE PAGE ──
   #profile-page gets an inline background-color:#fff set at runtime by the
   plugin's own JS (reads the data-bg-color attribute — an admin "profile
   page background" setting, untouched/defaulted to white). That's why
   dark-mode text here was rendering pale-on-white or white-on-white: every
   descendant assumed a light backdrop. Overriding the color at the
   container level (not per-element) means unstyled bits — the address
   headings, the bids-toggle buttons, table cells — all inherit a sane
   default instead of needing individual fixes; anything already handled by
   a more specific rule (.bp-form-control, .title, etc.) is untouched by
   inheritance regardless of the !important here. */
#profile-page { background-color: transparent !important; color: var(--white) !important; }
[data-theme="light"] #profile-page { color: #1a1814 !important; }
/* The actual white box: not JS/data-bg-color as it first appeared, but a
   plain plugin rule (.bp-tabs-content > div.active { background:#fff }) —
   the "active tab panel" highlight, on every tab, not just My Account. */
.bp-tabs-content > div.active { background-color: transparent !important; }

.af-addr-head { font-weight: 700; }

.bp-bids-toggle-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.bp-bids-toggle-btn.bp-bids-toggle-active {
  background: var(--crimson) !important;
  border-color: var(--crimson) !important;
  color: var(--white) !important;
}
[data-theme="light"] .bp-bids-toggle-btn { color: #55504a !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .bp-bids-toggle-btn.bp-bids-toggle-active { background: var(--crimson) !important; border-color: var(--crimson) !important; color: var(--white) !important; }

/* Payment-methods table: plugin hardcodes light-grey zebra stripes/borders
   (#ddd/#f9f9f9/#f1f1f1) with no !important, easy to beat and clearly wrong
   once the page background goes dark. Light mode keeps the plugin's own
   greys — they already read fine on a light page. */
.bp-table { border-color: var(--border) !important; }
.bp-table tbody th,
.bp-table tbody td { border-color: var(--border) !important; }
.bp-table tbody tr:nth-of-type(odd),
.bp-table tbody tr:nth-of-type(odd) td { background-color: rgba(255,255,255,0.04) !important; }
.bp-table tbody tr:hover { background-color: rgba(255,255,255,0.08) !important; }

/* ── 19. BID STATUS COLORS (winning/outbid) — My Bids, Wish List, etc. ──
   AuctionForge marks "you're winning" / "you're outbid" with literal CSS
   keyword colors (green/red), not theme/brand aware. Plain `red` fails AA
   on both our dark panel (~4.4:1) and tan card (~3.6:1); plain `green`
   passes on tan (~4.6:1, kept as-is below) but fails on the dark panel
   (~3.5:1), so only the dark side needs a brighter substitute. Scoped to
   .bp-lots so it doesn't fight the already-fixed .bp-text-red inside the
   bid-confirmation modal (a different, unrelated context). The .bp-lead
   background rule in the CARDS section above is a lower-specificity
   3-class selector and loses to these 4-class ones automatically — this
   is what was silently painting the "leading bid" badge crimson instead of
   its intended green. */
.bp-lots .bp-text-green { color: #4caf50 !important; }
.bp-lots .bp-text-red { color: var(--crimson-lit) !important; }
.bp-lots .bp-lot .bp-lot__tool.bp-lead.bp-bg-green { background-color: #2e7d32 !important; }
.bp-lots .bp-lot .bp-lot__tool.bp-lead.bp-bg-red { background-color: var(--crimson) !important; }
[data-theme="light"] .bp-lots .bp-text-red { color: var(--crimson) !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__tool.bp-lead.bp-bg-green { background-color: green !important; }
[data-theme="light"] .bp-lots .bp-lot .bp-lot__tool.bp-lead.bp-bg-red { background-color: var(--crimson) !important; }