/* ============================================================
   ROI Estate — Kalkulačka ceny bytu (Online odhad)
   Markup i styling 1:1 dle Podklady/Online odhad ceny bytu.html
   Komponenty s prefixem .oc-* (OnlineCena).
   ============================================================ */

/* page bg — scoped na šablonu, ať nepřebije globální body */
.page-kalkulacka-ceny-bytu { background: var(--cream-50); }
body:has(.page-kalkulacka-ceny-bytu) { background: var(--cream-50); }

/* ============================================================
   STAGE — centered intro + form
   ============================================================ */
.oc-stage {
	padding-block: clamp(6rem, 12vw, 14rem) clamp(4rem, 9vw, 10rem);
}
.oc-wrap {
	max-width: 76rem;
	margin-inline: auto;
	text-align: center;
}

/* INTRO */
.oc-intro__eyebrow {
	display: inline-flex; align-items: center; gap: 1rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 var(--space-l);
}
.oc-intro__eyebrow::before,
.oc-intro__eyebrow::after { content: ""; display: inline-block; width: 3rem; height: 1px; background: color-mix(in srgb, var(--primary) 50%, transparent); }
.oc-intro__title {
	font-size: clamp(3.6rem, 1.8rem + 3vw, 6rem);
	line-height: 1.02; font-weight: 300; letter-spacing: -0.02em;
	margin: 0 0 var(--space-l);
	color: var(--base);
	text-wrap: balance;
}
.oc-intro__title em { font-style: normal; color: var(--primary); font-weight: 700; }
.oc-intro__lead {
	font-size: var(--text-l); line-height: 1.55;
	color: color-mix(in srgb, var(--base) 72%, transparent);
	max-width: 56ch; margin: 0 auto;
}

