/* ==========================================================================
   Időpontfoglaló űrlap-elemek ([millionhomes_contact_form])
   — szakasz-elválasztó / kártyás radio / időpont-választó.
   Csak az ezeket használó űrlapokon töltődik (l. shortcode.php).
   ========================================================================== */

/* --- Szakasz-elválasztó (számozott blokk-fejléc) --------------------------- */
.mhi-szakasz {
	margin-top: 34px;
}
.mhi-form__grid > .mhi-form__mezo:first-child .mhi-szakasz {
	margin-top: 0;
}
.mhi-szakasz__szam {
	margin: 0 0 10px;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: #141210;
}
.mhi-szakasz__cim {
	margin: 0;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #141210;
}
.mhi-szakasz__leiras {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba( 20, 18, 16, 0.6 );
}

/* --- Kártyás radio (megjelenés: kártya) ------------------------------------ */
.mhi-form.mhi-form .mhi-radio--kartya {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
	margin-top: 4px;
}
.mhi-radio--kartya .mhi-radio__opt {
	display: block;
	cursor: pointer;
}
/* A natív radio vizuálisan rejtve — a kártya maga a választó. */
.mhi-form.mhi-form .mhi-radio--kartya input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.mhi-radio__kartya-test {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 4px 8px;
	min-height: 74px;
	padding: 14px 16px;
	background: #ffffff;
	border: 1px solid rgba( 20, 18, 16, 0.15 );
	border-radius: 14px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mhi-radio__opt:hover .mhi-radio__kartya-test {
	border-color: #AF7366;
}



.mhi-radio__kartya-nev {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #141210;
}
.mhi-radio__kartya-megjegyzes {
	flex-basis: 100%;
}
.mhi-radio__kartya-ikon {
	width: 18px;
	height: 18px;
	color: #141210; /* ugyanaz, mint a név színe — hoverben is (fehér csak kijelölve) */
}
.mhi-form.mhi-form .mhi-radio--kartya input[type="radio"]:checked + .mhi-radio__kartya-test .mhi-radio__kartya-ikon {
	color: #ffffff;
}
.mhi-radio__kartya-megjegyzes {
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba( 20, 18, 16, 0.55 );
}
.mhi-form.mhi-form .mhi-radio--kartya input[type="radio"]:checked + .mhi-radio__kartya-test {
	background: #584C45;
	border-color: #584C45;
}
.mhi-form.mhi-form .mhi-radio--kartya input[type="radio"]:checked + .mhi-radio__kartya-test .mhi-radio__kartya-nev {
	color: #ffffff;
}
.mhi-form.mhi-form .mhi-radio--kartya input[type="radio"]:checked + .mhi-radio__kartya-test .mhi-radio__kartya-megjegyzes {
	color: #ffffff;
}
.mhi-form.mhi-form .mhi-radio--kartya input[type="radio"]:focus-visible + .mhi-radio__kartya-test {
	box-shadow: 0 0 0 3px rgba( 201, 165, 88, 0.35 );
}
.mhi-form.mhi-form .is-error .mhi-radio--kartya .mhi-radio__kartya-test {
	border-color: #d63638;
}

/* --- Időpont-választó (hét-navigáció + nap-rács + idősáv-panelek) ---------- */
.mhi-idopont {
	margin-top: 4px;
}
.mhi-form.mhi-form .is-error .mhi-idopont {
	padding: 10px;
	border: 1px solid #d63638;
	border-radius: 14px;
}

/* Hét-navigáció */
.mhi-idopont__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.mhi-idopont__nav-gomb {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #141210;
	background: none;
	border: 1px solid rgba( 20, 18, 16, 0.2 );
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}
.mhi-idopont__nav-gomb:hover:not([disabled]) {
	border-color: #c9a558;
}
.mhi-idopont__nav-gomb[disabled] {
	opacity: 0.35;
	cursor: default;
}
.mhi-idopont__nav-cimke {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: rgba( 20, 18, 16, 0.7 );
}

/* Nap-rács: 5 munkanap gomb + 2 „Zárva” kártya.
   Három jól elkülönülő állapot: kattintható (fehér, erős keret),
   nem választható (szürke, keret nélküli), hétvége (szaggatott). */
.mhi-idopont__napok {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 9px;
}
.mhi-idopont__nap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 12px 4px;
	background: #ffffff;
	border: 1px solid rgba( 20, 18, 16, 0.32 );
	border-radius: 12px;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
/* Hover: terrakotta háttér, fehér betűk. */
.mhi-idopont__nap:hover:not([disabled]):not(.mhi-idopont__nap--active):not(.mhi-idopont__nap--zerva) {
	background: #AF7366;
	border-color: #AF7366;
}
.mhi-idopont__nap:hover:not([disabled]):not(.mhi-idopont__nap--active):not(.mhi-idopont__nap--zerva) .mhi-idopont__nap-rovid,
.mhi-idopont__nap:hover:not([disabled]):not(.mhi-idopont__nap--active):not(.mhi-idopont__nap--zerva) .mhi-idopont__nap-szam {
	color: #ffffff;
}
.mhi-idopont__nap:hover:not([disabled]):not(.mhi-idopont__nap--active):not(.mhi-idopont__nap--zerva) .mhi-idopont__nap-honap {
	color: rgba( 255, 255, 255, 0.75 );
}
/* Nem választható (múlt nap, vagy a kvóta betelt) — szürke, lapos kártya. */
.mhi-idopont__nap[disabled] {
	background: #f0ede6;
	border-color: #f0ede6;
	cursor: default;
}
.mhi-idopont__nap[disabled] .mhi-idopont__nap-rovid,
.mhi-idopont__nap[disabled] .mhi-idopont__nap-honap {
	color: rgba( 20, 18, 16, 0.35 );
}
.mhi-idopont__nap[disabled] .mhi-idopont__nap-szam {
	color: rgba( 20, 18, 16, 0.3 );
}
.mhi-idopont__nap-rovid {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba( 20, 18, 16, 0.5 );
}
.mhi-idopont__nap-szam {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #141210;
}
.mhi-idopont__nap-honap {
	font-size: 10.5px;
	color: rgba( 20, 18, 16, 0.45 );
}
.mhi-idopont__nap--active {
	background: #584C45;
	border-color: #584C45;
}
.mhi-idopont__nap--active .mhi-idopont__nap-rovid,
.mhi-idopont__nap--active .mhi-idopont__nap-szam {
	color: #ffffff;
}
.mhi-idopont__nap--active .mhi-idopont__nap-honap {
	color: rgba( 255, 255, 255, 0.7 );
}
/* Hétvége — zárva: átlátszó, szaggatott keret. */
.mhi-idopont__nap--zerva {
	background: transparent;
	border: 1px dashed rgba( 20, 18, 16, 0.28 );
	cursor: default;
}
.mhi-idopont__nap--zerva .mhi-idopont__nap-rovid {
	color: rgba( 20, 18, 16, 0.35 );
}
.mhi-idopont__nap--zerva .mhi-idopont__nap-szam {
	color: rgba( 20, 18, 16, 0.3 );
}
.mhi-idopont__nap-zarva {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba( 20, 18, 16, 0.45 );
}

/* --- Rács: a modern űrlapokon 6 oszlop — 33/50/100 szélességek ------------- */
.mhi-form__grid {
	grid-template-columns: repeat(6, 1fr);
}
.mhi-form__mezo--50 {
	grid-column: span 3;
}
.mhi-form__mezo--33 {
	grid-column: span 2;
}

/* --- Chip-csoport / pill-radio / gyorsgombok -------------------------------- */
.mhi-chipek {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 4px;
}
.mhi-chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}
.mhi-form.mhi-form .mhi-chip input[type="checkbox"],
.mhi-form.mhi-form .mhi-chip input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.mhi-chip > span {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	background: #ffffff;
	border: 1px solid rgba( 20, 18, 16, 0.25 );
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: #141210;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mhi-chip:hover > span {
	border-color: #c9a558;
}
.mhi-form.mhi-form .mhi-chip input:checked + span {
	background: #c9a558;
	border-color: #c9a558;
	color: #141210;
}
.mhi-form.mhi-form .mhi-chip input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba( 201, 165, 88, 0.35 );
}
.mhi-chipek__szamlalo {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba( 20, 18, 16, 0.5 );
}
/* Elrejtett opciók + «Összes megjelenítése» szöveg-gomb. */
.mhi-chipek .mhi-chip--rejtett {
	display: none;
}
.mhi-chipek.mhi-chipek--mind .mhi-chip--rejtett {
	display: inline-flex;
}
.mhi-chipek__tobb {
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	color: rgba( 20, 18, 16, 0.55 );
	text-decoration: underline;
	cursor: pointer;
}
.mhi-chipek__tobb:hover {
	color: #AF7366;
}

