/**
 * SW Product Importer - Shortcode Styles
 *
 * Styles for shortcode widgets:
 * - Fitment Reality [swpi_fitment_reality_calc]
 * - Competitor Showdown [swpi_competitor_showdown]
 * - Fitment Widget [swpi_fitment_widget]
 *
 * @package SW_Product_Importer
 */

/* ==========================================================================
   1. FONTS & CSS CUSTOM PROPERTIES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
	/* Industrial Clean Palette */
	--swpi-gunmetal: #2d3439;
	--swpi-safety-orange: #ff6b35;
	--swpi-safety-orange-hover: #e55a28;
	--swpi-toolbox-red: #d32f2f;
	--swpi-steel-grey: #9e9e9e;
	--swpi-concrete-grey: #e0e0e0;

	/* Semantic Colors */
	--swpi-background: #ffffff;
	--swpi-foreground: #1a1a1a;
	--swpi-muted: #717182;
	--swpi-border: rgba(0, 0, 0, 0.1);

	/* Gray Scale */
	--swpi-gray-50: #f9fafb;
	--swpi-gray-100: #f3f4f6;
	--swpi-gray-200: #e5e7eb;
	--swpi-gray-300: #d1d5db;
	--swpi-gray-400: #9ca3af;
	--swpi-gray-500: #6b7280;
	--swpi-gray-600: #4b5563;
	--swpi-gray-700: #374151;
	--swpi-gray-800: #1f2937;
	--swpi-gray-900: #111827;

	/* Status Colors */
	--swpi-green-50: #f0fdf4;
	--swpi-green-500: #22c55e;
	--swpi-green-600: #16a34a;
	--swpi-green-700: #15803d;
	--swpi-green-800: #166534;
	--swpi-green-900: #14532d;

	--swpi-yellow-50: #fefce8;
	--swpi-yellow-400: #facc15;
	--swpi-yellow-500: #eab308;
	--swpi-yellow-600: #ca8a04;
	--swpi-yellow-700: #a16207;
	--swpi-yellow-800: #854d0e;
	--swpi-yellow-900: #713f12;

	--swpi-red-50: #fef2f2;
	--swpi-red-500: #ef4444;
	--swpi-red-600: #dc2626;
	--swpi-red-800: #991b1b;
	--swpi-red-900: #7f1d1d;

	--swpi-blue-50: #eff6ff;
	--swpi-blue-300: #93c5fd;
	--swpi-blue-500: #3b82f6;
	--swpi-blue-600: #2563eb;
	--swpi-blue-800: #1e40af;
	--swpi-blue-900: #1e3a8a;

	/* Typography */
	--swpi-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--swpi-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Spacing */
	--swpi-radius: 0.5rem;
	--swpi-radius-lg: 0.75rem;

	/* Transitions */
	--swpi-transition: 150ms ease-in-out;
	--swpi-transition-slow: 300ms ease-in-out;
}

/* ==========================================================================
   SHORTCODE STYLES START
   ========================================================================== */

/* ==========================================================================
   FITMENT REALITY CALCULATOR
   ========================================================================== */

/* Fitment Reality Content */
.swpi-fitment-reality-section {
	margin-bottom: 2rem;
}

.swpi-fitment-reality-section:last-child {
	margin-bottom: 0;
}

.swpi-fitment-reality-heading {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.swpi-fitment-reality-content {
	color: var(--swpi-gray-700);
	line-height: 1.7;
}

.swpi-fitment-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}

.swpi-fitment-stat {
	background: var(--swpi-gray-100);
	padding: 1rem;
	border-radius: var(--swpi-radius);
	text-align: center;
}

.swpi-fitment-stat-label {
	display: block;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--swpi-gray-500);
	margin-bottom: 0.25rem;
}

.swpi-fitment-stat-value {
	font-family: var(--swpi-font-heading);
	font-size: 1.875rem;
	font-weight: 600;
	color: var(--swpi-gunmetal);
}

/* ==========================================================================
   FITMENT REALITY CALCULATOR WIDGET
   ========================================================================== */

.swpi-fitment-reality-calc {
	background: var(--swpi-gray-50);
	border-radius: var(--swpi-radius-lg);
	padding: 2rem;
	margin: 1.5rem 0;
}

.swpi-fitment-reality-selector {
	margin-bottom: 2rem;
}

.swpi-fitment-reality-selector .swpi-fitment-selects {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
}

@media (min-width: 640px) {
	.swpi-fitment-reality-selector .swpi-fitment-selects {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.swpi-fitment-reality-selector .swpi-fitment-selects {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Squeeze Calculation Display */
.swpi-squeeze-calculation {
	background: #fff;
	border: 1px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.swpi-squeeze-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--swpi-gray-100);
}

.swpi-squeeze-row:last-child {
	border-bottom: none;
}

.swpi-squeeze-label {
	color: var(--swpi-gray-600);
	font-size: 0.9375rem;
}

.swpi-squeeze-value {
	font-family: var(--swpi-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--swpi-gunmetal);
}

.swpi-squeeze-total {
	background: var(--swpi-gray-50);
	margin: 0 -1.5rem;
	padding: 0.75rem 1.5rem;
}

.swpi-squeeze-divider {
	height: 2px;
	background: var(--swpi-gray-300);
	margin: 1rem 0;
}

.swpi-squeeze-result {
	margin-top: 0.5rem;
}

.swpi-squeeze-result .swpi-squeeze-label {
	font-weight: 600;
	color: var(--swpi-gunmetal);
}

.swpi-clearance-value {
	font-size: 1.5rem;
	color: var(--swpi-green-600);
}

.swpi-squeeze-tight .swpi-clearance-value {
	color: var(--swpi-yellow-600);
}

/* Verdict Display */
.swpi-squeeze-verdict {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: var(--swpi-radius);
	margin-bottom: 1.5rem;
}

.swpi-verdict-pass {
	background: var(--swpi-green-50);
	border: 1px solid var(--swpi-green-500);
}

.swpi-verdict-caution {
	background: var(--swpi-yellow-50);
	border: 1px solid var(--swpi-yellow-500);
}

.swpi-verdict-fail {
	background: var(--swpi-red-50);
	border: 1px solid var(--swpi-red-500);
}

.swpi-verdict-icon {
	font-size: 1.5rem;
}

.swpi-verdict-text {
	font-weight: 600;
	color: var(--swpi-gunmetal);
}

/* ==========================================================================
   FITMENT REALITY CALC - Auto-Calculated Static Display
   ========================================================================== */

/* Title styling - matches React design (text-2xl, not bold/italic) */
.swpi-fitment-reality-calc .swpi-fitment-reality-title {
	font-family: var(--swpi-font-sans);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--swpi-gunmetal);
	margin-bottom: 1.5rem;
}

/* Intro paragraph */
.swpi-fitment-intro {
	font-size: 1rem;
	color: var(--swpi-gray-600);
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

/* Lift Stats - Gray boxes */
.swpi-fitment-lift-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.swpi-fitment-lift-stat {
	background: var(--swpi-gray-100);
	border-radius: var(--swpi-radius);
	padding: 1rem 1.25rem;
	text-align: center;
}

.swpi-fitment-lift-stat-label {
	display: block;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--swpi-gray-500);
	margin-bottom: 0.25rem;
}

.swpi-fitment-lift-stat-value {
	font-size: 1.875rem;
	font-weight: 400;
	color: var(--swpi-gunmetal);
}

/* Scenario intro - styled as heading (matching React h4) */
.swpi-fitment-scenario-intro {
	font-size: 1.25rem;
	color: var(--swpi-gunmetal);
	margin-bottom: 1rem;
	line-height: 1.4;
}

/* Scenario Card - Left blue border only (matching React design) */
.swpi-fitment-scenario-card {
	background: var(--swpi-blue-50);
	border-left: 4px solid var(--swpi-blue-500);
	border-radius: 0 var(--swpi-radius) var(--swpi-radius) 0;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.swpi-fitment-scenario-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
}

.swpi-fitment-scenario-label {
	font-size: 0.9375rem;
	color: var(--swpi-blue-900);
}

.swpi-fitment-scenario-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--swpi-blue-900);
}

