/**
 * Schedule Site Visit modal — motion, CF7 layout, MoonKids visual polish.
 *
 * @package MoonKids
 */

/* ---- Dialog entrance (keep in sync with reduced-motion block below) ---- */
#mkScheduleSiteVisitModal.fade .modal-dialog {
	opacity: 0;
	transform: translateY(-1rem) scale(0.96);
	transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}

#mkScheduleSiteVisitModal.show .modal-dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	#mkScheduleSiteVisitModal.fade .modal-dialog,
	#mkScheduleSiteVisitModal.show .modal-dialog {
		transition-duration: 0.01ms;
		transform: none;
		opacity: 1;
	}
}

/* Softer, branded backdrop only when this modal is active (not other modals) */
body.modal-open:has(#mkScheduleSiteVisitModal.show) .modal-backdrop.show {
	background-color: rgba(32, 12, 58, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
	body.modal-open:has(#mkScheduleSiteVisitModal.show) .modal-backdrop.show {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* ---- Shell ---- */
#mkScheduleSiteVisitModal .mk-schedule-modal__content {
	border-radius: 1.125rem;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(64, 0, 128, 0.06),
		0 24px 48px -12px rgba(64, 0, 128, 0.28),
		0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

/* ---- Header ---- */
#mkScheduleSiteVisitModal .mk-schedule-modal__header {
	background: linear-gradient(
		135deg,
		var(--moonkids-primary, #400080) 0%,
		#2d0059 48%,
		#1a0036 100%
	);
	padding: 1.75rem 1.5rem 1.5rem;
}

@media (min-width: 576px) {
	#mkScheduleSiteVisitModal .mk-schedule-modal__header {
		padding: 2rem 2.25rem 1.75rem;
	}
}

#mkScheduleSiteVisitModal .mk-schedule-modal__header-accent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--moonkids-secondary, #f4b013) 0%,
		#ffd060 50%,
		var(--moonkids-secondary, #f4b013) 100%
	);
	opacity: 0.95;
}

#mkScheduleSiteVisitModal .mk-schedule-modal__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: var(--moonkids-primary, #400080);
	background: linear-gradient(145deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

#mkScheduleSiteVisitModal .mk-schedule-modal__subtitle {
	opacity: 0.88;
	line-height: 1.45;
	max-width: 36rem;
}

/* Keep Bootstrap's btn-close-white invert chain; a lone drop-shadow replaces it and hides the X on dark headers. */
#mkScheduleSiteVisitModal .mk-schedule-modal__close.btn-close-white {
	opacity: 0.92;
	z-index: 2;
	filter: invert(1) grayscale(100%) brightness(200%) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

#mkScheduleSiteVisitModal .mk-schedule-modal__close.btn-close-white:hover {
	opacity: 1;
	filter: invert(1) grayscale(100%) brightness(200%) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* ---- Body & form panel ---- */
#mkScheduleSiteVisitModal .mk-schedule-modal__body {
	padding: 1.5rem 1.25rem 1.75rem;
	background: linear-gradient(180deg, #fbfbfd 0%, #f4f5f9 55%, #f0f1f6 100%);
}

@media (min-width: 576px) {
	#mkScheduleSiteVisitModal .mk-schedule-modal__body {
		padding: 1.75rem 2rem 2rem;
	}
}

#mkScheduleSiteVisitModal .mk-schedule-modal__form-panel {
	background: #ffffff;
	border-radius: 0.875rem;
	padding: 1.25rem 1.25rem 1.5rem;
	box-shadow:
		0 1px 3px rgba(64, 0, 128, 0.05),
		0 8px 24px -8px rgba(64, 0, 128, 0.1);
	border: 1px solid rgba(64, 0, 128, 0.08);
}

@media (min-width: 576px) {
	#mkScheduleSiteVisitModal .mk-schedule-modal__form-panel {
		padding: 1.5rem 1.75rem 1.75rem;
	}
}

/* Conditional "Others" business name */
#mkScheduleSiteVisitModal .mk-cf7-business-other-wrap {
	margin-top: 0.25rem;
}

/* ---- CF7 grid ---- */
#mkScheduleSiteVisitModal .wpcf7 form .row.g-3 > p {
	margin: 0 !important;
}

#mkScheduleSiteVisitModal .wpcf7 form .row.g-3 br {
	display: none;
}

#mkScheduleSiteVisitModal .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

#mkScheduleSiteVisitModal .wpcf7 textarea.form-control {
	height: 150px;
	min-height: 150px;
}

/* ---- Fields ---- */
#mkScheduleSiteVisitModal .form-label {
	color: #2d2a32;
	letter-spacing: 0.01em;
}

#mkScheduleSiteVisitModal .form-control,
#mkScheduleSiteVisitModal .wpcf7-select.form-control {
	border-radius: 0.625rem;
	border: 1px solid rgba(64, 0, 128, 0.14);
	background-color: #fdfdff;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

#mkScheduleSiteVisitModal .form-control:hover,
#mkScheduleSiteVisitModal .wpcf7-select.form-control:hover {
	border-color: rgba(64, 0, 128, 0.22);
	background-color: #fff;
}

#mkScheduleSiteVisitModal .form-control:focus,
#mkScheduleSiteVisitModal .wpcf7-select.form-control:focus {
	border-color: var(--moonkids-primary, #400080);
	box-shadow: 0 0 0 0.2rem rgba(64, 0, 128, 0.18);
	background-color: #fff;
}

/* Submit */
#mkScheduleSiteVisitModal .btn-primary,
#mkScheduleSiteVisitModal input.wpcf7-submit.btn-primary {
	border: none;
	border-radius: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background: linear-gradient(
		135deg,
		var(--moonkids-primary, #400080) 0%,
		#5a1a99 45%,
		#4a1580 100%
	);
	box-shadow:
		0 4px 14px rgba(64, 0, 128, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

#mkScheduleSiteVisitModal .btn-primary:hover,
#mkScheduleSiteVisitModal input.wpcf7-submit.btn-primary:hover {
	filter: brightness(1.06);
	box-shadow:
		0 6px 20px rgba(64, 0, 128, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	transform: translateY(-1px);
}

#mkScheduleSiteVisitModal .btn-primary:active,
#mkScheduleSiteVisitModal input.wpcf7-submit.btn-primary:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#mkScheduleSiteVisitModal .btn-primary,
	#mkScheduleSiteVisitModal input.wpcf7-submit.btn-primary,
	#mkScheduleSiteVisitModal .btn-primary:hover,
	#mkScheduleSiteVisitModal input.wpcf7-submit.btn-primary:hover {
		transition: none;
		transform: none;
	}
}

/* CF7 feedback */
#mkScheduleSiteVisitModal .wpcf7-not-valid-tip {
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

#mkScheduleSiteVisitModal .wpcf7-response-output {
	margin: 1rem 0 0;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
}

#mkScheduleSiteVisitModal .wpcf7-spinner {
	margin-left: 0.5rem;
}