/**
 * Windmill Notify Me — standalone front-end styles.
 *
 * Self-contained: own `:root` tokens and a `wtcnm-` class prefix so nothing here depends on,
 * or collides with, the existing Windmill plugin's frontend.css. Token VALUES are copied from
 * that file (the brand "bible") so the two render identically.
 */

.wtcnm-embed,
.wtcnm-modal {
	/* ---- copied from frontend.css :root ---- */
	--wtcnm-primary: #b91c1c;
	--wtcnm-primary-hover: #991b1b;
	--wtcnm-text: #1f2937;
	--wtcnm-text-light: #6b7280;
	--wtcnm-bg: #ffffff;
	--wtcnm-bg-light: #f3f4f6;
	--wtcnm-border: #d1d5db;
	--wtcnm-radius: 4px;

	/* ---- our own additions (per Design handoff spec) ---- */
	--wtcnm-muted: #9ca3af;
	--wtcnm-hairline: #eceef1;
	--wtcnm-faint: #f9fafb;
	--wtcnm-blush: rgba(185, 28, 28, 0.10);
	--wtcnm-tint-06: rgba(185, 28, 28, 0.06);
	--wtcnm-tint-08: rgba(185, 28, 28, 0.08);
	--wtcnm-radius-tile: 8px;
	--wtcnm-radius-card: 12px;
	--wtcnm-font-display: 'Oswald', sans-serif;
	--wtcnm-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	font-family: var(--wtcnm-font-body);
	color: var(--wtcnm-text);
	box-sizing: border-box;
}

.wtcnm-embed *,
.wtcnm-modal * {
	box-sizing: border-box;
}

/* The [hidden] attribute must always win over component display rules below,
 * otherwise JS-toggled errors / vehicle bar / success panel render on load. */
.wtcnm-embed [hidden],
.wtcnm-modal [hidden],
.wtcnm-manage [hidden] {
	display: none !important;
}

/* ===================== Embed wrapper ===================== */
.wtcnm-embed {
	max-width: 830px;
	margin: 0 auto;
	background: var(--wtcnm-bg);
	border: none;
	padding: 30px 0 0;
}

/* On the wider embed, Year/Make/Model sit on one line; stack on mobile. */
.wtcnm-embed .wtcnm-vehicle-fresh {
	display: flex;
	gap: 14px;
}
.wtcnm-embed .wtcnm-vehicle-fresh .wtcnm-field {
	flex: 1;
	min-width: 0;
}
@media ( max-width: 620px ) {
	.wtcnm-embed .wtcnm-vehicle-fresh {
		flex-direction: column;
		gap: 14px;
	}
}

/* ===================== Header ===================== */
.wtcnm-header {
	text-align: center;
	margin-bottom: 6px;
}

.wtcnm-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--wtcnm-blush);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wtcnm-primary);
}

.wtcnm-icon svg {
	width: 28px;
	height: 28px;
}

.wtcnm-title {
	font-family: var(--wtcnm-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 32px;
	line-height: 1.1;
	color: var(--wtcnm-text);
	margin: 0 0 10px;
}

.wtcnm-intro {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wtcnm-text-light);
	margin: 0;
}

.wtcnm-intro strong {
	color: var(--wtcnm-text);
	font-weight: 700;
}

/* ===================== Section rhythm ===================== */
.wtcnm-section {
	border-top: 1px solid var(--wtcnm-border);
	padding-top: 20px;
	margin-top: 22px;
}

.wtcnm-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.wtcnm-section-title {
	font-family: var(--wtcnm-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	color: var(--wtcnm-text);
	margin: 0;
}

.wtcnm-req {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wtcnm-primary);
}

.wtcnm-count {
	font-size: 12.5px;
	color: var(--wtcnm-text-light);
}

.wtcnm-subline {
	font-size: 13px;
	color: var(--wtcnm-text-light);
	margin: -4px 0 12px;
}

/* ===================== Fields ===================== */
.wtcnm-field {
	margin-bottom: 14px;
}