.oc-cities__heading {
	margin: var(--space-l) auto 0.8rem;
	max-width: 64rem;
	text-align: center;
	font-size: var(--text-s);
	font-weight: 500;
	color: color-mix(in srgb, var(--base) 55%, transparent);
	letter-spacing: 0.01em;
}
.oc-cities {
	list-style: none;
	margin: 0 auto var(--space-xl);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
	max-width: 64rem;
}
.oc-cities__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.4rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--base);
	background: var(--white);
	border: 1px solid color-mix(in srgb, var(--secondary) 40%, transparent);
	border-radius: var(--btn-radius);
	letter-spacing: 0.01em;
}
@media (max-width: 640px) {
	.oc-cities {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var(--gutter);
		margin-inline: calc(var(--gutter) * -1);
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 9rem), rgba(0, 0, 0, 0.35) calc(100% - 3rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 9rem), rgba(0, 0, 0, 0.35) calc(100% - 3rem), transparent);
	}
	.oc-cities::-webkit-scrollbar { display: none; }
	.oc-cities__pill {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

.oc-map {
	margin-top: 1.2rem;
	height: 28rem;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--base) 12%, transparent);
}
.oc-map__legend {
	margin: 0.8rem 0 0;
	padding: 0.8rem 1.2rem;
	border-radius: 0.6rem;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	background: color-mix(in srgb, var(--secondary) 12%, transparent);
	color: var(--base);
}
.oc-map__legend.is-ok {
	background: color-mix(in srgb, var(--primary) 10%, transparent);
	color: var(--primary);
}
.oc-map__legend.is-out {
	background: color-mix(in srgb, #d04545 10%, transparent);
	color: #b03a3a;
}

/* ============================================================
   FORM — flat card, lots of breathing room
   ============================================================ */
.oc-form {
	background: var(--white); color: var(--base);
	border-radius: calc(var(--radius) + 4px);
	border: 1px solid color-mix(in srgb, var(--base) 8%, transparent);
	box-shadow: var(--box-shadow-m);
	padding: clamp(2rem, 5vw, 6rem);
	margin-top: clamp(3rem, 6vw, 6.4rem);
	text-align: left;
}

/* ---------- STEP PANELS ---------- */
.oc-step {
	display: none;
	animation: oc-fade .35s ease;
	/* reset native fieldset chrome */
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}
.oc-step.is-active { display: block; }
@keyframes oc-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.oc-step__h {
	font-size: clamp(2.4rem, 1.6rem + 1.2vw, 3.2rem);
	font-weight: 700; color: var(--base);
	margin: 0 0 .8rem; letter-spacing: -0.01em;
	line-height: 1.15;
}
.oc-step__lead {
	font-size: var(--text-m); color: color-mix(in srgb, var(--base) 65%, transparent);
	margin: 0 0 var(--space-xxl); line-height: 1.5;
}

/* spacing between fields — generous */
.oc-fields { display: grid; gap: clamp(2.4rem, 3vw, 3.6rem); }

/* privacy notice na konci stepu chce vzdušnější odsazení od consent checkboxu / akcí */
.oc-step .re-form__privacy { margin-top: var(--space-l); }

.oc-field { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.oc-field__label {
	font-size: var(--text-m); font-weight: 700;
	color: var(--base); letter-spacing: -0.01em;
	display: flex; align-items: baseline; gap: .8rem;
	flex-wrap: wrap;
}
.oc-field__label small {
	font-weight: 500; font-size: var(--text-s);
	color: color-mix(in srgb, var(--base) 55%, transparent);
}
.oc-field__hint {
	font-size: var(--text-s); color: color-mix(in srgb, var(--base) 60%, transparent);
	line-height: 1.45;
}

.oc-input {
	width: 100%;
	padding: 1.6rem 1.8rem;
	font-family: inherit; font-size: var(--text-m);
	color: var(--base); background: var(--white);
	border: 1.5px solid color-mix(in srgb, var(--base) 14%, transparent);
	border-radius: var(--radius);
	transition: var(--transition);
}
.oc-input::placeholder { color: color-mix(in srgb, var(--base) 42%, transparent); }
.oc-input:focus {
	outline: none; border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ---------- VALIDATION ERROR STATES ---------- */
.oc-input.is-invalid,
.oc-area__input.is-invalid {
	border-color: #C8102E;
	box-shadow: 0 0 0 3px color-mix(in srgb, #C8102E 16%, transparent);
}
.oc-seg.is-invalid .oc-seg__lbl,
.oc-radios.is-invalid .oc-radio__lbl {
	border-color: color-mix(in srgb, #C8102E 60%, transparent);
}
.oc-field__err {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-s);
	color: #C8102E;
	font-weight: 600;
	margin: 0.4rem 0 0;
	line-height: 1.4;
}
.oc-field__err::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: #C8102E;
	color: var(--white);
	font-size: 1.2rem;
	font-weight: 700;
	flex-shrink: 0;
}

/* ---------- SEGMENTED (radio chips: dispozice) ---------- */
.oc-seg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: .8rem;
}
.oc-seg__item { position: relative; }
.oc-seg__item input { position: absolute; opacity: 0; pointer-events: none; }
.oc-seg__lbl {
	display: flex; align-items: center; justify-content: center;
	padding: 1.4rem 1rem;
	font-size: var(--text-m); font-weight: 600;
	color: color-mix(in srgb, var(--base) 75%, transparent);
	background: var(--white);
	border: 1.5px solid color-mix(in srgb, var(--base) 12%, transparent);
	border-radius: var(--radius);
	cursor: pointer;
	transition: var(--transition);
	text-align: center; user-select: none;
	letter-spacing: -0.01em;
}
.oc-seg__lbl:hover {
	border-color: color-mix(in srgb, var(--primary) 30%, transparent);
	color: var(--base);
}
.oc-seg__item input:checked + .oc-seg__lbl {
	background: var(--base); color: var(--white); border-color: var(--base);
}
.oc-seg__item input:focus-visible + .oc-seg__lbl {
	outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
	outline-offset: 2px;
}

/* ---------- TOGGLE chips (balkon, sklep) ---------- */
.oc-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (max-width: 480px) {
	.oc-chips { grid-template-columns: 1fr; }
}
.oc-chip__lbl > span:first-child { white-space: nowrap; }
.oc-chip { position: relative; }
.oc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.oc-chip__lbl {
	display: grid; grid-template-columns: 1fr 2.2rem;
	align-items: center; gap: 1.2rem;
	padding: 1.6rem 1.8rem;
	background: var(--white);
	border: 1.5px solid color-mix(in srgb, var(--base) 12%, transparent);
	border-radius: var(--radius);
	cursor: pointer;
	transition: var(--transition);
	font-size: var(--text-m); font-weight: 600; color: var(--base);
	letter-spacing: -0.01em;
}
.oc-chip__lbl:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.oc-chip__check {
	width: 2.2rem; height: 2.2rem; border-radius: .5rem;
	border: 1.5px solid color-mix(in srgb, var(--base) 24%, transparent);
	background: var(--white);
	display: grid; place-items: center;
	transition: var(--transition);
}
.oc-chip input:checked + .oc-chip__lbl {
	background: color-mix(in srgb, var(--primary) 6%, var(--white));
	border-color: var(--primary);
}
.oc-chip input:checked + .oc-chip__lbl .oc-chip__check {
	background: var(--primary); border-color: var(--primary);
}
.oc-chip input:checked + .oc-chip__lbl .oc-chip__check::after {
	content: ""; width: .6rem; height: 1.1rem;
	border: solid var(--white); border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-1px);
}
.oc-chip input:focus-visible + .oc-chip__lbl {
	outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
	outline-offset: 2px;
}

/* ---------- RADIO STACK (yes/no) ---------- */
.oc-radios {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 540px) { .oc-radios { grid-template-columns: 1fr; } }
.oc-radio { position: relative; }
.oc-radio input { position: absolute; opacity: 0; pointer-events: none; }
.oc-radio__lbl {
	display: grid; grid-template-columns: 2.2rem 1fr;
	align-items: center; gap: 1.2rem;
	padding: 1.6rem 1.8rem;
	background: var(--white);
	border: 1.5px solid color-mix(in srgb, var(--base) 12%, transparent);
	border-radius: var(--radius);
	cursor: pointer;
	transition: var(--transition);
	font-size: var(--text-m); font-weight: 600; color: var(--base);
	letter-spacing: -0.01em;
}
.oc-radio__lbl::before {
	content: ""; width: 2.2rem; height: 2.2rem; border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--base) 24%, transparent);
	background: var(--white);
	transition: var(--transition);
	flex-shrink: 0;
}
.oc-radio__lbl:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.oc-radio input:checked + .oc-radio__lbl {
	background: color-mix(in srgb, var(--primary) 6%, var(--white));
	border-color: var(--primary);
}
.oc-radio input:checked + .oc-radio__lbl::before {
	border-color: var(--primary); border-width: .6rem;
}

