.webfy-price-calculator {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .75fr);
	gap: clamp(1rem, 2.6vw, 2rem);
	align-items: start;
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding: clamp(1rem, 2.5vw, 2rem);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: clamp(1.4rem, 2.6vw, 2.25rem);
	background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(247, 243, 255, .7));
	box-shadow: 0 1.75rem 5rem rgba(58, 46, 96, .1), inset 0 1px 0 rgba(255, 255, 255, .95);
	backdrop-filter: blur(24px) saturate(145%);
}

.webfy-price-calculator__form,
.webfy-price-calculator__group {
	min-width: 0;
}

.webfy-price-calculator__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.webfy-price-calculator__group > legend,
.webfy-price-calculator__conditional > label {
	display: block;
	width: 100%;
	margin: 0 0 .8rem;
	color: #282333;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	font-weight: 800;
	line-height: 1.3;
}

.webfy-price-calculator__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.webfy-price-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.webfy-price-choice input {
	position: absolute;
	inset: 0 auto auto 0;
	opacity: 0;
	pointer-events: none;
}

.webfy-price-choice > span {
	display: flex;
	min-height: 6.6rem;
	padding: 1rem;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid rgba(91, 77, 139, .13);
	border-radius: 1.15rem;
	background: rgba(255, 255, 255, .76);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.webfy-price-choice strong {
	color: #282333;
	font-size: 1rem;
	line-height: 1.35;
}

.webfy-price-choice small {
	color: #625a72;
	font-weight: 700;
}

.webfy-price-choice:hover > span {
	transform: translateY(-2px);
	border-color: rgba(105, 78, 188, .35);
}

.webfy-price-choice input:focus-visible + span {
	outline: 3px solid rgba(110, 73, 215, .35);
	outline-offset: 3px;
}

.webfy-price-choice input:checked + span {
	border-color: rgba(107, 72, 208, .58);
	background: linear-gradient(145deg, rgba(247, 243, 255, .98), rgba(255, 245, 250, .9));
	box-shadow: 0 .8rem 2rem rgba(91, 60, 173, .12), inset 0 0 0 1px rgba(255, 255, 255, .95);
}

.webfy-price-choice input:checked + span small {
	color: #5b3bb2;
}

.webfy-price-calculator__conditional,
.webfy-price-calculator__columns,
.webfy-price-calculator__actions {
	margin-top: 1.35rem;
}

.webfy-price-calculator__conditional[hidden] {
	display: none;
}

.webfy-price-calculator select {
	width: 100%;
	min-height: 3.25rem;
	padding: .7rem 2.6rem .7rem .9rem;
	border: 1px solid rgba(91, 77, 139, .18);
	border-radius: .9rem;
	background: rgba(255, 255, 255, .9);
	color: #282333;
	font: inherit;
	font-weight: 700;
}

.webfy-price-calculator select:focus-visible {
	outline: 3px solid rgba(110, 73, 215, .35);
	outline-offset: 2px;
}

.webfy-price-calculator__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
}

.webfy-price-calculator__group--compact {
	padding: 1rem;
	border: 1px solid rgba(91, 77, 139, .12);
	border-radius: 1.1rem;
	background: rgba(255, 255, 255, .55);
}

.webfy-price-calculator__toggles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
}

.webfy-price-toggle {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	gap: .65rem;
	color: #393343;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
}

.webfy-price-toggle input {
	position: absolute;
	opacity: 0;
}

.webfy-price-toggle > span {
	position: relative;
	width: 2.6rem;
	height: 1.45rem;
	flex: 0 0 auto;
	border: 1px solid rgba(81, 68, 113, .22);
	border-radius: 999px;
	background: #e9e5ef;
	transition: background-color .2s ease, border-color .2s ease;
}

.webfy-price-toggle > span::after {
	position: absolute;
	top: .18rem;
	left: .2rem;
	width: .95rem;
	height: .95rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 7px rgba(41, 34, 60, .2);
	content: "";
	transition: transform .2s ease;
}

