/**
 * Number Plate Maker - Builder Page
 *
 * Loaded only where the plate builder renders. Three jobs:
 *  1. The native hero that replaces the Elementor block.
 *  2. Retune the plugin's own CSS variables so the builder inherits the
 *     brand (navy accent, plate-yellow CTA, theme type) - no selector
 *     fights, the plugin styles itself with our values.
 *  3. Flow polish: the reg card overlaps the hero so the journey reads as
 *     one continuous surface; clearer step tabs; stronger price; a mobile
 *     sticky Add-to-Basket bar.
 */

/* ══ 1. Hero ═══════════════════════════════════════════
 * Navy, matching the site's other page headers, with the plate-tag
 * eyebrow and a ghost plate outline. Yellow rule at the base. */
.npm-hero-plate {
	position: relative;
	background:
		radial-gradient(80% 130% at 85% -10%, rgba(255, 200, 0, 0.12) 0%, transparent 55%),
		linear-gradient(rgba(16, 27, 51, 0.92), rgba(27, 42, 74, 0.96)),
		var(--npm-navy);
	border-bottom: 4px solid var(--npm-yellow);
	padding: var(--npm-space-10) 0 calc(var(--npm-space-10) + 56px);
	text-align: center;
	overflow: hidden;
	color: var(--npm-white);
}

/* Ghost plate outline - the subject as decoration. */
.npm-hero-plate::before {
	content: "";
	position: absolute;
	right: -80px;
	top: 50%;
	width: 340px;
	height: 130px;
	transform: translateY(-50%) rotate(-8deg);
	border: 6px solid rgba(255, 255, 255, 0.07);
	border-radius: 22px;
	pointer-events: none;
}

.npm-hero-plate .plate-tag {
	background: var(--npm-white);
}

.npm-hero-plate__title {
	margin: 0 0 var(--npm-space-3);
	color: var(--npm-white);
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1.9rem, 4.6vw, 2.9rem);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.npm-hero-plate__sub {
	max-width: 58ch;
	margin: 0 auto var(--npm-space-4);
	color: #c7d0e4;
	font-size: var(--npm-text-lg);
}

.npm-hero-plate__points {
	display: flex;
	justify-content: center;
	gap: var(--npm-space-5);
	flex-wrap: wrap;
	list-style: none;
	margin: var(--npm-space-4) 0 0;
	padding: 0;
	font-size: var(--npm-text-sm);
	font-weight: var(--npm-weight-semibold);
	color: #e4e9f4;
}

.npm-hero-plate__points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.npm-hero-plate__points li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 5px;
	background: var(--npm-yellow);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(#000 0 0);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

/* ══ 2. Retune the plugin's design tokens ══════════════ */
.npm-builder-page .npb,
.npm-builder-page #plate-builder {
	--npb-accent: #1b2a4a;
	--npb-accent-hover: #24365d;
	--npb-accent-light: #eef1f7;
	--npb-cta: #ffc800;
	--npb-cta-hover: #eab700;
	--npb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--npb-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--npb-radius: 10px;
}

/* CTA text: navy on plate yellow, matching the theme's primary button. */
.npm-builder-page .npb .npb-add-to-cart {
	color: var(--npm-navy);
	font-weight: 800;
}

/* ══ 3. Flow polish ════════════════════════════════════ */

/* The reg entry card. With the theme hero present (npm-has-builder-hero,
   set by the Plate Builder (Theme) template) it overlaps the hero - one
   continuous journey from headline to typing your reg. Without the hero
   (plugin template / shortcode) it keeps normal spacing; the previous
   unconditional negative margin pulled the card under the sticky header. */
.npm-builder-page .npb-reg-block {
	padding-top: var(--npm-space-6);
}

.npm-builder-page .npb-reg-block-inner {
	position: relative;
	z-index: 5;
	padding: var(--npm-space-6) var(--npm-space-5) var(--npm-space-5);
	background: var(--npm-white);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius-lg);
	box-shadow: var(--npm-shadow-lg);
}