.wtcnm-field:last-child {
	margin-bottom: 0;
}

.wtcnm-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wtcnm-text);
	margin-bottom: 6px;
}

.wtcnm-optional,
.wtcnm-asterisk {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.wtcnm-optional {
	color: var(--wtcnm-muted);
	font-size: 12px;
}

.wtcnm-asterisk {
	color: var(--wtcnm-primary);
}

.wtcnm-select,
.wtcnm-input {
	width: 100%;
	height: 50px;
	padding: 0 15px;
	font-size: 16px; /* 16px prevents iOS zoom on focus */
	font-family: var(--wtcnm-font-body);
	color: var(--wtcnm-text);
	background: var(--wtcnm-bg);
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wtcnm-select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.wtcnm-select:focus,
.wtcnm-input:focus {
	outline: none;
	border-color: var(--wtcnm-text);
	box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1);
}

.wtcnm-select:disabled {
	background-color: var(--wtcnm-bg-light);
	color: var(--wtcnm-muted);
	cursor: not-allowed;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.wtcnm-field.wtcnm-disabled .wtcnm-label {
	color: var(--wtcnm-muted);
}

.wtcnm-select.wtcnm-field-error,
.wtcnm-input.wtcnm-field-error {
	border-color: var(--wtcnm-primary) !important;
	box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.2);
}

.wtcnm-name-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wtcnm-name-row .wtcnm-field {
	flex: 1;
	min-width: 150px;
}

/* ===================== Returning-vehicle bar ===================== */
.wtcnm-vehicle-return {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--wtcnm-bg-light);
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius);
	padding: 12px 14px;
}

.wtcnm-vehicle-return-info {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--wtcnm-text);
}

.wtcnm-vehicle-return-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.wtcnm-vehicle-return-label {
	font-size: 12px;
	color: var(--wtcnm-text-light);
}

.wtcnm-vehicle-return-text strong {
	font-weight: 700;
	font-size: 15px;
}

.wtcnm-truck-tile {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wtcnm-blush);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wtcnm-primary);
}

.wtcnm-truck-tile img {
	width: 19px;
	height: auto;
}

.wtcnm-link {
	background: none;
	border: none;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--wtcnm-primary);
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

/* ===================== Accordion ===================== */
.wtcnm-accordion {
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius-tile);
	overflow: hidden;
}

.wtcnm-acc-item + .wtcnm-acc-item {
	border-top: 1px solid var(--wtcnm-border);
}

.wtcnm-acc-head,
.wtcnm-acc-standalone {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 15px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.15s ease;
}

.wtcnm-acc-label {
	font-family: var(--wtcnm-font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--wtcnm-text);
}

/* Selection cue: tint the whole parent row when it holds any selection */
.wtcnm-acc-item.wtcnm-has-selection {
	background: var(--wtcnm-tint-06);
}

.wtcnm-acc-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius);
}

.wtcnm-acc-toggle::before,
.wtcnm-acc-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 2px;
	background: var(--wtcnm-text-light);
	transform: translate(-50%, -50%);
}

.wtcnm-acc-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: opacity 0.15s ease;
}

.wtcnm-acc-head[aria-expanded="true"] .wtcnm-acc-toggle::after {
	opacity: 0; /* minus sign when expanded */
}

.wtcnm-acc-body {
	padding: 2px 15px 14px;
}

.wtcnm-acc-divider {
	height: 1px;
	background: var(--wtcnm-hairline);
	margin: 8px 0;
}

.wtcnm-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	cursor: pointer;
	font-size: 14.5px;
}

.wtcnm-check input,
.wtcnm-chip input,
.wtcnm-acc-standalone input {
	width: 18px;
	height: 18px;
	accent-color: var(--wtcnm-primary);
	cursor: pointer;
	flex: 0 0 auto;
}

.wtcnm-check-all {
	font-weight: 600;
	color: var(--wtcnm-text);
}