/* --- Csúszka (értéksáv) ----------------------------------------------------- */
.mhi-csuszka {
	margin-top: 4px;
	padding: 25px;
	background: #f6f3ee;
	border-radius: 10px;
}
.mhi-csuszka__fej {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.mhi-csuszka__ertek {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #141210;
}
.mhi-csuszka__cimke {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: #AF7366;
}
.mhi-csuszka__range {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	accent-color: #AF7366;
	cursor: pointer;
}
.mhi-csuszka__skala {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	font-size: 12px;
	color: rgba( 20, 18, 16, 0.45 );
}
.mhi-chip--preset {
	padding: 9px 16px;
	background: #ffffff;
	border: 1px solid rgba( 20, 18, 16, 0.25 );
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #141210;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mhi-chip--preset:hover {
	border-color: #c9a558;
}
.mhi-chip--preset.mhi-chip--on {
	background: #c9a558;
	border-color: #c9a558;
}

/* Kiválasztott napok paneljei + idősáv-chipek */
.mhi-idopont__panelek {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}
.mhi-idopont__panel {
	padding: 16px 18px;
	background: #f6f3ee;
	border-radius: 14px;
}
.mhi-idopont__panel-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.mhi-idopont__panel-cim {
	margin: 0;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #141210;
}
.mhi-idopont__panel-torles {
	padding: 0;
	background: none;
	border: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba( 20, 18, 16, 0.5 );
	cursor: pointer;
}
.mhi-idopont__panel-torles:hover {
	color: #d63638;
}
.mhi-idopont__savok {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.mhi-idopont__sav {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #141210;
	background: #ffffff;
	border: 1px solid rgba( 20, 18, 16, 0.18 );
	border-radius: 999px;
	padding: 9px 14px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.mhi-idopont__sav:hover {
	border-color: #c9a558;
}
.mhi-idopont__sav--on {
	background: #c9a558;
	border-color: #c9a558;
}
.mhi-idopont__ures {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: rgba( 20, 18, 16, 0.5 );
}
.mhi-idopont__tipp {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba( 20, 18, 16, 0.5 );
}
.mhi-idopont__sav[disabled] {
	opacity: 0.4;
	cursor: default;
	border-color: rgba( 20, 18, 16, 0.12 );
}

/* ============================================================
   Mobil — 767px alatt
   ============================================================ */
@media ( max-width: 767px ) {
	.mhi-form__mezo--50,
	.mhi-form__mezo--33 {
		grid-column: 1 / -1;
	}
	.mhi-szakasz {
		margin-top: 26px;
	}
	.mhi-szakasz__cim {
		font-size: 24px;
	}
	.mhi-form.mhi-form .mhi-radio--kartya {
		grid-template-columns: 1fr;
	}
	.mhi-idopont__nav {
		flex-direction: column;
		gap: 8px;
	}
	.mhi-idopont__napok {
		grid-template-columns: repeat(4, 1fr);
		gap: 7px;
	}
	.mhi-idopont__nap-szam {
		font-size: 16px;
	}
	.mhi-idopont__panel {
		padding: 14px;
	}
}