/**
 * Dropout Car Care base design system
 * Tokens + shared primitives for full-site dark UI.
 */

:root {
	--lv-radius: 0.5rem;
	--lv-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
	--lv-font-body: "Barlow", system-ui, sans-serif;
	/* Dark surface tokens */
	--lv-bg: #0d0b09;
	--lv-bg: oklch(15% 0.005 60);
	--lv-fg: #f4f1ed;
	--lv-fg: oklch(96% 0.006 85);
	--lv-card: #161311;
	--lv-card: oklch(19% 0.006 60);
	/* Primary brand blue */
	--lv-primary: #38b6ff;
	--lv-primary-hover: #5dc4ff;
	--lv-primary-active: #1a9ae8;
	--lv-primary-fg: #041018;
	--lv-secondary: #221e1c;
	--lv-secondary: oklch(24% 0.008 60);
	--lv-muted: #1f1c1a;
	--lv-muted: oklch(23% 0.006 60);
	--lv-muted-fg: #a9a49c;
	--lv-muted-fg: oklch(72% 0.012 80);
	--lv-border: #312d28;
	--lv-border: oklch(30% 0.01 70);
	/* Yellow accents (ratings + intentional highlights) — independent of primary */
	--lv-gold: #dfb042;
	--lv-gold: oklch(78% 0.135 85);
	--lv-gold-soft: #ebd6a3;
	--lv-gold-soft: oklch(88% 0.07 88);
	--lv-rating: var(--lv-gold);
	--lv-whatsapp: #3aba6a;
	--lv-whatsapp: oklch(70% 0.16 152);
	--lv-surface-from: #221e1b;
	--lv-surface-from: oklch(22% 0.008 65);
	--lv-surface-to: #110e0c;
	--lv-surface-to: oklch(17% 0.005 60);
	--lv-max: 80rem;
	--lv-gutter: 1rem;
	--lv-section-y: 5rem;

	/* Bridge legacy dcc tokens → dark */
	--dcc-bg: var(--lv-bg);
	--dcc-black: var(--lv-fg);
	--dcc-muted: var(--lv-muted-fg);
	--dcc-primary: var(--lv-primary);
	--dcc-blue: var(--lv-primary);
	--dcc-barlow: var(--lv-font-body);
	--dcc-max: var(--lv-max);
	--dcc-gutter: var(--lv-gutter);
	--dcc-section-y: var(--lv-section-y);
}

@media (min-width: 640px) {
	:root {
		--lv-gutter: 1.5rem;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--lv-bg) !important;
	color: var(--lv-fg) !important;
	font-family: var(--lv-font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body .wp-site-blocks,
body .wp-site-blocks > * {
	background: transparent;
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--lv-primary);
	text-decoration: none;
}

a:hover {
	color: var(--lv-primary-hover);
}

h1, h2, h3, h4 {
	font-family: var(--lv-font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.05;
	color: var(--lv-fg);
	margin: 0;
}

.lv-wrap {
	width: 100%;
	max-width: var(--lv-max);
	margin: 0 auto;
	padding-left: var(--lv-gutter);
	padding-right: var(--lv-gutter);
}

.lv-section {
	padding-block: var(--lv-section-y);
}

.lv-section--border {
	border-top: 1px solid var(--lv-border);
	border-bottom: 1px solid var(--lv-border);
}

.lv-section--card {
	background: var(--lv-card);
}

.lv-section--muted {
	background: color-mix(in oklab, var(--lv-secondary) 30%, transparent);
}

.lv-head {
	text-align: center;
	margin-bottom: 0;
}

.lv-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--lv-primary);
}

.lv-head__title {
	margin-top: 0.75rem;
	font-size: 2.25rem;
	line-height: 1;
}

@media (min-width: 640px) {
	.lv-head__title {
		font-size: 3rem;
	}
}

.lv-rule {
	display: block;
	width: 5rem;
	height: 1px;
	margin: 1rem auto 0;
	background-image: linear-gradient(90deg, transparent, var(--lv-gold) 45%, var(--lv-gold) 55%, transparent);
}

