/**
 * Kapcsolat / Beszéljünk — PROMO_SPLIT_BLUE_FULLWIDTH_FORM
 *
 * Ref: design-references/dark-focal/dark-focal-form-rightside.jpg
 * Full-width primary kék szekció (felül kerekített, lent síkban a footerhez).
 * Bal oszlop: chip + H2 + subtitle + person-card + email-glass-box
 * Jobb oszlop: demo-booking white card + form dark-navy card
 *
 * Fájlnév marad `fast-path-cta.css` (enqueue compat), class-prefix `.contact`.
 */

/* ==========================================================================
   Szekció wrapper — primary kék, felül kerekített
   ========================================================================== */

.contact {
	background-color: var(--color-primary);
	color: #ffffff;
	padding: 48px var(--container-padding-mobile) 56px;
	border-top-left-radius: var(--radius-panel-lg);
	border-top-right-radius: var(--radius-panel-lg);
	position: relative;
}

@media (min-width: 768px) {
	.contact {
		padding: 64px var(--container-padding-tablet) 72px;
	}
}

@media (min-width: 1200px) {
	.contact {
		padding: 88px var(--container-padding-desktop) 96px;
	}
}

.contact__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 992px) {
	.contact__container {
		grid-template-columns: 0.85fr 1fr;
		gap: 64px;
		align-items: start;
	}
}

@media (min-width: 1200px) {
	.contact__container {
		gap: 80px;
	}
}

/* ==========================================================================
   Bal oszlop — intro + person-card + email-glass-box
   ========================================================================== */

.contact__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* Glass chip — mivel nem a .section--brand utility-t használjuk (egyedi radius),
   lokálisan állítjuk a pill szín-felülírását. */
.contact__eyebrow {
	background-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.95);
}

.contact__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: #ffffff;
	letter-spacing: -0.02em;
	margin: 0;
}

@media (min-width: 1200px) {
	.contact__title {
		font-size: 56px;
		line-height: 1.05;
	}
}

.contact__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 40ch;
}

/* ---------- Person card ---------- */

.contact__person {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.contact__person-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 22px;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.25);
	overflow: hidden; /* a foto-variánsnál a kép biztos a bubble-en belül marad */
}

/* Foto-variáns — ha a `contact-person.jpg` fel van töltve, valódi avatar
   kép kerül a bubble-be. A háttér-bubble-szín nem látszik (object-fit: cover). */
.contact__person-avatar--photo {
	background-color: transparent;
	padding: 0;
}

.contact__person-avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.contact__person-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact__person-name {
	font-size: var(--fs-body-md);
	line-height: 1.3;
	font-weight: var(--fw-medium);
	color: rgba(255, 255, 255, 0.9);
}

.contact__person-role {
	font-size: var(--fs-body-md);
	line-height: 1.3;
	font-weight: var(--fw-bold);
	color: #ffffff;
}

/* ---------- Email glass box ---------- */

.contact__email-box {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-panel);
	text-decoration: none;
	width: 100%;
	max-width: 420px;
	margin-top: 8px;
	transition: background-color var(--transition-base), transform var(--transition-base);
}

.contact__email-box:hover {
	background-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
}

.contact__email-box:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.contact__email-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #ffffff;
	color: var(--color-primary);
	font-size: 20px;
	flex-shrink: 0;
}

.contact__email-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact__email-label {
	font-size: var(--fs-body-sm);
	line-height: 1.3;
	font-weight: var(--fw-medium);
	color: rgba(255, 255, 255, 0.85);
}

.contact__email-address {
	font-size: var(--fs-body-md);
	line-height: 1.3;
	font-weight: var(--fw-bold);
	color: #ffffff;
}

/* ==========================================================================
   Jobb oszlop — demo card + form card, egymás alatt
   ========================================================================== */