/* Was --wtcnm-text-light: too low-contrast against white, and it made the children read as
   disabled next to their parent. Same colour as the parent now. */
.wtcnm-check-child {
	color: var(--wtcnm-text);
	padding-left: 14px;
}

/* ===================== Location chips ===================== */
.wtcnm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wtcnm-chip {
	flex: 1;
	min-width: 130px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius);
	cursor: pointer;
	font-size: 15px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wtcnm-chip.wtcnm-chip-checked {
	border-color: var(--wtcnm-primary);
	background: var(--wtcnm-tint-08);
}

/* ===================== Spam slot ===================== */
/*
 * 1.6.4 — no fixed height, no dashed placeholder chrome. The widget runs in INVISIBLE mode
 * (set in the Cloudflare dashboard), so the old 65px dashed box would render as a stupid
 * empty rectangle. Sized-by-content also stays correct if the mode is ever flipped back to
 * managed: the iframe brings its own chrome and simply occupies the slot.
 */
.wtcnm-spam-slot {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Required by Cloudflare's terms when the widget is hidden: visitors must be told the form
   is protected by Turnstile. Muted, one line, below the submit button.
   Colours are explicit + !important (1.6.6): `color: inherit` lost to the theme's own link
   rules — the anchors rendered white-on-white. Plugin fine print inside a page builder is
   the one place !important earns its keep. */
.wtcnm-turnstile-note {
	font-size: 12px;
	line-height: 1.5;
	color: #6b7280 !important;
	text-align: center;
	margin: 14px 0 0;
}
.wtcnm-turnstile-note a {
	color: #6b7280 !important;
	text-decoration: underline !important;
}
.wtcnm-turnstile-note a:hover {
	color: #4b5563 !important;
}

.wtcnm-spam-placeholder {
	font-family: monospace;
	font-size: 13px;
	color: var(--wtcnm-muted);
}

/* ===================== Buttons ===================== */
.wtcnm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	margin-top: 24px;
	padding: 0 30px;
	font-family: var(--wtcnm-font-display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 16px;
	color: #ffffff;
	background: var(--wtcnm-primary);
	border: none;
	border-radius: var(--wtcnm-radius);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wtcnm-btn:hover:not(:disabled) {
	background: var(--wtcnm-primary-hover);
}

.wtcnm-btn:disabled {
	background: var(--wtcnm-border);
	cursor: not-allowed;
}

.wtcnm-btn-arrow {
	font-family: var(--wtcnm-font-display);
	font-size: 18px;
	line-height: 1;
	display: inline-flex;
	margin-top: -3px;
}

/* Modal trigger: matches the site header's "SELECT YOUR VEHICLE" — no button chrome. */
.wtcnm-btn.wtcnm-modal-trigger {
	width: auto;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	box-shadow: none;
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.wtcnm-btn.wtcnm-modal-trigger:hover,
.wtcnm-btn.wtcnm-modal-trigger:focus {
	background: transparent;
	color: #ffffff;
}
/* Hover affordance lives on the TEXT only (icon stays put) — mirrors the adjacent
   "SELECT YOUR VEHICLE" header button. Deliberately no transition, same as that button. */
.wtcnm-trigger-text {
	opacity: 0.9;
}
.wtcnm-btn.wtcnm-modal-trigger:hover .wtcnm-trigger-text,
.wtcnm-btn.wtcnm-modal-trigger:focus .wtcnm-trigger-text {
	opacity: 1;
	text-decoration: underline;
}
.wtcnm-trigger-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	margin-top: 2px; /* optical alignment with the label */
	/* Solid amber bell — matches the other solid icons in the header bar. Trigger only:
	   the modal's own header bell stays outlined. This element lives outside
	   .wtcnm-embed/.wtcnm-modal, so the scoped tokens above can't reach it. */
	color: #ffc168;
}
.wtcnm-trigger-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.wtcnm-btn.wtcnm-modal-trigger:hover .wtcnm-trigger-icon,
.wtcnm-btn.wtcnm-modal-trigger:focus .wtcnm-trigger-icon {
	color: #ffc168;
}

.wtcnm-btn.wtcnm-loading {
	position: relative;
	color: transparent;
}

.wtcnm-btn.wtcnm-loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wtcnm-spin 0.7s linear infinite;
}

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

/* ===================== Errors ===================== */
/* Solid red badge — the old quiet red-on-white text read as decoration and people assumed
   the form was broken rather than incomplete. */
.wtcnm-error,
.wtcnm-form-error {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	color: #fff;
	background: #b91c1c;
	padding: 4px 8px;
	border-radius: 3px;
	margin: 8px 0 0;
}

/* The dot was a red pip on white; on a red badge it needs to be white or it vanishes. */
.wtcnm-error .wtcnm-error-dot,
.wtcnm-form-error .wtcnm-error-dot {
	background: #fff;
}

.wtcnm-error-dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: 0;
	border-radius: 50%;
	background: var(--wtcnm-primary);
}

