/*
 * The vehicle search panel, built to the approved design.
 *
 * Everything is prefixed vl- and scoped inside #vehicle_lookup_panel or the blocks it renders, so
 * none of it can reach the rest of the account area. Colours, spacing and component shapes are the
 * design's; the typeface is deliberately the theme's, because two imported webfonts inside one
 * panel would make it look foreign on a page that uses neither.
 */

:root {
	--vl-accent: #e55024;
	--vl-accent-dark: #B83C14;
	--vl-accent-tint: #FCE9E1;
	--vl-ink: #16191D;
	--vl-muted: #46505C;
	--vl-faint: #6B7480;
	--vl-locked: #8A939E;
	--vl-line: #D8DDE3;
	--vl-divider: #E6EAEE;
	--vl-field-line: #C3CAD2;
}

/* ------------------------------------------------------------------ the two ways in */
.vl-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--vl-line);
	margin-bottom: 22px;
	padding-left: 0;
	list-style: none;
}
.vl-tab {
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vl-muted);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.vl-tab:hover { color: var(--vl-accent-dark); }
.vl-tab.is-active {
	font-weight: 600;
	color: var(--vl-accent-dark);
	border-bottom-color: var(--vl-accent);
}
.vl-tab-badge {
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #FFFFFF;
	background: var(--vl-accent);
	border-radius: 10px;
}

/* ------------------------------------------------------------------------- the card */
.vl-card {
	background: #FFFFFF;
	border: 1px solid var(--vl-line);
	border-radius: 10px;
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.vl-step { display: flex; flex-direction: column; gap: 16px; }
.vl-step-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.vl-step-num {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	background: var(--vl-accent);
	border-radius: 13px;
}
.vl-step-num.is-locked { color: var(--vl-locked); background: #EDEFF2; }

.vl-step-title { margin: 0; font-size: 19px; font-weight: 600; color: var(--vl-ink); }
.vl-step.is-locked .vl-step-title { color: var(--vl-locked); }

.vl-step-note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vl-faint); }

.vl-divider { height: 1px; background: var(--vl-divider); }

/* ------------------------------------------------------- the segmented choice buttons */
.vl-choices { display: flex; gap: 12px; flex-wrap: wrap; }

.vl-choice {
	width: 150px;
	padding: 16px 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--vl-ink);
	background: #FFFFFF;
	border: 1px solid var(--vl-field-line);
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
}
.vl-choice:hover { border-color: var(--vl-accent); }
.vl-choice.is-selected {
	font-weight: 700;
	color: var(--vl-accent-dark);
	background: var(--vl-accent-tint);
	border: 2px solid var(--vl-accent);
}
.vl-choice--wide { width: 196px; font-size: 15px; }

/* ------------------------------------------------------------------- the five fields */
.vl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.vl-field-wrap { display: flex; flex-direction: column; gap: 7px; }
.vl-field-wrap--action { justify-content: flex-end; }

.vl-label { font-size: 13px; font-weight: 500; color: var(--vl-ink); margin: 0; }
.vl-step.is-locked .vl-label { color: var(--vl-locked); }

