/**
 * Oyolloo Elements — form fields.
 *
 * The headline element here is the GB plate search, reproduced from Figma node
 * 471:1068:
 *   shell  #ffc700 · border 2px rgba(0,0,0,.1) · radius 12px · padding 8px · gap 8px
 *   well   #fff · radius 8px · padding 16px · inset shadow 0 2px 4px rgba(0,0,0,.05)
 *   GB tab #90a6e2 · Roboto Condensed SemiBold 24 · bar 27x12 radius 2
 *   input  #f5f5f5 · border 1px #d3d3d3 · radius 6px · padding 10px 13px
 *          Roboto Condensed SemiBold 32 · placeholder rgba(26,26,26,.2)
 *   submit #1a1a1a · radius 8px · padding 30px 34px
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

/* -- Plate search -------------------------------------------------------- */

.oe-plate {
	/* Figma: a 2px ring, 6px of yellow, then an 88px inner row = 104 tall. */
	--oe-plate-inner: 88px;

	display: flex;
	align-items: stretch;
	gap: var(--oe-space-2xs);
	width: 100%;
	padding: 6px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--oe-radius-lg);
	background-color: var(--oe-color-brand);
}

.oe-plate__well {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 0 0;
	min-width: 0;
	min-height: var(--oe-plate-inner);
	padding: var(--oe-space-sm);
	border-radius: var(--oe-radius-md);
	background-color: var(--oe-color-white);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* The blue GB tab: country code stacked over the euro-band bar. */
.oe-plate__gb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 45px;
	padding-inline-end: var(--oe-space-sm);
	color: var(--oe-color-plate-blue);
}

.oe-plate__gb-code {
	padding-block-end: 2px;
	font-family: var(--oe-font-title);
	font-size: var(--oe-h5-size);
	font-weight: var(--oe-h5-weight);
	line-height: 1.1;
}

.oe-plate__gb-bar {
	width: 27px;
	height: 12px;
	border-radius: 2px;
	background-color: currentColor;
}

.oe-plate__input {
	flex: 1 0 0;
	min-width: 0;
	width: 100%;
	padding: 10px 13px;
	/* The theme's reset styles `input[type="text"]` — one class' worth of
	   specificity plus a type, which outranks this single class — so the border
	   has to be forced. Every rule below that recolours it has to carry the same
	   `!important` to get past this one; without it they lose to a declaration
	   they are more specific than, which is the trap this comment exists to
	   stop. */
	border: 1px solid var(--oe-color-neutral-300) !important;
	border-radius: var(--oe-radius-sm);
	background-color: var(--oe-color-neutral-100);
	color: var(--oe-color-ink-strong);
	font-family: var(--oe-font-title);
	font-size: var(--oe-h4-size);
	font-weight: var(--oe-h4-weight);
	line-height: 1.1;
	text-transform: uppercase;
	transition: border-color 200ms var(--oe-ease, ease);
}

.oe-plate__input::placeholder {
	color: rgba(26, 26, 26, 0.2);
}

.oe-plate__input:focus {
	border-color: var(--oe-color-ink-strong) !important;
	outline: none;
}

.oe-plate__submit {
	min-height: var(--oe-plate-inner);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--oe-space-2xs);
	flex-shrink: 0;
	padding: 30px 34px;
	border: 0;
	border-radius: var(--oe-radius-md);
	background-color: var(--oe-color-ink-strong);
	--oe-btn-surface: var(--oe-color-ink-strong);
	color: var(--oe-color-white);
	font-family: var(--oe-font-body);
	font-size: var(--oe-button-size);
	font-weight: var(--oe-button-weight);
	line-height: 24px;
	letter-spacing: -0.16px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms var(--oe-ease, ease);
}

.oe-plate__submit:hover {
	background-color: var(--oe-color-black);
}

.oe-plate__submit .oe-icon,
.oe-plate__submit svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* The red field is the toast's other half: the toast says what is wrong, this
   says where. `!important` for the reason given on `.oe-plate__input` above —
   being the more specific rule is not enough to beat that one. */