/* ===================== Success panel ===================== */
.wtcnm-success {
	text-align: center;
	padding: 18px 0 6px;
}

.wtcnm-success-check {
	width: 62px;
	height: 62px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--wtcnm-text);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wtcnm-success-check svg {
	width: 30px;
	height: 30px;
}

.wtcnm-success-title {
	font-family: var(--wtcnm-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 27px;
	color: var(--wtcnm-text);
	margin: 0 0 8px;
}

.wtcnm-success-text {
	font-size: 15px;
	color: var(--wtcnm-text-light);
	margin: 0;
}

/* ===================== Modal shell ===================== */
.wtcnm-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* Fade in/out — same pattern/timing as the persistent vehicle modal. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wtcnm-modal.wtcnm-modal-visible {
	opacity: 1;
	visibility: visible;
}

.wtcnm-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.wtcnm-modal-container {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow: hidden; /* clip the scroll area to the rounded corners (#4) */
	background: var(--wtcnm-bg);
	border-radius: var(--wtcnm-radius-card);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Inner scroller so the scrollbar never squares off the container's right corners. */
.wtcnm-modal-scroll {
	max-height: 90vh;
	overflow-y: auto;
}

.wtcnm-modal-body {
	padding: 38px 26px 28px;
}

.wtcnm-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: #f3f4f6;
	color: var(--wtcnm-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	z-index: 2;
}

.wtcnm-modal-close:hover {
	background: #fde8e8;
}

.wtcnm-modal-close svg {
	width: 20px;
	height: 20px;
}

body.wtcnm-modal-open {
	overflow: hidden;
}

/* ===================== Responsive ===================== */
@media (max-width: 768px) {
	.wtcnm-embed {
		padding: 30px 20px;
	}

	.wtcnm-modal {
		padding: 10px;
	}

	.wtcnm-modal-container {
		max-height: 95vh;
	}

	.wtcnm-modal-body {
		padding: 30px 20px;
	}

	.wtcnm-title {
		font-size: 26px;
	}

	.wtcnm-select,
	.wtcnm-input {
		height: 45px;
	}
}

/* ===================== A11y niceties ===================== */
@media (prefers-reduced-motion: reduce) {
	.wtcnm-btn,
	.wtcnm-select,
	.wtcnm-input,
	.wtcnm-chip,
	.wtcnm-acc-head,
	.wtcnm-acc-standalone,
	.wtcnm-acc-toggle::after,
	.wtcnm-modal-close {
		transition: none;
	}
	.wtcnm-btn.wtcnm-loading::after {
		animation: none;
	}
}

/* ===================== Manage Alerts page ===================== */
.wtcnm-manage {
	/* inherit the same token set as the embed/modal */
	--wtcnm-primary: #b91c1c;
	--wtcnm-primary-hover: #991b1b;
	--wtcnm-text: #1f2937;
	--wtcnm-text-light: #6b7280;
	--wtcnm-bg: #ffffff;
	--wtcnm-bg-light: #f3f4f6;
	--wtcnm-border: #d1d5db;
	--wtcnm-muted: #9ca3af;
	--wtcnm-blush: rgba(185, 28, 28, 0.10);
	--wtcnm-tint-08: rgba(185, 28, 28, 0.08);
	--wtcnm-radius: 4px;
	--wtcnm-radius-tile: 8px;
	--wtcnm-radius-card: 12px;
	--wtcnm-font-display: 'Oswald', sans-serif;
	--wtcnm-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	background: var(--wtcnm-bg);
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius-card);
	box-shadow: 0 3px 12px -3px rgba(0, 0, 0, 0.2);
	padding: 30px 24px;
	font-family: var(--wtcnm-font-body);
	color: var(--wtcnm-text);
}

.wtcnm-manage * { box-sizing: border-box; }

.wtcnm-manage-header {
	text-align: center;
	margin-bottom: 22px;
}

.wtcnm-manage .wtcnm-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--wtcnm-blush);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wtcnm-primary);
}

