/* Avon Windscreen Wizard
   Colours are taken from the site's Elementor kit but declared as custom properties,
   so dropping this on another site is a one-line change rather than a find-and-replace. */

.aww {
	--aww-navy:   #032C67;
	--aww-blue:   #1054BD;
	--aww-ink:    #032C67;
	--aww-muted:  #5b6b85;
	--aww-line:   #d7e0ee;
	--aww-panel:  #ffffff;
	--aww-bg:     #F1F4F9;
	--aww-inner:  #EAF1F7;
	--aww-plate:  #FFD130;
	--aww-band:   #003399;
	--aww-error:  #b3261e;
	--aww-radius: 14px;
	--aww-height: 480px;

	/* Buttons take their look from Elementor's Site Settings, via the same --e-global-*
	   variables the kit uses, so changing the button style there changes these too.
	   The fallbacks are the kit's current values, for if this is ever moved to a site
	   with no Elementor kit.
	   To keep the kit's LOOK at a smaller SIZE, override just the three size lines -
	   e.g. 12px / 22px / 15px gives a compact button in the same colours and shape. */
	--aww-btn-py: 20px;
	--aww-btn-px: 30px;
	--aww-btn-fs: var(--e-global-typography-accent-font-size, 18px);
	--aww-btn-fw: var(--e-global-typography-accent-font-weight, 600);
	--aww-btn-tt: var(--e-global-typography-accent-text-transform, uppercase);
	--aww-btn-radius: 20px;
	--aww-btn-bg: var(--e-global-color-secondary, #1054BD);
	--aww-btn-bg-hover: var(--e-global-color-primary, #032C67);
	--aww-btn-fg: var(--e-global-color-93c96eb, #F5F6F5);

	/* The wizard is sized against ITS OWN width, not the viewport, so it behaves the
	   same at 50% of a hero as it does full width. */
	container-type: inline-size;
	container-name: aww;

	max-width: 600px;
	margin-inline: auto;
	color: var(--aww-ink);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
	text-align: left;
}

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

/* An author `display` rule beats the UA stylesheet's [hidden] rule, so .aww-actions
   (display:flex) would stay on screen when the script hides it. Restore the intent. */
.aww [hidden] { display: none !important; }

/* ---------- steps ---------- */

.aww-form {
	display: flex;
	flex-direction: column;
	/* Every step is the same height, so dropping this into a hero banner never makes
	   the banner jump as the customer moves through it. */
	block-size: var(--aww-height);
	background: var(--aww-panel);
	border: 1px solid var(--aww-line);
	border-radius: var(--aww-radius);
	padding: 20px;
	box-shadow: 0 1px 2px rgba(3, 44, 103, .04), 0 8px 24px rgba(3, 44, 103, .06);
}

.aww-step { display: none; }

.aww-step.is-active {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-block-size: 0;
	animation: aww-in .28s ease both;
}

/* Only the content scrolls. The buttons stay where the customer left them. */
.aww-step-body {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	/* Deliberately NOT overscroll-behavior:contain. Containing the scroll stops it
	   chaining to the page, so a finger landing on the form gets stuck instead of
	   scrolling past it. Let it chain. */
	overscroll-behavior: auto;
	padding-inline-end: 6px;
	margin-inline-end: -6px;
}

/* The opening and closing steps hold little content; centring them stops the box
   looking half-empty at a fixed height. */
.aww-step[data-step="1"] .aww-step-body,
.aww-done .aww-step-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.aww-step-body::-webkit-scrollbar { width: 8px; }
.aww-step-body::-webkit-scrollbar-thumb {
	background: var(--aww-line);
	border-radius: 4px;
}

@keyframes aww-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.aww-step.is-active { animation: none; }
}

.aww-title {
	margin: 0 0 5px;
	font-size: clamp(19px, 5cqw, 24px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--aww-navy);
}

.aww-sub {
	margin: 0 0 18px;
	color: var(--aww-muted);
	font-size: 14.5px;
}

.aww-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--aww-muted);
}

/* ---------- the number plate ---------- */

.aww-plate {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 400px;
	height: clamp(66px, 21cqw, 86px);
	margin: 0 auto 10px;
	background: var(--aww-plate);
	border: 3px solid #111;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.aww-plate-band {
	flex: 0 0 clamp(34px, 10cqw, 46px);
	background: var(--aww-band);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(3px, 1.2cqw, 6px);
	padding: 6px 0;
}

/* Union Flag, as it sits on a real plate: above the country code, not beside it. */
.aww-plate-flag {
	display: block;
	width: clamp(19px, 6.2cqw, 27px);
	height: auto;
	border-radius: 1px;
}