.vl-input {
	height: 46px;
	box-sizing: border-box;
	padding: 0 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--vl-ink);
	background: #FFFFFF;
	border: 1px solid var(--vl-field-line);
	border-radius: 8px;
	width: 100%;
}
.vl-input:focus { outline: none; border-color: var(--vl-accent); box-shadow: 0 0 0 3px rgba(229, 80, 36, .14); }
.vl-input:disabled { color: var(--vl-locked); background: #F2F4F6; border-color: #DDE2E7; }

.vl-hint { font-size: 12px; color: var(--vl-faint); min-height: 16px; }

.vl-submit {
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--vl-accent);
	border: 1px solid var(--vl-accent);
	border-radius: 8px;
	cursor: pointer;
}
.vl-submit:hover:not(:disabled) { background: var(--vl-accent-dark); border-color: var(--vl-accent-dark); }
.vl-submit:disabled { background: #A9B4BE; border-color: #A9B4BE; cursor: default; }

/* --------------------------------------------------------------------- the callouts */
.vl-callout {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px 16px;
	margin-top: 22px;
	background: #FFFFFF;
	border: 1px solid var(--vl-line);
	border-left: 3px solid var(--vl-accent);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--vl-muted);
}
.vl-callout svg { flex-shrink: 0; margin-top: 1px; }
.vl-callout--warn { border-left-color: #9A6B15; }

/* ------------------------------------------------------------------- what comes back */
.vl-results-title { font-size: 17px; font-weight: 600; color: var(--vl-muted); margin: 22px 0 12px; }

.vl-result {
	background: #FFFFFF;
	border: 1px solid var(--vl-line);
	border-radius: 10px;
	padding: 18px 22px;
	margin-bottom: 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.vl-result-details { font-size: 13px; }
.vl-result-details p { margin: 0 0 4px; }
.vl-result-oem { margin-top: 6px; font-size: 12px; color: var(--vl-faint); }

.vl-result-btn {
	flex-shrink: 0;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vl-accent);
	background: #FFFFFF;
	border: 1px solid var(--vl-accent);
	border-radius: 7px;
	cursor: pointer;
}
.vl-result-btn:hover { color: #FFFFFF; background: var(--vl-accent); }

.vl-warning { font-size: 13px; font-weight: 700; color: #B32D2E; }

/* ------------------------------------------------------------ nothing on record */
.vl-empty {
	background: #FFFFFF;
	border: 1px solid var(--vl-line);
	border-radius: 10px;
	padding: 40px;
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.vl-empty-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--vl-ink); }
.vl-empty-body { margin: 0; max-width: 620px; font-size: 14px; line-height: 1.6; color: var(--vl-muted); }

.vl-next-title { font-size: 17px; font-weight: 600; color: var(--vl-muted); margin: 22px 0 12px; }

.vl-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.vl-option {
	background: #FFFFFF;
	border: 1px solid var(--vl-line);
	border-radius: 10px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.vl-option-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--vl-ink); }
.vl-option-body { margin: 0; flex-grow: 1; font-size: 13px; line-height: 1.55; color: var(--vl-muted); }

.vl-option-btn {
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--vl-accent);
	background: #FFFFFF;
	border: 1px solid var(--vl-accent);
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}
.vl-option-btn:hover { color: #FFFFFF; background: var(--vl-accent); }
.vl-option-btn--primary { color: #FFFFFF; background: var(--vl-accent); }
.vl-option-btn--primary:hover { background: var(--vl-accent-dark); border-color: var(--vl-accent-dark); }

/* ------------------------------------------------------------------------ narrow screens */
@media (max-width: 900px) {
	.vl-grid, .vl-options { grid-template-columns: 1fr; }
	.vl-card { padding: 22px 18px; }
	.vl-choice, .vl-choice--wide { width: calc(50% - 6px); }
	.vl-result { flex-direction: column; }
}

/* ---------------------------------------------------------------------------------------------- */
/* The VIN route                                                                                    */
/*                                                                                                  */
/* Built out of the same tokens as the rest of the panel, and reusing .vl-card, .vl-step, .vl-input, */
/* .vl-submit and .vl-choice unchanged - a VIN is another way into one lookup, not a second screen.  */
/* ---------------------------------------------------------------------------------------------- */

.vin-entry {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	gap: 14px 16px;
	align-items: end;
	margin-top: 16px;
}

/* A VIN is read off a door frame one character at a time, so it is worth spacing out. */
#vin_number { letter-spacing: .06em; text-transform: uppercase; }

.vin-optional { font-weight: 400; color: var(--vl-faint); }

/*
 * Room either side of the label. .vl-submit carries no horizontal padding because the vehicle form
 * gives it a full grid column to fill; this one sits in an auto column and would otherwise hug the
 * words.
 */
#vin_decode { padding-left: 26px; padding-right: 26px; }

.vin-note { margin: 12px 0 0; font-size: 13px; color: var(--vl-faint); max-width: 60ch; }

/* What is about to be filled into the search, as a plain read-back. */
.vin-readback { margin: 4px 0 0; }

.vin-readback-row {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	gap: 10px 18px;
	padding: 9px 0;
	border-bottom: 1px solid var(--vl-divider);
}

.vin-readback-row:last-child { border-bottom: none; }
.vin-readback dt { margin: 0; font-size: 13px; font-weight: 500; color: var(--vl-muted); }
.vin-readback dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--vl-ink); }
.vin-blank { font-weight: 400; color: var(--vl-locked); }

.vin-more { margin: 14px 0 0; font-size: 13px; }

#vin_view_details {
	color: var(--vl-accent-dark);
	text-decoration: underline;
	cursor: pointer;
}

#vin_view_details:hover { color: var(--vl-accent); }

/*
 * NHTSA's own warnings. Amber rather than red: a partial VIN or a corrected character still decoded
 * to a vehicle, and the decode is usable - it is the year in particular that wants a second look.
 */
.vin-warnings {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #6B4A0B;
	background: #FDF6E7;
	border-left: 3px solid #9A6B15;
	border-radius: 0 6px 6px 0;
}

.vin-warnings strong { display: block; margin-bottom: 4px; }
.vin-warnings ul { margin: 0; padding-left: 18px; }
.vin-warnings li { margin: 2px 0; }

.vin-choice-label {
	margin: 18px 0 10px;
	font-size: 13px;
	color: var(--vl-muted);
	max-width: 62ch;
}

.vin-actions { margin-top: 20px; }

.vin-loader { margin-top: 14px; }

/* The details popup. The frame is Bootstrap's; only the table inside it is ours. */
.vin-modal-vin {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--vl-faint);
}

.vin-details-table { width: 100%; border-collapse: collapse; }

.vin-details-table th,
.vin-details-table td {
	padding: 9px 12px;
	font-size: 13px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--vl-divider);
}

.vin-details-table th {
	width: 42%;
	font-weight: 500;
	color: var(--vl-muted);
	background: #FAFBFC;
}

.vin-details-table td { color: var(--vl-ink); word-break: break-word; }

@media ( max-width: 640px ) {
	.vin-entry { grid-template-columns: 1fr; }
	.vin-readback-row { grid-template-columns: 1fr; gap: 2px; }
	.vin-details-table th { width: 45%; }
}