/**
 * Rudes Propeller – prisberegner.
 *
 * Three rules govern this file:
 *
 * 1. It has to survive an unknown theme. A shortcode lands inside someone else's stylesheet, and a
 *    theme rule like `.entry-content button {}` beats a bare `.rp-option {}` on specificity alone –
 *    that is how the options ended up as giant pills. There are three deliberate layers, and the
 *    doubled `.rp-propel.rp-propel` is what keeps them in order:
 *
 *      theme            `.entry-content button`        (0,1,1)
 *      armour           `.rp-propel.rp-propel button`  (0,2,1)  – strips the theme back
 *      components       `.rp-propel.rp-propel .rp-btn` (0,3,0)  – builds our own look
 *
 *    Doubling matters because WordPress usually prints the theme's stylesheet after the plugin's,
 *    so anything that merely ties on specificity loses. The geometry a theme overwrites – radius,
 *    padding, height, min-height, background, shadow, transform, font – is locked with !important
 *    on top of that. Note that min-height must be reset explicitly: it beats height, so a theme's
 *    `min-height: 90px` would otherwise win over our `height: 60px`.
 *
 *    If a theme ever still breaks through, raise the component layer rather than the armour –
 *    raising the armour alone would make it outrank our own components.
 *
 * 2. It does not build a box. The calculator flows with the page: no card, no frame, no tinted
 *    background. The page it sits on provides the chrome.
 *
 * 3. It is meant to be read. Body copy starts at 17px and nothing sits below 14px; every grey is
 *    picked to clear WCAG AA on white.
 *
 * Mobile first throughout: single column, thumb-sized targets, fluid type, nothing that can
 * overflow sideways.
 */

.rp-propel.rp-propel {
	--rp-blue: #1F6FAD;
	--rp-blue-dark: #17568A;
	--rp-blue-hover: #1A5F95;
	--rp-blue-soft: #EBF3FA;
	--rp-ink: #101C26;
	--rp-muted: #3F5568;
	--rp-faint: #5A6B7B;
	--rp-line: #D5E2EC;
	--rp-line-strong: #B6CBDC;
	--rp-green: #17916A;
	--rp-sand: #FBF0DA;
	--rp-error-bg: #FCE9E9;
	--rp-error: #A32E2E;
	--rp-radius: 14px;
	--rp-measure: 36rem;

	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--rp-ink);
	font-family: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

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

/* ------------------------------------------------------------------ theme armour
 *
 * Neutralise the theme before building anything up. Buttons and inputs are the elements themes
 * decorate hardest, so they get stripped back to nothing here and dressed again below.
 */

.rp-propel.rp-propel button,
.rp-propel.rp-propel input,
.rp-propel.rp-propel textarea,
.rp-propel.rp-propel select {
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	transform: none !important;
	transition: none;
	min-width: 0 !important;
	max-width: 100% !important;
	/* min-height beats height, so a theme's `min-height: 90px` would win over our `height: 60px`
	   unless it is cleared here. Components that want one set it again with !important. */
	min-height: 0 !important;
	max-height: none !important;
	width: auto;
	background-image: none !important;
}

.rp-propel.rp-propel button {
	display: inline-block;
	border: 0 !important;
	background: none;
	color: inherit;
	font-weight: 400;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rp-propel.rp-propel button::before,
.rp-propel.rp-propel button::after,
.rp-propel.rp-propel a::before,
.rp-propel.rp-propel a::after {
	content: none !important;
}

.rp-propel.rp-propel img,
.rp-propel.rp-propel svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.rp-propel.rp-propel a {
	color: var(--rp-blue);
	text-decoration: none;
	box-shadow: none !important;
}

.rp-propel.rp-propel a:hover {
	color: var(--rp-blue-dark);
	text-decoration: underline;
}

.rp-propel.rp-propel p {
	margin: 0;
}

.rp-propel.rp-propel :focus-visible {
	outline: 3px solid var(--rp-blue) !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ progress bar */

.rp-propel.rp-propel .rp-progress {
	height: 4px !important;
	width: 100%;
	margin: 0 0 clamp(22px, 5vw, 34px);
	border-radius: 999px !important;
	background: var(--rp-line);
	overflow: hidden;
}

.rp-propel.rp-propel .rp-progress__bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--rp-blue);
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------- body */

.rp-propel.rp-propel .rp-main {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 0 clamp(8px, 3vw, 16px);
}

.rp-propel.rp-propel .rp-step {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(22px, 5vw, 30px);
	max-width: var(--rp-measure);
	animation: rp-rise .4s cubic-bezier(.2, .7, .2, 1);
}

@keyframes rp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rp-propel.rp-propel .rp-step { animation: none; }
	.rp-propel.rp-propel .rp-progress__bar { transition: none; }
	.rp-propel.rp-propel * { transition-duration: .01ms !important; }
}

