/* ===================================================================
   MOYO — Contact page · Contact Form 7 styling
   File: solvior-child/inc/pages/contact/contact.css

   Page-scoped: enqueued ONLY on the contact page by this module's
   init.php (mirrors the Academy house pattern — page CSS lives with
   its page, never global).

   Default CF7 renders plain boxes. Brand it from the logo palette:
   navy labels/submit, soft grey inputs, orange focus + hover.
   Scoped to .wpcf7 so Elementor / other forms stay untouched.
   =================================================================== */

.wpcf7 .wpcf7-form {
	--moyo-navy: #1b2a4a;
	--moyo-orange: #f15a24;
	--moyo-border: #d8dce4;
	--moyo-bg: #f7f8fa;
}

.wpcf7 .wpcf7-form p {
	margin: 0 0 1.1rem;
}

.wpcf7 .wpcf7-form label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .01em;
	color: var(--moyo-navy);
	margin-bottom: 0;
	padding-top: 1rem; /* breathing room above each field label */
}

/* Gap sits on the control's margin-top so it works whether CF7 renders the
   input as a sibling of the label OR nested inside it. */
.wpcf7 .wpcf7-form input.wpcf7-form-control,
.wpcf7 .wpcf7-form textarea.wpcf7-form-control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: .6rem;
	padding: .8rem 1rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--moyo-navy);
	background: var(--moyo-bg);
	border: 1px solid var(--moyo-border);
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.wpcf7 .wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7 .wpcf7-form textarea.wpcf7-form-control::placeholder {
	color: #9aa3b2;
}

.wpcf7 .wpcf7-form input.wpcf7-form-control:focus,
.wpcf7 .wpcf7-form textarea.wpcf7-form-control:focus {
	outline: none;
	background: #fff;
	border-color: var(--moyo-orange);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, .15);
}

.wpcf7 .wpcf7-form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

/* ---- Select dropdowns (Service / Product) ----
   Match the text inputs exactly: same box, navy text, soft-grey fill. Native
   appearance is stripped so the boxed look is consistent cross-browser; a navy
   chevron is drawn as a background SVG (right side, with room in the padding). */
.wpcf7 .wpcf7-form select.wpcf7-form-control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: .6rem;
	padding: .8rem 2.6rem .8rem 1rem; /* extra right padding for the caret */
	font-size: 1rem;
	line-height: 1.4;
	color: var(--moyo-navy);
	background-color: var(--moyo-bg);
	border: 1px solid var(--moyo-border);
	border-radius: 8px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231b2a4a' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.wpcf7 .wpcf7-form select.wpcf7-form-control:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--moyo-orange);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, .15);
}

/* ---- Custom Service/Product dropdown (.moyo-select) ----
   Built by contact.js (native <select> hidden, choice written back to it so CF7
   still submits). Fully styled + opens reliably — replaces nice-select, which
   wouldn't open inside the Elementor .tj-form. Closed control matches the text
   inputs; open panel is a branded white card. */
.wpcf7 .wpcf7-form .moyo-select {
	position: relative;
	margin-top: .6rem;
}

.wpcf7 .wpcf7-form .moyo-select__toggle {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: .8rem 2.6rem .8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--moyo-navy);
	background-color: var(--moyo-bg);
	border: 1px solid var(--moyo-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.wpcf7 .wpcf7-form .moyo-select__toggle:hover {
	border-color: #c2c8d2;
}

.wpcf7 .wpcf7-form .moyo-select.is-open .moyo-select__toggle,
.wpcf7 .wpcf7-form .moyo-select__toggle:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--moyo-orange);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, .15);
}

/* Chevron — rotates when open. */
.wpcf7 .wpcf7-form .moyo-select__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1.15rem;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--moyo-navy);
	border-bottom: 2px solid var(--moyo-navy);
	transform: rotate(45deg);
	transition: transform .15s;
	pointer-events: none;
}

.wpcf7 .wpcf7-form .moyo-select.is-open .moyo-select__toggle::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

