/*
 * Contact AR page – supplemental styles.
 * All visual decisions are handled by Tailwind utility classes in the template.
 * This file exists so the asset-enqueue system has a dedicated handle for this
 * template and can carry any page-specific overrides cleanly.
 *
 * @package Chromatic_Arabic
 */

/* Smooth scroll for the in-page anchor (#contact-form) */
html {
	scroll-behavior: smooth;
}

/* Ensure the contact form inputs honour the RTL direction */
.contact-ar-form input,
.contact-ar-form select,
.contact-ar-form textarea {
	direction: rtl;
}

.contact-ar-form input[dir="ltr"],
.contact-ar-form input[type="email"],
.contact-ar-form input[type="tel"],
.contact-ar-form .chromatic-country-code-select {
	direction: ltr;
	text-align: left;
}

/* Phone field: country code + number */
.chromatic-phone-field {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.chromatic-country-code-select {
	flex: 0 0 auto;
	min-width: 7.5rem;
	max-width: 10rem;
	background: #f8fafc;
	border: 0;
	border-radius: 0.75rem;
	padding: 0.75rem 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.dark .chromatic-country-code-select {
	background: #1e293b;
	color: #f8fafc;
}

.chromatic-phone-input {
	flex: 1 1 auto;
	min-width: 0;
}