.lv-head__lead {
	max-width: 42rem;
	margin: 1.25rem auto 0;
	color: var(--lv-muted-fg);
	font-size: 1rem;
	line-height: 1.625;
}

.lv-text-gradient {
	/* Soft infinite blue shimmer — original brand blues */
	background-image: linear-gradient(
		90deg,
		#2f6fed 0%,
		#38b6ff 25%,
		#6ad0ff 50%,
		#38b6ff 75%,
		#2f6fed 100%
	);
	background-size: 220% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 0.2rem rgba(56, 182, 255, 0.3));
	animation: lv-text-gradient-shift 5s ease-in-out infinite;
	will-change: background-position, filter;
}

@keyframes lv-text-gradient-shift {
	0% {
		background-position: 0% 50%;
		filter: drop-shadow(0 0 0.15rem rgba(47, 111, 237, 0.25));
	}
	50% {
		background-position: 100% 50%;
		filter: drop-shadow(0 0 0.3rem rgba(56, 182, 255, 0.4));
	}
	100% {
		background-position: 0% 50%;
		filter: drop-shadow(0 0 0.15rem rgba(47, 111, 237, 0.25));
	}
}

.lv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1.35rem;
	font-family: var(--lv-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: var(--lv-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.lv-btn--primary {
	background: var(--lv-primary);
	color: var(--lv-primary-fg) !important;
}

.lv-btn--primary:hover {
	background: var(--lv-primary-hover);
	color: var(--lv-primary-fg) !important;
}

.lv-btn--outline {
	background: transparent;
	border-color: var(--lv-border);
	color: var(--lv-fg) !important;
}

.lv-btn--outline:hover {
	border-color: var(--lv-primary);
	color: var(--lv-primary) !important;
}

.lv-btn--ghost {
	background: transparent;
	border-color: rgba(245, 242, 235, 0.35);
	color: #fff !important;
}

.lv-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
}

.lv-btn--whatsapp {
	background: var(--lv-whatsapp);
	color: #06240f !important;
}

.lv-btn--whatsapp:hover {
	opacity: 0.92;
	color: #06240f !important;
}

.lv-btn--lg {
	min-height: 3rem;
	padding: 0 1.5rem;
	font-size: 0.9375rem;
}

.lv-quote .lv-btn,
.dcc-form .lv-btn,
.dcc-form input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0.75rem;
	min-height: 3rem;
	padding: 0 1.5rem;
	font-family: var(--lv-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--lv-radius);
	background: var(--lv-primary);
	color: var(--lv-primary-fg) !important;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.lv-quote .lv-btn:hover,
.dcc-form .lv-btn:hover,
.dcc-form input.wpcf7-submit:hover {
	background: var(--lv-primary-hover);
	color: var(--lv-primary-fg) !important;
}

.lv-quote .lv-btn--whatsapp,
.dcc-form .lv-btn--whatsapp,
.dcc-form input.wpcf7-submit.lv-btn--whatsapp {
	background: var(--lv-whatsapp);
	color: #06240f !important;
}

.lv-quote .lv-btn--whatsapp:hover,
.dcc-form .lv-btn--whatsapp:hover,
.dcc-form input.wpcf7-submit.lv-btn--whatsapp:hover {
	opacity: 0.92;
	background: var(--lv-whatsapp);
	color: #06240f !important;
}

.dcc-form .wpcf7-spinner {
	display: none;
}

.lv-surface {
	border: 1px solid var(--lv-border);
	border-radius: var(--lv-radius);
	background-image: linear-gradient(160deg, var(--lv-surface-from) 0%, var(--lv-surface-to) 100%);
}

.lv-surface:hover {
	border-color: color-mix(in oklab, var(--lv-primary) 60%, transparent);
}

.lv-icon {
	display: inline-flex;
	color: var(--lv-primary);
	flex-shrink: 0;
}

.lv-icon svg {
	width: 2rem;
	height: 2rem;
}

/* Legacy class bridges */
.dcc-wrap {
	max-width: var(--lv-max);
	margin: 0 auto;
	padding: 0 var(--lv-gutter);
	box-sizing: border-box;
}

.dcc-section {
	padding: var(--lv-section-y) 0;
	background: transparent;
}

.dcc-section__title {
	margin: 0 0 1.5rem;
	font-family: var(--lv-font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 400;
	text-align: center;
	color: var(--lv-fg);
	letter-spacing: 0.02em;
}

.dcc-section__lead {
	max-width: 45rem;
	margin: -0.5rem auto 1.75rem;
	text-align: left;
	color: var(--lv-muted-fg);
	font-size: 1.05rem;
	line-height: 1.65;
}

.dcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1.35rem;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: var(--lv-radius);
	border: 1px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.dcc-btn--primary {
	background: var(--lv-primary);
	color: var(--lv-primary-fg) !important;
}

.dcc-btn--primary:hover {
	background: var(--lv-primary-hover);
	color: var(--lv-primary-fg) !important;
}

.dcc-btn--whatsapp {
	background: var(--lv-whatsapp);
	color: #06240f !important;
}

.dcc-btn--whatsapp:hover {
	opacity: 0.92;
	color: #06240f !important;
}

.dcc-btn--ghost {
	background: transparent;
	border-color: rgba(245, 242, 235, 0.35);
	color: #fff !important;
}

.dcc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
}

.dcc-btn--outline {
	border-color: var(--lv-border);
	color: var(--lv-fg) !important;
	background: transparent;
}

.dcc-btn--outline:hover {
	border-color: var(--lv-primary);
	color: var(--lv-primary) !important;
	background: transparent;
}

.primary-color {
	color: var(--lv-primary) !important;
}

.secondary-color {
	color: var(--lv-muted-fg) !important;
}

/* Reveal */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.lv-text-gradient {
		animation: none;
		background-position: 0% 50%;
		filter: drop-shadow(0 0 0.15rem rgba(56, 182, 255, 0.28));
	}
}