/* Dropdown panel */
.wpcf7 .wpcf7-form .moyo-select__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--moyo-border);
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(27, 42, 74, .14);
	max-height: 260px;
	overflow-y: auto;
	opacity: 0;
	transform: scale(.98);
	transform-origin: top center;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.wpcf7 .wpcf7-form .moyo-select.is-open .moyo-select__panel {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.wpcf7 .wpcf7-form .moyo-select__option {
	list-style: none;
	line-height: 1.4;
	padding: .6rem .8rem;
	border-radius: 6px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--moyo-navy);
	cursor: pointer;
	transition: background-color .12s, color .12s;
}

.wpcf7 .wpcf7-form .moyo-select__option:hover {
	background-color: var(--moyo-bg);
	color: var(--moyo-orange);
}

.wpcf7 .wpcf7-form .moyo-select__option.is-selected {
	font-weight: 600;
	color: var(--moyo-orange);
}

/* Submit button: navy → orange on hover, auto width (not full-bleed). */
.wpcf7 .wpcf7-form input.wpcf7-submit {
	display: inline-block;
	width: auto;
	cursor: pointer;
	margin-top: 1.4rem;
	padding: .85rem 2.4rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: var(--moyo-navy);
	border: 0;
	border-radius: 8px;
	transition: background .15s, transform .05s;
}

.wpcf7 .wpcf7-form input.wpcf7-submit:hover {
	background: var(--moyo-orange);
}

.wpcf7 .wpcf7-form input.wpcf7-submit:active {
	transform: translateY(1px);
}

/* Keep the brand color through focus + the submitting/disabled cycle.
   CF7 disables the button while sending; without this the parent theme's
   focus/disabled styles wipe it to a blank/white box. */
.wpcf7 .wpcf7-form input.wpcf7-submit:focus,
.wpcf7 .wpcf7-form input.wpcf7-submit:focus-visible {
	outline: none;
	color: #fff;
	background: var(--moyo-navy);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, .25);
}

.wpcf7 .wpcf7-form input.wpcf7-submit:disabled,
.wpcf7 .wpcf7-form input.wpcf7-submit[disabled] {
	color: #fff;
	background: var(--moyo-navy);
	opacity: .65;
	cursor: wait;
}

.wpcf7 form.submitting .wpcf7-submit {
	color: #fff;
	background: var(--moyo-navy);
}

/* Validation: red field border + red inline tip. */
.wpcf7 .wpcf7-form input.wpcf7-not-valid,
.wpcf7 .wpcf7-form textarea.wpcf7-not-valid,
.wpcf7 .wpcf7-form select.wpcf7-not-valid {
	border-color: #dc3232;
}

.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
	margin-top: .3rem;
	font-size: .82rem;
	font-weight: 500;
	color: #dc3232;
}

/* Inline summary banner is hidden — the result is shown in MoyoToast
   (top-right) by contact.js, matching the footer newsletter UX. Red
   per-field tips (.wpcf7-not-valid-tip above) stay so the user still
   sees WHICH field is wrong. */
.wpcf7 .wpcf7-form .wpcf7-response-output {
	display: none;
}

.wpcf7 .wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 .6rem;
}

/* ---- Responsive: stack clean, full-width submit on phones ---- */
@media (max-width: 575px) {
	.wpcf7 .wpcf7-form p {
		margin: 0 0 .9rem;
	}

	.wpcf7 .wpcf7-form input.wpcf7-form-control,
	.wpcf7 .wpcf7-form textarea.wpcf7-form-control,
	.wpcf7 .wpcf7-form select.wpcf7-form-control {
		padding: .75rem .9rem;
		font-size: 16px; /* keep 16px — stops iOS auto-zoom on focus */
	}
	.wpcf7 .wpcf7-form select.wpcf7-form-control {
		padding-right: 2.4rem; /* keep room for the caret */
	}

	.wpcf7 .wpcf7-form textarea.wpcf7-form-control {
		min-height: 120px;
	}

	.wpcf7 .wpcf7-form input.wpcf7-submit {
		display: block;
		width: 100%;
		margin-top: 1rem;
		padding: .9rem 1rem;
	}
}