.qn-adress-sok {
	/*
	 * Single-column form, centred at a comfortable width. A fixed width rather than
	 * 100%: some themes wrap content in a shrink-to-fit flex item (quicknet.se's
	 * .section__content), where 100% collapses to the input's width. Capped by the
	 * viewport, not the parent, since the parent's width depends on ours.
	 */
	width: 720px;
	max-width: calc(100vw - 2rem);
	margin: 0 auto;
	/* Reset a theme's text-align:center so the plugin decides alignment. */
	text-align: left;
	font-family: 'Poppins', sans-serif;
	color: #31373b;
	/* Matches quicknet.se/bredband/; Poppins is loaded by the theme. */
	--qn-primary: #ce1f1f;
	--qn-primary-hover: #a81919;
	--qn-radius: 5px;
	/* Space kept clear for a fixed site header when scrolling into view. Override in the theme. */
	--qn-scroll-offset: 5rem;
}

.qn-adress-sok {
	scroll-margin-top: calc(var(--qn-scroll-offset) + 1rem);
	/* Results swap for shorter content when an address is picked; without this
	   the browser's scroll anchoring shifts the page to keep a node in place. */
	overflow-anchor: none;
}

/*
 * Themes decorate content lists — quicknet.se's "main .section li" adds an icon in
 * ::before and padding. The doubled class outranks such rules without !important.
 */
.qn-adress-sok.qn-adress-sok li {
	padding-left: 0;
	padding-top: 0;
}

/*
 * quicknet.se pads every content paragraph ".section .section__wrap .section__content p"
 * by 20px on the sides, which indents the plugin's text inside its own cards.
 */
.qn-adress-sok.qn-adress-sok.qn-adress-sok.qn-adress-sok p {
	padding: 0;
}

.qn-adress-sok.qn-adress-sok.qn-adress-sok.qn-adress-sok p.qn-adress-sok__apartment-hint {
	padding: 0.7em 0.9em;
}

/* quicknet.se also animates a grey overlay in button::before on hover. */
.qn-adress-sok.qn-adress-sok li::before,
.qn-adress-sok.qn-adress-sok button::before {
	content: none;
}

/*
 * Themes recolour button text on hover (quicknet.se: "button:hover { color: #fff }"),
 * which makes the plugin's light buttons blank. Keep their own colour instead.
 */
.qn-adress-sok .qn-adress-sok__address-choice:hover,
.qn-adress-sok .qn-adress-sok__address-choice:focus,
.qn-adress-sok .qn-adress-sok-wizard__step-button:hover,
.qn-adress-sok .qn-adress-sok-wizard__step-button:focus {
	color: inherit;
}

.qn-adress-sok .qn-adress-sok__address-back:hover,
.qn-adress-sok .qn-adress-sok__address-back:focus,
.qn-adress-sok .qn-adress-sok-wizard__change-selection:hover,
.qn-adress-sok .qn-adress-sok-wizard__change-selection:focus,
.qn-adress-sok .qn-adress-sok-legacyform__change-selection:hover,
.qn-adress-sok .qn-adress-sok-legacyform__change-selection:focus {
	color: var(--qn-primary);
}

.qn-adress-sok .qn-adress-sok-wizard__prev:hover,
.qn-adress-sok .qn-adress-sok-wizard__prev:focus {
	color: #333;
}

/* Themes set white-space: nowrap on buttons; long addresses must wrap on small screens. */
.qn-adress-sok .qn-adress-sok__address-choice {
	white-space: normal;
}

.qn-adress-sok input[type="radio"],
.qn-adress-sok input[type="checkbox"] {
	/* Brand red instead of the browser's default blue. */
	accent-color: var(--qn-primary);
}

/*
 * Lead-in above the form; sizes follow the theme's own h2/p. Same boost as the
 * p rule above: quicknet.se zeroes the margins and pads both sides by 20px via
 * ".section .section__wrap .section__content h2/p".
 */
.qn-adress-sok.qn-adress-sok.qn-adress-sok.qn-adress-sok .qn-adress-sok__heading {
	margin: 0 0 0.4em;
	padding: 0;
}

.qn-adress-sok.qn-adress-sok.qn-adress-sok.qn-adress-sok .qn-adress-sok__intro {
	margin: 0 0 1.25em;
}

.qn-adress-sok__label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 600;
}

