/* ============================================================
   REGISTER INTEREST — shared form card
   Figma: 8053:10375 (desktop, 427 wide, 32 padding)
          8106:63021 (mobile, full width, 24 padding)

   Used inline in the Hero and Final CTA, and inside the navbar
   modal. Card chrome lives here; the controls themselves come from
   .masaar-input / .masaar-button in base.css.
   ============================================================ */

.masaar-form-card {
  /* Positioning context for the absolutely-positioned .wpcf7-spinner below —
     needed universally, not just for the shared form's own submit row. */
  position: relative;
  inline-size: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--masaar-white);
  color: var(--text);
}

.masaar-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.masaar-form__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.masaar-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.masaar-form__row {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.masaar-form__code {
  inline-size: 122px;
  flex: none;
}

.masaar-form__phone {
  flex: 1 1 0;
  min-inline-size: 0;
}

.masaar-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Select ------------------------------------------------- *
   Native <select> keeps keyboard and screen-reader behaviour; the
   chevron is drawn on top and the control's inline-end padding is
   widened so text never runs under it. Logical padding keeps the
   arrow on the correct side in Arabic.                            */

.masaar-select {
  position: relative;
  display: flex;
  align-items: center;
}

.masaar-select__control {
  padding-inline-end: calc(var(--space-16) + 22px + var(--space-8));
  appearance: none;
  cursor: pointer;
}

.masaar-select__chevron {
  position: absolute;
  inset-inline-end: var(--space-16);
  inline-size: 22px;
  block-size: 22px;
  color: var(--masaar-black);
  pointer-events: none;
}

/* --- Consent ------------------------------------------------ */

.masaar-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.masaar-checkbox {
  inline-size: var(--space-16);
  block-size: var(--space-16);
  margin: 0;
  flex: none;
  accent-color: var(--masaar-moss);
  border: 1px solid var(--masaar-black);
  border-radius: var(--radius-check);
}

.masaar-form__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --- Desktop ------------------------------------------------ */

@media (min-width: 768px) {
  .masaar-form-card {
    inline-size: var(--form-width);
    max-inline-size: 100%;
  }
}

@media (min-width: 1200px) {
  .masaar-form-card {
    padding: var(--space-32);
  }
}

/* --- Modal -------------------------------------------------- *
   Opened from the navbar CTA. Closing restores the previous scroll
   position (Neem, navbar annotation) — handled in navbar.js.        */

.masaar-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
}

.masaar-modal[hidden] {
  display: none;
}

.masaar-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 50, 43, 0.6);
}

.masaar-modal__dialog {
  position: relative;
  inline-size: 100%;
  max-inline-size: 427px;
  max-block-size: 90dvh;
  overflow-y: auto;
}

.masaar-modal__close {
  position: absolute;
  inset-block-start: var(--space-12);
  inset-inline-end: var(--space-12);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--masaar-black);
  cursor: pointer;
}

/* --- Radio variant (Final CTA) ------------------------------ */

.masaar-radio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
}

.masaar-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  font-weight: var(--fw-light);
  font-size: var(--fs-body-s);
  line-height: var(--lh-tight);
  color: var(--masaar-black);
}

.masaar-radio input {
  inline-size: var(--space-16);
  block-size: var(--space-16);
  margin: 0;
  accent-color: var(--masaar-moss);
}

/* --- Contact Form 7 output ----------------------------------

   CF7 renders whatever HTML the form template contains, so our layout classes
   come through unchanged and the text inputs carry .masaar-input directly via
   CF7's class: option. What needs mapping is the markup CF7 adds around them:
   a wrapper span per control, its own list markup for radios, and the theme's
   [country_code] select, which takes no class option. */

.masaar-form .wpcf7-form-control-wrap {
  display: block;
  inline-size: 100%;
}

/* The theme's country_code tag emits a bare wpcf7 select with no way to pass
   classes, so it is styled here rather than in the template. */
.masaar-form__code .wpcf7-select {
  inline-size: 100%;
  block-size: var(--control-height);
  /* No extra end padding. The hand-built select reserved 46px for our own
     chevron SVG, but CF7 renders the theme's [country_code] tag with no
     chevron beside it — so that space was held for nothing and cost the label
     most of its room. At 122px the field had 60px of text width, and the
     placeholder needs 72 in Arabic and 112 in English: truncated in both. */
  padding-inline: var(--space-16);
  text-overflow: ellipsis;
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--masaar-white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  appearance: none;
  cursor: pointer;
}