.aww-plate-uk {
	color: #fff;
	font-size: clamp(11px, 3.2cqw, 15px);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
}

.aww-plate-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 10px;
	text-align: center;
	text-transform: uppercase;
	color: #111;
	font-family: "Charles Wright", "UKNumberPlate", "Montserrat", Arial, sans-serif;
	font-size: clamp(30px, 11cqw, 44px);
	font-weight: 700;
	letter-spacing: .06em;
}

.aww-plate-input::placeholder {
	color: rgba(0, 0, 0, .32);
	letter-spacing: .04em;
}

.aww-plate:focus-within {
	box-shadow: 0 0 0 4px rgba(16, 84, 189, .35);
}

/* Step one is the hero: the plate is the whole point, so it sits centred and large
   with everything else lined up under it. */
.aww-step[data-step="1"] .aww-step-body { text-align: center; }

/* Hello Elementor's reset.css styles every bare <button> pink:
     [type=button],[type=submit],button { border:1px solid #c36; padding:.5rem 1rem }
     button:focus, button:hover        { background-color:#c36; color:#fff }
   It loads AFTER this file, so on equal specificity it wins and a clicked button turns
   pink. Scoping under .aww lifts these to (0,2,0) and settles it regardless of order. */
.aww .aww-btn,
.aww .aww-btn:hover,
.aww .aww-btn:focus,
.aww .aww-btn:active {
	border: 0;
	outline: 0;
	border-radius: var(--aww-btn-radius);
	padding: var(--aww-btn-py) var(--aww-btn-px);
	font-size: var(--aww-btn-fs);
	font-weight: var(--aww-btn-fw);
	text-transform: var(--aww-btn-tt);
	line-height: 1.35;
}

.aww .aww-btn-primary,
.aww .aww-btn-primary:focus { background: var(--aww-btn-bg); color: var(--aww-btn-fg); }
.aww .aww-btn-primary:hover { background: var(--aww-btn-bg-hover); color: var(--aww-btn-fg); }

/* Secondary: solid, not hollow - same shape and typography as the kit button but in a
   pale fill, so Skip and Back are plainly buttons without competing with the primary. */