.swpi-fitment-scenario-divider {
	height: 1px;
	background: var(--swpi-blue-300);
	margin: 0.75rem 0;
}

.swpi-fitment-scenario-result {
	padding-top: 0.75rem;
}

.swpi-fitment-result-label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--swpi-blue-900);
	margin-bottom: 0.25rem;
}

.swpi-fitment-result-text {
	font-size: 0.9375rem;
	color: var(--swpi-blue-800);
	line-height: 1.6;
	margin: 0;
}

/* Ceiling Section */
.swpi-ceiling-section {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--swpi-gray-200);
}

.swpi-ceiling-intro {
	font-size: 1rem;
	color: var(--swpi-gray-700);
	margin-bottom: 1rem;
}

/* Ceiling Formula Box - Dark (matching React bg-gray-900) */
.swpi-ceiling-formula-box {
	background: var(--swpi-gray-900);
	color: #fff;
	padding: 1.25rem 1.5rem;
	border-radius: var(--swpi-radius-lg);
	margin-bottom: 1rem;
	text-align: center;
	font-size: 1.125rem;
}

.swpi-ceiling-formula-box strong {
	font-weight: 700;
}

.swpi-ceiling-formula-note {
	font-weight: 400;
}

/* Ceiling Example - regular paragraph (matching React design) */
.swpi-ceiling-example {
	color: var(--swpi-gray-700);
	margin-bottom: 1rem;
	font-size: 1rem;
	line-height: 1.6;
}

.swpi-ceiling-example strong {
	color: var(--swpi-gunmetal);
	font-weight: 700;
}

/* Ceiling Warning - Left red border only (matching React design) */
.swpi-ceiling-warning {
	background: var(--swpi-red-50);
	border-left: 4px solid var(--swpi-red-500);
	border-radius: 0 var(--swpi-radius) var(--swpi-radius) 0;
	padding: 1.25rem 1.5rem;
}

.swpi-ceiling-warning p {
	font-size: 0.9375rem;
	color: var(--swpi-red-900);
	line-height: 1.6;
	margin: 0;
}

.swpi-ceiling-warning-highlight {
	color: var(--swpi-red-900);
	font-weight: 700;
}

.swpi-ceiling-warning strong {
	color: var(--swpi-red-900);
	font-weight: 700;
}

/* Responsive adjustments for Fitment Reality Calc */
@media (max-width: 639px) {
	.swpi-fitment-lift-stats {
		grid-template-columns: 1fr;
	}

	.swpi-fitment-lift-stat-value {
		font-size: 1.75rem;
	}

	.swpi-fitment-scenario-card {
		padding: 1.25rem;
	}

	.swpi-fitment-scenario-result {
		margin: 0 -1.25rem -1.25rem;
		padding: 1rem 1.25rem;
	}

	.swpi-ceiling-formula-box {
		padding: 1rem 1.25rem;
	}

	.swpi-ceiling-formula-box strong {
		font-size: 1.125rem;
	}
}

/* Legacy Ceiling Math Section (for backwards compatibility) */
.swpi-ceiling-math {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--swpi-gray-200);
}

.swpi-ceiling-calculation {
	background: #fff;
	border: 1px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius);
	padding: 1.5rem;
	margin-bottom: 1rem;
}

.swpi-ceiling-formula {
	color: var(--swpi-gray-700);
	margin-bottom: 1rem;
}

/* ================================================
   Auto-Generated Competitor Showdown (Shortcode)
   ================================================ */

.swpi-competitor-showdown {
	padding: 0;
}

.swpi-showdown-title {
	font-family: var(--swpi-font-sans);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--swpi-gunmetal);
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.swpi-showdown-subtitle {
	font-size: 1.125rem;
	color: var(--swpi-gray-600);
	margin-bottom: 1.5rem;
}

.swpi-showdown-table-wrapper {
	overflow-x: auto;
	margin-bottom: 2rem;
	-webkit-overflow-scrolling: touch;
}

.swpi-showdown-table {
	width: 100%;
	border: 2px solid var(--swpi-gray-300);
	border-radius: var(--swpi-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.swpi-showdown-table thead {
	background: var(--swpi-gunmetal);
}

.swpi-showdown-table th {
	color: #fff;
	padding: 1rem 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.swpi-showdown-table th.swpi-showdown-col-feature {
	text-align: left;
	width: 40%;
}

.swpi-showdown-table th.swpi-showdown-col-ours,
.swpi-showdown-table th.swpi-showdown-col-theirs {
	width: 30%;
}

.swpi-showdown-table td {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--swpi-gray-200);
}

.swpi-showdown-table tbody tr:last-child td {
	border-bottom: none;
}

.swpi-showdown-feature {
	color: var(--swpi-gunmetal);
	font-weight: 500;
}

.swpi-showdown-value {
	text-align: center;
}

/* Winner (green) styling */
.swpi-showdown-winner {
	background: var(--swpi-green-50);
	color: var(--swpi-green-900);
}

/* Loser (yellow/red) styling */
.swpi-showdown-loser {
	background: var(--swpi-yellow-50);
	color: var(--swpi-yellow-900);
}

/* Severe loser (red) - optional class */
.swpi-showdown-loser--severe {
	background: var(--swpi-red-50);
	color: var(--swpi-red-900);
}

/* Lab Take Box (Blue left border) */
.swpi-showdown-lab-take {
	background: var(--swpi-blue-50);
	border-left: 4px solid var(--swpi-blue-500);
	padding: 1.5rem;
	border-radius: 0 var(--swpi-radius) var(--swpi-radius) 0;
	margin-bottom: 1.5rem;
}

.swpi-showdown-lab-take-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--swpi-blue-900);
	margin-bottom: 0.75rem;
}