.contact__right {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------- Demo booking card (fehér) ---------- */

.contact__demo {
	background-color: #ffffff;
	color: var(--color-text);
	border-radius: var(--radius-panel);
	padding: 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

@media (min-width: 768px) {
	.contact__demo {
		padding: 32px;
	}
}

.contact__demo-title {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0;
}

.contact__demo-text {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

.contact__demo-cta {
	margin-top: 4px;
}

/* ---------- Form card (sötét navy) ---------- */

/* A CF7 a `<form>` elemre rakja a `.contact__form` osztályt (Sprint C). Mind
   a `<form>`, mind a CF7 wrap (`.contact__form-wrap`) ezt a kártya-stílust kapja. */
.contact__form-wrap,
.contact__form,
.wpcf7-form.contact__form {
	background-color: var(--color-text);
	color: #ffffff;
	border-radius: var(--radius-panel);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}

@media (min-width: 768px) {
	.contact__form-wrap,
	.contact__form,
	.wpcf7-form.contact__form {
		padding: 32px;
	}
}

/* Ha a wrap belül CF7 form-ot tartalmaz, a CF7 form maga ne kapjon külön
   kártya-stílust (különben dupla padding lenne). */
.contact__form-wrap .wpcf7,
.contact__form-wrap .wpcf7-form,
.contact__form-wrap .wpcf7-form.contact__form {
	background: transparent;
	padding: 0;
	border-radius: 0;
	margin: 0;
}

.contact__form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact__form-fallback {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	padding: 16px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-input);
}

.contact__form-fallback strong {
	color: #ffffff;
	font-weight: var(--fw-bold);
}

.contact__form-title {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-bold);
	color: #ffffff;
	margin: 0;
}

.contact__form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 600px) {
	.contact__form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.contact__field--full {
		grid-column: 1 / -1;
	}
}

.contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.contact__label {
	font-size: var(--fs-body-sm);
	line-height: 1.3;
	font-weight: var(--fw-medium);
	color: rgba(255, 255, 255, 0.85);
}

/* CF7 a form-tag-eket `<span class="wpcf7-form-control-wrap">` wrapper-be
   teszi. Ezeket nullázzuk, hogy a `.contact__input` / `.contact__select`
   közvetlenül a `.contact__field` flex-itemje legyen. */
.contact__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact__input,
.contact__select,
.contact__textarea {
	width: 100%;
	padding: 12px 16px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-input);
	color: #ffffff;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	font-family: inherit;
	transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.contact__textarea {
	resize: vertical;
	min-height: 120px;
}

/* Select — saját chevron ikon (FA helyett SVG, hogy a font-betöltéstől
   független legyen a megjelenés). */
.contact__select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 44px;
	cursor: pointer;
}

.contact__select option {
	background-color: var(--color-text);
	color: #ffffff;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.contact__input:hover,
.contact__select:hover,
.contact__textarea:hover {
	border-color: rgba(255, 255, 255, 0.28);
}

.contact__input:focus,
.contact__select:focus,
.contact__textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	background-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 0 3px rgba(13, 132, 252, 0.25);
}

/* ---------- GDPR — CF7 [acceptance] form-tag (Sprint C) ----------
   CF7 markup: <span class="wpcf7-form-control-wrap"><span class="wpcf7-form-control wpcf7-acceptance">
     <span class="wpcf7-list-item">
       <label><input type="checkbox" name="gdpr"><span class="wpcf7-list-item-label">…label…</span></label>
     </span>
   </span></span>
*/

.contact__field--gdpr {
	flex-direction: column;
	gap: 8px;
}

.contact__field--gdpr .wpcf7-form-control.wpcf7-acceptance,
.contact__field--gdpr .wpcf7-list-item {
	margin: 0;
	padding: 0;
	display: block;
}

.contact__field--gdpr .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	color: rgba(255, 255, 255, 0.85);
	font-weight: var(--fw-medium);
}

.contact__field--gdpr input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 2px 0 0 0;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.08);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base);
	position: relative;
}

.contact__field--gdpr input[type="checkbox"]:hover {
	border-color: rgba(255, 255, 255, 0.6);
}