.aww .aww-btn-ghost,
.aww .aww-btn-ghost:focus {
	background: var(--e-global-color-d501ef4, #EAF1F7);
	color: var(--e-global-color-primary, #032C67);
}
.aww .aww-btn-ghost:hover {
	background: #d5e3f3;
	color: var(--e-global-color-primary, #032C67);
}

.aww .aww-link,
.aww .aww-link:hover,
.aww .aww-link:focus {
	border: 0;
	outline: 0;
	background: none;
	padding: 0;
	font-size: calc(var(--aww-btn-fs) - 0.5px);
}
.aww .aww-link:hover { color: var(--aww-navy); }

.aww .aww-btn:focus-visible,
.aww .aww-link:focus-visible { box-shadow: 0 0 0 3px rgba(16, 84, 189, .35); }

/* Quiet options on the left, the thing you actually want them to press on the right. */
/* The markup itself is ordered Back/Skip first, primary last, so tab order matches what
   is on screen. All that is needed here is to push the primary to the far end. */
.aww .aww-actions { justify-content: flex-start; }
.aww .aww-btn-primary { margin-inline-start: auto; }

/* Screen one holds only a heading, the plate and two buttons, so it uses a tighter
   rhythm than the longer steps - otherwise a fixed-height box looks half empty. */
/* Screen one's heading is the marketing moment, not a form label - set in caps and a
   size up, matching the kit's uppercase accent typography. The later step headings stay
   sentence case, because shouting "IS THIS YOUR VEHICLE?" at someone mid-form does not
   read well. */
.aww-step[data-step="1"] .aww-title {
	margin-bottom: 4px;
	text-transform: uppercase;
	font-size: clamp(23px, 6.4cqw, 31px);
	letter-spacing: .01em;
	line-height: 1.15;
}
.aww-step[data-step="1"] .aww-sub   { margin-bottom: 14px; }
.aww-step[data-step="1"] .aww-plate { margin-bottom: 6px; }
.aww-step[data-step="1"] .aww-actions { margin-top: 12px; }

/* "How it works" on screen one. Everything else on this step is centred, so a
   left-aligned list read as misaligned. This is a symmetrical four-across strip:
   marker above label, with the rule running between the markers. */
.aww-howto {
	flex: 0 0 auto;
	list-style: none;
	/* Space above the rule and below it, so the strip reads as its own band rather than
	   sitting on the line. The gap under the labels needs to be the larger of the two -
	   the labels are small text and crowd the rule otherwise. */
	margin: 4px 0 24px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--aww-line);
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	counter-reset: aww-step;
}

.aww-howto li {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 4px 2px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--e-global-color-primary, #032C67);
}

/* The rule sits behind the markers and stops at the first and last, so the strip
   reads as a journey rather than a row of loose dots. */
.aww-howto li::before {
	content: "";
	position: absolute;
	top: 13px;
	height: 2px;
	background: var(--e-global-color-d501ef4, #EAF1F7);
	left: -50%;
	right: 50%;
}

.aww-howto li:first-child::before { display: none; }

.aww-howto-n {
	position: relative;
	z-index: 1;
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 8px;
	border-radius: 50%;
	/* Not reached yet: quiet, so the eye goes to where the customer actually is. */
	background: var(--e-global-color-d501ef4, #EAF1F7);
	color: var(--aww-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
	box-shadow: 0 0 0 4px var(--aww-panel);
	transition: background .25s ease, color .25s ease, transform .25s ease;
}

/* Already been through it. */
.aww-howto li.is-done .aww-howto-n {
	background: var(--e-global-color-secondary, #1054BD);
	color: var(--e-global-color-93c96eb, #F5F6F5);
}

/* Where they are now - the darker brand navy, slightly larger. */
.aww-howto li.is-active .aww-howto-n {
	background: var(--e-global-color-primary, #032C67);
	color: var(--e-global-color-93c96eb, #F5F6F5);
	transform: scale(1.14);
}

.aww-howto li .aww-howto-label { color: var(--aww-muted); transition: color .25s ease; }

.aww-howto li.is-done .aww-howto-label,
.aww-howto li.is-active .aww-howto-label {
	color: var(--e-global-color-primary, #032C67);
}

.aww-howto li.is-active .aww-howto-label { font-weight: 700; }

/* The rule fills in behind as they progress. */
.aww-howto li.is-done::before,
.aww-howto li.is-active::before {
	background: var(--e-global-color-secondary, #1054BD);
}

@media (prefers-reduced-motion: reduce) {
	.aww-howto-n, .aww-howto li .aww-howto-label { transition: none; }
	.aww-howto li.is-active .aww-howto-n { transform: none; }
}

/* ---------- buttons ---------- */

.aww-btn {
	appearance: none;
	border: 0;
	border-radius: 8px;
	padding: var(--aww-btn-py) var(--aww-btn-px);
	font: inherit;
	font-weight: 700;
	font-size: var(--aww-btn-fs);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease;
}

.aww-btn:active { transform: translateY(1px); }

.aww-btn-primary {
	background: var(--aww-blue);
	color: #fff;
}

.aww-btn-primary:hover { background: var(--aww-navy); }

.aww-btn-ghost {
	background: var(--aww-inner);
	color: var(--aww-navy);
}

.aww-btn-ghost:hover { background: #dde8f5; color: var(--aww-blue); }

.aww-btn[disabled] { opacity: .6; cursor: default; }

.aww-actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
}

.aww-alt { margin: 14px 0 0; }

.aww-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--aww-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.aww-link:hover { color: var(--aww-navy); }

.aww-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: aww-spin .7s linear infinite;
}

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

/* ---------- fields ---------- */

.aww-field { margin: 0 0 13px; }

.aww-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aww-navy);
}

.aww-input {
	width: 100%;
	padding: 13px 14px;
	border: 2px solid var(--aww-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 16px;           /* 16px stops iOS zooming the page on focus */
	color: var(--aww-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aww-input:focus {
	outline: 0;
	border-color: var(--aww-blue);
	box-shadow: 0 0 0 4px rgba(16, 84, 189, .14);
}

.aww-textarea { resize: vertical; min-height: 92px; }

.aww-input.has-error { border-color: var(--aww-error); }

.aww-error {
	display: none;
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--aww-error);
}

.aww-error.is-shown { display: block; }
.aww-error-block { margin-bottom: 12px; }

/* Honeypot */
.aww-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- choice cards ---------- */

.aww-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
}

.aww-legend {
	padding: 0;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aww-navy);
}

.aww-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.aww-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.aww-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.aww-choice-body {
	display: block;
	height: 100%;
	padding: 14px 16px;
	border: 2px solid var(--aww-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.aww-choice:hover .aww-choice-body { border-color: #b9c9e2; }

.aww-choice input:focus-visible + .aww-choice-body {
	box-shadow: 0 0 0 4px rgba(16, 84, 189, .2);
}

.aww-choice input:checked + .aww-choice-body {
	border-color: var(--aww-blue);
	background: var(--aww-inner);
	box-shadow: inset 0 0 0 1px var(--aww-blue);
}

.aww-choice-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--aww-navy);
}

.aww-choice-desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--aww-muted);
}

/* ---------- the vehicle card ---------- */

.aww-vehicle {
	border: 2px solid var(--aww-line);
	border-radius: 12px;
	background: var(--aww-inner);
	padding: 18px;
	text-align: center;
}

.aww-vehicle-plate {
	display: inline-block;
	background: var(--aww-plate);
	border: 2px solid #111;
	border-radius: 6px;
	padding: 5px 14px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #111;
}

.aww-vehicle-name {
	margin-top: 12px;
	font-size: clamp(19px, 5.5cqw, 24px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--aww-navy);
}

.aww-vehicle-specs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
}

.aww-vehicle-specs div {
	background: #fff;
	border: 1px solid var(--aww-line);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aww-muted);
}

.aww-vehicle-specs dt { display: none; }
.aww-vehicle-specs dd { margin: 0; }

.aww-source {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--aww-muted);
}

.aww-manual { margin-top: 18px; }

/* ---------- summary ---------- */

.aww-summary {
	margin: 0;
	border: 1px solid var(--aww-line);
	border-radius: 12px;
	overflow: hidden;
}

.aww-summary-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 11px 16px;
	border-top: 1px solid var(--aww-line);
	font-size: 14px;
}

.aww-summary-row:first-child { border-top: 0; }
.aww-summary-row:nth-child(odd) { background: #fafcff; }

.aww-summary-row dt {
	flex: 0 0 40%;
	min-width: 130px;
	font-weight: 600;
	color: var(--aww-muted);
}

.aww-summary-row dd {
	flex: 1 1 auto;
	margin: 0;
	font-weight: 600;
	color: var(--aww-navy);
	overflow-wrap: anywhere;
}

/* ---------- done ---------- */

.aww-done { text-align: center; }
.aww-tick { color: #1a8f4c; margin-bottom: 10px; }
.aww-phone { color: var(--aww-blue); font-weight: 700; white-space: nowrap; }

/* ---------- narrow containers (a hero column, a sidebar, a phone) ---------- */

@container aww (max-width: 480px) {
	/* Let it size to its content on a phone. A scrolling box inside a scrolling page is
	   miserable on touch, and the layout shift the fixed height was avoiding only
	   matters in the desktop hero. */
	.aww-form { block-size: auto; }
	.aww-step.is-active { flex: 0 0 auto; }
	.aww-step-body { overflow-y: visible; min-block-size: 0; }

	.aww-form { padding: 18px 16px; }
	.aww-choices { grid-template-columns: 1fr 1fr; }

}

@container aww (max-width: 340px) {
	/* "Enter Reg" and friends fit four across almost everywhere; only pair them up on
	   the very narrowest screens. */
	.aww-howto { flex-wrap: wrap; row-gap: 14px; }
	.aww-howto li { flex: 0 0 50%; }
	.aww-howto li::before { display: none; }

	.aww-choices { grid-template-columns: 1fr; }
	.aww-actions { flex-direction: column; align-items: stretch; }
	.aww-actions .aww-btn { width: 100%; }
	.aww-link { text-align: center; }
}

/* Phones: never a scrolling box inside a scrolling page, whatever the container
   query resolves to. Keyed on the viewport so it cannot be missed. */
@media (max-width: 780px) {
	.aww .aww-form { block-size: auto; }
	.aww .aww-step.is-active { flex: 0 0 auto; }
	.aww .aww-step-body { overflow-y: visible; min-block-size: 0; }

	/* The four-stage strip costs ~115px, which is the difference between the plate
	   sitting above the fold on a phone and below it. The heading and the plate are
	   what earn the tap; the stage list is reassurance and can go. */
	.aww .aww-howto { display: none; }

	/* The kit's own button is 20px/30px at 18px - fine on a desktop hero, chunky on a
	   phone. Trim it, staying well above the 44px tap-target floor (~48px here). */
	.aww { --aww-btn-py: 12px; --aww-btn-px: 20px; }

	.aww .aww-form { padding: 16px 14px; }
	.aww .aww-sub { margin-bottom: 12px; }
}

/* Container queries need a container; if one is somehow missing, fall back to the
   viewport so the wizard is never left in its widest layout on a phone. */
@supports not (container-type: inline-size) {
	@media (max-width: 560px) {
		.aww-form { padding: 18px 16px; }
		.aww-choices { grid-template-columns: 1fr 1fr; }
	}
}