.swpi-showdown-lab-take-content {
	color: var(--swpi-blue-800);
	line-height: 1.7;
}

.swpi-showdown-lab-take-content p {
	margin-bottom: 0.75rem;
}

.swpi-showdown-lab-take-content p:last-child {
	margin-bottom: 0;
}

.swpi-showdown-lab-take-content strong {
	color: var(--swpi-blue-900);
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.swpi-showdown-title {
		font-size: 1.25rem;
	}

	.swpi-showdown-table th,
	.swpi-showdown-table td {
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	.swpi-showdown-lab-take {
		padding: 1rem;
	}

	.swpi-showdown-lab-take-title {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   FITMENT WIDGET
   ========================================================================== */

.swpi-fitment-widget {
	border: 2px solid var(--swpi-gray-600);
	border-radius: var(--swpi-radius-lg);
	overflow: hidden;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
}

/* Collapsed Header Button */
.swpi-fitment-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: var(--swpi-gunmetal);
	border: none;
	cursor: pointer;
	font-family: var(--swpi-font-sans);
	transition: background var(--swpi-transition);
}

.swpi-fitment-header:hover {
	background: #3a434b;
}

.swpi-fitment-header-left {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.swpi-fitment-header-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 107, 53, 0.15);
	border-radius: 50%;
}

.swpi-fitment-header-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--swpi-safety-orange);
}

.swpi-fitment-header-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
}

.swpi-fitment-header-title {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.swpi-fitment-header-subtitle {
	font-size: 0.8125rem;
	color: var(--swpi-gray-400);
}

.swpi-fitment-header-chevron {
	color: var(--swpi-safety-orange);
	transition: transform var(--swpi-transition);
}

.swpi-fitment-header[aria-expanded="true"] .swpi-fitment-header-chevron {
	transform: rotate(180deg);
}

/* Expanded Panel */
.swpi-fitment-panel {
	background: #fff;
}

.swpi-fitment-panel[hidden] {
	display: none;
}

/* Panel Header (Dark) */
.swpi-fitment-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: var(--swpi-gunmetal);
}

.swpi-fitment-panel-header-left {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.swpi-fitment-panel-icon {
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 107, 53, 0.15);
	border-radius: 50%;
}

.swpi-fitment-panel-icon svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--swpi-safety-orange);
}

.swpi-fitment-panel-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.swpi-fitment-panel-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.025em;
}

.swpi-fitment-panel-subtitle {
	font-size: 0.8125rem;
	color: var(--swpi-gray-400);
}

.swpi-fitment-close {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--swpi-gray-400);
	transition: color var(--swpi-transition);
}

.swpi-fitment-close:hover {
	color: #fff;
}

/* Form Content */
.swpi-fitment-form {
	padding: 1.5rem;
}

.swpi-fitment-selects {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.swpi-fitment-selects {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 3-column layout for Year/Make/Model */
.swpi-fitment-selects--3col {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.swpi-fitment-selects--3col {
		grid-template-columns: repeat(3, 1fr);
	}
}

.swpi-fitment-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.swpi-fitment-field label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--swpi-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.swpi-fitment-select {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 2px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius);
	background: var(--swpi-background);
	font-family: var(--swpi-font-sans);
	font-size: 0.9375rem;
	color: var(--swpi-gunmetal);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 1.125rem;
	padding-right: 2.5rem;
	transition: border-color var(--swpi-transition);
}

.swpi-fitment-select:hover:not(:disabled) {
	border-color: var(--swpi-gray-300);
}

.swpi-fitment-select:disabled {
	background-color: var(--swpi-gray-50);
	color: var(--swpi-gray-400);
	cursor: not-allowed;
}

.swpi-fitment-select:focus {
	outline: none;
	border-color: var(--swpi-safety-orange);
}

/* Trim Row (Optional) */
.swpi-fitment-trim-row {
	margin-top: 0.75rem;
}

.swpi-fitment-field--trim {
	max-width: 100%;
}

@media (min-width: 640px) {
	.swpi-fitment-field--trim {
		max-width: 50%;
	}
}

.swpi-fitment-optional-label {
	font-weight: 400;
	color: var(--swpi-gray-400);
	text-transform: none;
	letter-spacing: 0;
}

/* Ceiling Height Box (Optional) - New Design */
.swpi-fitment-ceiling-box {
	position: relative;
	background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 243, 205, 0.6));
	border: 2px solid rgba(255, 107, 53, 0.3);
	border-radius: var(--swpi-radius-lg);
	padding: 1.25rem 1rem 1rem;
	margin-bottom: 1rem;
}

.swpi-fitment-ceiling-badge {
	position: absolute;
	top: -0.625rem;
	left: 1rem;
	background: #fff;
	padding: 0.125rem 0.625rem;
	border: 2px solid var(--swpi-safety-orange);
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--swpi-safety-orange);
}

.swpi-fitment-ceiling-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--swpi-gunmetal);
	margin-bottom: 0.25rem;
}

.swpi-fitment-ceiling-desc {
	font-size: 0.8125rem;
	color: var(--swpi-gray-700);
	line-height: 1.5;
	margin: 0 0 0.875rem 0;
}

.swpi-fitment-ceiling-desc strong {
	color: var(--swpi-safety-orange);
}

.swpi-fitment-ceiling-bulb {
	margin-right: 0.25rem;
}

.swpi-fitment-ceiling-input-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.swpi-fitment-ceiling-input {
	width: 5rem;
	padding: 0.625rem 0.75rem;
	font-size: 1rem;
	font-family: var(--swpi-font-sans);
	border: 2px solid rgba(255, 107, 53, 0.4);
	border-radius: var(--swpi-radius);
	background: #fff;
	text-align: center;
	color: var(--swpi-gunmetal);
	transition: border-color var(--swpi-transition), box-shadow var(--swpi-transition);
}

.swpi-fitment-ceiling-input:focus {
	outline: none;
	border-color: var(--swpi-safety-orange);
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.swpi-fitment-ceiling-input::placeholder {
	color: var(--swpi-gray-400);
}

.swpi-fitment-ceiling-unit {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--swpi-gunmetal);
}