/* ---------- PRICE SLIDER ---------- */
.oc-price__head {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	margin-bottom: 1.4rem;
	flex-wrap: wrap;
}
.oc-price__val {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: clamp(2.4rem, 1.6rem + 1.2vw, 3.2rem);
	font-weight: 700; color: var(--base);
	letter-spacing: -0.02em; line-height: 1;
}
.oc-price__per {
	font-size: var(--text-s); font-family: ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: color-mix(in srgb, var(--base) 60%, transparent);
}
.oc-price__per b { color: var(--primary); font-weight: 700; }
.oc-range {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: .6rem; border-radius: 999px;
	background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--p, 50%), color-mix(in srgb, var(--base) 12%, transparent) var(--p, 50%));
	outline: none; cursor: pointer;
	margin: .6rem 0;
}
.oc-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: var(--white); border: 4px solid var(--primary);
	box-shadow: 0 4px 12px rgba(53,100,242,0.3);
	cursor: grab;
}
.oc-range::-webkit-slider-thumb:active { cursor: grabbing; }
.oc-range::-moz-range-thumb {
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: var(--white); border: 4px solid var(--primary);
	cursor: grab;
}
.oc-price__scale {
	display: flex; justify-content: space-between;
	font-size: var(--text-xs); color: color-mix(in srgb, var(--base) 55%, transparent);
	font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em;
	margin-top: .4rem;
}
.oc-price__skip {
	display: inline-flex; align-items: center; gap: .8rem;
	margin-top: 1.6rem;
	font-size: var(--text-s); color: color-mix(in srgb, var(--base) 65%, transparent);
	cursor: pointer; user-select: none;
}
.oc-price__skip input { width: 1.8rem; height: 1.8rem; accent-color: var(--primary); cursor: pointer; }