.rp-propel.rp-propel .rp-back {
	align-self: flex-start;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	min-height: 44px !important;
	margin: 0 0 -10px -4px !important;
	padding: 0 4px !important;
	background: none !important;
	color: var(--rp-blue) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.rp-propel.rp-propel .rp-back:hover {
	color: var(--rp-blue-dark) !important;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------- headings */

.rp-propel.rp-propel .rp-intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rp-propel.rp-propel .rp-eyebrow {
	color: var(--rp-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.3;
	text-transform: uppercase;
}

.rp-propel.rp-propel .rp-h1 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--rp-ink);
	font-family: inherit !important;
	font-size: clamp(30px, 7vw, 42px) !important;
	line-height: 1.13 !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	text-transform: none !important;
	text-wrap: balance;
}

.rp-propel.rp-propel .rp-lead {
	margin: 0 !important;
	color: var(--rp-muted);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.55;
	text-wrap: pretty;
}

.rp-propel.rp-propel .rp-lead--sm {
	font-size: 17px;
}

/* The step counter sits above the question, not beside it – beside it, it reads as part of the
   sentence and squeezes the heading on a phone. */

.rp-propel.rp-propel .rp-question {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rp-propel.rp-propel .rp-question__number {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	color: var(--rp-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.rp-propel.rp-propel .rp-question__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rp-propel.rp-propel .rp-h2 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--rp-ink);
	font-family: inherit !important;
	font-size: clamp(26px, 6.2vw, 34px) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: -.015em;
	text-transform: none !important;
	text-wrap: balance;
}

.rp-propel.rp-propel .rp-help {
	margin: 0 !important;
	color: var(--rp-muted);
	font-size: 17px;
	line-height: 1.55;
}

/* ----------------------------------------------------------------------- choices */

.rp-propel.rp-propel .rp-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.rp-propel.rp-propel .rp-option {
	display: flex !important;
	align-items: center;
	gap: 16px;
	width: 100% !important;
	min-height: 72px !important;
	padding: 16px 18px !important;
	border: 2px solid var(--rp-line-strong) !important;
	border-radius: var(--rp-radius) !important;
	background: #fff !important;
	color: var(--rp-ink) !important;
	font-size: 17px !important;
	text-align: left !important;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.rp-propel.rp-propel .rp-option:hover {
	border-color: var(--rp-blue) !important;
	background: var(--rp-blue-soft) !important;
}

.rp-propel.rp-propel .rp-option:active {
	transform: scale(.99) !important;
}

.rp-propel.rp-propel .rp-option__key {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--rp-blue-soft);
	color: var(--rp-blue);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.rp-propel.rp-propel .rp-option:hover .rp-option__key {
	background: var(--rp-blue);
	color: #fff;
}

.rp-propel.rp-propel .rp-option__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.rp-propel.rp-propel .rp-option__label {
	color: var(--rp-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.rp-propel.rp-propel .rp-option__hint {
	color: var(--rp-muted);
	font-size: 16px;
	line-height: 1.4;
}

/* Blade count: a two-up grid that opens to four across, so it stays one tidy block instead of a
   ragged row on a narrow phone. */

.rp-propel.rp-propel .rp-blades {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	width: 100%;
}

@media (min-width: 430px) {
	.rp-propel.rp-propel .rp-blades {
		grid-template-columns: repeat(4, 1fr);
	}
}

.rp-propel.rp-propel .rp-blade {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100% !important;
	min-height: 100px !important;
	height: auto !important;
	padding: 18px 8px !important;
	border: 2px solid var(--rp-line-strong) !important;
	border-radius: var(--rp-radius) !important;
	background: #fff !important;
	color: var(--rp-ink) !important;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.rp-propel.rp-propel .rp-blade:hover {
	border-color: var(--rp-blue) !important;
	background: var(--rp-blue-soft) !important;
}

.rp-propel.rp-propel .rp-blade:active {
	transform: scale(.98) !important;
}

.rp-propel.rp-propel .rp-blade__n {
	color: var(--rp-blue);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}

.rp-propel.rp-propel .rp-blade__label {
	color: var(--rp-muted);
	font-size: 15px;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------- diameter */

.rp-propel.rp-propel .rp-dia {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.rp-propel.rp-propel .rp-dia__btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px !important;
	height: 60px !important;
	min-height: 60px !important;
	padding: 0 !important;
	border: 2px solid var(--rp-line-strong) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--rp-blue) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.rp-propel.rp-propel .rp-dia__btn:hover {
	border-color: var(--rp-blue) !important;
	background: var(--rp-blue-soft) !important;
}

.rp-propel.rp-propel .rp-dia__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}

.rp-propel.rp-propel .rp-dia__number {
	color: var(--rp-ink);
	font-size: clamp(48px, 14vw, 68px);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.rp-propel.rp-propel .rp-dia__unit {
	color: var(--rp-muted);
	font-size: clamp(22px, 6vw, 28px);
	font-weight: 500;
}

/* The range input is rebuilt from scratch – left native it inherits whatever the theme did to it,
   and the default thumb is too small to hit with a thumb. */

.rp-propel.rp-propel .rp-range {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rp-propel.rp-propel .rp-range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: var(--rp-line);
}

.rp-propel.rp-propel .rp-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	margin-top: -12px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--rp-blue);
	box-shadow: 0 2px 8px rgba(16, 28, 38, .3);
}

.rp-propel.rp-propel .rp-range::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: var(--rp-line);
}

.rp-propel.rp-propel .rp-range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--rp-blue);
	box-shadow: 0 2px 8px rgba(16, 28, 38, .3);
}

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

.rp-propel.rp-propel .rp-fields {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
}

.rp-propel.rp-propel .rp-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--rp-muted);
	font-size: 16px;
	font-weight: 600;
}