.qn-adress-sok__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* Themes give select/button a bottom margin, which made each control in the
   row a different height. The row stretches them to one height instead.
   !important: the quicknet theme sets button margin-bottom with !important
   below 1024px. */
.qn-adress-sok__row .qn-adress-sok__input,
.qn-adress-sok__row .qn-adress-sok__apartment-select,
.qn-adress-sok__row .qn-adress-sok__button {
	margin: 0 !important;
}

.qn-adress-sok__input {
	flex: 1;
	min-height: 44px;
	padding: 0.6em 0.8em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	box-sizing: border-box;
}

.qn-adress-sok__button {
	min-height: 44px;
	padding: 0.6em 2em;
	border: none;
	border-radius: var(--qn-radius);
	background: var(--qn-primary);
	color: #fff;
	font-family: inherit;
	font-size: 1em; /* <button> defaults to a smaller UA font-size than body text; without this the em-based padding above doesn't match the real site's */
	font-weight: 400;
	cursor: pointer;
	touch-action: manipulation;
}

.qn-adress-sok__button:hover {
	background: var(--qn-primary-hover);
}

/* Address search frozen while the wizard owns the flow (steps 2–4). */
.qn-adress-sok__input:disabled {
	background: #f2f2f2;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	cursor: default;
}

.qn-adress-sok__button:disabled {
	opacity: 0.55;
	cursor: default;
}

.qn-adress-sok__button:disabled:hover {
	background: var(--qn-primary);
}

.qn-adress-sok__results {
	margin-top: 1em;
}

.qn-adress-sok__result {
	padding: 1em;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	margin-bottom: 0.75em;
}

.qn-adress-sok__result-adress {
	font-weight: 600;
	margin: 0 0 0.25em;
}

/* Apartment picker in the search row, shown once an address with apartments is chosen. */
.qn-adress-sok__row-apartment {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
}

.qn-adress-sok__row-apartment[hidden] {
	display: none;
}

/* Own chevron instead of the native one, which sits flush against the
   right border and can't be moved with padding. */