/* The head is rendered by the partial, OUTSIDE CF7's <form> — so it is not a
   flex child of .masaar-form and gets none of its 24px gap. It sat flush
   against the first field. Space it from the card instead. */
.masaar-form-card .masaar-form__head {
  margin-block-end: var(--space-24);
}

/* CF7 wraps each radio in span.wpcf7-list-item > label > input + span.
   Flatten that to the same row the hand-built form used. */
.masaar-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.masaar-form .wpcf7-list-item {
  margin: 0;
}

.masaar-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
}

/* Acceptance renders its own list markup too. */
.masaar-form__consent .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.masaar-form__consent .wpcf7-list-item label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Validation. CF7 shows a tip under the offending field and a summary under
   the form; neither is styled by default and both otherwise inherit the
   theme's red-on-white. */
.masaar-form .wpcf7-not-valid-tip {
  margin-block-start: var(--space-4);
  color: #b32d2e;
  font-size: var(--fs-body-s);
}

.masaar-form .wpcf7-response-output {
  margin: var(--space-16) 0 0;
  padding: var(--space-12) var(--space-16);
  border: 1px solid currentColor;
  border-radius: var(--radius-input);
  font-size: var(--fs-body-s);
}

/* CF7's submit is an <input type="submit">, and the theme styles bare inputs
   with its own colour — which wins over the inherited .masaar-button colour
   and rendered the label almost invisible on the dark button. State it. */
.masaar-form .wpcf7-submit {
  color: var(--masaar-white);
  -webkit-appearance: none;
  appearance: none;
}

.masaar-form .wpcf7-submit:hover,
.masaar-form .wpcf7-submit:focus-visible {
  color: var(--masaar-white);
}

/* Logical end, not physical right, so it lands on the correct side in RTL. */
.masaar-form .wpcf7-spinner {
  margin-inline-start: var(--space-8);
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Shared client form (Register interest) ------------------------------
   The client's own CF7 form (Register-interest shortcode in Masaar
   Settings), so the markup is theirs: autop <p>, .row/.col-* grid divs,
   p.ryd-field-label. Matched on CF7 tag/field names rather than the
   per-row id="…-EN"/"…-AR" ids, since those differ per language and the
   field names don't. Same pattern as arada-akala/arada-w-residence's
   .form__cf7 and arada-connected-life's register-drawer.css. */

.masaar-form--shared {
  /* Tighter than the 24px .masaar-form gap; groups add their own margin. */
  gap: var(--space-12);
}

.masaar-form--shared > p,
.masaar-form--shared .row > .col-100 > p:not(.ryd-field-label),
.masaar-form--shared .row .consent-col-100 > p {
  margin: 0;
}

/* Text / email / tel / select / textarea — same pill as .masaar-input. */
.masaar-form--shared .wpcf7-form-control.wpcf7-text,
.masaar-form--shared .wpcf7-form-control.wpcf7-email,
.masaar-form--shared .wpcf7-form-control.wpcf7-tel,
.masaar-form--shared .wpcf7-form-control.wpcf7-select,
.masaar-form--shared .wpcf7-form-control.wpcf7-textarea {
  inline-size: 100%;
  block-size: var(--control-height);
  padding-inline: var(--space-16);
  padding-block: 14px;
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--masaar-white);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.masaar-form--shared .wpcf7-form-control.wpcf7-select {
  cursor: pointer;
}

/* M3ID-20: "Country code*" was rendering as "Country c…". The field is 122
   wide (the master's size, beside a 168 phone), and at 16px padding each side
   that left 90px of text width for a label needing 92 — short by two pixels.
   Narrowing the padding on this one field buys 12px rather than widening a
   control the design fixes at 122. There is no chevron to reserve space for:
   appearance is none and nothing is drawn over it. */
.masaar-form--shared .country_code .wpcf7-select {
  padding-inline: 10px;
}

/* [country_code] has no real placeholder — its first option IS a value —
   so grey it out by matching the empty option instead of :placeholder-shown. */
.masaar-form--shared .wpcf7-form-control.wpcf7-select:has(option[value=""]:checked) {
  color: var(--placeholder);
}