.rp-propel.rp-propel .rp-email-input,
.rp-propel.rp-propel .rp-input,
.rp-propel.rp-propel .rp-field input,
.rp-propel.rp-propel .rp-field textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: 16px 18px !important;
	border: 2px solid var(--rp-line-strong) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--rp-ink) !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	/* 16px is the floor: anything smaller makes iOS Safari zoom the page on focus. */
	font-size: 18px !important;
	line-height: 1.4 !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.rp-propel.rp-propel .rp-email-input {
	font-size: clamp(18px, 4.8vw, 22px) !important;
}

.rp-propel.rp-propel .rp-field textarea {
	min-height: 120px;
	resize: vertical;
}

.rp-propel.rp-propel .rp-field__label {
	display: block;
	color: var(--rp-muted);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.rp-propel.rp-propel input::placeholder,
.rp-propel.rp-propel textarea::placeholder {
	color: #8399AB;
	opacity: 1;
}

.rp-propel.rp-propel input:focus,
.rp-propel.rp-propel textarea:focus {
	outline: none !important;
	border-color: var(--rp-blue) !important;
	box-shadow: 0 0 0 4px rgba(31, 111, 173, .18) !important;
}

.rp-propel.rp-propel .rp-optional {
	color: var(--rp-faint);
	font-weight: 400;
}

.rp-propel.rp-propel .rp-consent {
	margin: -6px 0 0 !important;
	color: var(--rp-faint);
	font-size: 15px;
	line-height: 1.5;
}

/* ----------------------------------------------------------------------- actions */

.rp-propel.rp-propel .rp-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.rp-propel.rp-propel .rp-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 58px !important;
	padding: 16px 32px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--rp-blue) !important;
	box-shadow: 0 4px 14px rgba(31, 111, 173, .25) !important;
	color: #fff !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.rp-propel.rp-propel .rp-btn:hover:not([disabled]) {
	background: var(--rp-blue-hover) !important;
	box-shadow: 0 6px 18px rgba(31, 111, 173, .32) !important;
}

.rp-propel.rp-propel .rp-btn:active:not([disabled]) {
	transform: translateY(1px) !important;
}

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

/* On a phone the primary action goes full width and the keyboard hint drops away – there is no
   Enter key to press. */

@media (max-width: 479px) {
	.rp-propel.rp-propel .rp-btn {
		width: 100% !important;
	}

	.rp-propel.rp-propel .rp-hint--key {
		display: none;
	}
}