.wtcnm-manage .wtcnm-icon svg { width: 26px; height: 26px; }

.wtcnm-manage-title {
	font-family: var(--wtcnm-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 30px;
	color: var(--wtcnm-text);
	margin: 0 0 8px;
}

.wtcnm-manage-subtitle {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wtcnm-text-light);
	margin: 0;
}

/* ---- Alert rows ---- */
.wtcnm-alert-list { display: flex; flex-direction: column; gap: 12px; }

.wtcnm-alert-row {
	border: 1px solid var(--wtcnm-border);
	border-radius: 10px;
	padding: 16px;
	transition: border-color 0.15s ease;
}

.wtcnm-alert-row:hover { border-color: var(--wtcnm-muted); }

.wtcnm-alert-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.wtcnm-alert-vehicle {
	flex: 1;
	font-family: var(--wtcnm-font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--wtcnm-text);
}

.wtcnm-alert-remove {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: none;
	background: none;
	color: var(--wtcnm-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wtcnm-alert-remove:hover { color: var(--wtcnm-primary); background: var(--wtcnm-blush); }
.wtcnm-alert-remove svg { width: 18px; height: 18px; }

.wtcnm-alert-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 10px;
}

.wtcnm-cat-chip {
	background: var(--wtcnm-bg-light);
	border: 1px solid var(--wtcnm-border);
	border-radius: var(--wtcnm-radius);
	padding: 4px 11px;
	font-size: 12.5px;
	color: var(--wtcnm-text);
	white-space: nowrap;
}

.wtcnm-alert-loc {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--wtcnm-text-light);
}

.wtcnm-alert-loc svg { width: 14px; height: 14px; }

.wtcnm-alert-empty {
	text-align: center;
	color: var(--wtcnm-text-light);
	font-size: 14px;
	padding: 24px 0;
	margin: 0;
}