.npm-has-builder-hero .npb-reg-block {
	background: transparent;
	padding-top: 0;
}

.npm-has-builder-hero .npb-reg-block-inner {
	margin-top: -56px;
}

/* Viewer sits directly on the page canvas - remove the grey band that
   broke the page into disconnected strips. */
.npm-builder-page .npb-plate-viewer {
	background: transparent;
	padding-top: var(--npm-space-4);
}

/* Sticky price bar: brand it and make the live price unmissable. */
.npm-builder-page .npb-sticky-bar {
	top: var(--npm-header-height);
	border-bottom: 3px solid var(--npm-yellow);
}

body.admin-bar.npm-builder-page .npb-sticky-bar {
	top: calc(var(--npm-header-height) + 32px);
}

@media (max-width: 782px) {
	body.admin-bar.npm-builder-page .npb-sticky-bar {
		top: calc(var(--npm-header-height) + 46px);
	}
}

@media (max-width: 600px) {
	body.admin-bar.npm-builder-page .npb-sticky-bar {
		top: var(--npm-header-height);
	}
}

.npm-builder-page .npb-price-value {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--npm-navy);
}

/* Step tabs: bigger targets, honest locked state (visible but clearly
   waiting), done steps in road-sign green. */
.npm-builder-page .npb-step {
	padding: 14px 8px;
	font-size: 12.5px;
}

.npm-builder-page .npb-step.__locked {
	opacity: 0.55;
}

.npm-builder-page .npb-step.__done {
	color: var(--npm-success);
}

.npm-builder-page .npb-step.__done .npb-step-num {
	background: var(--npm-success-soft);
	color: var(--npm-success);
}

/* Give the working area gentle separation without hard grey strips. */
.npm-builder-page .npb-body {
	background:
		linear-gradient(var(--npm-canvas), var(--npm-canvas)) top / 100% 1px no-repeat,
		transparent;
	padding-top: var(--npm-space-2);
}

/* ══ Mobile sticky Add-to-Basket bar ═══════════════════
 * Injected by main.js when the builder is present. Visible only under
 * 900px and only while the real Add to Basket button is off-screen. */
.npm-builder-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--npm-space-3);
	padding: 10px var(--npm-space-4);
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	background: var(--npm-navy);
	border-top: 3px solid var(--npm-yellow);
	box-shadow: 0 -6px 20px rgba(16, 27, 51, 0.25);
}

.npm-builder-cta.is-visible {
	display: flex;
}

@media (min-width: 900px) {
	.npm-builder-cta {
		display: none !important;
	}
}

.npm-builder-cta__price {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	color: var(--npm-white);
}

.npm-builder-cta__price small {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
}

.npm-builder-cta__price strong {
	font-size: 1.15rem;
	font-weight: 800;
}

.npm-builder-cta .btn {
	flex-shrink: 0;
}


/* ══ Defensive: immunise the builder against stale checkout.css ═══════
 * The plugin's checkout.css loads sitewide and (before plugin v1.7.7)
 * contained unscoped .npb-panel/.npb-step rules that hid the builder's
 * option panels and washed out its step tabs. Plugin v1.7.7 scopes those
 * rules, but this site's CSS optimiser has a history of serving stale
 * stylesheet copies - so the theme force-restores the builder's own
 * behaviour at higher specificity. Harmless once the fixed plugin CSS is
 * live; a lifesaver while any cache still serves the old file. */
.npm-builder-page #plate-builder .npb-panel {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	visibility: visible;
	pointer-events: auto;
	display: none;
}

.npm-builder-page #plate-builder .npb-panel.__active {
	display: block;
}

.npm-builder-page #plate-builder .npb-step {
	opacity: 1;
	cursor: pointer;
}

.npm-builder-page #plate-builder .npb-step.__locked {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.npm-builder-page #plate-builder .npb-step.__active {
	opacity: 1;
}