.rp-propel.rp-propel .rp-hint {
	color: var(--rp-faint);
	font-size: 15px;
}

.rp-propel.rp-propel .rp-link {
	align-self: flex-start;
	display: inline-flex !important;
	align-items: center;
	min-height: 44px !important;
	padding: 0 !important;
	background: none !important;
	color: var(--rp-blue) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.rp-propel.rp-propel .rp-error {
	display: block;
	margin: -10px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--rp-error-bg);
	color: var(--rp-error);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}

/* ------------------------------------------------------------------------- price */

.rp-propel.rp-propel .rp-price-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rp-propel.rp-propel .rp-price-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	padding: clamp(24px, 6vw, 32px) clamp(22px, 5vw, 30px) !important;
	border-radius: 18px !important;
	background: var(--rp-blue) !important;
	box-shadow: 0 10px 30px rgba(31, 111, 173, .25);
	color: #fff;
}

.rp-propel.rp-propel .rp-price-card a {
	color: #fff;
	text-decoration: underline;
}

.rp-propel.rp-propel .rp-price-card__top {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rp-propel.rp-propel .rp-price-card__label {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .92;
}

.rp-propel.rp-propel .rp-price-card__amount {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.rp-propel.rp-propel .rp-price-card__ca {
	font-size: 22px;
	font-weight: 500;
	opacity: .92;
}

.rp-propel.rp-propel .rp-price-card__total {
	font-size: clamp(44px, 13vw, 64px);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

.rp-propel.rp-propel .rp-price-card__ex {
	font-size: 16px;
	opacity: .92;
}

.rp-propel.rp-propel .rp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rp-propel.rp-propel .rp-chip {
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.rp-propel.rp-propel .rp-lines {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.rp-propel.rp-propel .rp-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rp-line);
	color: var(--rp-muted);
	font-size: 17px;
}

.rp-propel.rp-propel .rp-line__value {
	color: var(--rp-ink);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.rp-propel.rp-propel .rp-callout {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--rp-sand);
	color: var(--rp-ink);
}

.rp-propel.rp-propel .rp-callout__text {
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.55;
}

.rp-propel.rp-propel .rp-callout svg {
	flex: 0 0 auto;
	margin-top: 3px;
}

.rp-propel.rp-propel .rp-order-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding-top: clamp(22px, 5vw, 28px);
	border-top: 1px solid var(--rp-line);
}

.rp-propel.rp-propel .rp-h3 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--rp-ink);
	font-family: inherit !important;
	font-size: 23px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.01em;
	text-transform: none !important;
}

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

.rp-propel.rp-propel .rp-done-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rp-propel.rp-propel .rp-check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--rp-green);
	color: #fff;
}

.rp-propel.rp-propel .rp-steps-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding-top: clamp(20px, 5vw, 26px);
	border-top: 1px solid var(--rp-line);
}

.rp-propel.rp-propel .rp-steps-list__item {
	display: flex;
	gap: 14px;
	color: var(--rp-muted);
	font-size: 17px;
	line-height: 1.55;
}

.rp-propel.rp-propel .rp-steps-list__n {
	flex: 0 0 auto;
	color: var(--rp-blue);
	font-weight: 700;
}

.rp-propel.rp-propel .rp-steps-list__text {
	min-width: 0;
}

.rp-propel.rp-propel .rp-busy {
	opacity: .6;
	pointer-events: none;
}

/* ------------------------------------------------------------------ Trailer access */

/*
 * Two places share these: the button on the receipt step, and the standalone page the customer
 * opens at the trailer. The page is not inside a theme at all — it is served whole by the plugin —
 * but it carries the same `.rp-propel.rp-propel` root so the variables and the armour above still
 * apply and the two look like one product.
 */

.rp-propel.rp-propel .rp-access-cta {
	margin: 28px 0 8px;
}

.rp-propel.rp-propel .rp-access-cta__btn,
.rp-propel.rp-propel .rp-access__btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 18px 24px !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: var(--rp-radius) !important;
	background: var(--rp-blue) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	transform: none !important;
}

.rp-propel.rp-propel .rp-access-cta__btn:hover,
.rp-propel.rp-propel .rp-access__btn:hover {
	background: var(--rp-blue-hover) !important;
	color: #fff !important;
}

