/* File: \media\com_easyenroll\css\contact.css */

/* Layout */
.contact-layout {
	display: flex;
	flex-wrap: wrap;
}
.contact-left {
	flex: 0 0 35%;
	max-width: 35%
}
.contact-right {
	flex: 0 0 65%;
	max-width: 0 0 65%;
}

/* Info card */
.contact-info-card .icon-circle {
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px; height: 80px
}
.contact-info-card .hours-table .hours-row {border-bottom: 1px solid #dce4eb}
.contact-info-card .hours-table .hours-row:last-child {border-bottom: none}

/* Form card */
.contact-form-card .form-row {
	display: flex;
	flex-wrap: wrap
}
.contact-form-card .form-col.width-50 {
	flex: 0 0 50%;
	max-width: 50%
}

/* Languages note */
.contact-form-header .languages-note {
	display: inline-flex;
	align-items: center
}
.contact-form-header .languages-note .svg-14 {
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: middle
}

/* Popular articles section - uses help.css faq-card styles */
.contact-popular-articles .section-header {
	margin-bottom: 10px
}
.contact-popular-articles .articles-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}
.contact-popular-articles .article-card {
	flex: 1 1 calc(33.333% - 8px);
	text-decoration: none
}
.contact-popular-articles .article-card .faq-card-header {
	padding: 16px 20px
}
.contact-popular-articles .article-card .faq-card-indicator {
	min-height: 50px
}
.contact-popular-articles .article-link-text {
	font-weight: 500;
	transition: opacity 0.2s ease
}
.contact-popular-articles .article-card:hover .article-link-text {
	opacity: 0.8
}

/* Help center CTA bar */
.contact-popular-articles .help-cta-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap
}
.contact-popular-articles .help-cta-btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: all 0.2s ease
}
.contact-popular-articles .help-cta-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 140, 186, 0.3)
}

/* Success state */
.contact-success .svg-48 {
	animation: pulse-success 1s ease-in-out
}
@keyframes pulse-success {
	0% {transform: scale(0.8); opacity: 0}
	50% {transform: scale(1.1)}
	100% {transform: scale(1); opacity: 1}
}

/* faq cards */
.faq-card-meta {margin-bottom: 2px}
.faq-card-content {
    flex: 0.8;
    min-width: 0;
}
.faq-tag {margin-left: -3px}

/* Button loader */
.btn-loader {
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	width: 18px; height: 18px
}
@keyframes spin {
	to {transform: rotate(360deg)}
}

/* Responsive */
@media only screen and (max-width: 800px) {
	.contact-left,
	.contact-right {
		flex: 0 0 100%;
		max-width: 100%
	}
	.contact-left {
		order: 1
	}
	.contact-right {
		order: 2
	}
	.form-actions .width-40.right {
		text-align: center;
    text-align-last: center;
		width: 100%;
	}
}
@media only screen and (max-width: 600px) {
	.contact-page-wrap {
		padding: 0 5px;
	}
	.contact-form-card .form-col.width-50 {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important
	}
	.contact-form-card .form-col.width-50:first-child {
		margin-bottom: 15px
	}
	.contact-popular-articles .article-card {
		flex: 0 0 100%
	}
	.contact-popular-articles .help-cta-bar {
		text-align: center
	}
	.contact-popular-articles .help-cta-bar > div {
		width: 100% !important;
		text-align: center !important
	}
	.contact-popular-articles .help-cta-bar > div:first-child {
		margin-bottom: 15px
	}
	.contact-form-fields .form-col {
		width: 100%;
		padding: 0 0 7px 0;
	}
	.ee-input.ee-textarea .ee-textarea-field {
		min-height: 165px;
	}
}