.swpi-fitment-ceiling-hint {
	font-size: 0.8125rem;
	color: var(--swpi-gray-600);
	flex: 1;
}

/* Spec Divider for Ceiling Section in Results */
.swpi-fitment-spec-divider {
	height: 1px;
	background: var(--swpi-gray-200);
	margin: 0.75rem 0;
}

/* Policy Link */
.swpi-fitment-policy-link {
	text-align: center;
	margin-top: 1.25rem;
}

.swpi-fitment-policy-link a {
	font-size: 0.875rem;
	color: var(--swpi-safety-orange);
	text-decoration: none;
	font-weight: 500;
}

.swpi-fitment-policy-link a:hover {
	text-decoration: underline;
}

/* Result Container */
.swpi-fitment-result-container {
	padding: 1.5rem;
}

/* Loading State */
.swpi-fitment-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	color: var(--swpi-gray-500);
	font-size: 0.875rem;
}

/* Result Card */
.swpi-fitment-result-card {
	border-radius: var(--swpi-radius-lg);
	padding: 1.5rem;
	border: 2px solid;
}

.swpi-fitment-result-card--pass {
	background: var(--swpi-green-50);
	border-color: var(--swpi-green-500);
}

.swpi-fitment-result-card--caution {
	background: var(--swpi-yellow-50);
	border-color: var(--swpi-yellow-500);
}

.swpi-fitment-result-card--fail {
	background: var(--swpi-red-50);
	border-color: var(--swpi-red-500);
}

.swpi-fitment-result-card--unknown {
	background: var(--swpi-gray-50);
	border-color: var(--swpi-gray-300);
}

/* Result Header */
.swpi-fitment-result-card .swpi-fitment-result-header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.swpi-fitment-result-card .swpi-fitment-result-icon {
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.swpi-fitment-result-card--pass .swpi-fitment-result-icon {
	background: var(--swpi-green-500);
}

.swpi-fitment-result-card--caution .swpi-fitment-result-icon {
	background: var(--swpi-yellow-500);
}

.swpi-fitment-result-card--fail .swpi-fitment-result-icon {
	background: var(--swpi-red-500);
}

.swpi-fitment-result-card--unknown .swpi-fitment-result-icon {
	background: var(--swpi-gray-400);
}

.swpi-fitment-result-card .swpi-fitment-result-icon svg {
	width: 2.25rem;
	height: 2.25rem;
	color: #fff;
}

.swpi-fitment-result-title-wrap {
	flex: 1;
}

.swpi-fitment-result-card .swpi-fitment-result-title {
	font-family: var(--swpi-font-heading);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.swpi-result-emoji {
	font-size: 1.75rem;
}

.swpi-fitment-result-card--pass .swpi-fitment-result-title {
	color: var(--swpi-green-800);
}

.swpi-fitment-result-card--caution .swpi-fitment-result-title {
	color: var(--swpi-yellow-800);
}

.swpi-fitment-result-card--fail .swpi-fitment-result-title {
	color: var(--swpi-red-800);
}

.swpi-fitment-result-card--unknown .swpi-fitment-result-title {
	color: var(--swpi-gray-700);
}

.swpi-fitment-result-message {
	font-size: 0.9375rem;
	margin: 0;
}

.swpi-fitment-result-card--pass .swpi-fitment-result-message {
	color: var(--swpi-green-700);
}

.swpi-fitment-result-card--caution .swpi-fitment-result-message {
	color: var(--swpi-yellow-700);
}

.swpi-fitment-result-card--fail .swpi-fitment-result-message {
	color: var(--swpi-red-700);
}

.swpi-fitment-result-card--unknown .swpi-fitment-result-message {
	color: var(--swpi-gray-600);
}

/* Specs Card */
.swpi-fitment-specs-card {
	background: #fff;
	border: 1px solid;
	border-radius: var(--swpi-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.swpi-fitment-result-card--pass .swpi-fitment-specs-card {
	border-color: var(--swpi-green-200);
}

.swpi-fitment-result-card--caution .swpi-fitment-specs-card {
	border-color: var(--swpi-yellow-400);
}

.swpi-fitment-result-card--fail .swpi-fitment-specs-card {
	border-color: var(--swpi-red-200);
}

.swpi-fitment-spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.625rem 0;
}

.swpi-fitment-spec-row:not(:last-child) {
	border-bottom: 1px solid var(--swpi-gray-200);
}

.swpi-fitment-spec-row--highlight {
	border-bottom: none !important;
	padding-top: 0.75rem;
	margin-top: 0.25rem;
	border-top: 2px solid var(--swpi-gray-200);
}

.swpi-fitment-spec-label {
	font-size: 0.9375rem;
	color: var(--swpi-gray-600);
}

.swpi-fitment-spec-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--swpi-gunmetal);
}

.swpi-fitment-spec-value--good {
	color: var(--swpi-green-600);
}

.swpi-fitment-spec-value--warn {
	color: var(--swpi-yellow-600);
}

.swpi-fitment-spec-value--bad {
	color: var(--swpi-red-600);
}

/* Reasons List */
.swpi-fitment-reasons {
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.swpi-fitment-reasons strong {
	display: block;
	margin-bottom: 0.5rem;
}

.swpi-fitment-result-card--caution .swpi-fitment-reasons {
	color: var(--swpi-yellow-800);
}

.swpi-fitment-result-card--fail .swpi-fitment-reasons {
	color: var(--swpi-red-800);
}

.swpi-fitment-reasons ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.swpi-fitment-reasons li {
	padding-left: 1.25rem;
	position: relative;
	margin-bottom: 0.25rem;
}

.swpi-fitment-reasons li::before {
	content: '•';
	position: absolute;
	left: 0;
}

/* Ceiling Warning Box */
.swpi-fitment-ceiling-warning {
	background: var(--swpi-red-50);
	border-left: 4px solid var(--swpi-red-600);
	padding: 0.875rem 1rem;
	margin-bottom: 1rem;
	border-radius: 0 var(--swpi-radius-sm) var(--swpi-radius-sm) 0;
}

.swpi-fitment-ceiling-warning p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--swpi-red-900);
	line-height: 1.5;
}

.swpi-fitment-ceiling-warning strong {
	display: inline;
	font-weight: 700;
}

/* Caution Warning Box */
.swpi-fitment-caution-warning {
	background: var(--swpi-yellow-100);
	border-left: 4px solid var(--swpi-yellow-600);
	padding: 0.875rem 1rem;
	margin-bottom: 1rem;
	border-radius: 0 var(--swpi-radius-sm) var(--swpi-radius-sm) 0;
}

