/* ============================================================
   AL-HABIB REAL ESTATE — REGISTER INTEREST FORM (shared popup)
   Figma: MAH Design (node 788:35535 "Register interest form")
   Reusable modal component. Prefix: .mah-rf-*
   ============================================================ */

:root {
  --rf-form-bg:    #e1ecf1;
  --rf-field-bg:   #b4d2e1;
  --rf-field-bd:   #b4d2e1;
  --rf-field-text: #16506e;
  --rf-heading:    #0c3144;
  --rf-submit-bg:  #374955;
  --rf-radius-lg:  16px;
  --rf-radius-md:  8px;
}

/* ── Overlay ───────────────────────────────────────────── */
.mah-rf-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 49, 68, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  overflow-y: auto;
}

.mah-rf-overlay.is-open { opacity: 1; visibility: visible; }

/* lock background scroll while open */
.mah-rf-no-scroll { overflow: hidden; }

/* ── Dialog ────────────────────────────────────────────── */
.mah-rf-dialog {
  width: 100%;
  max-width: 612px;
  margin: auto;
  transform: translateY(14px);
  transition: transform 0.25s ease;
}

.mah-rf-overlay.is-open .mah-rf-dialog { transform: translateY(0); }

/* ── Form card ─────────────────────────────────────────── */
.mah-rf-form {
  position: relative;
  background: var(--rf-form-bg);
  border-radius: var(--rf-radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: 'Work Sans', system-ui, sans-serif;
}

.mah-rf-form[dir="rtl"] { text-align: right; }
.mah-rf-form[dir="ltr"] { align-items: flex-start; text-align: left; }

/* ── Close button ──────────────────────────────────────── */
.mah-rf-close {
  position: absolute;
  top: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--rf-heading);
  cursor: pointer;
  transition: background 0.2s ease;
}

.mah-rf-close:hover { background: rgba(12, 49, 68, 0.08); }
.mah-rf-close svg { width: 20px; height: 20px; display: block; }
.mah-rf-form[dir="rtl"] .mah-rf-close { left: 14px; }
.mah-rf-form[dir="ltr"] .mah-rf-close { right: 14px; }

/* ── Title block ───────────────────────────────────────── */
.mah-rf-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  color: var(--rf-heading);
}

.mah-rf-title {
  margin: 0;
  font-family: '29LT Zarid', system-ui, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -1.5px;
}

.mah-rf-subtitle {
  margin: 0;
  font-family: '29LT Zarid', system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
}

/* ── Fields ────────────────────────────────────────────── */
.mah-rf-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.mah-rf-field {
  position: relative;
  width: 100%;
}

.mah-rf-input,
.mah-rf-select {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 0 16px;
  background: var(--rf-field-bg);
  border: 1px solid var(--rf-field-bd);
  border-radius: var(--rf-radius-md);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rf-field-text);
  outline: none;
  transition: border-color 0.2s ease;
}

.mah-rf-input::placeholder { color: var(--rf-field-text); opacity: 1; }
.mah-rf-input:focus,
.mah-rf-select:focus { border-color: var(--rf-field-text); }

.mah-rf-form[dir="rtl"] .mah-rf-input,
.mah-rf-form[dir="rtl"] .mah-rf-select { text-align: right; direction: rtl; }
.mah-rf-form[dir="ltr"] .mah-rf-input,
.mah-rf-form[dir="ltr"] .mah-rf-select { text-align: left; direction: ltr; }

/* select + caret */
.mah-rf-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* a select still showing its placeholder option reads as muted text */
.mah-rf-select.is-placeholder { color: var(--rf-field-text); }

.mah-rf-caret {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--rf-field-text);
  pointer-events: none;
}

.mah-rf-form[dir="rtl"] .mah-rf-select { padding-left: 48px; }
.mah-rf-form[dir="rtl"] .mah-rf-caret { left: 16px; }
.mah-rf-form[dir="ltr"] .mah-rf-select { padding-right: 48px; }
.mah-rf-form[dir="ltr"] .mah-rf-caret { right: 16px; }

/* ── Actions ───────────────────────────────────────────── */
.mah-rf-actions { width: 100%; }

.mah-rf-submit {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--rf-radius-md);
  background: var(--rf-submit-bg);
  color: #ffffff;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 47, 55, 0.05);
  transition: opacity 0.2s ease;
}

