/* contacts.css — "Контакты" section, from the real Figma Contacts
 * screenshot. Not one of the originally-stubbed files — added because this
 * section (title/lead form/contact info/map) didn't exist in the original
 * written spec, which explicitly said "no forms." Figma overrides that.
 * Registered in functions.php's enqueue list.
 */

.contacts-section__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px; /* TODO: confirm against Figma */
	align-items: stretch;
}

.contacts-section__title {
	color: var(--color-accent);
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 32px; /* TODO: confirm against Figma */
	margin: 0 0 16px;
}

.contacts-section__desc {
	color: var(--color-white);
	font-family: var(--font-primary);
	margin: 0 0 32px;
	line-height: 1.5;
}

/* The glowing-border lead-capture box */
.contact-form-box {
	border: 1px solid var(--color-accent);
	border-radius: 16px; /* TODO: confirm against Figma */
	padding: 32px; /* TODO: confirm against Figma */
	box-shadow: 0 0 32px rgba(64, 150, 252, 0.35); /* confirmed: glowing blue border effect shown in Figma */
	margin-bottom: 32px;
}

.contact-form-box__title {
	color: var(--color-white);
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 18px; /* TODO: confirm against Figma */
	margin: 0 0 8px;
}

.contact-form-box__subtitle {
	color: var(--color-text-muted);
	font-family: var(--font-primary);
	font-size: 14px; /* TODO: confirm against Figma */
	margin: 0 0 24px;
}

.contact-form-box__highlight {
	color: var(--color-accent);
	font-weight: 600;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 12px; /* TODO: confirm against Figma */
}

.contact-form__input {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px; /* TODO: confirm against Figma */
	padding: 12px 16px; /* TODO: confirm against Figma */
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px;
}

.contact-form__input::placeholder {
	color: var(--color-text-muted);
}

.contact-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
}

.contact-form__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: rgba(255, 255, 255, 0.68);
	font-size: 12px;
	line-height: 1.35;
}

.contact-form__consent input {
	margin-top: 2px;
	accent-color: var(--color-primary, #3b94ff);
}

.contact-form__input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.contact-form__submit {
	margin-top: 8px;
	width: 100%;
	text-align: center;
	border: none;
}

.contact-form__status {
	font-family: var(--font-primary);
	font-size: 13px;
	color: var(--color-text-muted);
	margin: 8px 0 0;
	min-height: 1em;
}

.contacts-section__info {
	display: flex;
	flex-direction: column;
	gap: 20px; /* TODO: confirm against Figma */
}

.contacts-section__info-block h4 {
	color: var(--color-accent);
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 14px; /* TODO: confirm against Figma */
	margin: 0 0 6px;
}

.contacts-section__info-block a,
.contacts-section__info-block p {
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px; /* TODO: confirm against Figma */
	text-decoration: none;
	margin: 0;
}

.contacts-section__socials {
	display: flex;
	gap: 12px;
}

.contacts-section__socials a,
.contacts-section__socials span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 11px;
	text-decoration: none;
	opacity: 1;
	transform: scale(1);
	transition: opacity 250ms ease, transform 250ms ease; /* confirmed: Icon Hover, 250ms, scale max 1.05 */
}

.contacts-section__socials a:hover {
	opacity: 0.8;
	transform: scale(1.05);
}

.contacts-section__right .ontop360-map {
	height: 100%;
	min-height: 100%;
	gap: 0;
}

.contacts-section__right .ontop360-map__frame {
	aspect-ratio: auto;
	min-height: 100%;
	height: 100%;
}

/* Yandex already renders its own route control inside the map. */
.contacts-section__right .ontop360-map__route-btn {
	display: none;
}