/* =========================================================
   Contact Us Section — RTL 2-column layout
   Matches blockskit-health-care theme design system
   ========================================================= */

.bkhc-contact-section {
	direction: rtl;
	text-align: right;
	margin: 0;
	padding: 90px 20px;
	background:
		var(--bkhc-landing-wash-alt),
		var(--bkhc-landing-bg-alt);
	position: relative;
	overflow: hidden;
}

/* Decorative background blob */
.bkhc-contact-section::before {
	content: '';
	position: absolute;
	top: -120px;
	left: -120px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(29, 186, 158, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.bkhc-contact-inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

/* =========================================================
   RIGHT column — "We'll contact you" message
   In RTL, this is column 1 (appears on the right side)
   ========================================================= */

.bkhc-contact-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bkhc-contact-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--highlight, #1dba9e);
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 700;
	letter-spacing: 0;
	margin: 0;
}

.bkhc-contact-kicker::before {
	content: '';
	display: inline-block;
	width: 50px;
	height: 2px;
	background: var(--wp--preset--color--highlight, #1dba9e);
	flex-shrink: 0;
}

.bkhc-contact-info h2 {
	color: var(--wp--preset--color--heading, #1d243c);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.bkhc-contact-info h2 span {
	color: var(--wp--preset--color--highlight, #1dba9e);
}

.bkhc-contact-info p {
	color: var(--wp--preset--color--body, #616161);
	font-size: var(--wp--preset--font-size--medium, 16px);
	line-height: 1.8;
	margin: 0;
	max-width: 420px;
}

/* Feature cards */
.bkhc-contact-features {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
}

.bkhc-contact-feature {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: var(--wp--preset--color--pure-white, #fff);
	border: 1px solid rgba(29, 186, 158, 0.12);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(17, 24, 39, 0.04);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bkhc-contact-feature:hover {
	border-color: rgba(29, 186, 158, 0.3);
	box-shadow: 0 8px 24px rgba(29, 186, 158, 0.1);
	transform: translateX(-4px);
}

.bkhc-contact-feature-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(29, 186, 158, 0.15) 0%, rgba(29, 186, 158, 0.05) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--highlight, #1dba9e);
	flex-shrink: 0;
}

.bkhc-contact-feature-text strong {
	display: block;
	color: var(--wp--preset--color--heading, #1d243c);
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 700;
	margin-bottom: 2px;
}

.bkhc-contact-feature-text span {
	color: var(--wp--preset--color--body, #616161);
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================================
   LEFT column — Fluent Form
   In RTL, this is column 2 (appears on the left side)
   ========================================================= */

.bkhc-contact-form-wrap {
	background: var(--wp--preset--color--pure-white, #fff);
	border: 1px solid rgba(29, 186, 158, 0.14);
	border-radius: 24px;
	box-shadow:
		0 20px 60px rgba(17, 24, 39, 0.06),
		0 4px 16px rgba(29, 186, 158, 0.06);
	padding: 44px 40px;
	position: relative;
	overflow: hidden;
}

/* Accent corner strip */
.bkhc-contact-form-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
	height: 90px;
	background: linear-gradient(135deg, var(--wp--preset--color--highlight, #1dba9e) 0%, rgba(29, 186, 158, 0.4) 100%);
	border-radius: 0 24px 0 100%;
	opacity: 0.08;
}

.bkhc-contact-form-title {
	color: var(--wp--preset--color--heading, #1d243c);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	margin: 0 0 6px;
}

.bkhc-contact-form-subtitle {
	color: var(--wp--preset--color--body, #616161);
	font-size: var(--wp--preset--font-size--small, 14px);
	margin: 0 0 28px;
	line-height: 1.6;
}

/* =========================================================
   Override Fluent Form styles to match theme
   ========================================================= */

.bkhc-contact-form-wrap .ff-el-group {
	margin-bottom: 18px !important;
}

.bkhc-contact-form-wrap .ff-el-form-control,
.bkhc-contact-form-wrap input[type="text"],
.bkhc-contact-form-wrap input[type="email"],
.bkhc-contact-form-wrap input[type="tel"],
.bkhc-contact-form-wrap input[type="number"],
.bkhc-contact-form-wrap textarea {
	width: 100% !important;
	border: 1.5px solid rgba(29, 186, 158, 0.2) !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	font-size: var(--wp--preset--font-size--small, 14px) !important;
	font-family: inherit !important;
	color: var(--wp--preset--color--heading, #1d243c) !important;
	background: var(--wp--preset--color--surface, #f7f7f7) !important;
	direction: rtl !important;
	text-align: right !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
	box-shadow: none !important;
	outline: none !important;
}

.bkhc-contact-form-wrap .ff-el-form-control:focus,
.bkhc-contact-form-wrap input[type="text"]:focus,
.bkhc-contact-form-wrap input[type="email"]:focus,
.bkhc-contact-form-wrap input[type="tel"]:focus,
.bkhc-contact-form-wrap input[type="number"]:focus,
.bkhc-contact-form-wrap textarea:focus {
	border-color: var(--wp--preset--color--highlight, #1dba9e) !important;
	box-shadow: 0 0 0 3px rgba(29, 186, 158, 0.12) !important;
	background: #fff !important;
}

.bkhc-contact-form-wrap .ff-el-input--label label,
.bkhc-contact-form-wrap label {
	color: var(--wp--preset--color--heading, #1d243c) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
	display: block !important;
}

/* Submit button */
.bkhc-contact-form-wrap .ff_submit_btn_container .ff-btn,
.bkhc-contact-form-wrap button[type="submit"],
.bkhc-contact-form-wrap input[type="submit"] {
	background: linear-gradient(135deg, var(--wp--preset--color--highlight, #1dba9e) 0%, #15a389 100%) !important;
	border: none !important;
	border-radius: 10px !important;
	color: #fff !important;
	cursor: pointer !important;
	font-size: var(--wp--preset--font-size--small, 14px) !important;
	font-weight: 700 !important;
	padding: 13px 32px !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	width: 100% !important;
	letter-spacing: 0 !important;
	box-shadow: 0 4px 16px rgba(29, 186, 158, 0.28) !important;
}

.bkhc-contact-form-wrap .ff_submit_btn_container .ff-btn:hover,
.bkhc-contact-form-wrap button[type="submit"]:hover,
.bkhc-contact-form-wrap input[type="submit"]:hover {
	background: linear-gradient(135deg, #15a389 0%, #0e8a73 100%) !important;
	box-shadow: 0 8px 24px rgba(29, 186, 158, 0.4) !important;
	transform: translateY(-2px) !important;
}

/* Error & success messages */
.bkhc-contact-form-wrap .ff-errors-in-stack,
.bkhc-contact-form-wrap .error {
	color: #e53e3e !important;
	font-size: 12px !important;
	margin-top: 4px !important;
}

.bkhc-contact-form-wrap .ff-message-success {
	background: rgba(29, 186, 158, 0.08) !important;
	border: 1px solid rgba(29, 186, 158, 0.3) !important;
	border-radius: 10px !important;
	color: var(--wp--preset--color--highlight, #1dba9e) !important;
	padding: 14px 18px !important;
	font-weight: 600 !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
	.bkhc-contact-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.bkhc-contact-info {
		order: 1;
	}

	.bkhc-contact-form-wrap {
		order: 2;
		padding: 32px 24px;
	}

	.bkhc-contact-info p {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.bkhc-contact-section {
		padding: 60px 16px;
	}

	.bkhc-contact-form-wrap {
		padding: 28px 18px;
	}
}

/* =========================================================
   Top Contact Channels (Phone, WhatsApp, Instagram)
   ========================================================= */

.bkhc-contact-channels {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto 50px auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	direction: rtl;
}

.bkhc-contact-channels .instagram-channel {
	display: none;
}

.bkhc-channel-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px;
	background: var(--wp--preset--color--pure-white, #fff);
	border: 1px solid rgba(29, 186, 158, 0.12);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(17, 24, 39, 0.04);
	text-decoration: none !important;
	color: inherit;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bkhc-channel-card:hover {
	transform: translateY(-4px);
}

.bkhc-channel-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.bkhc-channel-details h3 {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px 0;
	color: var(--wp--preset--color--heading, #1d243c);
}

.bkhc-channel-val {
	font-size: 14px;
	color: var(--wp--preset--color--body, #616161);
	font-weight: 600;
	display: block;
}

.bkhc-channel-action {
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	margin-top: 6px;
	position: relative;
	transition: transform 0.3s ease;
}

.bkhc-channel-action::after {
	content: ' ←';
	margin-right: 4px;
	transition: transform 0.3s ease;
}

.bkhc-channel-card:hover .bkhc-channel-action::after {
	transform: translateX(-3px);
}

/* Phone Channel Specifics */
.phone-channel .bkhc-channel-icon {
	background: rgba(29, 186, 158, 0.1);
	color: var(--wp--preset--color--highlight, #1dba9e);
}
.phone-channel .bkhc-channel-action {
	color: var(--wp--preset--color--highlight, #1dba9e);
}
.phone-channel:hover {
	border-color: rgba(29, 186, 158, 0.4);
	box-shadow: 0 10px 24px rgba(29, 186, 158, 0.15);
}
.phone-channel:hover .bkhc-channel-icon {
	background: var(--wp--preset--color--highlight, #1dba9e);
	color: #fff;
}

/* WhatsApp Channel Specifics */
.whatsapp-channel .bkhc-channel-icon {
	background: rgba(37, 211, 102, 0.1);
	color: #25d366;
}
.whatsapp-channel .bkhc-channel-action {
	color: #25d366;
}
.whatsapp-channel:hover {
	border-color: rgba(37, 211, 102, 0.4);
	box-shadow: 0 10px 24px rgba(37, 211, 102, 0.15);
}
.whatsapp-channel:hover .bkhc-channel-icon {
	background: #25d366;
	color: #fff;
}

/* Instagram Channel Specifics */
.instagram-channel .bkhc-channel-icon {
	background: rgba(225, 48, 108, 0.1);
	color: #e1306c;
}
.instagram-channel .bkhc-channel-action {
	color: #e1306c;
}
.instagram-channel:hover {
	border-color: rgba(225, 48, 108, 0.4);
	box-shadow: 0 10px 24px rgba(225, 48, 108, 0.15);
}
.instagram-channel:hover .bkhc-channel-icon {
	background: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
	color: #fff;
}

/* Responsive Styles for Channels */
@media (max-width: 900px) {
	.bkhc-contact-channels {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 40px;
	}
}