.swpi-fitment-caution-warning p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--swpi-yellow-900);
	line-height: 1.5;
}

.swpi-fitment-caution-warning strong {
	font-weight: 700;
}

/* Result Footer */
.swpi-fitment-result-footer {
	text-align: left;
}

.swpi-fitment-check-another {
	background: transparent;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
}

.swpi-fitment-result-card--pass .swpi-fitment-check-another {
	color: var(--swpi-green-700);
}

.swpi-fitment-result-card--caution .swpi-fitment-check-another {
	color: var(--swpi-yellow-700);
}

.swpi-fitment-result-card--fail .swpi-fitment-check-another {
	color: var(--swpi-red-700);
}

.swpi-fitment-result-card--unknown .swpi-fitment-check-another {
	color: var(--swpi-gray-600);
}

.swpi-fitment-check-another:hover {
	text-decoration: none;
}

/* Error Message */
.swpi-fitment-error-msg {
	text-align: center;
	padding: 1.5rem;
	color: var(--swpi-red-600);
	font-size: 0.875rem;
}

/* Fitment Error & Retry (for year dropdown) */
.swpi-fitment-error {
	display: none;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--swpi-red-50);
	border: 1px solid var(--swpi-red-500);
	border-radius: var(--swpi-radius);
}

.swpi-fitment-error-text {
	font-size: 0.875rem;
	color: var(--swpi-red-800);
}

.swpi-fitment-retry-btn {
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: var(--swpi-safety-orange);
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background var(--swpi-transition);
	white-space: nowrap;
}

.swpi-fitment-retry-btn:hover {
	background: var(--swpi-safety-orange-hover);
}

/* CHECK FITMENT Button - Full Width Orange */
.swpi-fitment-check-btn {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	background: var(--swpi-safety-orange);
	border: none;
	border-radius: var(--swpi-radius);
	color: #fff;
	font-family: var(--swpi-font-sans);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background var(--swpi-transition), box-shadow var(--swpi-transition);
	margin-bottom: 1rem;
}

.swpi-fitment-check-btn:hover:not(:disabled) {
	background: var(--swpi-safety-orange-hover);
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.swpi-fitment-check-btn:disabled {
	background: var(--swpi-gray-300);
	cursor: not-allowed;
	opacity: 0.7;
}

.swpi-fitment-check-btn strong {
	font-weight: 700;
}

/* Compact Fitment Widget */
.swpi-fitment-compact {
	margin-bottom: 1.5rem;
}

.swpi-fitment-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1rem;
	background: var(--swpi-gray-50);
	border: 2px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius);
	cursor: pointer;
	transition: all var(--swpi-transition);
	font-family: var(--swpi-font-sans);
}

.swpi-fitment-toggle:hover {
	border-color: var(--swpi-gray-300);
}

.swpi-fitment-toggle-content {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.swpi-fitment-toggle-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--swpi-safety-orange);
}

.swpi-fitment-toggle-text {
	font-weight: 600;
	color: var(--swpi-gunmetal);
	font-size: 0.875rem;
}

.swpi-fitment-toggle-arrow {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--swpi-gray-400);
	transition: transform var(--swpi-transition);
}

.swpi-fitment-toggle[aria-expanded="true"] .swpi-fitment-toggle-arrow {
	transform: rotate(180deg);
}

.swpi-fitment-compact-panel {
	background: var(--swpi-background);
	border: 2px solid var(--swpi-gray-200);
	border-top: none;
	border-radius: 0 0 var(--swpi-radius) var(--swpi-radius);
	padding: 1rem;
}

.swpi-fitment-compact-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.swpi-fitment-compact-form {
		flex-direction: row;
	}
}

.swpi-fitment-compact-selects {
	display: flex;
	gap: 0.5rem;
	flex: 1;
}

.swpi-fitment-select-compact {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius);
	background: var(--swpi-background);
	font-family: var(--swpi-font-sans);
	font-size: 0.75rem;
	color: var(--swpi-gunmetal);
	min-width: 0;
}

.swpi-fitment-select-compact:disabled {
	background-color: var(--swpi-gray-100);
	color: var(--swpi-gray-400);
}

.swpi-fitment-check-compact {
	background: var(--swpi-gunmetal);
	color: #fff;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: var(--swpi-radius);
	font-family: var(--swpi-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.swpi-fitment-check-compact:disabled {
	background: var(--swpi-gray-400);
	cursor: not-allowed;
}

.swpi-fitment-compact-result {
	margin-top: 0.75rem;
}

/* Mobile visibility */
.swpi-fitment-widget--mobile {
	display: block;
}

.swpi-fitment-widget--desktop {
	display: none;
}

@media (min-width: 1024px) {
	.swpi-fitment-widget--mobile {
		display: none;
	}

	.swpi-fitment-widget--desktop {
		display: block;
	}
}

/* ==========================================================================
   15. LOADING & UTILITY CLASSES
   ========================================================================== */

.swpi-loading {
	position: relative;
	pointer-events: none;
}

.swpi-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}

.swpi-spinner {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--swpi-gray-200);
	border-top-color: var(--swpi-safety-orange);
	border-radius: 50%;
	animation: swpi-spin 0.8s linear infinite;
}

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

.swpi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Hide on mobile, show on desktop */
.swpi-desktop-only {
	display: none;
}

@media (min-width: 1024px) {
	.swpi-desktop-only {
		display: block;
	}
}

/* Show on mobile, hide on desktop */
.swpi-mobile-only {
	display: block;
}

@media (min-width: 1024px) {
	.swpi-mobile-only {
		display: none;
	}
}

/* ==========================================================================
   FITMENT FINDER LANDING PAGE
   ========================================================================== */

.swpi-finder {
	font-family: var(--swpi-font-sans);
	max-width: 56rem; /* 896px - matches Tailwind max-w-4xl */
	margin: 0 auto;
	position: relative;
}

/* Form Container */
.swpi-finder-form-container {
	background: var(--swpi-background);
	border: 2px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius-lg);
	overflow: hidden;
}

/* Header */
.swpi-finder-header {
	text-align: center;
	padding: 2rem 1.5rem 1rem;
}

.swpi-finder-title {
	font-family: var(--swpi-font-sans);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--swpi-gunmetal);
	margin: 0 0 0.5rem;
}

.swpi-finder-subtitle {
	font-size: 1rem;
	color: var(--swpi-gray-500);
	margin: 0;
}

/* Form Body */
.swpi-finder-body {
	padding: 1.5rem;
}

/* Step styling */
.swpi-finder-step {
	margin-bottom: 1.25rem;
}

