/*
 * OpenHoods theme stylesheet.
 *
 * The one place front-end CSS goes for this theme - see CLAUDE.md.
 * Linked from extensions/themes/openhoods/views/layouts/master.blade.php,
 * after every BeDigit-generated stylesheet, so rules here win on source
 * order without needing extra specificity or !important. Served as a
 * plain static file (published to public/themes/openhoods/css/ by
 * `php artisan theme:publish openhoods`), not built through Vite.
 */

/* Payment step: hide the "Upgrade" badge next to Standard Listing
   (plan id 6). Not a BeDigit-owned view we're rewriting - this is a
   real page-wide stylesheet rule, so it belongs here regardless of
   which blade renders the badge. See PATCHES.md. */
tr:has(#planId-6) .badge.bg-success {
	display: none;
}

/* Homepage hero: let the box grow with its content instead of clipping it.
   extensions/themes/default/assets/css/style.css (BeDigit's default theme,
   which ours inherits from since openhoods has no base style.css of its
   own) hardcodes `.hero-wrap { height: 450px; }`. Since v19's hero now
   carries a lot more content than that default theme ever anticipated
   (the "Sell My Car" CTA, free-listings counter, prize-draw line, 1/2/3
   steps, plus hoon-banner/demerit-links right after it), a fixed height
   clipped the box well short of its actual content - the overflow wasn't
   hidden, so it rendered *below* the blue background instead, landing on
   the page's plain white background where white "text-white" copy became
   invisible. `min-height` alone (set per-section via the admin's height
   field, in front-homepage.blade.php's generated CSS) can't fix this on
   its own: min-height only raises the floor over a *smaller* height, it
   doesn't override a *fixed* height into auto-growing. Overriding back to
   `height: auto` here - loaded after the default theme's stylesheet, so
   it wins on source order at equal specificity - is what actually lets
   the box grow to fit. See PATCHES.md. */
.hero-wrap {
	height: auto;
	/* On live, the hero is a fixed-height flexbox (align-items: center)
	   whose content is a little shorter than the box, leaving a ~9px gap
	   below the last row (the 1/2/3 steps) for free. Here the box is
	   content-driven (height: auto, see above) so that slack doesn't
	   exist - the steps row sits flush against the box's bottom edge
	   without this. See PATCHES.md. */
	padding-bottom: 10px;
}

/* Landing-page hero (search-form.blade.php, 2026-10-20 - see PATCHES.md).
   Phone first: H1 on two lines (each phrase is an inline-block span, so
   the break falls between "proof," and "not promises."), the subline on
   two lines via a <br>, both CTAs stacked full width. From md up the CTAs
   sit side by side inside a 560px-max row. */
.hero-landing {
	max-width: 760px;
	padding-top: 1.75rem;
	padding-bottom: 1.5rem;
}
.hero-landing-title {
	font-size: 1.85rem;
	line-height: 1.2;
	margin-bottom: 0.75rem;
}
.hero-landing-title span {
	display: inline-block;
}
.hero-landing-subline {
	font-size: 1.2rem;
	line-height: 1.35;
	margin-bottom: 0.75rem;
}
.hero-landing-fact {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.45;
	margin: 0 auto 1.25rem;
	max-width: 34rem;
}
.hero-landing-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 560px;
	margin: 0 auto 0.9rem;
}
.hero-landing-actions .btn {
	width: 100%;
}
.hero-landing-offer {
	font-size: 0.9rem;
}
.hero-landing-offer a {
	color: #fff;
	text-decoration: underline;
}
.hero-landing-offer a:hover,
.hero-landing-offer a:focus {
	color: #E9EEF5;
}
/* Phone only (2026-10-21, see PATCHES.md): the admin homepage-section height
   (480px min-height in BeDigit's generated cache/css/.../front-homepage.css,
   same selector as below) left a band of empty blue under the offer line,
   with the content centred in the box. Below md the hero hugs its content
   and the space under the offer line equals the space above the headline
   (the 1.75rem top padding of .hero-landing). Desktop keeps the 480px. */
@media (max-width: 767.98px) {
	#homepage .hero-wrap:not(.only-search-bar) {
		min-height: 0;
		padding-bottom: 0;
	}
	.hero-landing {
		padding-bottom: 1.75rem;
	}
}
@media (min-width: 768px) {
	.hero-landing {
		padding-top: 3rem;
		padding-bottom: 2.5rem;
	}
	.hero-landing-title {
		font-size: 2.75rem;
	}
	.hero-landing-subline {
		font-size: 1.5rem;
	}
	.hero-landing-fact {
		font-size: 1.1rem;
	}
	.hero-landing-actions {
		flex-direction: row;
	}
	.hero-landing-actions .btn {
		flex: 1 1 0;
	}
}

/* Hero secondary CTA ("Browse cars") - white with the site's navy text. */
.btn-hero-secondary {
	--bs-btn-color: #1E3A5F;
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-hover-color: #1E3A5F;
	--bs-btn-hover-bg: #E9EEF5;
	--bs-btn-hover-border-color: #E9EEF5;
	--bs-btn-focus-shadow-rgb: 255, 255, 255;
	--bs-btn-active-color: #1E3A5F;
	--bs-btn-active-bg: #DCE4EF;
	--bs-btn-active-border-color: #DCE4EF;
}

