/**
 * VIN box styles, tuned to aircomponents.com.
 *
 * Colours below were sampled from the live finder bar, so the box should drop
 * straight into that navy band without adjustment. Everything is driven by the
 * variables in the first block — change them there, not further down.
 *
 * The box normally sits on the dark band above the dropdowns. If you place it
 * somewhere light instead, add class="wpcevd wpcevd-on-light" or use the
 * [wpce-vin theme="light"] shortcode attribute.
 */

.wpcevd {
	--wpcevd-red: #DD3333;
	--wpcevd-red-hover: #C22A2A;
	--wpcevd-gold: #FFDB05;
	--wpcevd-navy: #04172B;

	--wpcevd-input-bg: #FFFFFF;
	--wpcevd-input-text: #444444;
	--wpcevd-input-border: #AAAAAA;

	--wpcevd-text: #FFFFFF;
	--wpcevd-muted: rgba( 255, 255, 255, 0.68 );
	--wpcevd-rule: rgba( 255, 255, 255, 0.18 );

	/* The framed panel. Deliberately faint: it is there to say "this is a
	   separate route", not to compete with the finder below it. */
	--wpcevd-panel-bg: rgba( 255, 255, 255, 0.06 );
	--wpcevd-panel-border: rgba( 255, 255, 255, 0.15 );

	/* Matches the finder's own 36px dropdowns. */
	--wpcevd-height: 36px;
	--wpcevd-radius: 3px;

	margin: 0 0 14px;
	color: var( --wpcevd-text );
	font-size: 1em;
	line-height: 1.4;
}

.wpcevd,
.wpcevd * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Light-background variant. */
.wpcevd-on-light {
	--wpcevd-text: #04172B;
	--wpcevd-muted: rgba( 4, 23, 43, 0.66 );
	--wpcevd-rule: rgba( 4, 23, 43, 0.15 );
	--wpcevd-panel-bg: rgba( 4, 23, 43, 0.04 );
	--wpcevd-panel-border: rgba( 4, 23, 43, 0.14 );
}

/* --- Panel ------------------------------------------------------------- */

.wpcevd-panel {
	padding: 13px 15px;
	background: var( --wpcevd-panel-bg );
	border: 1px solid var( --wpcevd-panel-border );
	border-radius: 4px;
}

/* --- Header ------------------------------------------------------------ */

.wpcevd-heading {
	margin: 0 0 3px;
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var( --wpcevd-text );
}

.wpcevd-description {
	margin: 0 0 8px;
	font-size: 0.86em;
	line-height: 1.45;
	color: var( --wpcevd-muted );
	max-width: 62ch;
}

/* --- Input row --------------------------------------------------------- */

.wpcevd-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	gap: 8px;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.wpcevd-input {
	/* 39% is Year plus Make plus the gap between them, so the field ends
	   exactly where Make ends in the row below. */
	-webkit-box-flex: 0;
	-ms-flex: 0 0 39%;
	flex: 0 0 39%;
	min-width: 0;
	max-width: none;
	width: 39%;
	height: var( --wpcevd-height );
	margin: 0;
	padding: 0 10px;
	border: 1px solid var( --wpcevd-input-border );
	border-radius: var( --wpcevd-radius );
	background: var( --wpcevd-input-bg );
	color: var( --wpcevd-input-text );
	font-size: 0.95em;
	line-height: calc( var( --wpcevd-height ) - 2px );

	/* People read a VIN off a door jamb one character at a time. Monospace
	   with open tracking makes a transposed digit visible. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.wpcevd-input::-webkit-input-placeholder {
	letter-spacing: normal;
	text-transform: none;
	color: #8C8C8C;
}

.wpcevd-input::placeholder {
	letter-spacing: normal;
	text-transform: none;
	color: #8C8C8C;
}

.wpcevd .wpcevd-submit,
.wpcevd .wpcevd-submit:visited {
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
}

.wpcevd-submit {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	height: var( --wpcevd-height );
	margin: 0;
	min-width: 120px;
	padding: 0 22px;
	border: 0;
	border-radius: var( --wpcevd-radius );
	background: var( --wpcevd-red );
	color: #FFFFFF;
	font-size: 0.85em;
	font-weight: 700;
	line-height: var( --wpcevd-height );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	-webkit-transition: background-color 0.15s ease;
	transition: background-color 0.15s ease;
}

.wpcevd-submit:hover,
.wpcevd-submit:focus {
	background: var( --wpcevd-red-hover );
	color: #FFFFFF;
}

.wpcevd-input:focus,
.wpcevd-input:focus-visible {
	border-color: var( --wpcevd-gold );
	outline: 2px solid var( --wpcevd-gold );
	outline-offset: 1px;
}

.wpcevd-submit:focus-visible {
	outline: 2px solid var( --wpcevd-gold );
	outline-offset: 2px;
}

.wpcevd-busy .wpcevd-input,
.wpcevd-busy .wpcevd-submit {
	opacity: 0.65;
	cursor: default;
}

/* --- Status line ------------------------------------------------------- */

.wpcevd-status {
	margin-top: 7px;
	font-size: 0.86em;
	line-height: 1.45;
	color: var( --wpcevd-muted );
}

.wpcevd-status:empty {
	margin-top: 0;
}

.wpcevd-is-error {
	color: #FF8A80;
}

.wpcevd-on-light .wpcevd-is-error {
	color: #B3221B;
}

.wpcevd-is-found {
	color: var( --wpcevd-gold );
	font-weight: 700;
}

.wpcevd-on-light .wpcevd-is-found {
	color: #04172B;
}

.wpcevd-is-working::after {
	content: "";
	display: inline-block;
	vertical-align: -0.1em;
	margin-left: 8px;
	width: 0.85em;
	height: 0.85em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: wpcevd-spin 0.7s linear infinite;
	animation: wpcevd-spin 0.7s linear infinite;
}

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

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

@media ( prefers-reduced-motion: reduce ) {
	.wpcevd-is-working::after {
		-webkit-animation-duration: 2.4s;
		animation-duration: 2.4s;
	}
}

/* --- Divider ----------------------------------------------------------- */

/**
 * A labelled hairline between the VIN route and the dropdown route, so the two
 * read as alternatives rather than as one long form to fill in.
 */
.wpcevd-divider {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 12px;
	margin: 13px 0 11px;
	font-size: 0.78em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --wpcevd-muted );
}