.masaar-form--shared .wpcf7-form-control.wpcf7-textarea {
  block-size: 100px;
  resize: none;
}

.masaar-form--shared .wpcf7-form-control::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.masaar-form--shared .wpcf7-form-control:focus {
  border-color: var(--masaar-black);
}

/* Phone row: country code beside the number, same gap as the hand-built
   .masaar-form__row. */
.masaar-form--shared .mobile-with-countrycode {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.masaar-form--shared .mobile-with-countrycode .col-30 {
  inline-size: 122px;
  flex: none;
}

.masaar-form--shared .mobile-with-countrycode .col-70 {
  flex: 1;
  min-inline-size: 0;
}

/* --- "What are you interested in?" ---------------------------------- *
   EN uses [checkbox … exclusive] (.wpcf7-checkbox), AR uses plain [radio]
   (.wpcf7-radio) for the same field — both matched via :is() below. The
   consent checkbox is a separate [acceptance] tag (.wpcf7-acceptance). */

.masaar-form--shared .row:has(.wpcf7-checkbox, .wpcf7-radio) {
  margin-block-start: var(--space-12);
}

.masaar-form--shared .ryd-field-label {
  display: block;
  margin: 0 0 var(--space-8);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* Drawn circular to match the design, regardless of real input type. */
.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) input {
  appearance: none;
  -webkit-appearance: none;
  inline-size: var(--space-16);
  block-size: var(--space-16);
  margin: 0;
  flex: none;
  border: 1px solid var(--masaar-black);
  border-radius: 50%;
  background-color: var(--masaar-white);
  cursor: pointer;
}

.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) input:checked {
  background-image: radial-gradient(circle at center, var(--masaar-moss) 0 3.5px, transparent 4px);
}

.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) input:focus-visible {
  outline: 2px solid var(--masaar-sage);
  outline-offset: 2px;
}

/* Only 2/3/4-bedroom show. First/last option hidden via CF7's own .first/
   .last classes (AR spells 1 as a word, no leading digit to match on); the
   middle "5" option is matched by value since it does carry a digit.
   Tradeoff: .first/.last is still POSITIONAL — if the client reorders or
   adds a choice, it hides whichever option is now first/last rather than
   the intended 1BH/6BH. Accepted because there's no wording-proof AND
   reorder-proof way to catch AR's word-only "1"; revisit if the client's
   form order ever changes. */
.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) .wpcf7-list-item.first,
.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) .wpcf7-list-item.last,
.masaar-form--shared :is(.wpcf7-checkbox, .wpcf7-radio) .wpcf7-list-item:has(input[value^="5"]) {
  display: none;
}

/* Residence and the message field aren't part of this design — hidden, not
   removed, since it's the client's shared template. Both are OPTIONAL on
   the form, so hiding them can't block submission. */
.masaar-form--shared .row:has(select[name="residence"]),
.masaar-form--shared .row:has(textarea[name="your-message"]) {
  display: none;
}

/* --- Consent ---------------------------------------------------------- */

.masaar-form--shared .row:has(.wpcf7-acceptance) {
  margin-block-start: var(--space-12);
}

.masaar-form--shared .wpcf7-acceptance input[type="checkbox"] {
  inline-size: var(--space-16);
  block-size: var(--space-16);
  margin: 0;
  flex: none;
  accent-color: var(--masaar-moss);
  border: 1px solid var(--masaar-black);
  border-radius: var(--radius-check);
}

.masaar-form--shared .wpcf7-list-item-label {
  font-weight: var(--fw-light);
  font-size: var(--fs-body-s);
  line-height: var(--lh-tight);
  color: var(--text);
}

.masaar-form--shared .wpcf7-acceptance a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --- Submit ------------------------------------------------------------- */

.masaar-form--shared .row:has(.wpcf7-submit) {
  margin-block-start: var(--space-12);
  position: relative;
}

.masaar-form--shared .wpcf7-submit {
  inline-size: 100%;
  block-size: var(--control-height);
  padding-inline: var(--space-24);
  padding-block: 13px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--masaar-moss);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.masaar-form--shared .wpcf7-submit:hover,
.masaar-form--shared .wpcf7-submit:focus-visible {
  background: #0d241f;
}