/* "How it works" cards below the hero (how-it-works.blade.php). Plain
   information cards - deliberately no link, shadow lift or hover state, so
   they can't be mistaken for buttons. */
.how-it-works-title {
	font-size: 1.5rem;
}
.how-it-works-card {
	background: #fff;
	border: 1px solid #DEE2E6;
	border-radius: 0.5rem;
	padding: 1rem 1.1rem;
	text-align: left;
}
.how-it-works-card h3 {
	font-size: 1.1rem;
	color: #1E3A5F;
	margin-bottom: 0.35rem;
}
.how-it-works-card p {
	color: #495057;
}
/* "Learn more" under each card: a plain underlined text link in the site
   link colour - no background, padding or hover lift. */
.how-it-works-link {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--bs-link-color);
	text-decoration: underline;
}
/* "Check it yourself at inspection" box under the declared demerit points on
   the listing page (fields-values.blade.php). Plain information box:
   light grey, no border, no link or button styling. */
.demerit-inspection-box {
	background: var(--bs-secondary-bg);
	border-radius: 0.375rem;
	padding: 0.75rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
}
.demerit-inspection-box-title {
	font-size: 0.95rem;
}

.how-it-works-link:hover,
.how-it-works-link:focus {
	color: var(--bs-link-hover-color);
	text-decoration: underline;
}

/* Unified primary CTA button - brand orange, ported from live 18.2.0's
   public/dist/front/custom.css. Text is dark brown rather than white -
   white-on-orange fails WCAG AA (contrast ~2.3:1); this dark brown gives
   ~6.6:1. Used by the "Sell My Car" nav button (menu_items row, see
   PATCHES.md), the hero CTA, and the choose-a-city CTA. */
.btn-cta-primary {
	--bs-btn-color: #3D1F00;
	--bs-btn-bg: #F7941D;
	--bs-btn-border-color: #F7941D;
	--bs-btn-hover-color: #3D1F00;
	--bs-btn-hover-bg: #FFA83D;
	--bs-btn-hover-border-color: #FFA83D;
	--bs-btn-focus-shadow-rgb: 247, 148, 29;
	--bs-btn-active-color: #3D1F00;
	--bs-btn-active-bg: #E08415;
	--bs-btn-active-border-color: #E08415;
	--bs-btn-disabled-color: #3D1F00;
	--bs-btn-disabled-bg: #F7941D;
	--bs-btn-disabled-border-color: #F7941D;
	font-weight: 600;
}
.btn-cta-primary.btn-cta-primary,
.btn-cta-primary.btn-cta-primary:hover,
.btn-cta-primary.btn-cta-primary:focus,
.btn-cta-primary.btn-cta-primary:active,
.btn-cta-primary.btn-cta-primary:disabled {
	color: #3D1F00 !important;
}

/* "Why demerit points?" text-area section - blue card, ported from live
   18.2.0's custom_css setting. Targets the literal `hoon-section` class
   hardcoded in text-area.blade.php (theme) - see PATCHES.md. */
.hoon-section .card {
	background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
	border: none !important;
}
.hoon-section .card-body,
.hoon-section .card-title,
.hoon-section p,
.hoon-section em,
.hoon-section strong,
.hoon-section div {
	color: #fff !important;
}
.hoon-section .card-title {
	border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}

/* "Check Your Demerit Points" state-links row (demerit-links.blade.php,
   openhoods:: namespace) - ported from live 18.2.0's
   resources/views/front/sections/home/demerit-links.blade.php, which
   carries this same CSS in an inline <style> tag; kept here instead per
   CLAUDE.md's "one place front-end CSS goes" rule. See PATCHES.md. */