.mah-rf-submit:hover { opacity: 0.92; }

/* ── Success state ─────────────────────────────────────── */
.mah-rf-success {
  display: none;
  width: 100%;
  color: var(--rf-heading);
  font-family: '29LT Zarid', system-ui, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
}

.mah-rf-form.is-submitted .mah-rf-fields,
.mah-rf-form.is-submitted .mah-rf-actions { display: none; }
.mah-rf-form.is-submitted .mah-rf-success { display: block; }

/* ── Error state ───────────────────────────────────────── */
.mah-rf-error {
  display: none;
  width: 100%;
  margin: 0;
  color: #b00020;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}
.mah-rf-form.is-error .mah-rf-error { display: block; }

/* ── International phone (intl-tel-input) ──────────────── */
/* Make the plugin wrapper fill the field and keep digits LTR in both langs.
   Also give the caret more breathing room, and disable the plugin's built-in
   hover (which only tints the flag) so we can tint the whole button below. */
.mah-rf-field--phone .iti {
  display: block;
  width: 100%;
  --iti-arrow-padding: 10px;     /* space around the dropdown caret */
  --iti-hover-color: transparent; /* kill the flag-only hover */
}

/* Digits stay LTR; right-align them in Arabic so they sit beside the
   right-hand flag/dial-code group (positioned by JS rtlizePhone). */
.mah-rf-form[dir="ltr"] .mah-rf-phone { direction: ltr; text-align: left; }
.mah-rf-form[dir="rtl"] .mah-rf-phone { direction: ltr; text-align: right; }

/* RTL: round the flag/dial-code group on the right edge instead of the left */
.mah-rf-form[dir="rtl"] .mah-rf-field--phone .iti__selected-country {
  border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
}

/* Flag + dial-code button blends into the blue field; hover/open covers the
   WHOLE button (flag, caret and dial code) — not just the flag. */
.mah-rf-field--phone .iti__selected-country,
.mah-rf-field--phone .iti__selected-country-primary {
  /* Keep flag → caret → dial code laid out LTR so the caret's gap lands
     between the flag and caret even in Arabic (the button otherwise inherits
     RTL). The dropdown list is a sibling, so its Arabic names stay RTL. */
  direction: ltr;
}
.mah-rf-field--phone .iti__selected-country {
  background: transparent;
  border-radius: var(--rf-radius-md) 0 0 var(--rf-radius-md);
  transition: background 0.2s ease;
}
.mah-rf-field--phone .iti__selected-country:hover,
.mah-rf-field--phone .iti__selected-country[aria-expanded="true"] {
  background: rgba(12, 49, 68, 0.06);
}
.mah-rf-field--phone .iti__selected-dial-code {
  color: var(--rf-field-text);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 20px;
  margin-left: 6px;             /* gap between caret and the dial code */
}

/* Dropdown stays inline inside the field. The plugin leaves left/right unset,
   so in this RTL form it would extend off-screen to the left — pin it left:0
   under the field with a real width (the country-container is too narrow to
   anchor against). */
.mah-rf-field--phone .iti--inline-dropdown .iti__dropdown-content {
  left: 0;
  right: auto;
  width: 360px;
  max-width: 92vw;
  border: 1px solid var(--rf-field-bd);
  border-radius: var(--rf-radius-md);
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--rf-field-text);
  box-shadow: 0 8px 24px rgba(12, 49, 68, 0.18);
}
/* RTL: the country-container sits on the right (rtlizePhone), so anchor the
   dropdown to its right edge and let it extend left — staying inside the modal. */
.mah-rf-form[dir="rtl"] .mah-rf-field--phone .iti--inline-dropdown .iti__dropdown-content {
  left: auto;
  right: 0;
}
.mah-rf-field--phone .iti__search-input { font-family: inherit; color: var(--rf-field-text); }
.mah-rf-field--phone .iti__country.iti__highlight { background: var(--rf-field-bg); }
.mah-rf-field--phone .iti__dial-code { color: var(--rf-heading); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .mah-rf-overlay { padding: 16px; align-items: flex-start; }
  .mah-rf-title { font-size: 32px; }
  .mah-rf-subtitle { font-size: 18px; }
  .mah-rf-input, .mah-rf-select { font-size: 16px; }
  .mah-rf-field--phone .iti__selected-dial-code { font-size: 16px; }
}