/* =====================================================================
   Infinity Rise — Contact page
   Uses the shared design tokens (--color-*, --fs-*, --sec-* spacing).
   ===================================================================== */

/* ---------- BANNER ---------- */
.con-banner { position: relative; background-size: cover; background-position: center; color: var(--color-white);
	display: flex; align-items: center; min-height: var(--bnr-h);
	padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
.con-banner--plain { background: linear-gradient(120deg, var(--color-primary) 0%, #0a5c3c 100%); }
.con-banner__overlay { position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%); }
.con-banner__inner { position: relative; z-index: 1; }
/* H1 at weight 500 (per design). */
.con-banner__title { color: var(--color-white); font-size: var(--fs-h1); font-weight: 500; line-height: 1.08; margin: 0;
	text-shadow: 0 2px 14px rgba(0,0,0,.35); }
@media (min-width: 1025px) { .con-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .con-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .con-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .con-banner { min-height: 400px; } }

/* ---------- GET IN TOUCH ---------- */
.con-touch { background: var(--color-bg-2); }
.con-touch__grid { display: grid; grid-template-columns: 1.55fr 0.75fr; gap: 72px; align-items: start; }
/* Heading + intro span the full width (row 1), so the form and the details box
   align to the same top on row 2 (form's first field level), matching the design. */
.con-touch__head { grid-column: 1 / -1; }
.con-touch__heading { font-size: var(--fs-h2); font-weight: 500; line-height: 1.12; margin: 0 0 18px; color: var(--color-black); }
.con-touch__intro { color: #5a5a5a; font-size: 24px; line-height: 1.6; margin: 0; max-width: none; }

/* Form */
.con-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.con-form__field { margin: 0 0 26px; display: flex; flex-direction: column; }
.con-form__field--full { margin-top: 0; }
.con-form__field label { font-size: 18px; font-weight: 600; color: var(--color-black); margin: 0 0 10px; }
.con-form__field label span { color: var(--color-black); }
.con-form__field input,
.con-form__field select,
.con-form__field textarea {
	width: 100%; font-family: var(--font-primary); font-size: 16px; color: var(--color-black);
	background: var(--color-white); border: 1px solid #E4DFD5; border-radius: 4px;
	padding: 15px 16px; line-height: 1.4; transition: border-color .2s ease, box-shadow .2s ease; }
.con-form__field textarea { resize: vertical; min-height: 120px; }
.con-form__field select { appearance: none; -webkit-appearance: none; 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='%23666' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.con-form__field input::placeholder,
.con-form__field textarea::placeholder { color: #9a958c; font-size: 16px; font-weight: 400; }
.con-form__field input:focus,
.con-form__field select:focus,
.con-form__field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(6,64,42,.12); }

/* Honeypot — visually hidden but present for bots. */
.con-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.con-form__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.con-form__submit { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); border-radius: 4px; padding: 15px 40px; }
.con-form__submit:hover, .con-form__submit:focus { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white); }
.con-form__submit:disabled { opacity: .7; cursor: default; }
.con-form__status { margin: 0; font-size: 15px; }
/* Prominent full-width confirmation banner after submit. */
.con-form__status.is-ok,
.con-form__status.is-error { flex: 0 0 100%; width: 100%; margin-top: 4px; padding: 14px 18px; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.con-form__status.is-ok { color: var(--color-primary); background: #E7F1EA; border: 1px solid rgba(6, 64, 42, .25); }
.con-form__status.is-ok::before { content: "\2713\00a0\00a0"; }
.con-form__status.is-error { color: #b3261e; background: #FBEAE8; border: 1px solid rgba(179, 38, 30, .25); }

/* Per-field validation message shown under the input (collapses when empty). */
.con-form__error { margin: 8px 0 0; font-size: 14px; line-height: 1.35; font-weight: 500; color: #b3261e; }
.con-form__error:empty { display: none; }
.con-form__field input.is-invalid,
.con-form__field select.is-invalid,
.con-form__field textarea.is-invalid,
.con-select__btn.is-invalid { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, .12); }

/* Custom country dropdown — matches the contact inputs, always opens below. */
.con-select { position: relative; }
.con-select__btn {
	width: 100%; text-align: left; font-family: var(--font-primary); font-size: 16px; color: var(--color-black);
	background: var(--color-white); border: 1px solid #E4DFD5; border-radius: 4px;
	padding: 15px 40px 15px 16px; line-height: 1.4; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	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='%23666' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
	transition: border-color .2s ease, box-shadow .2s ease;
	display: flex; align-items: center;
}
.con-select__btn:focus-visible,
.con-select__btn[aria-expanded="true"] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(6, 64, 42, .12); }
.con-select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-select__value--placeholder { color: #9a958c; }

.con-select__panel {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
	display: flex; flex-direction: column; max-height: 300px;
	background: var(--color-white); border: 1px solid #E4DFD5; border-radius: 4px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}
.con-select__panel[hidden] { display: none; }
.con-select__search-wrap { flex: 0 0 auto; padding: 6px; border-bottom: 1px solid #E4DFD5; }
.con-select__search {
	width: 100%; box-sizing: border-box; font-family: var(--font-primary); font-size: 14px; color: var(--color-black);
	border: 1px solid #E4DFD5; border-radius: 4px; padding: 8px 12px 8px 32px;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a958c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 10px center;
	background-size: 14px 14px;
}
.con-select__search::placeholder { color: #9a958c; }
.con-select__search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(6, 64, 42, .12); }
.con-select__list { flex: 1 1 auto; margin: 0; padding: 6px 0; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.con-select__opt { padding: 10px 16px; font-size: 16px; line-height: 1.3; color: var(--color-black); cursor: pointer; transition: background-color .12s ease; }
.con-select__opt[hidden] { display: none; }
.con-select__opt:hover, .con-select__opt.is-active { background: var(--color-bg-1, #E5DFD3); }
.con-select__opt[aria-selected="true"] { font-weight: 600; background: var(--color-bg-2, #F6F2EF); }
.con-select__empty { padding: 14px 16px; font-size: 15px; color: #9a958c; }
.con-select__empty[hidden] { display: none; }
.con-select__flag { display: inline-block; vertical-align: middle; margin-right: 9px; position: relative; top: -1px; }

/* intl-tel-input phone field on the contact form: fill the field, layer dropdown. */
.con-form__field .iti { display: block; width: 100%; }
.con-form__field .iti__dropdown-content { z-index: 60; }
/* Compact country dropdown (search + list) at every screen size. */
.con-form__field .iti__search-input { font-size: 14px; padding: 9px 12px; }
.con-form__field .iti__country { padding: 7px 10px; font-size: 14px; }
.con-form__field .iti__country-name { font-size: 14px; }
.con-form__field .iti__dial-code { font-size: 14px; }
.con-form__field .iti__flag { transform: scale(0.9); }
/* Slightly taller search box on mobile for easier tapping. */
@media (max-width: 600px) { .con-form__field .iti__search-input { padding: 11px 12px; font-size: 15px; } }
/* Match the dial code (+971) to the input's number size — the library defaults
   it to 20px, larger than our 16px input text. */
.con-form__field .iti__selected-dial-code { font-size: 16px; font-weight: 400; }

/* Contact details card — fixed 490px height (1920 base); auto on stacked mobile. */
.con-details { background: var(--color-bg-1); padding: 40px 38px; height: 490px; }
/* Title: H5 style, weight 500. Labels: H6 style, weight 500. Values: paragraph, weight 400. */
.con-details__title { font-size: var(--fs-h5); font-weight: 500; margin: 0 0 26px; color: var(--color-black); }
.con-details__item { margin: 0 0 24px; }
.con-details__item:last-child { margin-bottom: 0; }
.con-details__icon { display: inline-block; margin: 0 0 8px; }
.con-details__label { display: block; color: var(--color-secondary); font-weight: 500; font-size: var(--fs-h6); margin: 0 0 6px; }
.con-details__value { display: block; color: var(--color-black); font-size: var(--fs-p); font-weight: 400; line-height: 1.55; }

/* ---------- MAP + LOCATION ---------- */
.con-map { position: relative; }
.con-map__embed { line-height: 0; }
/* Map section is 700px tall (1920); scales down responsively below. */
.con-map__embed iframe { display: block; width: 100%; height: 700px; border: 0; }
.con-map__card { position: absolute; top: 50%; left: var(--sec-pl); transform: translateY(-50%);
	background: var(--color-ancient); color: var(--color-black); width: 488px; max-width: calc(100% - (var(--sec-pl) * 2)); padding: 32px 34px; box-shadow: 0 20px 50px rgba(0,0,0,.15); }
/* "Our Location" & "Contact": H6 style, weight 500. Body text: paragraph style, weight 400. */
.con-map__title { font-size: var(--fs-h6); font-weight: 500; margin: 0 0 14px; }
.con-map__address { font-size: var(--fs-p); font-weight: 400; line-height: 1.6; margin: 0 0 12px; color: var(--color-black); }
.con-map__direction { display: inline-block; font-size: var(--fs-p); font-weight: 400; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; margin: 0 0 18px; }
.con-map__direction:hover { color: var(--color-secondary); }
.con-map__contact { border-top: 1px solid rgba(0,0,0,.18); padding-top: 16px; }
.con-map__contact-label { display: block; font-weight: 500; font-size: var(--fs-h6); margin: 0 0 6px; }
.con-map__contact-value { display: block; font-size: var(--fs-p); font-weight: 400; }

/* ---------- RESPONSIVE ---------- */
/* Responsive typography — 1920 base: intro 24px, labels 18px; scale down per breakpoint. */
@media (max-width: 1536px) { .con-touch__intro { font-size: 20px; } .con-form__field label { font-size: 16px; } .con-map__embed iframe { height: 640px; } }
@media (max-width: 1440px) { .con-touch__intro { font-size: 18px; } }
@media (max-width: 1280px) { .con-touch__intro { font-size: 16px; } .con-map__embed iframe { height: 560px; } }

@media (max-width: 1024px) {
	.con-touch__grid { grid-template-columns: 1fr; gap: 48px; }
	.con-details { max-width: 520px; height: auto; }
	.con-map__embed iframe { height: 480px; }
}
@media (max-width: 768px) {
	.con-form__row { grid-template-columns: 1fr; gap: 0; }
	.con-map { position: static; }
	.con-map__card { position: static; transform: none; width: auto; max-width: none; }
	.con-map__embed iframe { height: 360px; }
}
@media (max-width: 425px) {
	.con-touch__intro { font-size: 15px; }
	.con-form__field label { font-size: 15px; }
	.con-details { padding: 28px 24px; }
	.con-map__card { padding: 24px; }
}

/* Mobile: normalize the Get In Touch section to the site's 24px rhythm and align
   the banner title + heading to the site scale (banner 26, heading 22). */
@media (max-width: 600px) {
	.con-touch { padding-top: 24px !important; padding-bottom: 24px !important; }
	.con-banner__title { font-size: 26px; }
	.con-touch__heading { font-size: 22px; margin-bottom: 12px; }
	.con-touch__intro { font-size: 14px; }
	/* Tighten the gap between the intro text and the form (was 48px). */
	.con-touch__grid { gap: 24px; }
	/* Smaller, tighter form fields. */
	.con-form__field { margin-bottom: 16px; }
	.con-form__field label { font-size: 14px; margin-bottom: 6px; }
	.con-form__field input,
	.con-form__field select,
	.con-form__field textarea { padding: 11px 14px; font-size: 15px; }
	.con-form__field input::placeholder,
	.con-form__field textarea::placeholder { font-size: 15px; }
	.con-form__field textarea { min-height: 96px; }
}