/* ============================================================
   CONTACT
   Split out of style.css — see functions.php for the enqueue.
   ============================================================ */

/* ============================================================
   7. CONTACT
   ============================================================ */

.contact {
	background: var(--chocolate);
	padding: 63px 20px;
}

.contact__inner {
	max-width: 1170px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.contact__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* The exported envelope glyph has its own baked-in padding and a
   non-square (flat) aspect ratio — sized to match rather than
   stretched to fill the icon box. */
.contact__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
}

.contact__icon img {
	width: 83.34%;
	height: 66.67%;
}

/* Gold-foil shine text, same texture as .gradient-btn (Figma: node 181:4020). */
.contact__title {
	font-family: var(--font-display);
	font-size: 25px;
	line-height: 0.9;
	letter-spacing: -1px;
	font-feature-settings: "dlig" 1;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	background-image: url('../img/gradient-btn-bg.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.contact__form {
	position: relative;
	width: 100%;
	max-width: 1110px;
}

.contact__form-missing {
	color: var(--cream);
	opacity: 0.6;
	text-align: center;
	font-family: var(--font-body);
}

.contact__form .wpcf7-response-output {
	display: none;
}

.wpcf7 input:not([type="submit"]), .wpcf7 textarea {
	margin: 0;
}

/* ---------- tablet (Figma node 292:1488) ---------- */

@media (min-width: 768px) {
	.contact {
		padding: 104px 30px 120px;
	}

	.contact__inner {
		gap: 72px;
	}

	.contact__head {
		gap: 24px;
	}

	.contact__icon {
		width: 56px;
		height: 56px;
	}

	.contact__title {
		font-size: 40px;
	}
}

/* ---------- desktop (Figma node 181:4015) ---------- */

@media (min-width: 1200px) {
	.contact {
		padding: 120px 30px;
	}

	.contact__inner {
		gap: 47px;
	}
}

/* ---------- form rows / fields ---------- */

.contact-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-bottom: 12px;
}

.contact-form__row .wpcf7-form-control-wrap,
.contact-form__row > .miami-select,
.contact-form__row > .miami-datepicker {
	flex: 1 1 260px;
	min-width: 0;
}

.contact-form__row input[type="text"],
.contact-form__row input[type="tel"],
.contact-form__row input[type="email"],
.contact-form__row input[type="number"],
.contact__form .wpcf7-textarea {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 21px;
	border: 0;
	border-radius: 4px;
	background-color: var(--chocolate-light);
	color: var(--cream);
	font-family: var(--font-body);
	font-size: 14px;
}

.contact__form .wpcf7-textarea {
	height: 100px;
	padding: 21px;
	margin-bottom: 12px;
	resize: vertical;
}

@media (min-width: 768px) {
	.contact-form__row {
		gap: 20px 30px;
		margin-bottom: 20px;
	}

	.contact-form__row input[type="text"],
	.contact-form__row input[type="tel"],
	.contact-form__row input[type="email"],
	.contact-form__row input[type="number"],
	.contact__form .wpcf7-textarea {
		padding: 0 34px;
	}

	.contact__form .wpcf7-textarea {
		padding: 24px 34px;
		margin-bottom: 20px;
	}
}

.contact-form__row input::placeholder,
.contact__form .wpcf7-textarea::placeholder {
	color: var(--latte);
	font-size: 12px;
	opacity: 1;
}

.contact__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #e3a9a9;
	font-family: var(--font-body);
	font-size: 12px;
	bottom: -14px;
}

.contact__form .wpcf7-form-control.wpcf7-not-valid {
	box-shadow: 0 0 0 1px #b5504f inset;
}

/* ---------- custom "Тип події" select (native <select> kept for CF7, custom UI on top) ---------- */

.miami-select {
	position: relative;
}

.miami-select__native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.miami-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 21px;
	border-radius: 4px;
	background-color: var(--chocolate-light);
	cursor: pointer;
	user-select: none;
}

@media (min-width: 768px) {
	.miami-select__trigger {
		padding: 0 34px;
	}
}