.qn-adress-sok__apartment-select {
	min-height: 44px;
	padding: 0.4em 2.4em 0.4em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9em center / 12px 8px;
	color: inherit;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

/* Locked during the wizard; keep the disabled text legible. */
.qn-adress-sok__apartment-select:disabled {
	opacity: 1;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	background-color: #f2f2f2;
	cursor: default;
}

/* Phones: address, apartment and button stack at full width. */
@media (max-width: 480px) {
	.qn-adress-sok__row {
		flex-direction: column;
	}

	.qn-adress-sok__row .qn-adress-sok__input {
		flex: none;
	}

	.qn-adress-sok__row .qn-adress-sok__apartment-select {
		flex: 1;
		width: 100%;
	}

	/* Stacked, nothing stretches them to one height — the input's padding
	   makes it 3em tall, so the others match that. */
	.qn-adress-sok__row .qn-adress-sok__input,
	.qn-adress-sok__row .qn-adress-sok__apartment-select,
	.qn-adress-sok__row .qn-adress-sok__button {
		min-height: 3em;
	}
}

/* Draw the eye to the picker while a choice is still required. */
.qn-adress-sok__apartment-select--needs-choice {
	border-color: var(--qn-primary);
	box-shadow: 0 0 0 3px rgba(206, 31, 31, 0.18);
}

.qn-adress-sok__apartment-hint {
	margin: 0 0 0.75em;
	padding: 0.7em 0.9em;
	border-left: 3px solid var(--qn-primary);
	border-radius: 4px;
	background: #fdf2f2;
	color: #31373b;
	font-weight: 600;
}

.qn-adress-sok__apartment-hint[hidden] {
	display: none;
}

/* List of matching street addresses, shown when a query hits more than one. */
.qn-adress-sok__address-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qn-adress-sok__address-list li {
	margin-bottom: 0.5em;
}

.qn-adress-sok__address-choice {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.8em 1em;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.qn-adress-sok__address-choice:hover {
	border-color: var(--qn-primary);
}

.qn-adress-sok__chosen-adress {
	font-weight: 600;
	margin: 0 0 0.25em;
}

.qn-adress-sok__address-back {
	display: inline-block;
	margin-bottom: 0.75em;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: var(--qn-primary);
	text-decoration: underline;
	cursor: pointer;
}

.qn-adress-sok__group-card[hidden] {
	display: none;
}

.qn-adress-sok__result-prislista {
	color: #555;
	margin: 0 0 0.5em;
}

.qn-adress-sok__hastigheter {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qn-adress-sok .qn-adress-sok__hastigheter li {
	padding: 0.6em 0;
	border-top: 1px solid #f0f0f0;
}

.qn-adress-sok__hastighet-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
}

.qn-adress-sok__hastighet-pris {
	font-weight: 600;
}

.qn-adress-sok__hastighet-ordinarie {
	margin-right: 0.4em;
	color: #999;
	font-weight: 400;
	text-decoration: line-through;
}

.qn-adress-sok__hastighet-kampanjpris {
	color: var(--qn-primary);
}

/* Keep "207 kr/mån" and "500/500 Mbps" on one line each when the row is tight. */
.qn-adress-sok__hastighet-namn,
.qn-adress-sok__hastighet-ordinarie,
.qn-adress-sok__hastighet-kampanjpris {
	white-space: nowrap;
}

.qn-adress-sok__moms-note {
	margin-top: 0.75em;
	font-size: 0.8em;
	color: #6b6b6b;
}

.qn-adress-sok__hastighet-startkostnad {
	margin-top: 0.25em;
	font-size: 0.85em;
	color: #555;
}

.qn-adress-sok__hastighet-villkor {
	margin-top: 0.15em;
	font-size: 0.8em;
	color: #6b6b6b;
}

.qn-adress-sok__hastighet-select {
	margin-top: 0.5em;
	min-height: 44px;
	padding: 0.4em 0.9em;
	border: 1px solid var(--qn-primary);
	border-radius: var(--qn-radius);
	background: #fff;
	color: var(--qn-primary);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
}

.qn-adress-sok__hastighet-select:hover {
	background: var(--qn-primary);
	color: #fff;
}

/* Wizard mode: button right-aligned under the price; margin-left:auto beats theme text-align. */
.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-startkostnad,
.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-villkor {
	text-align: right;
}

.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-select {
	display: block;
	width: fit-content;
	margin-left: auto;
}

.qn-adress-sok__message {
	color: #555;
}

.qn-adress-sok__message--error {
	color: var(--qn-primary-hover);
}

.qn-adress-sok__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.qn-adress-sok__skeleton-line {
	display: block;
	height: 0.85em;
	border-radius: 4px;
	background: linear-gradient(90deg, #eee 25%, #e0e0e0 37%, #eee 63%);
	background-size: 400% 100%;
	animation: qn-adress-sok-shimmer 1.4s ease-in-out infinite;
}

.qn-adress-sok__skeleton-line + .qn-adress-sok__skeleton-line {
	margin-top: 0.6em;
}

.qn-adress-sok__skeleton-line--adress {
	width: 60%;
	height: 1em;
}

.qn-adress-sok__skeleton-line--prislista {
	width: 40%;
	margin-bottom: 0.4em;
}

.qn-adress-sok__skeleton-line--hastighet {
	width: 100%;
}

@keyframes qn-adress-sok-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.qn-adress-sok__skeleton-line {
		animation: none;
		background: #eee;
	}
}

.qn-adress-sok-wizard {
	margin-top: 1.5em;
	padding: 1.25em;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fafafa;
}

.qn-adress-sok-wizard__heading {
	margin: 0 0 1em;
}

.qn-adress-sok-wizard__heading:focus {
	outline: none;
}

.qn-adress-sok-wizard__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
	font-size: 0.85em;
	color: #6b6b6b;
}

.qn-adress-sok-wizard__steps li[aria-current="step"] {
	color: var(--qn-primary);
	font-weight: 600;
}

.qn-adress-sok-wizard__steps li.is-complete {
	color: #2a7d2a;
}

.qn-adress-sok-wizard__step-button {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	cursor: pointer;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__step-button:not(:disabled):hover,
.qn-adress-sok-wizard__step-button:not(:disabled):focus-visible {
	text-decoration: underline;
}

.qn-adress-sok-wizard__step-button:disabled {
	cursor: default;
}

.qn-adress-sok-wizard__price-summary {
	position: sticky;
	top: calc(var(--qn-scroll-offset) + 0.75em);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.5em;
	margin-bottom: 1.25em;
	padding: 0.75em 1em;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #e3e3e3;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.qn-adress-sok-wizard__moms-note {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.75em;
	color: #6b6b6b;
}

.qn-adress-sok-wizard__price-item {
	display: flex;
	flex-direction: column;
}

.qn-adress-sok-wizard__price-label {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b6b6b;
}

.qn-adress-sok-wizard__price-value {
	font-size: 1.2em;
	font-weight: 700;
	color: #31373b;
}

/*
 * With a router the two headline prices give way to a breakdown per cost: subscription,
 * router and total, so each sum reads top to bottom — also on a narrow screen.
 */
.qn-adress-sok-wizard__price-summary--med-router .qn-adress-sok-wizard__price-item {
	display: none;
}

.qn-adress-sok-wizard__price-breakdown {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.qn-adress-sok-wizard__price-breakdown[hidden] {
	display: none;
}

.qn-adress-sok-wizard__price-group {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.qn-adress-sok-wizard__price-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0 1em;
}

/* A price that wraps under its label on a narrow screen still lines up on the right. */
.qn-adress-sok-wizard__price-row-value {
	margin-left: auto;
	text-align: right;
	font-weight: 600;
}

.qn-adress-sok-wizard__price-row--total {
	margin-top: 0.2em;
	padding-top: 0.3em;
	border-top: 1px solid #e3e3e3;
	font-weight: 700;
}

.qn-adress-sok-wizard__price-row--total .qn-adress-sok-wizard__price-row-value {
	font-size: 1.15em;
	font-weight: 700;
}

/* Rabatt i prisraden — samma uttryck som hastighetslistan. */
.qn-adress-sok-wizard__price-ordinarie,
.qn-adress-sok-legacyform__price-ordinarie {
	margin-right: 0.4em;
	color: #999;
	font-weight: 400;
	text-decoration: line-through;
}

.qn-adress-sok-wizard__price-kampanj,
.qn-adress-sok-legacyform__price-kampanj {
	color: var(--qn-primary);
}

.qn-adress-sok-wizard__price-ordinarie,
.qn-adress-sok-wizard__price-kampanj {
	white-space: nowrap;
}

.qn-adress-sok-wizard__price-kampanjvillkor,
.qn-adress-sok-legacyform__price-kampanjvillkor {
	flex-basis: 100%;
	margin: 0.25em 0 0;
	font-size: 0.8em;
	color: var(--qn-primary);
}

.qn-adress-sok-wizard__errors {
	color: var(--qn-primary-hover);
	font-weight: 600;
	margin-bottom: 1em;
}

.qn-adress-sok-wizard__step h3 {
	margin: 0 0 1em;
}

.qn-adress-sok-wizard__step h3:focus {
	outline: none;
}

.qn-adress-sok-wizard__summary-details {
	margin: -0.5em 0 1em;
	font-size: 0.9em;
	color: #555;
}

.qn-adress-sok-wizard__change-selection {
	display: inline-block;
	min-height: 44px;
	margin: 0 0 1em;
	padding: 0;
	border: none;
	background: none;
	color: var(--qn-primary);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__field {
	margin-bottom: 1em;
}

.qn-adress-sok-wizard__field label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.qn-adress-sok-wizard__field input:not([type="checkbox"]):not([type="radio"]),
.qn-adress-sok-wizard__field textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.6em 0.8em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font: inherit;
	font-size: 16px; /* prevents iOS Safari auto-zoom on focus regardless of the host theme's base size */
	box-sizing: border-box;
}

.qn-adress-sok-wizard__field textarea {
	min-height: 88px;
}

/* Lägenhets-/uttagsnummer kommer från adressvalet och går inte att ändra här. */
.qn-adress-sok-wizard__field--readonly input[readonly],
.qn-adress-sok-legacyform__field--readonly input[readonly] {
	background: #f0f0f0;
	color: #6b6b6b;
	cursor: not-allowed;
}

.qn-adress-sok-wizard__fieldset {
	margin: 0 0 1em;
	padding: 0;
	border: none;
}

.qn-adress-sok-wizard__fieldset legend {
	/* float+full-width makes <legend> behave like a heading, semantics kept. */
	float: left;
	width: 100%;
	font-weight: 600;
	margin-bottom: 0.35em;
	padding: 0;
}

.qn-adress-sok-wizard__fieldset label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	margin-right: 1.25em;
	font-weight: normal;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__fieldset input[type="radio"],
.qn-adress-sok-wizard__fieldset input[type="checkbox"] {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
}

.qn-adress-sok-wizard__payment-fieldset {
	padding: 1em 1.25em;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
}

.qn-adress-sok-wizard__payment-fieldset legend {
	float: left;
	width: 100%;
	font-size: 1.1em;
	padding: 0;
	margin-bottom: 0.5em;
}

/* Must beat the generic fieldset label rule (inline-flex) so these stack. */
.qn-adress-sok-wizard__payment-fieldset .qn-adress-sok-wizard__payment-option {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	margin: 0 0 0.5em;
	font-weight: normal;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__router-fieldset {
	padding: 1em 1.25em;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
	margin-bottom: 1em;
}

.qn-adress-sok-wizard__router-fieldset legend {
	float: left;
	width: 100%;
	font-size: 1.1em;
	padding: 0;
	margin-bottom: 0.5em;
}

.qn-adress-sok-wizard__router-intro {
	margin: 0 0 1em;
	color: #444;
	font-size: 0.9em;
	line-height: 1.5;
}

.qn-adress-sok-wizard__router-toggle-prompt {
	margin: 0 0 0.35em;
	font-weight: 600;
}

.qn-adress-sok-wizard__router-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	margin-right: 1.25em;
	font-weight: 600;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__router-fieldset .qn-adress-sok-wizard__router-model {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	margin: 0 0 0.35em;
	font-weight: 600;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__router-model-info {
	margin: 0 0 1em 1.75em;
	color: #666;
	font-size: 0.85em;
	line-height: 1.5;
}

.qn-adress-sok-wizard__router-model-image {
	display: block;
	width: 120px;
	height: auto;
	margin-bottom: 0.5em;
	border-radius: 4px;
}

.qn-adress-sok-wizard__payment-info {
	margin: -0.15em 0 1em 1.75em;
	color: #666;
	font-size: 0.85em;
}

.qn-adress-sok-wizard__field label.qn-adress-sok-wizard__terms-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	min-height: 44px;
	font-weight: normal;
	touch-action: manipulation;
}

.qn-adress-sok-wizard__terms-option input[type="checkbox"] {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
	margin-top: 0.2em;
}

.qn-adress-sok-wizard__terms-text {
	/* min-width:0 lets the flex item shrink and wrap instead of blowing out the row. */
	min-width: 0;
	flex: 1 1 auto;
}

.qn-adress-sok-wizard__field-error {
	display: block;
	margin-top: 0.3em;
	color: var(--qn-primary-hover);
	font-size: 0.85em;
}

.qn-adress-sok-wizard__review {
	margin: 0 0 1.25em;
}

.qn-adress-sok-wizard__review dt {
	font-weight: 600;
	color: #555;
}

.qn-adress-sok-wizard__review dd {
	margin: 0 0 0.6em;
}

.qn-adress-sok-wizard__nav {
	display: flex;
	gap: 0.75em;
	margin-top: 1.25em;
}

.qn-adress-sok-wizard__nav {
	flex-wrap: wrap;
}

.qn-adress-sok-wizard__nav button {
	min-height: 44px;
	padding: 0.6em 2em;
	border: none;
	border-radius: var(--qn-radius);
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	cursor: pointer;
	touch-action: manipulation;
}

@media (max-width: 480px) {
	.qn-adress-sok-wizard__nav {
		flex-direction: column-reverse;
	}

	.qn-adress-sok-wizard__nav button {
		width: 100%;
		margin-left: 0 !important;
	}
}

.qn-adress-sok-wizard__prev {
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
}

.qn-adress-sok-wizard__next,
.qn-adress-sok-wizard__submit {
	background: var(--qn-primary);
	color: #fff;
	margin-left: auto;
}

.qn-adress-sok-wizard__next:hover,
.qn-adress-sok-wizard__submit:hover {
	background: var(--qn-primary-hover);
}

.qn-adress-sok-wizard__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.qn-adress-sok-wizard__success {
	padding: 1em;
	border-radius: 6px;
	background: #e9f7ea;
	color: #1e5e1e;
	font-weight: 600;
}

/* Classic form mode: reproduces orderforms-2021's main.css, scoped by .qn-adress-sok--classic. */

.qn-adress-sok--classic {
	max-width: 1270px;
	margin: 0;
}

.qn-adress-sok--classic .qn-adress-sok__form {
	max-width: 50%;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.qn-adress-sok--classic .qn-adress-sok__form {
		max-width: 100%;
	}
}

.qn-adress-sok--classic .qn-adress-sok__hastighet-header {
	flex-wrap: wrap;
}

.qn-adress-sok__hastighet-actions {
	display: flex;
	align-items: center;
	gap: 1em;
}

.qn-adress-sok--classic .qn-adress-sok__hastighet-villkor {
	color: #999;
}

.qn-adress-sok--classic .qn-adress-sok__hastighet-select {
	margin-top: 0;
}

.qn-adress-sok-legacyform {
	max-width: 100%;
}

.qn-adress-sok-legacyform__heading {
	margin: 0 0 1em;
}

.qn-adress-sok-legacyform__heading:focus {
	outline: none;
}

.qn-adress-sok-legacyform__errors {
	display: flex;
	padding: 10px;
	background-color: #fafafa;
	border-radius: 10px;
	margin-bottom: 10px;
	color: red;
}

.qn-adress-sok-legacyform__errors:empty {
	display: none;
}

.qn-orderforms-wrapper {
	display: flex;
}

@media screen and (max-width: 768px) {
	.qn-orderforms-wrapper {
		display: flex;
		flex-direction: column;
	}
}

.form-box-container {
	border: solid 1px black;
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 10px;
}

.qn-orderforms-2021-left-column {
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	margin-right: 20px;
	min-width: 0;
}

.qn-orderforms-2021-right-column {
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	min-width: 0;
}

.form-group {
	margin: 5px 0;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group textarea {
	display: block;
	min-width: 100%;
	box-sizing: border-box;
	padding: 6px;
	font: inherit;
	font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
	margin-bottom: 0;
}

.routermodel-box h5 {
	margin: 0.5em 0;
}

.routermodel-box p {
	margin: 0 0 1em;
}

.qn-adress-sok-legacyform__router-model-image {
	display: block;
	width: 120px;
	height: auto;
	margin: 0.5em 0;
	border-radius: 4px;
}

.summation {
	display: flex;
	flex-direction: column;
	padding: 1em 2em;
	background-color: #fff;
	border: solid 1px black;
	border-radius: 10px;
}

.order__price-labels {
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.order__price-labels,
.order__prices {
	display: flex;
	justify-content: space-between;
}

.order__price-labels > div {
	flex: 1;
	text-align: right;
}

.order__prices > h4 {
	flex: 1;
	text-align: right;
}

.order__prices > h4:first-child {
	flex: 1;
	text-align: left;
}

.order-button-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem 0 0;
}

.order-button-container .button {
	margin-top: 1em;
	min-height: 44px;
	padding: 0.6em 2em;
	border: none;
	border-radius: var(--qn-radius);
	background: var(--qn-primary);
	color: #fff;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	cursor: pointer;
	touch-action: manipulation;
}

.order-button-container .button:hover {
	background: var(--qn-primary-hover);
}

.order-button-container .button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.qn-adress-sok-legacyform__summary-details {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	color: #555;
}

.qn-adress-sok-legacyform__change-selection {
	display: inline-block;
	min-height: 44px;
	margin: 0 0 0.5em;
	padding: 0;
	border: none;
	background: none;
	color: var(--qn-primary);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	touch-action: manipulation;
}

.qn-adress-sok-legacyform__field-error {
	display: block;
	margin-top: 0.3em;
	color: red;
	font-size: 0.85em;
}

.qn-adress-sok-legacyform__success {
	padding: 1em;
	border: solid 1px black;
	border-radius: 10px;
	background: #fff;
	color: #1e5e1e;
	font-weight: 600;
	text-align: center;
}

/*
 * Narrow screens, wizard mode: stack the speed above its price and left-align the
 * details, so nothing wraps mid-price and long campaign terms stay readable.
 */
@media (max-width: 480px) {
	.qn-adress-sok__result {
		padding: 0.75em;
	}

	.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1em;
	}

	.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-startkostnad,
	.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-villkor {
		text-align: left;
	}

	.qn-adress-sok:not(.qn-adress-sok--classic) .qn-adress-sok__hastighet-select {
		width: 100%;
		margin-left: 0;
	}
}