.swpi-finder-step-label {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--swpi-gray-500);
	margin-bottom: 0.5rem;
}

.swpi-finder-step-num {
	color: var(--swpi-safety-orange);
	font-weight: 700;
}

.swpi-finder-step-dot {
	color: var(--swpi-gray-400);
}

.swpi-finder-step-text {
	color: var(--swpi-gray-600);
}

/* Select field wrapper */
.swpi-finder-field {
	position: relative;
}

.swpi-finder-select {
	width: 100%;
	padding: 0.875rem 2.5rem 0.875rem 1rem;
	border: 2px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius);
	background: var(--swpi-background);
	font-family: var(--swpi-font-sans);
	font-size: 1rem;
	color: var(--swpi-gunmetal);
	cursor: pointer;
	appearance: none;
	transition: border-color var(--swpi-transition);
}

.swpi-finder-select:hover:not(:disabled) {
	border-color: var(--swpi-gray-300);
}

.swpi-finder-select:focus {
	outline: none;
	border-color: var(--swpi-safety-orange);
}

.swpi-finder-select:disabled {
	background-color: var(--swpi-gray-50);
	color: var(--swpi-gray-400);
	cursor: not-allowed;
}

.swpi-finder-select-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--swpi-gray-400);
	pointer-events: none;
}

/* Hint text */
.swpi-finder-hint {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--swpi-yellow-700);
	background: var(--swpi-yellow-50);
	border-left: 3px solid var(--swpi-yellow-500);
	padding: 0.5rem 0.75rem;
	border-radius: 0 var(--swpi-radius) var(--swpi-radius) 0;
}

.swpi-finder-hint-icon {
	flex-shrink: 0;
}

/* Divider */
.swpi-finder-divider {
	border: none;
	height: 1px;
	background: var(--swpi-gray-200);
	margin: 1.5rem 0;
}

/* Ceiling Height Box */
.swpi-finder-ceiling-box {
	position: relative;
	background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(255, 243, 205, 0.5));
	border: 2px solid rgba(255, 107, 53, 0.25);
	border-radius: var(--swpi-radius-lg);
	padding: 1.5rem 1.25rem 1.25rem;
	margin-bottom: 1.5rem;
}

.swpi-finder-optional-badge {
	position: absolute;
	top: -0.625rem;
	left: 1rem;
	background: #fff;
	padding: 0.125rem 0.625rem;
	border: 2px solid var(--swpi-safety-orange);
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--swpi-safety-orange);
}

.swpi-finder-ceiling-title {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--swpi-gunmetal);
	margin-bottom: 0.5rem;
}

.swpi-finder-ceiling-desc {
	font-size: 0.875rem;
	color: var(--swpi-gray-700);
	line-height: 1.5;
	margin: 0 0 1rem 0;
}

.swpi-finder-ceiling-bulb {
	margin-right: 0.25rem;
}

.swpi-finder-ceiling-input-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.swpi-finder-ceiling-input {
	width: 5rem;
	padding: 0.625rem 0.75rem;
	font-size: 1rem;
	font-family: var(--swpi-font-sans);
	border: 2px solid rgba(255, 107, 53, 0.4);
	border-radius: var(--swpi-radius);
	background: #fff;
	text-align: center;
	color: var(--swpi-gunmetal);
	transition: border-color var(--swpi-transition), box-shadow var(--swpi-transition);
}

.swpi-finder-ceiling-input:focus {
	outline: none;
	border-color: var(--swpi-safety-orange);
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.swpi-finder-ceiling-unit {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--swpi-gunmetal);
}

.swpi-finder-ceiling-hint {
	font-size: 0.8125rem;
	color: var(--swpi-gray-600);
}

/* Submit Button */
.swpi-finder-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	padding: 1.125rem 1.5rem;
	background: var(--swpi-safety-orange);
	border: none;
	border-radius: var(--swpi-radius);
	color: #fff;
	font-family: var(--swpi-font-sans);
	font-size: 1.125rem;
	cursor: pointer;
	transition: background var(--swpi-transition), box-shadow var(--swpi-transition), transform var(--swpi-transition);
}

.swpi-finder-submit-btn:hover:not(:disabled) {
	background: var(--swpi-safety-orange-hover);
	box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35);
	transform: translateY(-1px);
}

.swpi-finder-submit-btn:disabled {
	background: var(--swpi-gray-300);
	cursor: not-allowed;
}

.swpi-finder-submit-btn strong {
	font-weight: 700;
	letter-spacing: 0.025em;
}

.swpi-finder-submit-arrow {
	font-size: 1.25rem;
	transition: transform var(--swpi-transition);
}

.swpi-finder-submit-btn:hover:not(:disabled) .swpi-finder-submit-arrow {
	transform: translateX(4px);
}

/* Contact Link */
.swpi-finder-contact {
	text-align: center;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--swpi-gray-500);
}

.swpi-finder-contact a {
	color: var(--swpi-safety-orange);
	text-decoration: none;
	font-weight: 500;
}

.swpi-finder-contact a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   FITMENT FINDER - RESULTS SECTION
   ========================================================================== */

.swpi-finder-results {
	margin-top: 2rem;
}

/* Vehicle Header Bar */
.swpi-finder-vehicle-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--swpi-gunmetal);
	padding: 1.25rem 1.5rem;
	border-radius: var(--swpi-radius-lg);
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.swpi-finder-vehicle-info {
	flex: 1;
	min-width: 200px;
}

.swpi-finder-vehicle-name {
	font-family: var(--swpi-font-sans);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
	margin: 0 0 0.5rem;
}

@media (min-width: 1024px) {
	.swpi-finder-vehicle-name {
		font-size: 1.875rem;
	}
}

.swpi-finder-vehicle-specs {
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--swpi-gray-400);
	flex-wrap: wrap;
}

@media (min-width: 1024px) {
	.swpi-finder-vehicle-specs {
		gap: 1.5rem;
		font-size: 1rem;
	}
}

.swpi-finder-vehicle-spec {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.swpi-finder-vehicle-spec-value {
	color: #fff;
	font-weight: 600;
}

.swpi-finder-check-another-btn {
	padding: 0.5rem 1.5rem;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 0.25rem;
	color: #fff;
	font-family: var(--swpi-font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
	transition: all var(--swpi-transition);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.swpi-finder-check-another-btn {
		font-size: 1rem;
	}
}

.swpi-finder-check-another-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

/* Results Header */
.swpi-finder-results-header {
	margin-bottom: 1.5rem;
}

.swpi-finder-results-title {
	font-family: var(--swpi-font-sans);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--swpi-gunmetal);
	margin: 0 0 0.5rem;
}

@media (min-width: 1024px) {
	.swpi-finder-results-title {
		font-size: 1.875rem;
	}
}

.swpi-finder-results-subtitle {
	font-size: 1rem;
	color: var(--swpi-gray-600);
	margin: 0;
}

/* ==========================================================================
   FITMENT FINDER - FILTERS
   ========================================================================== */

.swpi-finder-filters {
	background: var(--swpi-gray-50);
	border: 1px solid var(--swpi-gray-200);
	border-radius: var(--swpi-radius-lg);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.swpi-finder-filters-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--swpi-gray-200);
}