.miami-select__trigger::after {
	content: '';
	flex: none;
	width: 7px;
	height: 11px;
	margin-left: 12px;
	transform: rotate(90deg);
	background: url('../img/icon-contact-chevron.svg') center / contain no-repeat;
	transition: transform 0.3s var(--ease);
}

.miami-select.is-open .miami-select__trigger::after {
	transform: rotate(-90deg);
}

.miami-select__label {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--latte);
}

.miami-select__label.is-filled {
	color: var(--cream);
}

.miami-select__list {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 10;
	margin: 0;
	padding: 8px;
	list-style: none;
	border-radius: 4px;
	background-color: var(--chocolate);
	box-shadow: 0 12px 32px rgba(11, 9, 12, 0.45);
}

.miami-select.is-open .miami-select__list {
	display: block;
}

.miami-select__item {
	position: relative;
	padding: 10px 12px 10px 30px;
	border-radius: 3px;
	color: var(--cream);
	font-family: var(--font-body);
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

.miami-select__item:hover {
	background-color: rgba(239, 230, 221, 0.08);
}

.miami-select__item.is-selected {
	background-color: rgba(239, 230, 221, 0.1);
	border: 1px solid var(--latte);
}

.miami-select__item.is-selected::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	width: 12px;
	height: 9px;
	transform: translateY(-50%);
	background-color: var(--cream);

	/* Inlined as a data URI on purpose, see .faq__chevron above for why. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%2211.9967%22 height=%228.66333%22 viewBox=%220 0 11.9967 8.66333%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath id=%22Vector%22 d=%22M11.3317 0.665L3.99833 7.99833L0.665 4.665%22 stroke=%22%234A2F22%22 stroke-width=%221.33%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%2211.9967%22 height=%228.66333%22 viewBox=%220 0 11.9967 8.66333%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath id=%22Vector%22 d=%22M11.3317 0.665L3.99833 7.99833L0.665 4.665%22 stroke=%22%234A2F22%22 stroke-width=%221.33%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------- custom "Дата події" calendar (native <input readonly> kept for CF7) ---------- */

.miami-datepicker {
	position: relative;
}

/* Selector is scoped under .miami-datepicker (not just .miami-datepicker__input
   alone) to beat the legacy `input[type="text"]{background:#f7f7f7;...}` reset
   in the parent theme: that rule's specificity (0,1,1) otherwise beats a
   single-class selector (0,1,0), and since it uses the `background` SHORTHAND,
   it silently resets background-image to `none` — which was making the
   calendar icon never render at all, leaving blank reserved padding. */
.miami-datepicker .miami-datepicker__input {
	padding-left: 56px !important;
	background-image: url('../img/icon-contact-calendar.svg');
	background-repeat: no-repeat;
	background-position: 34px center;
	background-size: 16px 16px;
	cursor: pointer;
}

.miami-datepicker::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 34px;
	width: 7px;
	height: 11px;
	transform: translateY(-50%) rotate(90deg);
	background: url('../img/icon-contact-chevron.svg') center / contain no-repeat;
	pointer-events: none;
	transition: transform 0.3s var(--ease);
}

.miami-datepicker.is-open::after {
	transform: translateY(-50%) rotate(-90deg);
}

/* ---------- Flatpickr theme override (js/vendor/flatpickr.min.js + css/vendor/flatpickr.min.css) ---------- */

/* Outer chocolate "frame" (Figma: node 334:6679) — flatpickr's own
   .flatpickr-months/.flatpickr-innerContainer are siblings, not nested
   under one shared wrapper, so the cream panel is reproduced by giving
   both of them the same background and complementary rounded corners
   (top on the header, bottom on the day grid) so they read as one
   continuous panel inset inside this chocolate padding frame. */
.flatpickr-calendar {
	background-color: var(--chocolate);
	border: 1px solid var(--latte);
	border-radius: 4px;
	padding: 4px;
	box-shadow: 0 12px 32px rgba(11, 9, 12, 0.45);
	font-family: var(--font-body);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
	display: none;
}

/* position:relative so the absolutely-positioned nav buttons below anchor
   to this 34px-tall header row, not to some taller positioned ancestor
   (flatpickr core doesn't set a position on this element itself). */