/* ---- Add / unsubscribe ---- */
.wtcnm-btn-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	margin-top: 16px;
	font-family: var(--wtcnm-font-display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 15px;
	color: var(--wtcnm-primary);
	background: var(--wtcnm-tint-08);
	border: 1px solid var(--wtcnm-primary);
	border-radius: var(--wtcnm-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wtcnm-btn-secondary:hover { background: var(--wtcnm-primary); color: #fff; }

.wtcnm-manage-unsub {
	border-top: 1px solid var(--wtcnm-border);
	margin-top: 22px;
	padding-top: 22px;
}

.wtcnm-manage-unsub .wtcnm-btn { margin-top: 0; }

/* ---- Recovery panel ---- */
.wtcnm-recover-form .wtcnm-btn { margin-top: 16px; }

.wtcnm-recover-note {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--wtcnm-bg-light);
	border-radius: var(--wtcnm-radius);
	font-size: 13.5px;
	color: var(--wtcnm-text);
}

.wtcnm-manage-contact {
	text-align: center;
	font-size: 13.5px;
	color: var(--wtcnm-text-light);
	margin: 20px 0 0;
}

.wtcnm-manage-contact a { color: var(--wtcnm-primary); }

@media (max-width: 768px) {
	.wtcnm-manage { padding: 24px 18px; }
	.wtcnm-manage-title { font-size: 25px; }
}

/* ------------------------------------------------------------------ *
 * Honeypot (visually removed, still focusable-off for bots)
 * ------------------------------------------------------------------ */
.wtcnm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Live Turnstile slot — 1.6.7: zero footprint. The widget runs in invisible mode, so the
   slot must occupy no space at all (the old 65px min-height + margins survived the 1.6.4
   collapse in this second rule and left a blank band above the submit button). Deliberately
   NOT display:none — a hidden-but-present container keeps working if the widget mode is
   ever flipped back to managed, whereas display:none would silently break the challenge. */
.wtcnm-spam-live {
	margin: 0;
	min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Manage page: expired state, actions, inline editor
 * ------------------------------------------------------------------ */
.wtcnm-alert-expired {
	border-style: dashed;
	background: var(--wtcnm-bg-light);
}
.wtcnm-alert-expired .wtcnm-alert-vehicle { color: var(--wtcnm-text-light); }

.wtcnm-badge-expired {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	background: var(--wtcnm-text-light);
	border-radius: 999px;
	vertical-align: middle;
}

.wtcnm-alert-actions {
	display: flex;
	gap: 16px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--wtcnm-border);
}

.wtcnm-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--wtcnm-primary);
	cursor: pointer;
	text-decoration: none;
}
.wtcnm-link:hover { color: var(--wtcnm-primary-hover); text-decoration: underline; }

.wtcnm-alert-editor {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wtcnm-border);
}
.wtcnm-edit-label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wtcnm-text-light);
}
.wtcnm-edit-accordion { margin-bottom: 16px; }
.wtcnm-alert-editor .wtcnm-chips { margin-bottom: 16px; }

.wtcnm-edit-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.wtcnm-edit-buttons .wtcnm-btn { width: auto; padding-left: 22px; padding-right: 22px; }

@media ( max-width: 480px ) {
	.wtcnm-edit-buttons .wtcnm-btn { width: 100%; }
}

/* Renew confirmation banner on the manage page */
.wtcnm-manage-renewed {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 10px 14px;
	border-radius: var(--wtcnm-radius);
	background: rgba(22, 163, 74, 0.10);
	color: #15803d;
	font-size: 14px;
	font-weight: 600;
}
.wtcnm-manage-renewed svg { width: 18px; height: 18px; flex: 0 0 auto; }


/* ------------------------------------------------------------------ *
 * Tabs (embed only — the modal is signup-only and has no tab strip).
 * ------------------------------------------------------------------ */
.wtcnm-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--wtcnm-hairline);
	margin-bottom: 22px;
}

.wtcnm-tab {
	appearance: none;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 10px 16px;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wtcnm-text-light);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wtcnm-tab:hover,
.wtcnm-tab:focus-visible {
	color: var(--wtcnm-text);
}

.wtcnm-tab-active,
.wtcnm-tab-active:hover {
	color: var(--wtcnm-primary);
	border-bottom-color: var(--wtcnm-primary);
}

.wtcnm-tab:focus-visible {
	outline: 2px solid var(--wtcnm-primary);
	outline-offset: -2px;
	border-radius: var(--wtcnm-radius) var(--wtcnm-radius) 0 0;
}

.wtcnm-tab-panel[hidden] {
	display: none !important;
}

/* Inside the tabbed embed the tab strip already labels the panel, so the manage view
   drops its standalone header and keeps only the explanatory subtitle.

   It also drops its ENTIRE standalone card shell. `.wtcnm-manage` is styled to stand alone
   on its own page (620px card, border, radius, shadow, padding) — nested in a tab panel that
   rendered as a card-inside-a-card, narrower than the signup tab beside it. The embed is the
   card now; this panel is just content. */