.contact__field--gdpr input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.contact__field--gdpr input[type="checkbox"]:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.contact__field--gdpr input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.contact__field--gdpr a {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.contact__field--gdpr a:hover {
	color: var(--color-primary);
}

/* ---------- Submit gomb — primary kék full-width ---------- */

.contact__submit {
	background-color: var(--color-primary);
	color: #ffffff;
	padding: 16px 24px;
	border: none;
	border-radius: var(--radius-button);
	font-size: var(--fs-body-md);
	line-height: 1;
	font-weight: var(--fw-bold);
	font-family: inherit;
	cursor: pointer;
	width: 100%;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--transition-base), transform var(--transition-base);
}

.contact__submit::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 250%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #ffffff;
	transform: translate(-50%, 50%) scale(0);
	transform-origin: 50% 50%;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: -1;
}

.contact__submit:hover::before {
	transform: translate(-50%, 50%) scale(1);
}

.contact__submit:hover {
	color: #0D84FC;
	transform: translateY(-1px);
}

.contact__submit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* ---------- Submit submitting-state (Sprint C) ---------- */

.contact.is-submitting .contact__submit {
	opacity: 0.7;
	cursor: progress;
	transform: none;
}

.contact.is-submitting .contact__submit:hover {
	transform: none;
}

.contact.is-submitting .contact__submit:hover::before {
	transform: translate(-50%, 50%) scale(0);
}

/* ---------- CF7 spinner — saját stílus a gomb mellett (Sprint C) ---------- */
/* CF7 markup: <span class="wpcf7-spinner"></span> a submit-tel egy szülőben */

.contact .wpcf7-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 0 12px;
	vertical-align: middle;
	background: none;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	animation: contact-spin 0.7s linear infinite;
	animation-play-state: paused;
}

.contact .wpcf7-form.submitting .wpcf7-spinner,
.contact.is-submitting .wpcf7-spinner {
	opacity: 1;
	visibility: visible;
	animation-play-state: running;
}

@keyframes contact-spin {
	to {
		transform: rotate(360deg);
	}
}

/* CF7 a submit-et egy `<p>`-be teszi (vagy közvetlenül a form-ba, ha
   `wpcf7_autop_or_not` filter false-ra állítva — Sprint C). Mindkét esetre
   ad-hoc rendezés a spinner-nek. */
.contact .wpcf7-form > p:has(.contact__submit) {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ---------- CF7 validáció-hibák — piros állapot (Sprint C) ---------- */

.contact__form-wrap .wpcf7-not-valid {
	border-color: var(--color-error) !important;
	box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.18);
}

.contact__form-wrap .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.3);
}

.contact__form-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	color: var(--color-error);
}

.contact__form-wrap .wpcf7-list-item.wpcf7-not-valid label {
	color: var(--color-error);
}

.contact__form-wrap .wpcf7-list-item.wpcf7-not-valid input[type="checkbox"] {
	border-color: var(--color-error);
	box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.18);
}

/* CF7 form-szintű response-üzenet (alul, submit után). */
.contact__form-wrap .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-input);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	border: 1px solid transparent;
}

.contact__form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact__form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.contact__form-wrap .wpcf7 form.failed .wpcf7-response-output,
.contact__form-wrap .wpcf7 form.aborted .wpcf7-response-output,
.contact__form-wrap .wpcf7 form.spam .wpcf7-response-output {
	color: #ffffff;
	background-color: var(--color-error-bg);
	border-color: var(--color-error);
}

.contact__form-wrap .wpcf7 form.sent .wpcf7-response-output {
	color: #ffffff;
	background-color: rgba(13, 132, 252, 0.18);
	border-color: var(--color-primary);
}

/* ---------- Toast — szekció jobb-alsó sarkában (Sprint C) ---------- */

.contact__toast {
	position: absolute;
	right: 16px;
	bottom: 16px;
	max-width: 360px;
	padding: 14px 18px;
	border-radius: var(--radius-input);
	background-color: var(--color-error);
	color: #ffffff;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base);
	z-index: 10;
}

.contact__toast.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

@media (max-width: 599px) {
	.contact__toast {
		left: 16px;
		right: 16px;
		max-width: none;
	}
}

/* ---------- Honeypot — rejtett bot-csapda ---------- */

.contact__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}