.flatpickr-months {
	position: relative;
	background-color: var(--cream);
	border-radius: 4px 4px 0 0;
	padding: 16px 12px 0;
}

/* .flatpickr-current-month (the month/year label) is itself
   position:absolute; width:75%; left:12.5% in flatpickr's core CSS,
   designed to overlay a full-width, flex:1 .flatpickr-month — so this
   must keep flatpickr's own flex:1 rather than shrink to content, or
   that percentage-based centering breaks and the label mispositions. */
.flatpickr-month {
	height: 34px;
	color: var(--black);
	fill: var(--black);
}

.flatpickr-current-month {
	padding: 0;
	font-size: 14px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: var(--black);
	font-family: var(--font-body);
	font-weight: 500;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
	appearance: none;
	background: transparent;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
	background: var(--cream-dark);
}

/* Circular nav buttons (Figma: node 334:6683/334:6686), pulled in from the
   calendar's outer edges to sit close to the centered month label instead.
   Selector is scoped under .flatpickr-months (not just .flatpickr-prev-month
   alone) to match/beat flatpickr core's own `.flatpickr-months
   .flatpickr-prev-month{...}` rule — a plain single-class selector here
   loses to that compound one, and core's left/right:0 default position
   silently survives, pinning the buttons to the outer corners. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	width: 28px;
	height: 28px;
	padding: 6px;
	box-sizing: border-box;
	transform: translateY(-50%);
	border: 1px solid var(--cream);
	border-radius: 6px;
	background-color: var(--cream-dark);
	opacity: 0.5;
	color: var(--chocolate);
	fill: var(--chocolate);
	transition: opacity 0.2s var(--ease);
}

/* Selector is doubled to (0,3,0) specificity: flatpickr's own compiled CSS
   sets `left:0`/`right:0` via `.flatpickr-prev-month.flatpickr-prev-month`
   (also (0,3,0), likely a Sass-nesting compilation artifact) — a plain
   `.flatpickr-months .flatpickr-prev-month` (0,2,0) loses to it. */
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
	left: 37px;
}

.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
	right: 37px;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
	opacity: 1;
	color: var(--chocolate);
	fill: var(--chocolate);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* No horizontal padding here: .flatpickr-days/.dayContainer below have a
   fixed pixel width set by flatpickr's own JS, and unlike .dayContainer
   this element isn't box-sizing:border-box — side padding here would add
   to its width rather than inset into it, pushing the day grid past the
   outer chocolate frame's edge instead of centering inside it. */
.flatpickr-innerContainer {
	background-color: var(--cream);
	border-radius: 0 0 4px 4px;
	padding-bottom: 16px;
}

.flatpickr-weekdays {
	margin-top: 8px;
	background: transparent;
}

span.flatpickr-weekday {
	background: transparent;
	color: var(--chocolate);
	opacity: 0.72;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
}

.flatpickr-days {
	border: 0;
}

.dayContainer {
	padding: 4px 12px 0;
}

/* Rounded-square day cells, not circles (Figma: node 334:6706 etc, rounded-md/6px) */
.flatpickr-day {
	color: var(--black);
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 14px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--cream-dark);
	border-color: var(--cream-dark);
}

/* "Today" gets a subtle filled highlight, tighter radius than a hover state */
.flatpickr-day.today {
	background: var(--cream-dark);
	border-color: var(--cream-dark);
	border-radius: 4px;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--cream-dark);
	border-color: var(--cream-dark);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
	background: var(--chocolate);
	border-color: var(--chocolate);
	border-radius: 4px;
	color: var(--cream);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--mocha);
	opacity: 0.12;
}

/* ---------- "Які послуги потрібні" checkbox pills ---------- */

/* Mobile stacks the label above the pills (Figma node 298:2719, flex-col
   gap-20); tablet/desktop put the label to the left of the pills instead
   (nodes 292:1534 / 181:4061, row gap-32) — see the media query below. */
.contact-form__services {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 21px;
	margin-bottom: 12px;
	border-radius: 4px;
	background-color: var(--chocolate-light);
}

.contact-form__services-label {
	flex: none;
	color: var(--latte);
	font-family: var(--font-body);
	font-size: 12px;
}