.rp-propel.rp-propel .rp-access-cta__note {
	margin: 10px 2px 0;
	color: var(--rp-faint);
	font-size: 14px;
	line-height: 1.5;
}

/* -------------------------------------------------------------- The standalone page */

body.rp-access-body {
	margin: 0;
	background: #fff;
	font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rp-propel.rp-propel.rp-access {
	max-width: 30rem;
	margin: 0 auto;
	padding: 32px 20px 48px;
}

.rp-propel.rp-propel .rp-access__kicker {
	margin: 0 0 4px;
	color: var(--rp-faint);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rp-propel.rp-propel .rp-access__title {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--rp-ink);
}

.rp-propel.rp-propel .rp-access__text {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--rp-muted);
}

/*
 * The code is read off a phone held at arm's length, outdoors, often in sunlight, and then typed
 * on a keypad without looking back. That is what the size, the tabular figures and the letter
 * spacing are for — and why the digits are grouped in threes.
 */
.rp-propel.rp-propel .rp-access__code {
	display: block;
	margin: 18px 0 24px;
	padding: 24px 20px;
	border-radius: var(--rp-radius);
	background: var(--rp-blue-soft);
	text-align: center;
}

.rp-propel.rp-propel .rp-access__code-label {
	display: block;
	margin-bottom: 8px;
	color: var(--rp-blue-dark);
	font-size: 15px;
	font-weight: 600;
}

.rp-propel.rp-propel .rp-access__code-value {
	display: block;
	color: var(--rp-ink);
	font-size: clamp(38px, 13vw, 54px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.rp-propel.rp-propel .rp-access__code-meta {
	display: block;
	margin-top: 10px;
	color: var(--rp-faint);
	font-size: 15px;
}

.rp-propel.rp-propel .rp-access__steps {
	margin: 0 0 26px;
	padding-left: 22px;
	color: var(--rp-ink);
	font-size: 16px;
	line-height: 1.6;
}

.rp-propel.rp-propel .rp-access__steps li {
	margin-bottom: 8px;
}

.rp-propel.rp-propel .rp-access__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 14px;
}

.rp-propel.rp-propel .rp-access__btn--ghost {
	background: #fff !important;
	color: var(--rp-blue-dark) !important;
	border: 2px solid var(--rp-line-strong) !important;
}

.rp-propel.rp-propel .rp-access__btn--ghost:hover {
	background: var(--rp-blue-soft) !important;
	color: var(--rp-blue-dark) !important;
}

.rp-propel.rp-propel .rp-access__hint,
.rp-propel.rp-propel .rp-access__foot {
	margin: 0;
	color: var(--rp-faint);
	font-size: 14px;
	line-height: 1.5;
}

.rp-propel.rp-propel .rp-access__foot {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--rp-line);
	text-align: center;
}

.rp-propel.rp-propel .rp-access__alert {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: var(--rp-radius);
	background: var(--rp-sand);
	color: var(--rp-ink);
	font-size: 16px;
	line-height: 1.5;
}

.rp-propel.rp-propel .rp-access__alert strong {
	display: block;
	margin-bottom: 4px;
}

.rp-propel.rp-propel .rp-access__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rp-propel.rp-propel .rp-access__choice {
	display: block;
	padding: 20px 22px;
	border: 2px solid var(--rp-line-strong);
	border-radius: var(--rp-radius);
	background: #fff;
	color: var(--rp-ink) !important;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none !important;
}

.rp-propel.rp-propel .rp-access__choice:hover {
	border-color: var(--rp-blue);
	background: var(--rp-blue-soft);
}

/* --------------------------------------------------------------------- Valg i formularen */

/* Used by the postal flow for "send it back or collect it". Deliberately big tap targets: this
   is answered on a phone, often outdoors, by someone who has already filled in four fields. */
.rp-propel.rp-propel .rp-choice {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin: 0 !important;
}

.rp-propel.rp-propel .rp-choice__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid #D7DEE5 !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
}

.rp-propel.rp-propel .rp-choice__item:has( input:checked ) {
	border-color: #2A7AB8 !important;
	box-shadow: inset 0 0 0 1px #2A7AB8 !important;
}

.rp-propel.rp-propel .rp-choice__item input {
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	margin: 0 !important;
	accent-color: #2A7AB8 !important;
	flex: 0 0 auto !important;
}