/* ---------- AREA SLIDER ---------- */
.oc-area {
	display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: end;
}
.oc-area__slider { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.oc-area__input {
	width: 11rem;
	padding: 1.4rem 1.6rem;
	font: inherit; font-size: var(--text-l); font-weight: 700;
	color: var(--base); background: var(--white);
	border: 1.5px solid var(--primary);
	border-radius: var(--radius);
	text-align: center;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: -0.01em;
}
.oc-area__input:focus {
	outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.oc-area__suffix {
	display: block; text-align: center; margin-top: .4rem;
	font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
	color: color-mix(in srgb, var(--base) 60%, transparent);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-weight: 700;
}
.oc-area__scale {
	display: flex; justify-content: space-between;
	font-size: 1.05rem; color: color-mix(in srgb, var(--base) 55%, transparent);
	font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em;
}
@media (max-width: 540px) {
	.oc-area { grid-template-columns: 1fr; }
	.oc-area__input { width: 100%; }
}

/* ---------- LEGAL CHECKBOX (newsletter opt-in soft) ---------- */
.oc-legal {
	display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.2rem;
	align-items: flex-start; position: relative;
	font-size: var(--text-s); line-height: 1.5;
	color: color-mix(in srgb, var(--base) 70%, transparent);
	cursor: pointer; user-select: none;
}
.oc-legal__box {
	width: 2.2rem; height: 2.2rem; flex-shrink: 0; margin-top: .3rem;
	border: 1.5px solid color-mix(in srgb, var(--base) 24%, transparent);
	border-radius: .5rem; background: var(--white);
	display: grid; place-items: center;
	transition: var(--transition);
	position: relative;
}
.oc-legal input { position: absolute; opacity: 0; pointer-events: none; }
.oc-legal input:checked ~ .oc-legal__box {
	background: var(--primary); border-color: var(--primary);
}
.oc-legal input:checked ~ .oc-legal__box::after {
	content: ""; width: .7rem; height: 1.2rem;
	border: solid var(--white); border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-1px);
}
.oc-legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Soft variant — newsletter opt-in */
.oc-legal--soft {
	background: color-mix(in srgb, var(--secondary) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--secondary) 55%, transparent);
	border-radius: var(--radius);
	padding: 1.4rem 1.6rem;
	font-size: var(--text-s);
	line-height: 1.55;
}
.oc-legal--soft strong { color: var(--base); font-weight: 700; }