/* Forms */
.lv-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 0.9rem;
}

.lv-field label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lv-muted-fg);
}

.lv-field label[for="lv-q-name"]::after,
.lv-field label[for="lv-q-phone"]::after,
.lv-field label[for="lv-q-car"]::after,
.lv-field label[for="lv-q-main"]::after,
.lv-field label[for="lv-q-sub"]::after,
.dcc-form label[for="dcc-name"]::after,
.dcc-form label[for="dcc-phone"]::after,
.dcc-form label[for="dcc-vehicle"]::after,
.dcc-form label[for="dcc-main-service"]::after,
.dcc-form label[for="dcc-sub-service"]::after {
	content: " *";
	color: #e53935;
	font-weight: 700;
	letter-spacing: 0;
}

.lv-field input,
.lv-field select,
.lv-field textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--lv-border);
	border-radius: var(--lv-radius);
	background: var(--lv-bg);
	color: var(--lv-fg);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	box-sizing: border-box;
}

.lv-field input:focus,
.lv-field select:focus,
.lv-field textarea:focus {
	outline: 2px solid color-mix(in oklab, var(--lv-primary) 45%, transparent);
	outline-offset: 1px;
	border-color: var(--lv-primary);
}

.lv-field select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.lv-field .dcc-field-error,
.dcc-form .dcc-field-error {
	display: block;
	margin: 0.2rem 0 0;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #e8b4b4;
}

.lv-field .dcc-field-error[hidden],
.dcc-form .dcc-field-error[hidden] {
	display: none;
}

.lv-field input.is-invalid,
.lv-field select.is-invalid,
.lv-field textarea.is-invalid,
.dcc-form input.is-invalid,
.dcc-form select.is-invalid,
.dcc-form textarea.is-invalid {
	border-color: #c45c5c;
}

.lv-field textarea {
	min-height: 3rem;
	height: 3rem;
	resize: vertical;
}