/* ==========================================================================
   Hire purchase calculator — vehicle and hot-deal detail pages only.
   ========================================================================== */

.pm-hp {
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Condensed summary — sticky sidebar, links down to the full calculator.
   -------------------------------------------------------------------------- */

.pm-hp-summary {
	display: block;
	margin-top: 1.5rem;
	padding: 1.25rem;
	background-color: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	transition: border-color 0.2s var(--ease);
}

.pm-hp-summary:hover {
	border-color: var(--accent);
}

.pm-hp-summary__label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
}

.pm-hp-summary__value {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--accent-text);
}

.pm-hp-summary__note {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.pm-hp__panel {
	padding: 1.5rem;
	background-color: var(--bg-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
}

@media (min-width: 640px) {
	.pm-hp__panel {
		padding: 2rem;
	}
}

/* --------------------------------------------------------------------------
   Sliders
   -------------------------------------------------------------------------- */

.pm-hp__controls {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.pm-hp__field-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
}

.pm-hp__label {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-text);
}

.pm-hp__label-note {
	margin-top: 0.125rem;
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.pm-hp__field-value {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
}

/* Native range input, styled to match the approved design. The fill uses a
   custom property JavaScript updates on input — CSS alone cannot read a
   range input's own value, so without JavaScript the track is a flat,
   unfilled bar. The slider is still fully usable either way; only the
   left-of-thumb highlight is an enhancement. */
.pm-hp input[type='range'] {
	--pm-range-fill: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	margin-top: 0.75rem;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--accent) var(--pm-range-fill),
		var(--border-strong) var(--pm-range-fill)
	);
	outline: none;
}

.pm-hp input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--accent);
	border: 3px solid var(--bg-card);
	box-shadow: 0 0 0 1px var(--border-strong);
	cursor: pointer;
}

.pm-hp input[type='range']::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--accent);
	border: 3px solid var(--bg-card);
	box-shadow: 0 0 0 1px var(--border-strong);
	cursor: pointer;
}

.pm-hp input[type='range']::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: transparent;
}

.pm-hp__field-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Monthly repayment spotlight
   -------------------------------------------------------------------------- */

.pm-hp__spotlight {
	margin-top: 1.75rem;
	padding: 1.25rem;
	text-align: center;
	background-color: var(--accent-glow);
	border: 1px solid rgba(0, 212, 255, 0.25);
	border-radius: var(--radius);
}

.pm-hp__spotlight-label {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-text);
}

.pm-hp__spotlight-value {
	margin-top: 0.375rem;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	font-weight: 800;
	color: var(--text-primary);
}

.pm-hp__spotlight-note {
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Summary rows
   -------------------------------------------------------------------------- */

.pm-hp__summary {
	margin-top: 1.5rem;
	padding: 0.25rem 1.25rem;
	background-color: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}

.pm-hp__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--border);
}

.pm-hp__row:last-child {
	border-bottom: none;
}

.pm-hp__row--total {
	font-weight: 600;
}

.pm-hp__row-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.pm-hp__row-value {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	text-align: right;
}

.pm-hp__row--total .pm-hp__row-value {
	color: var(--accent-text);
}

.pm-hp__cta {
	margin-top: 1.5rem;
}

.pm-hp__disclaimer {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	color: var(--text-muted);
	text-align: center;
}