/* Every rule here is deliberately scoped under .carbid-app (the wrapper theme_wrap.php's carbid_theme_header()/carbid_theme_footer() render around all CarBid content) -- this stylesheet now shares a page with inexauto.com's real Woodmart/WooCommerce/Elementor theme, and unscoped rules like a bare `body`/`a`/`*` would leak into (or fight with) that theme's own header, cart, and menu markup. See DECISIONS.md. */ .carbid-app { /* Woodmart renders the real page content area as a flex child (.row. content-layout-wrapper) with no defined width on its children -- a flex item with no width/flex-basis shrink-wraps to its content instead of filling the row, confirmed live 2026-08-20 as the actual cause of a persistent right-side gap that survived both the is_404 fix and a page-level sidebar setting change (neither was the real cause). width:100% makes this fill whatever space Woodmart's layout actually gives it. */ width: 100%; --accent: #16897a; --accent-deep: #0f5c52; --accent-soft: #e4f3ef; --bg: #f4f6f7; --surface: #ffffff; --text: #1f2a2e; --text-muted: #5b6b6e; --text-faint: #8b9799; --border: #dee4e5; --border-soft: #eaeeee; --navy: #1a3b8f; --iaai-red: #cc1414; --seller-blue-bg: #e6eefc; --seller-blue-fg: #1254cc; --warn-bg: #fef3e6; --warn-fg: #a1520a; --danger: #b3352a; --danger-soft: #fbeae8; --ok: #16897a; --img-bg: #e9edee; --shadow: 0 1px 2px rgba(20,30,32,0.05), 0 1px 8px rgba(20,30,32,0.04); background: var(--bg); color: var(--text); font-family: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .carbid-app * { box-sizing: border-box; } .carbid-app a { color: inherit; } .carbid-app .tabular { font-variant-numeric: tabular-nums; } /* ---------- Header (index / auctions / detail / account) ---------- */ /* top: var(--wd-header-h) rather than a plain 0 -- Woodmart's own real site header (.whb-main-header, see header.php's measuring script) becomes position:fixed at the top of the viewport once the visitor scrolls far enough, at a z-index far above this header's own. Before this fix, both headers tried to stick to the very top of the viewport at once: Woodmart's (z-index 390) won, silently covering the top ~60px of this one (z-index 10) -- confirmed live 2026-09-13, screenshot showed this header's search bar sliced off/overlapping Woodmart's real menu while scrolling. The `--wd-header-h` custom property (set by an inline script in header.php, continuously mirroring Woodmart's actual real-time header height -- it changes between an in-flow ~90px and a stuck ~60px, and could change again if Woodmart's own header settings ever do) means this header always sticks directly BELOW Woodmart's real one instead of underneath/behind it. The `0px` fallback keeps today's old (if imperfect) behavior if that script ever fails to find Woodmart's header element at all. */ .carbid-app header.site { position: sticky; top: var(--wd-header-h, 0px); z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); } .carbid-app .nav-row1 { max-width: 1400px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; } .carbid-app .logo { display: flex; flex-direction: column; line-height: 1; gap: 1px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; color: var(--text); white-space: nowrap; } .carbid-app .logo-top { color: var(--accent); font-size: 17px; } .carbid-app .logo-bottom { font-size: 10.5px; letter-spacing: 0.06em; } /* One shared pill-button style for every top-nav control (Aukcionai/Pirk dabar, Admin/Pirkimai/Statymai/Įsiminti/Prisijungti) -- per Karolis, 2026-09-04: these three groups used to be three different visual styles (borderless soft-tint tabs, a bordered 20px pill, and a mismatched search button); now one flat border + square-ish radius + solid-green-when-active look, applied identically to both .nav-tabs a and .account-link. */ .carbid-app .nav-tabs { display: flex; gap: 6px; flex: none; } .carbid-app .nav-tabs a, .carbid-app .account-link { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; color: var(--text-muted); white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; } .carbid-app .nav-tabs a:hover, .carbid-app .account-link:hover { border-color: var(--accent); color: var(--accent); } .carbid-app .nav-tabs a.active, .carbid-app .account-link.active { background: var(--accent); border-color: var(--accent); color: #fff; } .carbid-app .nav-tabs a.active:hover, .carbid-app .account-link.active:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .carbid-app .account-link svg { flex: none; width: 16px; height: 16px; } /* Search button is fused into the search bar itself (fills its full height, flush against the right edge, only the outer corner rounded via the bar's own overflow:hidden clip) instead of floating as a separate pill with a gap around it. Always solid green regardless of any other state. */ .carbid-app .searchbar { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 0 0 0 12px; height: 42px; overflow: hidden; } .carbid-app .searchbar svg { flex: none; color: var(--text-faint); } .carbid-app .searchbar input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13.5px; color: var(--text); height: 100%; font-family: inherit; } .carbid-app .searchbar input::placeholder { color: var(--text-faint); } .carbid-app .searchbar button { flex: none; align-self: stretch; background: var(--accent); color: #fff; border: none; border-radius: 0; padding: 0 20px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; cursor: pointer; font-family: inherit; } .carbid-app .searchbar button:hover { background: var(--accent-deep); } .carbid-app .account-group { margin-left: auto; display: flex; align-items: center; gap: 10px; } @media (max-width: 700px) { /* Below this width, .searchbar used to just be display:none -- per Karolis, 2026-09-07: search (by make/model/VIN/lot number) is the site's main feature, so hiding it entirely on mobile instead of fitting it in was the wrong tradeoff. It's given its own full-width row instead (via `order` + a 100% flex-basis, which forces it onto a line by itself since nothing else fits alongside a 100%-wide flex item), styled first/most prominent, same as bid.cars puts its own search bar right under the header on mobile. .nav-tabs (Aukcionai/Pirk dabar) plus every .account-link (Admin/Pirkimai/Statymai/Isiminti/Prisijungti) also no longer fit on one nowrap row -- confirmed live 2026-09-07 (390px viewport): the row's own overflow was `visible` with no wrap, so anything past "Pirkimai" rendered off the right edge of the screen with no scrollbar, making those links completely unreachable, not just visually cut off. Wrapping onto as many lines as needed keeps every link visible and tappable instead. */ .carbid-app .nav-row1 { flex-wrap: wrap; row-gap: 10px; } .carbid-app .searchbar { order: 1; flex: 1 1 100%; max-width: none; } .carbid-app .nav-tabs { order: 2; } .carbid-app .account-group { order: 3; margin-left: 0; width: 100%; flex-wrap: wrap; } } /* ---------- Page layout ---------- */ .carbid-app .page { max-width: 1400px; margin: 0 auto; padding: 20px 20px 60px; display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; } /* ---------- Filters sidebar ---------- */ /* Wraps the whole