.oe-plate.is-invalid .oe-plate__input {
	border-color: #d63638 !important;
}

/* ---------------------------------------------------------------------------
   Empty-submit toast.

   Replaces the line of copy that used to sit under the field. In the hero that
   put the message on the yellow band, where it read as another line of the
   design rather than as something gone wrong, and wherever it appeared it
   pushed the row taller the moment it did. A toast says the same thing away
   from the layout and takes itself away again.

   Built on <body> by js/widgets/plate-search.js, so it is a block of its own
   rather than a `.oe-plate` child: the sections the form sits in animate on
   scroll, and a transformed ancestor makes `position: fixed` resolve against
   that ancestor instead of the viewport.
   --------------------------------------------------------------------------- */

.oe-plate-toast {
	position: fixed;
	/* Above the sticky header, which is the tallest thing on the page at 1000. */
	z-index: 1100;
	/* Bottom centre. The form is at the top of the page in the hero and at the
	   bottom of it in the footer; anchored to the viewport the message lands in
	   the same place either way, and never over the field the visitor is being
	   sent back to. */
	inset-block-end: max(24px, env(safe-area-inset-bottom, 0px));
	inset-inline: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	max-width: 360px;
	margin-inline: auto;
	padding: 14px 18px;
	border-radius: 10px;
	background-color: var(--oe-color-ink-strong, #1a1a1a);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	color: var(--oe-color-white, #fff);
	font-family: var(--oe-font-body, inherit);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	/* Dismissable early, since it is worth being able to send off even though
	   it is in the way of nothing. It leaves on its own regardless, so nothing
	   is lost to a visitor who never clicks it. */
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	/* 220ms, matched by TOAST_EXIT_MS in plate-search.js — the script waits that
	   long before removing the node. */
	transition:
		opacity 220ms var(--oe-ease, ease),
		transform 220ms var(--oe-ease, ease);
}

.oe-plate-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* The brand's gold against the dark card, so the toast reads as this site's
   rather than as a browser default. Drawn in CSS because the toast is built by
   script, and a glyph is not worth an inline SVG in a string. */
.oe-plate-toast::before {
	content: "!";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--oe-color-brand, #ffc700);
	color: var(--oe-color-ink-strong, #1a1a1a);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

/* The travel is what carries the toast in, so without it the fade does the
   work alone — and quicker, since there is nothing to watch arrive. */
@media (prefers-reduced-motion: reduce) {
	.oe-plate-toast,
	.oe-plate-toast.is-visible {
		transform: none;
	}

	.oe-plate-toast {
		transition: opacity 120ms linear;
	}
}

/* -- Generic text input -------------------------------------------------- */

.oe-input {
	width: 100%;
	padding: var(--oe-space-xs) var(--oe-space-sm);
	border: 1px solid var(--oe-color-neutral-300);
	border-radius: var(--oe-radius-md);
	background-color: var(--oe-color-white);
	color: var(--oe-color-ink);
	font-family: var(--oe-font-body);
	font-size: var(--oe-body-size);
	line-height: var(--oe-body-leading);
}

.oe-input::placeholder {
	color: var(--oe-color-neutral-500);
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.oe-plate__submit {
		padding: var(--oe-space-md) var(--oe-space-md);
	}

	.oe-plate__input {
		font-size: var(--oe-h5-size);
	}
}

/* Mobile (Figma 472:13947): the field sits over the button, 64px each, inside
   a 2px yellow frame. */
@media (max-width: 767px) {
	.oe-plate {
		--oe-plate-inner: 64px;

		flex-direction: column;
		gap: 4px;
		padding: 2px;
	}

	.oe-plate__well {
		padding: 6px 6px 6px 12px;
	}

	.oe-plate__submit {
		padding: 20px 13px;
	}

	.oe-plate__input {
		font-size: var(--oe-h6-size);
	}
}