/*
 * **********************************************************************
 * Kadence Child Theme — Contact Form Styles
 *
 * @package  KadenceChild
 * @version  0.2.1
 * @updated  2026-06-16
 * **********************************************************************
 */

/* =============================================================================
   Wrapper
   ============================================================================= */

.mah-contact-wrap {
	max-width: 680px;
	margin: 2rem 0;
}

/* =============================================================================
   Status banners
   ============================================================================= */

.mah-contact-success,
.mah-contact-error[role="alert"] {
	padding: .85rem 1.1rem;
	border-radius: 6px;
	margin-bottom: 1.25rem;
	font-size: .95rem;
	line-height: 1.4;
}

.mah-contact-success {
	background: #e6f4ec;
	border: 1px solid #a3d4b5;
	color: #1e5c36;
}

.mah-contact-error[role="alert"] {
	background: #fdecea;
	border: 1px solid #f5b8b3;
	color: #8c1d18;
}

/* =============================================================================
   Form grid
   ============================================================================= */

.mah-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
	background: #ffffff;
	padding: 2rem;
	border-radius: 8px;
}

/* Items spanning both columns */
.mah-contact-full {
	grid-column: 1 / -1;
}

/* =============================================================================
   Field wrapper
   ============================================================================= */

.mah-contact-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.1rem;
}

/* =============================================================================
   Labels
   ============================================================================= */

.mah-contact-label {
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: .3rem;
	color: #333;
}

.mah-contact-label span {
	color: #c0392b;
	margin-left: .1rem;
}

/* =============================================================================
   Inputs & textarea
   ============================================================================= */

.mah-contact-input {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: .55rem .75rem;
	font-size: 1rem;
	font-family: inherit;
	color: #222;
	transition: border-color .15s, box-shadow .15s;
}

.mah-contact-input:focus {
	outline: none;
	border-color: #2b7f4b;
	box-shadow: 0 0 0 3px rgba(43, 127, 75, .18);
}

.mah-contact-textarea {
	resize: vertical;
	min-height: 120px;
}

/* =============================================================================
   Validation states
   ============================================================================= */

.mah-contact-field--error .mah-contact-input {
	border-color: #c0392b;
}

.mah-contact-error-msg {
	font-size: .8rem;
	color: #c0392b;
	margin-top: .3rem;
}

/* =============================================================================
   Submit button
   ============================================================================= */

.mah-contact-actions {
	margin-top: .5rem;
}

.mah-contact-btn {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border: none;
	border-radius: 4px;
	padding: .65rem 1.6rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.mah-contact-btn:hover,
.mah-contact-btn:focus {
	color: var(--btn-primary-hover-text);
	outline: none;
}

/* =============================================================================
   Responsive — inline form
   ============================================================================= */

@media ( max-width: 560px ) {
	.mah-contact-form {
		grid-template-columns: 1fr;
		padding: 1.25rem;
	}

	.mah-contact-full {
		grid-column: 1;
	}
}

/* =============================================================================
   Modal — overlay
   ============================================================================= */

body.mah-modal-open {
	overflow: hidden;
}

#mah-contact-us {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

#mah-contact-us[hidden] {
	display: none;
}

.mah-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .55 );
}

/* =============================================================================
   Modal — dialog box
   ============================================================================= */

.mah-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 2rem 2rem 1.5rem;
	width: min( 640px, 94vw );
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 8px 40px rgba( 0, 0, 0, .3 );
}

.mah-modal-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
	color: #1a1a1a;
}

/* =============================================================================
   Modal — close button
   ============================================================================= */

.mah-modal-close {
	position: absolute;
	top: .75rem;
	right: .9rem;
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: .2rem .4rem;
	border-radius: 4px;
	transition: color .15s, background .15s;
}

.mah-modal-close:hover,
.mah-modal-close:focus {
	color: #111;
	background: #f0f0f0;
	outline: none;
}

/* =============================================================================
   Modal — form resets (no outer background/padding — dialog provides it)
   ============================================================================= */

.mah-modal-dialog .mah-contact-form {
	background: none;
	padding: 0;
}

/* =============================================================================
   Modal — responsive
   ============================================================================= */

@media ( max-width: 560px ) {
	.mah-modal-dialog {
		padding: 1.25rem 1rem 1rem;
		border-radius: 6px;
	}

	.mah-modal-dialog .mah-contact-form {
		grid-template-columns: 1fr;
	}

	.mah-modal-dialog .mah-contact-full {
		grid-column: 1;
	}
}