/*
 * TR Vehicle Fitment & Project Builder
 * Visual system aligned with TR4WDFACTORY: technical, high-contrast and precise.
 * All selectors are scoped to the plugin to avoid collisions with Divi/WooCommerce.
 */

:root {
	--trfb-primary: #0b0b0b;
	--trfb-primary-rgb: 11, 11, 11;
	--trfb-accent: #00ff00;
	--trfb-accent-rgb: 0, 255, 0;
	--trfb-white: #ffffff;
	--trfb-surface: #f6f7f6;
	--trfb-border: #dedfdd;
	--trfb-muted: #666a66;
	--trfb-danger: #c62828;
	--trfb-radius: 6px;
	--trfb-shadow: 0 18px 55px rgba(0, 0, 0, 0.10);
}

.trfb-selector,
.trfb-project,
.trfb-product-notice,
.trfb-status,
.trfb-loop-badge {
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	color: var(--trfb-primary);
}

.trfb-selector *,
.trfb-project *,
.trfb-product-notice *,
.trfb-status *,
.trfb-loop-badge * {
	box-sizing: border-box;
}

/* Prevent Divi from injecting icons or spacing into plugin buttons. */
.trfb-selector button::after,
.trfb-project button::after,
.trfb-product-notice button::after,
.trfb-status button::after {
	display: none !important;
	content: none !important;
}

.trfb-selector button,
.trfb-project button,
.trfb-product-notice button,
.trfb-status button,
.trfb-selector input,
.trfb-selector select,
.trfb-project input,
.trfb-project select,
.trfb-project textarea {
	font-family: inherit;
}

/* Vehicle selector ------------------------------------------------------- */
.trfb-selector {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding: clamp(24px, 3vw, 38px);
	border: 1px solid #242424;
	border-top: 4px solid var(--trfb-accent);
	border-radius: var(--trfb-radius);
	background:
		linear-gradient(115deg, rgba(255,255,255,0.025), transparent 48%),
		var(--trfb-primary);
	box-shadow: var(--trfb-shadow);
	color: var(--trfb-white);
}

.trfb-selector::before {
	position: absolute;
	top: -80px;
	right: -45px;
	z-index: -1;
	width: 300px;
	height: 220px;
	content: "";
	background: repeating-linear-gradient(
		135deg,
		rgba(var(--trfb-accent-rgb), 0.11) 0,
		rgba(var(--trfb-accent-rgb), 0.11) 1px,
		transparent 1px,
		transparent 14px
	);
	transform: rotate(-3deg);
	pointer-events: none;
}

.trfb-selector__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 24px;
}

.trfb-selector__title-wrap {
	min-width: 0;
}

.trfb-selector h2,
.trfb-selector h3,
.trfb-project h2,
.trfb-project h3,
.trfb-product-notice strong {
	font-family: inherit;
}

.trfb-selector h3 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--trfb-white) !important;
	font-size: clamp(24px, 2.4vw, 34px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.trfb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 9px;
	color: var(--trfb-accent);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.trfb-eyebrow::before {
	width: 24px;
	height: 3px;
	content: "";
	background: var(--trfb-accent);
}

.trfb-selector__description {
	max-width: 730px;
	margin: 10px 0 0;
	color: #c9ccc9;
	font-size: 14px;
}

.trfb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 18px;
	margin: 0 0 22px;
}