.wpcevd-divider::before,
.wpcevd-divider::after {
	content: "";
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	height: 1px;
	background: var( --wpcevd-rule );
}

.wpcevd-divider:empty,
.wpcevd[data-standalone="yes"] .wpcevd-divider {
	display: none;
}

/* --- Narrow screens ---------------------------------------------------- */

@media only screen and ( max-width: 767px ) {
	.wpcevd-row {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.wpcevd-panel {
		padding: 12px;
	}

	.wpcevd-input {
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
	}

	.wpcevd-submit {
		width: 100%;
	}
}

/* --- Tabbed layout ------------------------------------------------------ */

.wpcevd-tablist {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
}

.wpcevd .wpcevd-tab,
.wpcevd .wpcevd-tab:visited {
	margin: 0;
	padding: 8px 20px;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	border-radius: var( --wpcevd-radius ) var( --wpcevd-radius ) 0 0;
	background: var( --wpcevd-panel-bg );
	color: var( --wpcevd-muted );
	font: inherit;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-transition: background-color 0.15s ease, color 0.15s ease;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wpcevd .wpcevd-tab:hover,
.wpcevd .wpcevd-tab:focus {
	background: var( --wpcevd-panel-bg );
	color: var( --wpcevd-text );
	box-shadow: none;
}

.wpcevd .wpcevd-tab.is-active,
.wpcevd .wpcevd-tab.is-active:hover,
.wpcevd .wpcevd-tab.is-active:focus {
	background: var( --wpcevd-red );
	color: #FFFFFF;
}

.wpcevd .wpcevd-tab:focus-visible {
	outline: 2px solid var( --wpcevd-gold );
	outline-offset: -2px;
}

/**
 * The pane area reads as the body of the active tab, which is why the top-left
 * corner stays square — it meets the first tab.
 */
.wpcevd-body {
	padding: 14px 15px;
	background: var( --wpcevd-panel-bg );
	border: 1px solid var( --wpcevd-panel-border );
	border-radius: 0 var( --wpcevd-radius ) var( --wpcevd-radius ) var( --wpcevd-radius );
}

.wpcevd-pane {
	display: none;
}

.wpcevd-pane.is-active {
	display: block;
}

/**
 * WPCE positions its submit button absolutely against the nearest positioned
 * ancestor. Without this it would anchor outside the pane's padding.
 */
.wpcevd-pane-vehicle {
	position: relative;
}

/* The tabs already frame the block, so the inner panel would be a second box. */
.wpcevd-tabbed .wpcevd-panel {
	padding: 0;
	background: none;
	border: 0;
}

.wpcevd-tabbed .wpcevd-status:not( :empty ) {
	margin: 10px 0;
}

@media only screen and ( max-width: 767px ) {
	.wpcevd-tab {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0;
		flex: 1 1 0;
		padding: 8px 10px;
		text-align: center;
	}

	.wpcevd-body {
		padding: 12px;
	}
}