.wtcnm-manage-embedded {
	max-width: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.wtcnm-manage-subtitle-embedded {
	margin: 0 0 20px;
	text-align: left;
}

/* ------------------------------------------------------------------ *
 * Vehicle: Cancel (fresh state only).
 * The return bar and the dropdowns are mutually exclusive, so Cancel cannot live in the
 * bar — it would be hidden along with it. It belongs here, and JS only reveals it when
 * there is a prior vehicle to restore.
 * ------------------------------------------------------------------ */
.wtcnm-vehicle-cancel {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.wtcnm-vehicle-cancel[hidden] {
	display: none !important;
}

@media (max-width: 620px) {
	.wtcnm-tabs {
		gap: 0;
	}
	.wtcnm-tab {
		flex: 1 1 auto;
		padding: 10px 8px;
		text-align: center;
	}
}


/* ------------------------------------------------------------------ *
 * Invalid-field flash.
 * Inline errors alone were too quiet: a location error sits below the fold and the form
 * reads as broken. JS scrolls the offending section into view and flashes it once.
 * ------------------------------------------------------------------ */
.wtcnm-flash {
	animation: wtcnm-flash 1.4s ease-out 1;
	border-radius: var(--wtcnm-radius);
}

@keyframes wtcnm-flash {
	0%, 100% { background-color: transparent; }
	15%      { background-color: var(--wtcnm-blush); }
	70%      { background-color: var(--wtcnm-tint-06); }
}

@media (prefers-reduced-motion: reduce) {
	.wtcnm-flash {
		animation: none;
		background-color: var(--wtcnm-tint-08);
	}
}

/* ------------------------------------------------------------------ *
 * Unsubscribe confirmation (arrived via an email footer link).
 * ------------------------------------------------------------------ */
.wtcnm-confirm-title {
	margin: 0 0 8px;
	font-family: var(--wtcnm-font-display);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wtcnm-text);
}

.wtcnm-confirm-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.wtcnm-confirm-actions .wtcnm-btn {
	width: auto;
	margin: 0;
}

.wtcnm-unsub-done {
	text-align: center;
	padding: 26px 0;
}

.wtcnm-unsub-done[hidden] {
	display: none !important;
}


/* ------------------------------------------------------------------ *
 * Bed size + newsletter opt-in (1.3.0).
 * ------------------------------------------------------------------ */
.wtcnm-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wtcnm-text-light);
}

/* Bed size is a property of the customer's truck, not of the vehicle picker, so it sits
   outside .wtcnm-vehicle-fresh and stays visible while the return bar is showing. */
.wtcnm-field-bed {
	margin-top: 16px;
}

.wtcnm-field-newsletter {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--wtcnm-hairline);
}

.wtcnm-check-newsletter {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	font-size: 14px;
	color: var(--wtcnm-text);
}

.wtcnm-check-newsletter input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.wtcnm-hint-newsletter {
	margin-top: 5px;
	padding-left: 25px;
}

@media (max-width: 620px) {
	.wtcnm-field-bed {
		margin-top: 12px;
	}
}


/* ------------------------------------------------------------------ *
 * Cap colour (Caps & Covers accordion only).
 * ------------------------------------------------------------------ */
.wtcnm-colour-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 2px;
	font-family: var(--wtcnm-font-display);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wtcnm-text);
}

.wtcnm-colour-opt {
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--wtcnm-text-light);
}

.wtcnm-colour-hint {
	margin: 0 0 10px;
}

/* Four-up on desktop: colour labels are short, and unlike the category rows these have no
   children to expand, so there's no jumping-baseline problem — the objection to two-up
   categories doesn't apply here. */
.wtcnm-colour-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px 10px;
}

/* Matches .wtcnm-check-child's 14px so colours line up with the category children above. */
.wtcnm-check-colour {
	color: var(--wtcnm-text);
	padding-left: 14px;
}

.wtcnm-colour-head,
.wtcnm-colour-hint {
	padding-left: 14px;
}

@media (max-width: 900px) {
	.wtcnm-colour-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.wtcnm-colour-grid {
		grid-template-columns: 1fr;
	}
}