.trfb-grid--vehicle {
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

.trfb-selector label,
.trfb-project label {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.trfb-selector label {
	color: #f2f2f2;
}

.trfb-field-optional {
	margin-left: 4px;
	color: #969b96;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.trfb-selector input,
.trfb-selector select,
.trfb-project input,
.trfb-project select,
.trfb-project textarea {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 1px solid var(--trfb-border) !important;
	border-radius: 4px !important;
	outline: 0;
	background-color: var(--trfb-white) !important;
	box-shadow: none !important;
	color: var(--trfb-primary) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.trfb-selector input,
.trfb-selector select,
.trfb-project input,
.trfb-project select {
	min-height: 52px;
	padding: 12px 42px 12px 14px !important;
}

.trfb-selector input,
.trfb-project input {
	padding-right: 14px !important;
}

.trfb-selector select,
.trfb-project select {
	-webkit-appearance: none;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #0b0b0b 50%),
		linear-gradient(135deg, #0b0b0b 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% - 2px),
		calc(100% - 14px) calc(50% - 2px);
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px;
}

.trfb-project textarea {
	min-height: 150px;
	padding: 15px !important;
	resize: vertical;
}

.trfb-selector input::placeholder,
.trfb-project input::placeholder,
.trfb-project textarea::placeholder {
	color: #8a8e8a;
	font-weight: 500;
	opacity: 1;
}

.trfb-selector input:focus,
.trfb-selector select:focus,
.trfb-project input:focus,
.trfb-project select:focus,
.trfb-project textarea:focus {
	border-color: var(--trfb-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--trfb-accent-rgb), 0.18) !important;
}

.trfb-selector select:disabled,
.trfb-project select:disabled {
	cursor: not-allowed;
	background-color: #eceeec !important;
	color: #858985 !important;
	opacity: 1;
}

.trfb-selector__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.trfb-button {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin: 0 !important;
	padding: 13px 24px !important;
	border: 1px solid var(--trfb-accent) !important;
	border-radius: 3px !important;
	background: var(--trfb-accent) !important;
	box-shadow: none !important;
	color: var(--trfb-primary) !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.075em !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.trfb-button:hover,
.trfb-button:focus-visible {
	background: var(--trfb-white) !important;
	color: var(--trfb-primary) !important;
	box-shadow: 0 9px 24px rgba(var(--trfb-accent-rgb), 0.16) !important;
	transform: translateY(-1px);
}

.trfb-button:focus-visible,
.trfb-link:focus-visible,
.trfb-checks input:focus-visible,
.trfb-privacy input:focus-visible {
	outline: 3px solid rgba(var(--trfb-accent-rgb), 0.42) !important;
	outline-offset: 3px;
}

.trfb-button:disabled,
.trfb-button[aria-busy="true"] {
	cursor: wait;
	opacity: .72;
	transform: none;
}

.trfb-button[aria-busy="true"]::before {
	width: 15px;
	height: 15px;
	margin-right: 10px;
	border: 2px solid rgba(var(--trfb-primary-rgb), .28);
	border-top-color: var(--trfb-primary);
	border-radius: 50%;
	content: "";
	animation: trfb-spin .75s linear infinite;
}

@keyframes trfb-spin {
	to { transform: rotate(360deg); }
}

.trfb-button--large {
	width: 100%;
	min-height: 58px;
	font-size: 14px !important;
}

.trfb-link {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	padding: 4px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--trfb-accent) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: .04em !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.trfb-link:hover {
	border-bottom-color: currentColor !important;
	color: var(--trfb-white) !important;
}

.trfb-link--dark:hover {
	color: var(--trfb-primary) !important;
}

.trfb-form-message {
	display: none;
	width: 100%;
	margin: 14px 0 0;
	padding: 12px 14px;
	border-left: 3px solid currentColor;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.trfb-form-message:not(:empty) {
	display: block;
}

.trfb-form-message.is-success {
	background: rgba(var(--trfb-accent-rgb), 0.11);
	color: #087d08;
}

.trfb-selector .trfb-form-message.is-success {
	color: var(--trfb-accent);
}

.trfb-form-message.is-error {
	background: #fff1f0;
	color: var(--trfb-danger);
}

/* Project builder -------------------------------------------------------- */
.trfb-project {
	overflow: hidden;
	width: 100%;
	border: 1px solid var(--trfb-border);
	border-top: 4px solid var(--trfb-accent);
	border-radius: var(--trfb-radius);
	background: var(--trfb-white);
	box-shadow: var(--trfb-shadow);
}

.trfb-project__intro {
	position: relative;
	overflow: hidden;
	max-width: none;
	margin: 0;
	padding: clamp(28px, 4vw, 52px);
	background: var(--trfb-primary);
	color: var(--trfb-white);
}

.trfb-project__intro::after {
	position: absolute;
	right: -55px;
	bottom: -95px;
	width: 330px;
	height: 245px;
	content: "";
	background: repeating-linear-gradient(
		135deg,
		rgba(var(--trfb-accent-rgb), 0.10) 0,
		rgba(var(--trfb-accent-rgb), 0.10) 1px,
		transparent 1px,
		transparent 14px
	);
	pointer-events: none;
}

.trfb-project__intro > * {
	position: relative;
	z-index: 1;
}

.trfb-project__intro h2 {
	max-width: 780px;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--trfb-white) !important;
	font-size: clamp(30px, 4vw, 50px) !important;
	font-weight: 850 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.trfb-project__intro p {
	max-width: 760px;
	margin: 16px 0 0;
	color: #d2d4d2;
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.6;
}

.trfb-project-form {
	padding: clamp(25px, 4vw, 52px);
}

.trfb-project label {
	color: var(--trfb-primary);
}

.trfb-step {
	display: grid;
	grid-template-columns: 42px auto 1fr;
	align-items: center;
	gap: 13px;
	margin: 36px 0 20px;
}

.trfb-step:first-child {
	margin-top: 0;
}

.trfb-step::after {
	height: 1px;
	content: "";
	background: var(--trfb-border);
}

.trfb-step span {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid var(--trfb-primary);
	border-radius: 3px;
	background: var(--trfb-accent);
	color: var(--trfb-primary);
	font-size: 14px;
	font-weight: 900;
}

.trfb-step h3 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--trfb-primary) !important;
	font-size: clamp(18px, 2vw, 24px) !important;
	font-weight: 850 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.trfb-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.trfb-checks legend {
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	color: var(--trfb-primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.trfb-checks label {
	position: relative;
	display: flex;
	min-height: 50px;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--trfb-border);
	border-radius: 4px;
	background: var(--trfb-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.trfb-checks label:hover {
	border-color: var(--trfb-primary);
	transform: translateY(-1px);
}

.trfb-checks label:has(input:checked) {
	border-color: var(--trfb-accent);
	background: rgba(var(--trfb-accent-rgb), .10);
}

.trfb-checks input,
.trfb-privacy input {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	flex: 0 0 18px;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--trfb-accent);
}

.trfb-privacy {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 22px 0 !important;
	color: var(--trfb-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.trfb-privacy input {
	margin-top: 2px !important;
}

.trfb-project a,
.trfb-product-notice a {
	color: #097d09;
	font-weight: 750;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.trfb-project__assurance {
	margin: 12px 0 0;
	color: var(--trfb-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

/* Product compatibility notice ----------------------------------------- */
.trfb-product-notice {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	width: 100%;
	margin: 0 0 24px;
	padding: 18px;
	border: 1px solid var(--trfb-border);
	border-left: 4px solid var(--trfb-primary);
	border-radius: 4px;
	background: var(--trfb-white);
	box-shadow: 0 8px 28px rgba(0,0,0,.06);
}

.trfb-product-notice__icon {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: 3px;
	background: var(--trfb-primary);
	color: var(--trfb-accent);
}

.trfb-product-notice__icon svg {
	width: 23px;
	height: 23px;
	stroke: currentColor;
}

.trfb-product-notice__content {
	min-width: 0;
}

.trfb-product-notice strong {
	display: block;
	margin: 0;
	color: var(--trfb-primary);
	font-size: 15px;
	font-weight: 850;
	line-height: 1.3;
	letter-spacing: .015em;
	text-transform: uppercase;
}

.trfb-product-notice span {
	display: block;
	margin: 5px 0 0;
	color: #555a55;
	font-size: 14px;
	line-height: 1.55;
}

.trfb-product-notice small {
	display: block;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--trfb-border);
	color: #6f746f;
	font-size: 12px;
	line-height: 1.5;
}

.trfb-product-notice--compatible {
	border-color: var(--trfb-primary);
	border-left-color: var(--trfb-accent);
	background: var(--trfb-primary);
}

.trfb-product-notice--compatible .trfb-product-notice__icon {
	background: var(--trfb-accent);
	color: var(--trfb-primary);
}

.trfb-product-notice--compatible strong {
	color: var(--trfb-white);
}

.trfb-product-notice--compatible span,
.trfb-product-notice--compatible small {
	color: #d4d7d4;
}

.trfb-product-notice--compatible small {
	border-top-color: #333633;
}

.trfb-product-notice--incompatible {
	border-left-color: var(--trfb-danger);
}

.trfb-product-notice--incompatible .trfb-product-notice__icon {
	background: var(--trfb-danger);
	color: var(--trfb-white);
}

.trfb-product-notice--unselected,
.trfb-product-notice--unknown {
	border-left-color: var(--trfb-accent);
}

.trfb-product-notice .trfb-selector {
	grid-column: 1 / -1;
	margin: 14px 0 0;
	padding: 20px;
	box-shadow: none;
}

.trfb-selector--compact {
	border-top-width: 3px;
}

.trfb-selector--compact::before {
	display: none;
}

.trfb-selector--compact .trfb-selector__head {
	margin-bottom: 14px;
}

.trfb-selector--compact h3 {
	font-size: 21px !important;
}

.trfb-selector--compact .trfb-selector__description {
	display: none;
}

.trfb-selector--compact .trfb-grid--vehicle {
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.trfb-selector--compact .trfb-button {
	min-height: 46px;
}

/* Status and loop badges ------------------------------------------------ */
.trfb-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #242424;
	border-radius: 4px;
	background: var(--trfb-primary);
	color: var(--trfb-white);
}

.trfb-status::before {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 50%;
	background: var(--trfb-accent);
	box-shadow: 0 0 0 4px rgba(var(--trfb-accent-rgb), .13);
	content: "";
}

.trfb-status__label {
	color: #aeb2ae;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.trfb-status__vehicle {
	font-size: 14px;
	font-weight: 750;
}

.trfb-status .trfb-link {
	margin-left: auto !important;
}

.trfb-status--empty {
	border-color: var(--trfb-border);
	background: var(--trfb-surface);
	color: var(--trfb-muted);
}

.trfb-status--empty::before {
	background: #a9ada9;
	box-shadow: none;
}

.trfb-loop-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	margin: 8px 0 3px;
	padding: 6px 9px;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: .055em;
	text-transform: uppercase;
}

.trfb-loop-badge::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	content: "";
}

.trfb-loop-badge--ok {
	border-color: var(--trfb-primary);
	background: var(--trfb-accent);
	color: var(--trfb-primary);
}

.trfb-loop-badge--no {
	background: var(--trfb-primary);
	color: var(--trfb-white);
}

.trfb-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Divi-specific containment --------------------------------------------- */
.et-db #et-boc .et-l .trfb-selector,
.et-db #et-boc .et-l .trfb-project,
.et-db #et-boc .et-l .trfb-product-notice,
.et-db #et-boc .et-l .trfb-status {
	line-height: 1.45;
}

.et-db #et-boc .et-l .trfb-selector p,
.et-db #et-boc .et-l .trfb-project p,
.et-db #et-boc .et-l .trfb-product-notice p {
	padding-bottom: 0;
}

.et-db #et-boc .et-l .trfb-selector select,
.et-db #et-boc .et-l .trfb-project select {
	background-color: var(--trfb-white) !important;
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 640px) {
	.trfb-selector,
	.trfb-project__intro,
	.trfb-project-form {
		padding: 22px;
	}

	.trfb-selector__head {
		display: block;
	}

	.trfb-selector__head .trfb-link {
		margin-top: 14px !important;
	}

	.trfb-grid,
	.trfb-grid--vehicle,
	.trfb-selector--compact .trfb-grid--vehicle,
	.trfb-checks {
		grid-template-columns: 1fr;
	}

	.trfb-step {
		grid-template-columns: 38px minmax(0, 1fr);
	}

	.trfb-step::after {
		display: none;
	}

	.trfb-step span {
		width: 38px;
		height: 38px;
	}

	.trfb-product-notice {
		grid-template-columns: 40px minmax(0, 1fr);
		padding: 15px;
	}

	.trfb-product-notice__icon {
		width: 40px;
		height: 40px;
	}

	.trfb-status .trfb-link {
		width: 100%;
		margin-left: 19px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trfb-selector *,
	.trfb-project *,
	.trfb-product-notice *,
	.trfb-status * {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}