.demerit-section {
	background: linear-gradient(180deg, #f4f6fb 0%, #e9ecf5 100%);
	border-bottom: 1px solid #d5d9e2;
	padding: 36px 0;
}
.demerit-heading {
	font-size: 19px;
	font-weight: 800;
	color: #111827;
	margin-bottom: 4px;
	letter-spacing: -.4px;
}
.demerit-heading i {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 22px;
}
.demerit-sub {
	font-size: 13.5px;
	color: #6b7280;
	margin-bottom: 0;
}
.dp-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.dp {
	display: inline-flex;
	align-items: stretch;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06);
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	border: 1px solid rgba(0, 0, 0, .06);
	position: relative;
	min-width: 150px;
}
.dp:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 8px 30px rgba(0, 0, 0, .08);
	text-decoration: none;
}
.dp:active {
	transform: translateY(-1px);
}
.dp .tag {
	padding: 9px 14px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	display: flex;
	align-items: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.dp .label {
	padding: 9px 16px 9px 12px;
	font-weight: 600;
	font-size: 13.5px;
	display: flex;
	align-items: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.dp-nsw .tag { background: linear-gradient(150deg, #dc2626, #b91c1c); }
.dp-nsw { background: rgba(254, 226, 226, .7); color: #991b1b; }
.dp-nsw:hover { color: #991b1b; }
.dp-vic .tag { background: linear-gradient(150deg, #16a34a, #15803d); }
.dp-vic { background: rgba(220, 252, 231, .7); color: #166534; }
.dp-vic:hover { color: #166534; }
.dp-qld .tag { background: linear-gradient(150deg, #881337, #6b0f2a); }
.dp-qld { background: rgba(252, 231, 243, .65); color: #6b0f2a; }
.dp-qld:hover { color: #6b0f2a; }
.dp-sa .tag { background: linear-gradient(150deg, #1d4ed8, #1e40af); }
.dp-sa { background: rgba(219, 234, 254, .7); color: #1e3a8a; }
.dp-sa:hover { color: #1e3a8a; }
.dp-wa .tag { background: linear-gradient(150deg, #ca8a04, #a16207); }
.dp-wa { background: rgba(254, 249, 195, .6); color: #713f12; }
.dp-wa:hover { color: #713f12; }
.dp-nt .tag { background: linear-gradient(150deg, #ea580c, #c2410c); }
.dp-nt { background: rgba(255, 237, 213, .7); color: #9a3412; }
.dp-nt:hover { color: #9a3412; }
.dp-tas .tag { background: linear-gradient(150deg, #0d9488, #0f766e); }
.dp-tas { background: rgba(204, 251, 241, .65); color: #115e59; }
.dp-tas:hover { color: #115e59; }
.dp-act .tag { background: linear-gradient(150deg, #4338ca, #3730a3); }
.dp-act { background: rgba(224, 231, 255, .7); color: #312e81; }
.dp-act:hover { color: #312e81; }
.demerit-disclaimer {
	font-size: 11px;
	color: #9ca3af;
	margin: 20px 0 0;
	letter-spacing: .1px;
}
@media (max-width: 576px) {
	.dp { min-width: 140px; border-radius: 8px; }
	.dp .tag { padding: 7px 10px; font-size: 10.5px; }
	.dp .label { padding: 7px 12px 7px 8px; font-size: 12.5px; }
	.dp-row { gap: 8px; }
}

/* Listing cards: fixed image aspect ratio with cover-crop, so a portrait
   photo doesn't grow the card taller than its grid neighbours. `.main-image`
   is the shared wrapper class across every card template (grid, list,
   account/alerts) - see PATCHES.md. */
.main-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Card photo wrapper (grid/list templates): anchors the ribbon to the
   photo itself, not the card - `overflow: hidden` clips the ribbon's
   rotated corners to this box instead of letting them spill into the
   next card in the row. See PATCHES.md.

   `isolation: isolate` added defensively - see PATCHES.md: re-verified
   this clips correctly in Chromium at genuine mobile widths (hit-tested,
   not just eyeballed), but some WebKit/Safari versions are known to mis-
   clip `overflow: hidden` around a `transform`-rotated absolutely-
   positioned child unless the clipping ancestor has its own stacking
   context - this forces one, at no visual cost, in case that's what a
   real device is hitting. */
.openhoods-photo-wrap {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* SOLD ribbon: diagonal corner banner over a listing's main photo, on
   cards (grid/list templates, inside `.openhoods-photo-wrap`) and on the
   listing page itself (the pictures-slider wrapper, with the larger
   `--lg` modifier below). Same base class both places for one shared
   definition - see PATCHES.md. */
.openhoods-sold-ribbon {
	position: absolute;
	top: 18px;
	left: -44px;
	width: 170px;
	padding: 6px 0;
	background: #dc3545;
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	text-align: center;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transform: rotate(-45deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	z-index: 5;
	pointer-events: none;
}

/* Grid cards run 2-per-row from the smallest viewport up to `md` (768px)
   - `row-cols-{{$smCols}}` in grid.blade.php has no responsive infix, so
   it's the baseline that applies at every width below the `md` override,
   not just "small phones". At that 2-column width each
   `.openhoods-photo-wrap` is only ~150px wide - smaller than the
   170px-wide desktop ribbon even before its -45deg rotation. Still
   clips correctly (re-verified - see PATCHES.md), but shrinks it here
   anyway so it reads as a ribbon instead of most of the photo. See
   PATCHES.md. */
@media (max-width: 767.98px) {
	.openhoods-sold-ribbon {
		top: 10px;
		left: -32px;
		width: 130px;
		padding: 4px 0;
		font-size: 0.75rem;
		letter-spacing: 1px;
	}
}

/* Larger variant for the listing page's own main photo - much bigger
   than a card thumbnail, so the same ribbon size reads as too thin
   there. See PATCHES.md. */
.openhoods-sold-ribbon--lg {
	top: 32px;
	left: -84px;
	width: 320px;
	padding: 11px 0;
	font-size: 1.6rem;
	letter-spacing: 3px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Sold listing card photo dimmed so it reads as sold before a click -
   see PATCHES.md. */
.openhoods-sold-dim {
	opacity: 0.6;
}

/* Compact card template has no photo to ribbon across - a small badge
   next to the title instead, same red as the ribbon. See PATCHES.md. */
.openhoods-sold-badge {
	display: inline-block;
	background: #dc3545;
	color: #fff;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 0.25rem;
	padding: 0.15rem 0.5rem;
	vertical-align: middle;
}

/* Hero "500 FREE ads" line: pale yellow accent on the word FREE - see
   PATCHES.md. */
.hero-free-accent {
	color: #FDE68A;
}

/* Description editor (TinyMCE 7, front context): hide the status bar
   (element path + word count) on the create/edit listing form - see
   PATCHES.md. TinyMCE's own "tox" skin, not something the site sets a
   custom class for, so this targets its stock status-bar class directly. */
.tox-statusbar {
	display: none !important;
}

/* Features (and any other checkbox_multiple custom field) on the
   create/edit listing form: 3 columns desktop (lg+), 2 tablet (md), 1
   mobile (below md). The `helpers.forms.fields.checklist` component (a
   BeDigit core file) only accepts one fixed `col-md-{n}` value with no
   per-breakpoint variation, so this overrides its emitted class directly
   via the `openhoods-checkbox-grid` wrapper class added in
   extensions/themes/openhoods/views/listing/createOrEdit/partials/
   fields.blade.php - see PATCHES.md. */
.openhoods-checkbox-grid .col-md-12 {
	width: 100%;
}
@media (min-width: 768px) {
	.openhoods-checkbox-grid .col-md-12 {
		width: 50%;
	}
}
@media (min-width: 992px) {
	.openhoods-checkbox-grid .col-md-12 {
		width: 33.3333%;
	}
}

/* ==========================================================================
   2026-09-22 - see extensions/openhoods/PATCHES.md
   ========================================================================== */

/* --- SOLD marker on the seller's own "My listings" rows -------------------
   Buyers already see a SOLD ribbon on the listing page's main photo
   (.openhoods-sold-ribbon--lg, listing/show/partials/pictures-slider.blade.php).
   The seller's own account/partials/listings-table.blade.php rows had no
   marker at all. `--sm` is the same ribbon scaled for the row thumbnail;
   `.openhoods-sold-thumb` is the positioned, clipped wrapper it needs. */
.openhoods-sold-thumb {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
}

.openhoods-sold-ribbon--sm {
	top: 8px;
	left: -30px;
	width: 110px;
	padding: 3px 0;
	font-size: 0.65rem;
	letter-spacing: 1px;
}

/* The text badge next to the row title reuses the EXISTING
   `.openhoods-sold-badge` defined above (the one the compact search-card
   template already shows to buyers) - deliberately not redefined here, so
   the seller's badge and the buyer's badge can never drift apart. */

/* --- Auth pages: inline "please log in" notice ----------------------------
   Replaces the floating red PNotify toast that used to render over the
   hero logo. Rendered in normal document flow at the top of the form
   column (auth/layouts/master.blade.php), so it can never overlap the
   logo at any width. Neutral light-blue, not an error colour. */
.openhoods-auth-notice {
	background-color: #eaf0fe;
	border: 1px solid #c3d2fa;
	color: #1e3a5f;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.openhoods-auth-notice a {
	color: #4263eb;
	text-decoration: underline;
}

/* --- Auth pages: logo size cap -------------------------------------------
   auth/layouts/master.blade.php emits an inline `max-width`/`max-height`
   on the hero logo (clamped 150-250px), which is far too large on a
   phone. Inline styles beat a stylesheet, so `!important` is required.
   Scoped to the auth hero only: the site header logo lives in
   `layouts.partials.header` OUTSIDE `#main-wrapper.auth-login-register`
   (it also carries a `.logo` class, which is why this scope matters) and
   is deliberately left alone. */
#main-wrapper.auth-login-register .hero-content .logo {
	text-align: center;
}

#main-wrapper.auth-login-register .hero-content .logo a {
	display: inline-block !important;
	max-width: 100%;
}

#main-wrapper.auth-login-register .hero-content .logo img {
	max-width: 280px !important;
	max-height: none !important;
	width: auto !important;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 575.98px) {
	#main-wrapper.auth-login-register .hero-content .logo img {
		max-width: 220px !important;
	}
}

/* ==========================================================================
   2026-09-22 (follow-up to f0e0f86) - site header + footer on mobile
   See extensions/openhoods/PATCHES.md.

   Root cause of everything in this block: the auth layout
   (auth/layouts/master.blade.php) renders the site header and footer
   partials, but loads only `build/assets/auth-*.css`. It does NOT load
   `build/assets/theme-*.css`, `cache/css/front-style.css` or
   `dist/front/custom.css` - the three stylesheets every other page gets and
   that the header/footer markup depends on. Confirmed by diffing the
   stylesheet <link> lists of the rendered homepage vs the rendered login
   page: those three are homepage-only.

   Consequence, measured at 412px on the rendered login page:
     - BOTH logo variants render (the dark/light swap rules live in
       theme-*.css), so `.navbar-brand` is 976px wide;
     - `.main-logo { height: 40px }` (front-style.css) is absent, so each
       image falls back to its intrinsic 485x82;
     - the toggler is pushed onto a second row (navbar 149px tall instead
       of 75px);
     - the footer column headings compute to rgb(0,0,0) on the rgb(0,0,0)
       footer, i.e. invisible, leaving ~92px of apparently-empty black
       above the link lists.

   Fixed here rather than by loading the missing bundles on the auth layout:
   pulling in the full theme bundle there would restyle the login/register
   forms themselves (which is exactly what the separate auth-*.css bundle
   exists to style). These rules re-state only the header/footer behaviour
   the shared partials need, and are no-ops on pages that already load
   theme-*.css + front-style.css.
   ========================================================================== */

/* --- (a) One logo variant at a time --------------------------------------
   Mirrors the dark/light swap in build/assets/theme-*.css verbatim, so auth
   pages stop rendering the dark AND light logo side by side. */
html:not([data-bs-theme="dark"]) header .navbar .logo img.light-logo,
header:not([data-bs-theme="dark"]) .navbar .logo img.light-logo {
	display: none !important;
}

html:not([data-bs-theme="dark"]) header .navbar .logo img.dark-logo,
header:not([data-bs-theme="dark"]) .navbar .logo img.dark-logo {
	display: block !important;
}

html[data-bs-theme="dark"] header .navbar .logo img.light-logo,
header[data-bs-theme="dark"] .navbar .logo img.light-logo {
	display: block !important;
}

html[data-bs-theme="dark"] header .navbar .logo img.dark-logo,
header[data-bs-theme="dark"] .navbar .logo img.dark-logo {
	display: none !important;
}

/* --- (b) Header logo size -------------------------------------------------
   `!important` is unavoidable on two counts: header.blade.php emits an
   inline `max-width:485px; max-height:90px` on the <img> (an inline style
   beats a stylesheet), and front-style.css declares
   `.main-logo { max-height: 90px !important }`.

   The 40px baseline is not a change for normal pages: front-style.css
   already sets `.main-logo { height: 40px }` there, so the rendered height
   stays 40px and desktop is untouched. It only takes effect on the auth
   pages, which have no front-style.css and were therefore rendering the
   logo at its intrinsic 485x82. */
header .navbar .navbar-brand img.main-logo {
	max-height: 40px !important;
	height: auto !important;
	width: auto !important;
}

/* Below the `xl` navbar-expand breakpoint the toggler is visible and has to
   share the row with the logo. */
@media (max-width: 991.98px) {
	header .navbar .navbar-brand img.main-logo {
		max-height: 44px !important;
	}
}

@media (max-width: 399.98px) {
	header .navbar .navbar-brand img.main-logo {
		max-height: 38px !important;
	}
}

/* Phones (<= 576px): bigger logo (2026-10-21, see PATCHES.md). The PNG is
   360x90 but the artwork only fills 343x41 of it, so a 50px-tall box shows
   the wordmark ~190px wide and ~23px tall (it was ~145x17 at 38px). The
   -6px block margins keep the box's layout height at 38px, so the navbar
   stays 75px tall. Tablet/desktop rules above are untouched. */
@media (max-width: 576px) {
	header .navbar .navbar-brand img.main-logo {
		max-height: none !important;
		height: 50px !important;
		width: auto !important;
		margin-block: -6px;
	}
}

/* Desktop (>= 992px): wordmark 46px tall (2026-10-23i, see PATCHES.md).
   Both logo PNGs are 360x90 with the artwork at x 8-350, y 30-70 (343x41)
   and more empty space above it than below, so a plain 46px image showed
   a ~21px wordmark sitting low. The image is drawn at 101px (46 / 41 x 90)
   and the negative margins trim its layout box to exactly the artwork:
   46px tall, so the 75px navbar centres the wordmark itself, and its left
   edge on the container's content edge, like the page content below.
   overflow:hidden on the link clips the transparent rest of the PNG so it
   can't sit over the hero or catch clicks. 46px is ~1.1x the artwork's
   own 41px, so it is slightly soft; there is no larger logo file. */
@media (min-width: 992px) {
	header .navbar .navbar-brand {
		overflow: hidden;
		padding-block: 0;
	}

	header .navbar .navbar-brand img.main-logo {
		max-height: none !important;
		height: 101px !important;
		width: auto !important;
		margin: -33.7px 0 -21.3px -9px;
	}
}

/* --- (c) Navbar toggler ---------------------------------------------------
   Vertically centred against the logo and pinned right (the navbar
   container is already `display:flex; justify-content:space-between;
   align-items:center`, so this mainly guards against the `float-end`
   class on the button, which is inert in a flex row). The stock border is
   `rgba(0,0,0,.15)`, which reads as a heavy dark box on a phone - swapped
   for a single hairline in the theme's own line colour, with the focus
   glow dropped. Deliberately NOT setting `flex-wrap: nowrap` on the
   container: the collapsing menu (#navbarNav) is a third flex item that
   must still wrap onto its own line when opened. */
header .navbar .navbar-toggler {
	align-self: center;
	margin-left: auto;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--bs-border-color, #dee2e6) !important;
}

header .navbar .navbar-toggler:focus,
header .navbar .navbar-toggler:focus-visible {
	box-shadow: none;
	outline: none;
}

/* --- (d) Footer column headings ------------------------------------------
   On the auth pages these computed to rgb(0,0,0) on the rgb(0,0,0) footer -
   black on black - because the `h4 { color: var(--bs-heading-color) }`
   resolution that theme-*.css supplies is missing there. `inherit` takes
   the colour from the footer wrapper's own `text-light text-opacity-75`,
   which is exactly what the links already use, so headings and links match
   on both the dark and the light footer variant. */
footer .container-fluid h4 {
	color: inherit;
}

/* ==========================================================================
   2026-09-23 - Auth pages (login + register) on phones: hero was eating the
   whole first screen. See extensions/openhoods/PATCHES.md.

   auth/layouts/master.blade.php builds the split-screen auth layout as two
   `.col-md-6` columns. Below the `md` breakpoint those columns stack, so the
   blue hero panel is no longer *beside* the form, it's *above* it - and the
   hero still carries Bootstrap's `min-vh-100` utility
   (`min-height: 100vh !important`) plus a `my-auto` row that vertically
   centres the cover text by absorbing all the leftover space as margin.
   Net effect on a phone: the hero is exactly one full viewport tall, so the
   email field and the Log In button start below the fold and a user sees a
   photo and no way to log in until they scroll.

   Measured before this block (real render, iframe at the phone's exact CSS
   viewport): at 375x667 the hero was 667px tall, the email field ended at
   y=926 and the Log In button at y=1174; at 412x915 the hero was 915px, the
   email field ended at y=1149 and the button at y=1397.

   Fix is height + spacing only, all of it inside this one media query, so
   desktop (>= 768px, where the two columns sit side by side and the hero
   SHOULD be full height) is not touched at all:
     - drop the 100vh floor and the `my-auto` centring that stretched with it
     - cap the panel with `max(45vh, 260px)` - a real ceiling that still
       leaves ~80px of headroom over the ~175-213px the logo + cover text
       actually occupy, and the 260px floor keeps that true on a short
       landscape viewport where 45vh alone would be too small to hold them
     - tighten the logo / heading / paragraph margins and the form column's
       `py-5`, which is the "reduce the padding" half

   After: the hero is 174-213px on every phone size tested and the Log In
   button is fully above the fold - 375x667, 375x812, 390x844, 412x915 and
   360x640 all verified. On /auth/register the hero shrinks identically and
   the email field comes above the fold, but the Sign Up button stays just
   below it: that form is simply longer than a phone viewport (name, email,
   password, confirm, terms), which is a form-length matter, not a hero one. */
@media (max-width: 767.98px) {
	#main-wrapper.auth-login-register .hero-content {
		/* Beats Bootstrap's `.min-vh-100 { min-height: 100vh !important }`. */
		min-height: 0 !important;
		max-height: max(45vh, 260px);
		overflow: hidden;
		justify-content: center;
	}

	/* `.my-auto` on the cover-text row is what pushed the text apart to fill
	   the 100vh box - with the floor gone it would otherwise still stretch. */
	#main-wrapper.auth-login-register .hero-content > .row.my-auto {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	#main-wrapper.auth-login-register .hero-content .logo {
		/* Blade sets `mt-5 mb-5` = 48px top and bottom. */
		margin-top: 0.5rem !important;
		margin-bottom: 0.5rem !important;
	}

	/* Tighter than the 220px cap the <576px rule above sets, and it applies
	   across the whole phone range rather than only the smallest widths. */
	#main-wrapper.auth-login-register .hero-content .logo img {
		max-width: 180px !important;
	}

	#main-wrapper.auth-login-register .hero-content h1 {
		margin-bottom: 0.35rem !important;
		font-size: 1.3rem;
	}

	#main-wrapper.auth-login-register .hero-content p {
		margin-bottom: 0.5rem !important;
		font-size: 0.875rem;
	}

	/* `.hero-wrap`'s 10px bottom padding exists for the homepage hero only. */
	#main-wrapper.auth-login-register .hero-wrap {
		padding-bottom: 0 !important;
	}

	/* The form column's own `py-5` (48px top and bottom). */
	#main-wrapper.auth-login-register > .container-fluid > .row > .col-md-6:last-child > .container {
		padding-top: 0.75rem !important;
		padding-bottom: 1.5rem !important;
	}
}

/* Refer-a-seller share box (extensions/openhoods/resources/views/
   referral-share-box.blade.php) on the account overview, My Listings and the
   listing page right after publishing - see PATCHES.md (2026-10-21 Part B). */
.oh-referral-box {
	background: var(--bs-body-bg);
}
.oh-referral-box textarea[readonly],
.oh-referral-box input[readonly] {
	background: var(--bs-secondary-bg);
	font-size: 0.9rem;
}

/* ==========================================================================
   2026-10-22 - Sign-up and header refresh. See extensions/openhoods/PATCHES.md.
   ========================================================================== */

/* --- Font: Plus Jakarta Sans, self-hosted --------------------------------
   woff2 files from @fontsource/plus-jakarta-sans 5.3.0 (SIL OFL 1.1, licence
   alongside the files), latin subset, weights 400/500/600/700. Published to
   public/themes/openhoods/fonts/ by `php artisan theme:publish openhoods`.
   The theme config's body_font/heading_font name it, so theme-styles.blade.php
   applies it to body and headings; the rule below also covers form controls,
   buttons and menus, which BeDigit's bundles give their own font-family. The
   Google Fonts @imports those bundles carried are stripped - see
   OpenHoods\Support\ThemeAssets::cssWithoutGoogleFonts(). */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
	--oh-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--bs-font-sans-serif: var(--oh-font);
	--bs-body-font-family: var(--oh-font);
}
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .navbar, .dropdown-menu, .nav-link, .badge, .tooltip, .popover, .modal,
input, select, textarea, button, label,
.form-control, .form-select, .form-label, .form-text, .input-group-text {
	font-family: var(--oh-font);
}

/* --- Auth pages: keep content below the fixed header ---------------------
   The site header is `position: fixed` (75px, --header-navbar-height). The
   front layout offsets its <main> for it (theme-styles-header.blade.php),
   but the auth layout has no <main>, so the header covered the top of the
   blue panel (the logo) and of the form. Login, sign-up and the password
   pages all use this layout. */
#main-wrapper.auth-login-register {
	padding-top: var(--header-navbar-height, 75px);
}
#main-wrapper.auth-login-register > .container-fluid > .row.min-vh-100 {
	min-height: calc(100vh - var(--header-navbar-height, 75px)) !important;
}
@media (min-width: 768px) {
	#main-wrapper.auth-login-register .hero-content.min-vh-100 {
		min-height: calc(100vh - var(--header-navbar-height, 75px)) !important;
	}
}

/* --- Header nav buttons (desktop, navbar expanded at xl) ------------------
   Listings, List my car free, Log In and the Light/Dark switcher: 12px gaps,
   one height, rounded corners, a soft hover. "List my car free" keeps its
   orange .btn-cta-primary fill as the one standout. The collapsed mobile
   menu (< 1200px) is left as it was. */
@media (min-width: 1200px) {
	#mainNavbar .navbar-nav.ms-auto {
		align-items: center;
		gap: 12px;
	}
	#mainNavbar .navbar-nav.ms-auto > .nav-item {
		margin: 0 !important;
	}
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .nav-link,
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .btn {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		height: 40px;
		padding: 0 0.9rem !important;
		border-radius: 10px;
		font-size: 0.925rem;
		font-weight: 500;
		line-height: 1;
		transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	}
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .nav-link:hover,
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .nav-link:focus-visible,
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .nav-link.show {
		background-color: rgba(var(--bs-primary-rgb, 70, 130, 180), 0.1);
		color: var(--bs-primary) !important;
	}
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .btn-cta-primary {
		padding: 0 1.1rem !important;
		font-weight: 600;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
	}
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .btn-cta-primary:hover,
	#mainNavbar .navbar-nav.ms-auto > .nav-item > .btn-cta-primary:focus-visible {
		box-shadow: 0 4px 12px rgba(247, 148, 29, 0.35);
	}
	#mainNavbar .navbar-nav.ms-auto .dropdown-menu {
		border-radius: 12px;
		padding: 0.4rem;
		border-color: var(--bs-border-color-translucent);
	}
	#mainNavbar .navbar-nav.ms-auto .dropdown-item {
		border-radius: 8px;
	}
}

/* --- Sign-up and login pages (auth/register and auth/login views in this
   theme; 2026-10-22, reworked 2026-10-22b) ----------------------------------
   Card-style form on a light background, larger rounded inputs, bold
   labels, full-width primary button. Scoped to .oh-auth (both pages);
   .oh-signup adds the phone-only rule that hides the image panel. */
#main-wrapper.auth-login-register:has(.oh-auth) > .container-fluid > .row > .col-md-6:last-child {
	background-color: var(--bs-tertiary-bg);
}
.oh-auth-card {
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
	padding: 2rem;
}
.oh-auth-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}
.oh-auth-lead {
	color: var(--bs-secondary-color);
	margin-top: -1.1rem;
	margin-bottom: 1.5rem;
}
/* "Continue with Google": only rendered when social login is on. */
.oh-social-slot {
	margin-bottom: 1.25rem;
}
.oh-auth .form-label {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}
.oh-auth .mb-3 {
	margin-bottom: 1.15rem !important;
}
.oh-auth .form-control,
.oh-auth .form-select {
	min-height: 48px;
	border-radius: 10px;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	padding-right: 0.9rem;
	font-size: 1rem;
}
.oh-auth .form-control:not(.iti__tel-input) {
	padding-left: 0.9rem;
}
.oh-auth .form-control:focus,
.oh-auth .form-select:focus {
	border-color: #4263EB;
	box-shadow: 0 0 0 0.2rem rgba(66, 99, 235, 0.15);
}
.oh-auth .form-check-input {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.15em;
}
.oh-auth .form-check-label {
	line-height: 1.5;
}
/* Main Sign Up / Log in button: the logo's "PROOF" blue (#4263EB, sampled
   from both logo PNGs), white text (contrast 4.98:1; hover #3451C7 gives
   6.7:1), 10px corners like the header buttons. */
.oh-auth .oh-auth-submit {
	--bs-btn-color: #fff;
	--bs-btn-bg: #4263EB;
	--bs-btn-border-color: #4263EB;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #3451C7;
	--bs-btn-hover-border-color: #3451C7;
	--bs-btn-focus-shadow-rgb: 66, 99, 235;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #2C45AD;
	--bs-btn-active-border-color: #2C45AD;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #4263EB;
	--bs-btn-disabled-border-color: #4263EB;
	color: #fff !important;
	min-height: 52px;
	border-radius: 10px;
	font-size: 1.05rem;
	font-weight: 600;
}
.oh-auth-switch {
	color: var(--bs-secondary-color);
}
.oh-auth-switch a {
	font-weight: 600;
}
@media (max-width: 767.98px) {
	/* Sign-up on phones: no image panel, the form comes first (the site
	   header above still shows the logo). */
	#main-wrapper.auth-login-register:has(.oh-signup) > .container-fluid > .row > .col-md-6:first-child {
		display: none;
	}
	/* Login on phones: with the panel logo gone (2026-10-22b) the cover
	   text sat right against the header - give it some air. */
	#main-wrapper.auth-login-register .hero-content {
		padding-top: 1.25rem;
		padding-bottom: 1rem;
	}
	.oh-auth-card {
		padding: 1.25rem;
		border-radius: 14px;
	}
	.oh-auth-title {
		font-size: 1.5rem;
	}
}

/* "The proof" box on the listing page (views/listing/show/partials/
   proof-box.blade.php) - see PATCHES.md (2026-10-22f). */
.oh-proof-box {
	border: 2px solid var(--bs-primary-border-subtle);
	background: var(--bs-body-bg);
	border-radius: 0.5rem;
	padding: 1rem 1.1rem;
}
.oh-proof-box-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
}
.oh-proof-row {
	display: flex;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--bs-border-color-translucent);
}
.oh-proof-label {
	flex: 0 0 9.5rem;
	font-weight: 600;
}
.oh-proof-value {
	flex: 1 1 auto;
	min-width: 0;
}
.oh-proof-inspection {
	margin-top: 0.75rem;
	background: var(--bs-secondary-bg);
	border-radius: 0.375rem;
	padding: 0.75rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
}
@media (max-width: 575.98px) {
	.oh-proof-row {
		flex-direction: column;
		gap: 0.1rem;
	}
	.oh-proof-label {
		flex-basis: auto;
	}
}

/* Listing page share icons: one row, same size, centred on one baseline,
   evenly spaced (they touched, and the share arrow sat low) - 2026-10-22f. */
.social-media.social-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
}
.social-media.social-share > a,
.social-media.social-share > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	margin: 0;
}
.social-media.social-share i {
	font-size: 1.6rem;
	line-height: 1;
	vertical-align: middle;
}

/* Create-listing form group headings ("The car", "The proof", "Price and
   contact") - see PATCHES.md (2026-10-22g). */
.oh-form-section {
	width: 100%;
	margin: 1.75rem 0 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--bs-primary-border-subtle);
}
.oh-form-section-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}
.oh-form-section-hint {
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	color: var(--bs-secondary-color);
}

/* Proof box: footnote under the demerit points line (PATCHES.md 2026-10-23f). */
.oh-proof-footnote {
	font-size: 0.7rem;
	line-height: 1.3;
}

/* SOLD listing page (2026-10-23g, see extensions/openhoods/PATCHES.md):
   full-width banner across the top of the page, above the title. The
   diagonal ribbon over the photos is .openhoods-sold-ribbon--lg above. */
.oh-sold-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: #dc3545;
	color: #fff;
	border-radius: 0.375rem;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.oh-sold-banner__tag {
	flex: 0 0 auto;
	padding: 0.15rem 0.75rem;
	background: #fff;
	color: #dc3545;
	border-radius: 0.25rem;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

@media (max-width: 575.98px) {
	.oh-sold-banner {
		font-size: 0.9rem;
		gap: 0.5rem;
		padding: 0.6rem 0.75rem;
	}

	.oh-sold-banner__tag {
		font-size: 1rem;
	}
}

/* Suburb data licence attribution under the copyright line (2026-10-23k,
   see PATCHES.md): required by CC BY, kept small. */
footer .oh-data-attribution {
	font-size: 0.72rem;
	line-height: 1.4;
	opacity: 0.75;
}

/* Footer menu headings ("About us", "Contact & sitemap", "My account") in
   sentence case (2026-10-24c, see PATCHES.md). BeDigit's menu renderer adds
   Bootstrap's text-uppercase, which is !important. */
footer .menu-type-title.text-uppercase {
	text-transform: none !important;
}

/* "New in Sydney" strip under the homepage hero (new-strip.blade.php,
   2026-10-25a, see PATCHES.md). Light band, plain text, small underlined
   links - no button styling. One line from md up; below md the two
   sentences stack. */
.oh-new-strip {
	background: #E9EEF5;
	color: #1E3A5F;
	padding: 0.7rem 0;
	font-size: 0.9rem;
	line-height: 1.45;
	text-align: center;
}
.oh-new-strip__part {
	display: block;
}
.oh-new-strip a {
	color: #1E3A5F;
	text-decoration: underline;
}
.oh-new-strip a:hover,
.oh-new-strip a:focus {
	color: #0F2440;
}
.oh-new-strip__cta {
	font-weight: 600;
	margin-left: 0.35rem;
	white-space: nowrap;
}
@media (min-width: 768px) {
	.oh-new-strip__part {
		display: inline;
	}
}

/* "No cars match yet" empty state on search, category and suburb pages
   (search/results.blade.php, 2026-10-25a, see PATCHES.md). */
.oh-empty-state {
	max-width: 34rem;
	margin: 0 auto;
	color: #495057;
}
.oh-empty-state__title {
	font-size: 1.15rem;
	color: #1E3A5F;
}