.swpi-finder-filters-icon {
	color: var(--swpi-gray-500);
	display: flex;
	align-items: center;
}

.swpi-finder-filters-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--swpi-gunmetal);
	flex: 1;
}

.swpi-finder-filters-clear {
	background: transparent;
	border: none;
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--swpi-safety-orange);
	cursor: pointer;
	border-radius: var(--swpi-radius);
	transition: background var(--swpi-transition);
}

.swpi-finder-filters-clear:hover {
	background: rgba(255, 107, 53, 0.1);
}

.swpi-finder-filters-body {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.swpi-finder-filters-body {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.swpi-finder-filters-body {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Filter Group */
.swpi-finder-filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.swpi-finder-filter-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--swpi-gray-500);
}

.swpi-finder-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.swpi-finder-filter-options--brands {
	max-height: 120px;
	overflow-y: auto;
	padding-right: 0.25rem;
}

/* Filter Chip (checkbox label) */
.swpi-finder-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	background: var(--swpi-background);
	border: 1px solid var(--swpi-gray-200);
	border-radius: 9999px;
	font-size: 0.8125rem;
	color: var(--swpi-gray-700);
	cursor: pointer;
	transition: all var(--swpi-transition);
	white-space: nowrap;
}

.swpi-finder-filter-chip:hover {
	border-color: var(--swpi-gray-300);
	background: var(--swpi-gray-100);
}

.swpi-finder-filter-chip input[type="checkbox"] {
	width: 0;
	height: 0;
	opacity: 0;
	position: absolute;
}

.swpi-finder-filter-chip:has(input:checked) {
	background: var(--swpi-safety-orange);
	border-color: var(--swpi-safety-orange);
	color: #fff;
}

.swpi-finder-filter-chip:has(input:checked):hover {
	background: var(--swpi-safety-orange-hover);
	border-color: var(--swpi-safety-orange-hover);
}

/* Active Filters Summary */
.swpi-finder-active-filters {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--swpi-gray-200);
}

.swpi-finder-active-filters-count {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--swpi-safety-orange);
}

/* Filter empty state */
.swpi-finder-filter-empty {
	font-size: 0.8125rem;
	color: var(--swpi-gray-400);
	font-style: italic;
}

/* No Results from Filters */
.swpi-finder-filter-no-results {
	text-align: center;
	padding: 3rem 1.5rem;
	background: var(--swpi-gray-50);
	border: 2px dashed var(--swpi-gray-300);
	border-radius: var(--swpi-radius-lg);
}

.swpi-finder-filter-no-results-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.swpi-finder-filter-no-results h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--swpi-gunmetal);
	margin: 0 0 0.5rem;
}

.swpi-finder-filter-no-results p {
	font-size: 0.9375rem;
	color: var(--swpi-gray-600);
	margin: 0 0 1rem;
}

.swpi-finder-clear-filters-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: var(--swpi-safety-orange);
	border: none;
	border-radius: var(--swpi-radius);
	color: #fff;
	font-family: var(--swpi-font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--swpi-transition);
}

.swpi-finder-clear-filters-btn:hover {
	background: var(--swpi-safety-orange-hover);
}

/* Load More Button */
.swpi-finder-load-more {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
}

.swpi-finder-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2.5rem;
	background: var(--swpi-safety-orange);
	border: none;
	border-radius: var(--swpi-radius-lg);
	color: #fff;
	font-family: var(--swpi-font-sans);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--swpi-transition);
	box-shadow: 0 4px 12px rgba(255, 90, 54, 0.25);
}

.swpi-finder-load-more-btn:hover {
	background: var(--swpi-safety-orange-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(255, 90, 54, 0.35);
}

.swpi-finder-load-more-btn:active {
	transform: translateY(0);
}

.swpi-finder-load-more-text {
	font-weight: 600;
}

.swpi-finder-load-more-count {
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 0.9;
}

/* Product Cards - Single Column Stack */
.swpi-finder-cards {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Product Card - Horizontal Layout */
.swpi-finder-card {
	background: var(--swpi-green-50);
	border: 2px solid var(--swpi-green-500);
	border-radius: var(--swpi-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--swpi-transition);
}

.swpi-finder-card:hover {
	box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
}

/* Card Header - Green Bar */
.swpi-finder-card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	background: var(--swpi-green-500);
	color: #fff;
}

.swpi-finder-card-header-icon {
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swpi-finder-card-header-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.swpi-finder-card-header-text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
	.swpi-finder-card-header-text {
		font-size: 1.25rem;
	}
}

/* Card Body - Grid Layout (1/3 image, 2/3 content) */
.swpi-finder-card-body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.5rem;
	padding: 2rem;
}

@media (max-width: 1023px) {
	.swpi-finder-card-body {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1.5rem;
	}
}

/* Card Image - Left Column */
.swpi-finder-card-image {
	background: var(--swpi-gray-100);
	border: 2px solid var(--swpi-gray-300);
	border-radius: var(--swpi-radius);
	overflow: hidden;
	min-height: 200px;
}

@media (min-width: 1024px) {
	.swpi-finder-card-image {
		height: 100%;
	}
}

@media (max-width: 1023px) {
	.swpi-finder-card-image {
		height: 12rem;
	}
}

.swpi-finder-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card Content - Right Column */
.swpi-finder-card-content {
	min-width: 0;
}

/* Product Title Row */
.swpi-finder-card-title-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 0.25rem;
}