.contact-form__services .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.contact-form__services {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 32px;
		padding: 21px 34px;
		margin-bottom: 20px;
	}

	.contact-form__services-label {
		padding-top: 10px;
	}

	.contact-form__services .wpcf7-form-control-wrap {
		flex: 1 1 0;
		width: auto;
	}
}

.contact-form__services .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.contact-form__services .wpcf7-list-item {
	margin: 0;
	flex: 1 1 140px;
	min-width: 140px;
}

@media (min-width: 768px) {
	.contact-form__services .wpcf7-list-item {
		flex-basis: 200px;
		min-width: 200px;
	}
}

.contact-form__services .wpcf7-list-item label {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 8px 12px;
	border-radius: 4px;
	background-color: var(--chocolate);
	cursor: pointer;
}

/* Input is visually hidden (not display:none, so it stays focusable/tabbable)
   — the checkbox glyph itself is drawn as ::before on the adjacent label text,
   which sidesteps both cross-browser appearance:none quirks and any conflict
   with Contact Form 7's own default checkbox skin. */
.contact-form__services input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.contact-form__services .wpcf7-list-item-label {
	position: relative;
	padding-left: 24px;
	color: var(--cream);
	font-family: var(--font-body);
	font-size: 12px;
}

.contact-form__services .wpcf7-list-item-label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	border: 1px solid var(--cream);
	background-color: transparent;
}

.contact-form__services input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	border-color: var(--cream);
	background-color: var(--cream);
	background-image: url('../img/icon-contact-check.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
}

.contact-form__services input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
	outline: 2px solid var(--latte);
	outline-offset: 2px;
}

/* ---------- submit button (reuses .gradient-btn, see node 181:3622) ---------- */

.contact-form__submit {
	display: flex;
	justify-content: center;
	padding-top: 30px;
}

.contact-form__submit-btn {
	position: relative;
	display: inline-block;
}

/* Two different loading-spinner elements end up wired to this button: the
   parent theme's generic .ajax-loader-custom (shown by its own global.js
   AJAX handlers, unrelated to CF7) and CF7's own .wpcf7-spinner (toggled
   by CF7 itself via form.submitting, so it's always in sync with the real
   request state). Both would show at once during submit, so the generic
   one is dropped entirely in favor of CF7's. */
.contact-form__submit-btn .ajax-loader-custom {
	display: none;
}

/* visibility:hidden (unlike display:none) still reserves this element's
   layout box — it alone adds 24px width + 24px margin on each side, which
   was silently widening this wrapper well past the visible button and
   dragging the ::after arrow away from it with it. position:absolute
   removes it from flow (matching what its own top/right offset rules
   already assumed). */
.contact-form__submit-btn .wpcf7-spinner {
	position: absolute;
	margin: 0;
}

.contact-form__submit-btn::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--chocolate);
	background-image: url('../img/icon-contact-chevron.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 7px 11px;
	pointer-events: none;
}

input.gradient-btn {
	border: 0;
	cursor: pointer;
}

/* ---------- submit toasts: success / error / missing required fields ---------- */

.contact-toast {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	position: absolute;
	left: 50%;
	bottom: 92px;
	transform: translateX(-50%) translateY(12px);
	width: min(92%, 520px);
	padding: 20px 24px;
	border-radius: 4px;
	opacity: 0;
	z-index: 5;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
	box-shadow: 0 16px 40px rgba(11, 9, 12, 0.35);
}

.contact-toast.is-visible {
	display: flex;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.contact-toast__title {
	margin: 0 0 4px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
}

.contact-toast__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	opacity: 0.85;
}

.contact-toast__action {
	flex: none;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.contact-toast--success {
	background-color: var(--cream-dark);
	color: var(--chocolate);
}

.contact-toast--success .contact-toast__action {
	background-color: var(--black);
	color: var(--cream);
}

.contact-toast--error {
	background-color: #6e2323;
	color: var(--cream);
}

.contact-toast--error .contact-toast__action {
	background-color: var(--cream);
	color: var(--chocolate);
}

@media (max-width: 767px) {
	.contact-toast {
		flex-direction: column;
		align-items: flex-start;
		bottom: 76px;
	}
}