/* =========================================================
   CONTACT page (en/contact.html, ar/contact.html)
   Values taken from the live Elementor CSS (page 21 / 27466,
   form template 36949 / 36903).
   ========================================================= */

/* ---------------- Call Center & Customer Care ---------------- */
.contact-intro { padding: 50px 0 0; }
.contact-label {
	display: flex; align-items: center; gap: 6px; line-height: 30px; margin-bottom: 20px;
	font-family: "Marcellus", serif; font-size: 17px; font-weight: 400; color: #000; text-transform: uppercase;
}
.contact-label i { font-size: 14px; color: #000; margin-top: -10px; }
.contact-title {
	margin: -10px 0 50px;
	font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C;
}
.contact-title .brown { color: #85553A; }

.contact-info { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(0, 0, 0, .25); padding: 30px 0 50px; }
.contact-info__col { width: 100%; }
.contact-info__col:nth-child(1) { width: 16.25%; }
.contact-info__col:nth-child(2) { width: 20.356%; }
.contact-info__col:nth-child(3) { width: 39%; }
.contact-info__col:nth-child(4) { width: 24.328%; }
.contact-info__label { margin: 0; font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 18px; font-weight: 700; line-height: 1.5; color: #2C2C2C; }
.contact-info__list { margin: 0; padding: 0; list-style: none; }
.contact-info__list li { line-height: 1.5; }
.contact-info__list a, .contact-info__list span { font-family: "Marcellus", serif; font-size: 16px; font-weight: 400; color: #2C2C2C; transition: color .3s; }
.contact-info__list a:hover { color: #85553A; }

/* ---------------- Inquiries & Feedback (photo + dark card) ---------------- */
.contact-form-section { background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 100px 0; }
.contact-form-section__inner { display: flex; align-items: center; min-height: 650px; }
.contact-form-section__spacer { width: 59.474%; }
.contact-card { width: 40.482%; background-color: #2C2C2C; padding: 30px; }
.contact-card__title { margin: 0 0 20px; font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; font-weight: 500; line-height: 45px; color: #FFFFFF; }
.contact-card__text { margin: 0 0 20px; font-family: "Marcellus", serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: #FFFFFF; }
.contact-card__text a { color: #85553A; text-decoration: none; }
.contact-card__text a:hover { text-decoration: underline; }
.contact-card__text .lucky { font-family: "Lucky Beauty new", "Lucky Beauty", serif; }

/* form (Elementor form widget look: 10px column gap, underline fields on the dark card) */
.contact-form { display: flex; flex-wrap: wrap; margin: 0 -5px 10px; }
.contact-form__field { position: relative; width: 100%; padding: 0 5px; margin-bottom: 10px; }
.contact-form input, .contact-form select, .contact-form textarea {
	display: block; width: 100%; min-height: 40px; padding: 8px 16px;
	font-family: "Marcellus", serif; font-size: 14px; font-weight: 400; color: #FFFFFF;
	background-color: #2C2C2C; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .43); border-radius: 0; outline: 0;
	-webkit-appearance: none; appearance: none; transition: border-color .3s;
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255, 255, 255, .7); opacity: 1; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: #fff; }
.contact-form .is-invalid { border-bottom-color: #d9534f; }
/* select caret (the live form replaces Elementor's ::before caret with an eicon) */
.contact-form__select select {
	padding-right: 32px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.43' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
.contact-form__select select option { color: #2C2C2C; background: #fff; }
.contact-form__hp { display: none !important; }
.contact-form__error { display: block; font-family: "Marcellus", serif; font-size: 13px; color: #e57373; margin-top: 6px; }
.contact-form__error[hidden] { display: none; }
.contact-form__actions { width: 100%; padding: 0 5px; margin-bottom: 10px; }
.contact-form__submit {
	display: block; width: 100%; cursor: pointer;
	font-family: "Marcellus", serif; font-size: 16px; font-weight: 500; line-height: 1; color: #ffffff;
	background-color: #85553A; border: 0; border-radius: 3px; padding: 15px 30px; transition: background .3s, color .3s;
}
.contact-form__submit:hover, .contact-form__submit:focus { color: #ffffff; background-color: #a86124; }
.contact-form__msg { width: 100%; padding: 0 5px; margin: 0 0 10px; font-family: "Marcellus", serif; font-size: 17px; color: #FFFFFF; }
.contact-form__msg[hidden] { display: none; }

/* intl-tel-input (country flag + dial code) on the dark card */
.contact-form__phone .iti { width: 100%; --iti-arrow-color: rgba(255, 255, 255, .7); --iti-border-color: transparent; --iti-hover-color: transparent; }
.contact-form__phone .iti__selected-dial-code { color: #fff; font-family: "Marcellus", serif; font-size: 14px; }
.contact-form__phone .iti__country-container:hover button, .contact-form__phone .iti__selected-country-primary:hover { background: transparent; }
.contact-form__phone .iti__dropdown-content { --iti-border-color: #ddd; --iti-dialcode-color: #999; --iti-hover-color: #f3f0ec; --iti-text-color: #2C2C2C; background: #fff; color: #2C2C2C; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.contact-form__phone .iti__search-input { font-family: "Marcellus", serif; font-size: 14px; color: #2C2C2C; border-bottom: 1px solid #eee; }
.contact-form__phone .iti__country-name { font-family: "Marcellus", serif; }
.contact-form__phone .iti__country.iti__highlight { background: #f3f0ec; }

.contact-card__note { margin: 0; padding-top: 50px; font-family: "Marcellus", serif; font-size: 12px; font-weight: 400; line-height: 1.5; color: #FFFFFF; }
.contact-card__note a { color: #85553A; text-decoration: none; }
.contact-card__note a:hover { text-decoration: underline; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
	.contact-intro { padding: 50px 20px 0; }
	.contact-label, .contact-info__label, .contact-info__list a, .contact-info__list span { font-size: 13px; }
	.contact-card__text, .contact-card__note, .contact-form__msg { font-size: 13px; }
	.contact-form input, .contact-form select, .contact-form textarea, .contact-form__phone .iti__selected-dial-code { font-size: 13px; }
	.contact-form-section__spacer { width: 50%; }
	.contact-card { width: 48%; }
}
@media (max-width: 767px) {
	/* .container already gives the 20px phone gutter: match the form card below */
	.contact-intro { padding: 50px 0 0; }
	.contact-title { font-size: 23px; line-height: 25px; margin: -10px 0 10px; }
	.contact-title br { display: none; }
	.contact-info__col, .contact-info__col:nth-child(n) { width: 100%; margin-bottom: 10px; }
	.contact-info__col:last-child { margin-bottom: 0; }
	.contact-form-section { padding: 0; }
	.contact-form-section__inner { padding: 0; }
	.contact-form-section__spacer { display: none; }
	.contact-card { width: 100%; padding: 20px; }
	.contact-card__title { font-size: 20px; }
	.contact-card__note { padding-top: 0; }
}

/* ---------------- RTL (ar/contact.html) ---------------- */
.rtl .contact-label { font-family: "29LTAzer-Light", sans-serif; }
.rtl .contact-title { font-family: "29LTZaridDisplayVF", sans-serif; font-weight: 700; }
.rtl .contact-info__col:nth-child(3) { width: 40%; }
.rtl .contact-info__col:nth-child(4) { width: 23.328%; }
.rtl .contact-info__label { font-family: "29LTZaridDisplayVF", sans-serif; font-weight: 700; }
.rtl .contact-info__list a, .rtl .contact-info__list span { font-family: "Marcellus", serif; font-size: 17px; }
.rtl .contact-info__list--ar span { font-family: "29LTAzer-Light", sans-serif; }
.rtl .contact-card__title { font-family: "29LTZaridDisplayVF", sans-serif; font-weight: 700; }
.rtl .contact-card__text { font-family: "29LTAzer-Light", sans-serif; font-weight: 500; }
.rtl .contact-form input, .rtl .contact-form select, .rtl .contact-form textarea { font-family: "29LTAzer-Light", sans-serif; }
.rtl .contact-form__select select { padding-right: 16px; padding-left: 32px; background-position: left 12px center; }
.rtl .contact-form__submit { font-family: "Marcellus", serif; }
.rtl .contact-form__msg, .rtl .contact-form__error { font-family: "29LTAzer-Light", sans-serif; }
.rtl .contact-card__note { font-family: "29LTAzer-Light", sans-serif; }
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__country-container { left: 0 !important; right: auto !important; } /* Arabic: flag on the left (see property.js) */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__selected-country { direction: ltr; } /* flag, arrow, +966 */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__arrow { margin: 0 8px 0 6px; } /* room around the arrow, before +966 */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__dropdown-content { left: 0 !important; right: auto !important; } /* list opens under the field, not off the card */
.rtl .contact-form__phone .iti input { direction: ltr; text-align: right; }
@media (max-width: 1200px) {
	.rtl .contact-info__list a, .rtl .contact-info__list span { font-size: 13px; }
}
@media (max-width: 767px) {
	.rtl .contact-info__col:nth-child(n) { width: 100%; }
}