@media (min-width: 1024px) {
	.swpi-finder-card-title-row {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.swpi-finder-card-name {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--swpi-gunmetal);
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

@media (min-width: 1024px) {
	.swpi-finder-card-name {
		font-size: 1.5rem;
	}
}

.swpi-finder-card-name a {
	color: inherit;
	text-decoration: none;
}

.swpi-finder-card-name a:hover {
	color: var(--swpi-safety-orange);
}

.swpi-finder-card-price {
	font-size: 1.875rem;
	font-weight: 400;
	color: var(--swpi-gunmetal);
	white-space: nowrap;
}

/* Category */
.swpi-finder-card-category {
	font-size: 1rem;
	color: var(--swpi-gray-600);
}

/* Fix margin when category is inside title row */
.swpi-finder-card-title-row + .swpi-finder-card-analysis {
	margin-top: 1rem;
}

/* Fitment Analysis Box */
.swpi-finder-card-analysis {
	background: #fff;
	border-left: 4px solid var(--swpi-green-600);
	border-radius: 0 var(--swpi-radius) var(--swpi-radius) 0;
	padding: 1rem;
	margin-bottom: 1rem;
}

.swpi-finder-card-analysis-header {
	font-size: 0.875rem;
	color: var(--swpi-green-800);
	margin-bottom: 0.75rem;
}

.swpi-finder-card-analysis-header strong {
	font-weight: 700;
}

.swpi-finder-card-analysis-clearance {
	color: var(--swpi-green-600);
	font-weight: 600;
}

/* Analysis Grid */
.swpi-finder-card-analysis-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.swpi-finder-card-analysis-item {
	background: var(--swpi-gray-100);
	border-radius: var(--swpi-radius);
	padding: 0.75rem;
}

.swpi-finder-card-analysis-label {
	font-size: 0.875rem;
	color: var(--swpi-gray-500);
	margin-bottom: 0.25rem;
}

.swpi-finder-card-analysis-value {
	font-size: 1.125rem;
	color: var(--swpi-gunmetal);
}

/* Card CTA - Full Width Button */
.swpi-finder-card-cta {
	display: block;
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: var(--swpi-safety-orange);
	border: none;
	border-radius: var(--swpi-radius-lg);
	color: #fff;
	font-family: var(--swpi-font-sans);
	font-size: 1.125rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--swpi-transition);
}

@media (min-width: 1024px) {
	.swpi-finder-card-cta {
		padding: 1rem 1.5rem;
	}
}

.swpi-finder-card-cta:hover {
	background: var(--swpi-safety-orange-hover);
}

/* No Results Message */
.swpi-finder-no-results {
	text-align: center;
	padding: 3rem 1.5rem;
	background: var(--swpi-gray-50);
	border-radius: var(--swpi-radius-lg);
}

.swpi-finder-no-results-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.swpi-finder-no-results h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--swpi-gunmetal);
	margin: 0 0 0.75rem;
}

.swpi-finder-no-results p {
	font-size: 0.9375rem;
	color: var(--swpi-gray-600);
	margin: 0 0 0.5rem;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.swpi-finder-no-results a {
	color: var(--swpi-safety-orange);
	text-decoration: none;
	font-weight: 500;
}

.swpi-finder-no-results a:hover {
	text-decoration: underline;
}

/* Trust Box */
.swpi-finder-trust-box {
	display: flex;
	gap: 1rem;
	background: var(--swpi-blue-50);
	border: 1px solid var(--swpi-blue-300);
	border-radius: var(--swpi-radius-lg);
	padding: 1.5rem;
	margin-top: 2rem;
}

.swpi-finder-trust-icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--swpi-blue-500);
	border-radius: 50%;
}

.swpi-finder-trust-icon svg {
	color: #fff;
}

.swpi-finder-trust-content {
	flex: 1;
}

.swpi-finder-trust-content h4 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--swpi-blue-900);
	margin: 0 0 0.5rem;
}

.swpi-finder-trust-content p {
	font-size: 0.9375rem;
	color: var(--swpi-blue-800);
	margin: 0 0 1rem;
	line-height: 1.6;
}

.swpi-finder-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.swpi-finder-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--swpi-blue-700);
	font-weight: 500;
}

.swpi-finder-trust-badge svg {
	color: var(--swpi-blue-500);
	flex-shrink: 0;
}

/* Loading Overlay */
.swpi-finder-loading {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	z-index: 9999;
}

.swpi-finder-loading-spinner {
	width: 3rem;
	height: 3rem;
	border: 3px solid var(--swpi-gray-200);
	border-top-color: var(--swpi-safety-orange);
	border-radius: 50%;
	animation: swpi-spin 0.8s linear infinite;
}

.swpi-finder-loading p {
	font-size: 1rem;
	color: var(--swpi-gray-600);
	margin: 0;
}

/* ==========================================================================
   MANUAL CHECK NOTICES (for missing lift data)
   ========================================================================== */

/* Manual check value styling in stat boxes */
.swpi-manual-check,
.swpi-fitment-spec-value--manual {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--swpi-yellow-700);
	font-style: italic;
}

/* Make the value smaller in lift stat boxes */
.swpi-fitment-lift-stat-value.swpi-manual-check {
	font-size: 1rem;
}

/* Manual check notice box (PHP shortcode) */
.swpi-fitment-manual-check-notice {
	background: var(--swpi-yellow-50);
	border-left: 4px solid var(--swpi-yellow-500);
	border-radius: 0 var(--swpi-radius) var(--swpi-radius) 0;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.swpi-manual-check-text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--swpi-yellow-800);
	line-height: 1.6;
}

/* Manual check row in fitment results (JS widget) */
.swpi-fitment-manual-check-row {
	display: flex;
	align-items: center;
	padding: 0.75rem 0;
}

.swpi-fitment-manual-notice {
	font-size: 0.875rem;
	color: var(--swpi-yellow-700);
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/* ==========================================================================
   FITMENT WIDGET - NO DATA AVAILABLE STATE (Compact)
   ========================================================================== */

.swpi-fitment-no-data-compact {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--swpi-gray-100);
	border-left: 3px solid var(--swpi-gray-400);
}

.swpi-fitment-no-data-icon-sm {
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
}

.swpi-fitment-no-data-content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.swpi-fitment-no-data-content strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--swpi-gunmetal);
}

.swpi-fitment-no-data-content span {
	font-size: 0.8125rem;
	color: var(--swpi-gray-600);
}

.swpi-fitment-no-data-close {
	margin-left: auto;
	background: transparent;
	border: none;
	font-size: 1.25rem;
	color: var(--swpi-gray-400);
	cursor: pointer;
	padding: 0 0.25rem;
	line-height: 1;
	transition: color var(--swpi-transition);
}

.swpi-fitment-no-data-close:hover {
	color: var(--swpi-gray-600);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Responsive adjustments */
@media (max-width: 639px) {
	.swpi-finder-title {
		font-size: 1.5rem;
	}

	.swpi-finder-vehicle-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.swpi-finder-check-another-btn {
		width: 100%;
		text-align: center;
	}

	.swpi-finder-trust-box {
		flex-direction: column;
		text-align: center;
	}

	.swpi-finder-trust-icon {
		margin: 0 auto;
	}

	.swpi-finder-trust-badges {
		justify-content: center;
	}
}