/* Consent line under submit */
.oc-consent {
	font-size: 1.25rem;
	color: color-mix(in srgb, var(--base) 55%, transparent);
	text-align: center;
	margin: 1.6rem 0 0;
	line-height: 1.55;
}
.oc-consent a {
	color: color-mix(in srgb, var(--base) 75%, transparent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oc-consent a:hover { color: var(--primary); }

/* ---------- ACTIONS ---------- */
.oc-actions {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1.2rem; flex-wrap: wrap;
	margin-top: var(--space-xxl);
}
.oc-actions__back {
	background: transparent; border: 0; padding: .8rem 0; margin: 0;
	font: inherit; font-size: var(--text-s); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: color-mix(in srgb, var(--base) 65%, transparent);
	cursor: pointer; transition: var(--transition);
	display: inline-flex; align-items: center; gap: .8rem;
}
.oc-actions__back:hover { color: var(--base); }
.oc-actions__back[hidden] { visibility: hidden; }

/* ---------- SUCCESS ---------- */
.oc-success { text-align: center; padding: var(--space-l) 0; }
.oc-success__ico {
	width: 9rem; height: 9rem; border-radius: 50%;
	background: color-mix(in srgb, #2fa467 16%, transparent); color: #2fa467;
	display: grid; place-items: center; margin: 0 auto var(--space-l);
}
.oc-success__ico svg { width: 4.4rem; height: 4.4rem; }
.oc-success h3 { font-size: clamp(2.6rem, 1.8rem + 1.6vw, 3.6rem); font-weight: 700; color: var(--base); margin: 0 0 var(--space-m); letter-spacing: -0.01em; line-height: 1.15; }
.oc-success p { font-size: var(--text-l); color: color-mix(in srgb, var(--base) 70%, transparent); line-height: 1.55; margin: 0 auto; max-width: 54ch; }
.oc-success__note { color: color-mix(in srgb, var(--base) 50%, transparent); font-size: var(--text-m); }

/* ============================================================
   SEO CONTENT — pod formulářem (vysvětlení + FAQ)
   ============================================================ */
.oc-content {
	padding-block: clamp(2rem, 6vw, 7rem) clamp(5rem, 9vw, 10rem);
	color: var(--base);
}
.oc-content__wrap {
	max-width: 76rem;
	margin-inline: auto;
	display: grid;
	gap: clamp(3.6rem, 5vw, 5.6rem);
}
.oc-content__block,
.oc-content__faq {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.oc-content__h2 {
	font-size: clamp(2.4rem, 1.6rem + 1.4vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	color: var(--base);
}
.oc-content__block p,
.oc-content__faq p {
	font-size: var(--text-l);
	line-height: 1.6;
	color: color-mix(in srgb, var(--base) 78%, transparent);
	margin: 0;
}
.oc-content__steps,
.oc-content__bullets {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 1.2rem;
}
.oc-content__steps {
	counter-reset: oc-step;
}
.oc-content__steps li,
.oc-content__bullets li {
	position: relative;
	padding-left: 4rem;
	font-size: var(--text-m);
	line-height: 1.6;
	color: color-mix(in srgb, var(--base) 78%, transparent);
}
.oc-content__steps li strong,
.oc-content__bullets li strong {
	color: var(--base);
	font-weight: 700;
}
.oc-content__steps li::before {
	counter-increment: oc-step;
	content: counter(oc-step);
	position: absolute;
	left: 0;
	top: -.1rem;
	width: 2.8rem;
	height: 2.8rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: var(--text-s);
	font-weight: 700;
}
.oc-content__bullets li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background: var(--secondary);
}

/* ---------- FAQ ---------- */
.oc-content__faq { gap: 1rem; }
.oc-content__faq .oc-content__h2 { margin-bottom: .8rem; }
.oc-faq__item {
	background: var(--white);
	border: 1px solid color-mix(in srgb, var(--base) 10%, transparent);
	border-radius: var(--radius);
	padding: 0;
	transition: var(--transition);
}
.oc-faq__item[open] {
	border-color: color-mix(in srgb, var(--primary) 40%, transparent);
	box-shadow: var(--box-shadow-s);
}
.oc-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.6rem;
	padding: 2rem 2.4rem;
	font-size: var(--text-m);
	font-weight: 700;
	color: var(--base);
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
	line-height: 1.4;
}
.oc-faq__q::-webkit-details-marker { display: none; }
.oc-faq__q::after {
	content: "+";
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--primary) 10%, transparent);
	color: var(--primary);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	transition: var(--transition);
}
.oc-faq__item[open] .oc-faq__q::after {
	content: "−";
	background: var(--primary);
	color: var(--white);
}
.oc-faq__q:hover { color: var(--primary); }
.oc-faq__a {
	padding: 0 2.4rem 2rem;
}
.oc-faq__a p {
	font-size: var(--text-m);
	line-height: 1.6;
	color: color-mix(in srgb, var(--base) 75%, transparent);
	margin: 0;
}

/* ============================================================
   ADDRESS SUGGEST (Mapy.cz autocomplete) — naše rozšíření
   ============================================================ */
.oc-suggest-wrap { position: relative; z-index: 1500; }

.oc-suggest {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	right: 0;
	z-index: 1500;
	margin: 0;
	padding: 0.6rem;
	list-style: none;
	background: var(--white);
	border: 1px solid color-mix(in srgb, var(--base) 12%, transparent);
	border-radius: var(--radius);
	box-shadow: var(--box-shadow-l);
	max-height: 32rem;
	overflow-y: auto;
	text-align: left;
}
.oc-suggest[hidden] { display: none; }
.oc-suggest__item {
	padding: 1rem 1.2rem;
	border-radius: 0.6rem;
	cursor: pointer;
	font-size: var(--text-m);
	color: var(--base);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.oc-suggest__item:hover,
.oc-suggest__item--active {
	background: color-mix(in srgb, var(--primary) 8%, var(--white));
}
.oc-suggest__name { font-weight: 600; }
.oc-suggest__location {
	font-size: var(--text-s);
	color: color-mix(in srgb, var(--base) 60%, transparent);
}

/* ============================================================
   MOBILE TWEAKS — vše se musí vejít, čitelně, s gutterem
   ============================================================ */
@media (max-width: 640px) {
	/* Tighter form inside */
	.oc-fields { gap: 2rem; }
	.oc-input { padding: 1.3rem 1.4rem; }

	/* Intro */
	.oc-intro__eyebrow { margin-bottom: var(--space-m); font-size: 1.1rem; letter-spacing: 0.12em; }
	.oc-intro__eyebrow::before,
	.oc-intro__eyebrow::after { width: 2rem; }
	.oc-intro__title { line-height: 1.05; margin-bottom: var(--space-m); }
	.oc-intro__lead { font-size: var(--text-m); }

	/* Price head — value + per m² wrap nicely */
	.oc-price__head { gap: .4rem; margin-bottom: 1rem; }
	.oc-price__val { font-size: 2.4rem; }

	/* Area: input wraps under slider on tiny screens (already at 540px) — make sure number fits */
	.oc-area__input { font-size: var(--text-m); padding: 1.2rem 1.4rem; }

	/* Step heading & lead */
	.oc-step__h { font-size: 2.2rem; }
	.oc-step__lead { margin-bottom: var(--space-l); }

	/* Actions: stack on very small screens, primary full-width */
	.oc-actions { gap: 1rem; margin-top: var(--space-l); }
	.oc-actions .re-btn { flex: 1 0 auto; justify-content: center; }

	/* Segmented dispozice — denser grid */
	.oc-seg { grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr)); gap: .6rem; }
	.oc-seg__lbl { padding: 1.1rem .6rem; font-size: var(--text-s); }

	/* Chips: full width to avoid tiny 2-column squeeze */
	.oc-chips { grid-template-columns: 1fr; }

	/* Content section */
	.oc-content__h2 { font-size: 2.4rem; }
	.oc-content__block p,
	.oc-content__faq p { font-size: var(--text-m); }
	.oc-content__steps li,
	.oc-content__bullets li { padding-left: 3.4rem; font-size: var(--text-s); }
	.oc-content__steps li::before { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }

	/* FAQ */
	.oc-faq__q { padding: 1.6rem 1.8rem; font-size: var(--text-s); gap: 1rem; }
	.oc-faq__q::after { width: 2.4rem; height: 2.4rem; font-size: 1.8rem; }
	.oc-faq__a { padding: 0 1.8rem 1.6rem; }
	.oc-faq__a p { font-size: var(--text-s); }

	/* Success */
	.oc-success__ico { width: 7rem; height: 7rem; }
	.oc-success__ico svg { width: 3.4rem; height: 3.4rem; }
	.oc-success p { font-size: var(--text-m); }

	/* Consent line */
	.oc-consent { font-size: 1.1rem; }
}