.webfy-price-toggle input:checked + span {
	border-color: transparent;
	background: linear-gradient(135deg, #6750ba, #ef2a67);
}

.webfy-price-toggle input:checked + span::after {
	transform: translateX(1.2rem);
}

.webfy-price-toggle input:focus-visible + span {
	outline: 3px solid rgba(110, 73, 215, .35);
	outline-offset: 3px;
}

.webfy-price-calculator__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.webfy-price-calculator__actions p {
	margin: 0;
	color: #6a6275;
	font-size: .85rem;
}

.webfy-price-calculator__result {
	position: sticky;
	top: 7rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: 1px solid rgba(255, 255, 255, .92);
	border-radius: 1.65rem;
	background: linear-gradient(145deg, rgba(91, 70, 157, .96), rgba(63, 50, 112, .97) 48%, rgba(143, 40, 98, .94));
	box-shadow: 0 1.5rem 4rem rgba(51, 38, 88, .24), inset 0 1px 0 rgba(255, 255, 255, .3);
	color: #fff;
}

.webfy-price-calculator:has(.webfy-price-calculator__result[hidden]) {
	grid-template-columns: 1fr;
}

.webfy-price-calculator__result[hidden] {
	display: none;
}

.webfy-price-calculator__result .eyebrow,
.webfy-price-calculator__result h3,
.webfy-price-calculator__result p {
	color: #fff;
}

.webfy-price-calculator__result h3 {
	margin: .45rem 0 1.35rem;
	font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.webfy-price-calculator__range {
	display: grid;
	gap: .25rem;
	margin: 0 0 1.2rem;
}

.webfy-price-calculator__range span {
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.webfy-price-calculator__range strong {
	font-size: clamp(1.45rem, 2.5vw, 2.15rem);
	line-height: 1.15;
}

.webfy-price-calculator__disclaimer,
.webfy-price-calculator__result [data-price-note] {
	font-size: .88rem;
	line-height: 1.55;
}

.webfy-price-calculator__result [data-price-note] {
	padding: .75rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: .9rem;
	background: rgba(255, 255, 255, .1);
}

.webfy-price-calculator__result .button {
	width: 100%;
	justify-content: center;
	margin-top: .45rem;
}

/* The calculator can also be embedded in editorial content, where the theme's
   article typography otherwise recolours headings, strong text and links. The
   dark result panel is a self-contained component, so its foreground must stay
   white in every link state. */
.webfy-price-calculator .webfy-price-calculator__result h3,
.webfy-price-calculator .webfy-price-calculator__result [data-price-range],
.webfy-price-calculator .webfy-price-calculator__result .button,
.webfy-price-calculator .webfy-price-calculator__result .button:link,
.webfy-price-calculator .webfy-price-calculator__result .button:visited,
.webfy-price-calculator .webfy-price-calculator__result .button:hover,
.webfy-price-calculator .webfy-price-calculator__result .button:focus-visible,
.webfy-price-calculator .webfy-price-calculator__result .button:active {
	color: #fff !important;
}

/* A cikkoldali tartalomjegyzék mellett keskenyebb a rendelkezésre álló
   tartalomhasáb. Itt a becslés a mezők alatt jelenik meg, így a választási
   lehetőségek megtartják a jól olvasható szélességüket. */
.article__content .webfy-price-calculator {
	grid-template-columns: minmax(0, 1fr);
}

.article__content .webfy-price-calculator__result {
	position: static;
}

@media (max-width: 960px) {
	.webfy-price-calculator {
		grid-template-columns: 1fr;
	}

	.webfy-price-calculator__result {
		position: static;
	}

}

@media (max-width: 620px) {
	.webfy-price-calculator {
		padding: .9rem;
		border-radius: 1.35rem;
	}

	.webfy-price-calculator__choices,
	.webfy-price-calculator__columns,
	.webfy-price-calculator__toggles {
		grid-template-columns: 1fr;
	}

	.webfy-price-choice > span {
		min-height: 5.25rem;
	}

	.webfy-price-calculator__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.webfy-price-calculator__actions .button {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.webfy-price-choice > span,
	.webfy-price-toggle > span,
	.webfy-price-toggle > span::after {
		transition: none;
	}
}