/* WS Form dressed as the mockup's forms (site.css: .git-form, .form-grid, .enq, .sf, .field, .uline, .check).
   The forms come from forms/*.json: wrapper classes .sf / .field / .ah-check / .ah-actions,
   inputs .uline, submit .btn.btn--gold, form classes .ah-wsf--row / --grid / --stack. */

.ah-wsf [hidden] { display: none !important; }

/* Reset WS Form's own skin inside our forms */
.ah-wsf.wsf-form { width: 100%; font: inherit; color: inherit; background: transparent; }
.ah-wsf.wsf-form fieldset.wsf-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.ah-wsf.wsf-form .wsf-sections,
.ah-wsf.wsf-form .wsf-fields { margin: 0 !important; }
.ah-wsf.wsf-form .wsf-tile { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; flex: none !important; }
.ah-wsf.wsf-form .wsf-sections, .ah-wsf.wsf-form fieldset.wsf-section.wsf-tile { display: block; width: 100% !important; }

/* Labels (.sf > label / .lbl) */
.ah-wsf.wsf-form .wsf-field-wrapper > .wsf-label {
  display: block; margin: 0 0 4px; padding: 0;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
  color: var(--on-ink-muted);
}
.ah-wsf.wsf-form .field > .wsf-label { color: var(--muted); }

/* Underline fields (.uline) */
.ah-wsf.wsf-form .wsf-field.uline,
.ah-wsf.wsf-form select.wsf-field.uline {
  width: 100%; height: 44px; margin: 0; padding: 0 28px 0 0;
  border: 0; border-bottom: 1px solid var(--gold); border-radius: 0; box-shadow: none !important;
  background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: normal;
  appearance: none; -webkit-appearance: none; outline: none;
}
.ah-wsf.wsf-form textarea.wsf-field.uline { height: auto; min-height: 44px; padding-top: 10px; resize: vertical; line-height: 1.5; }
.ah-wsf.wsf-form .wsf-field.uline:focus,
.ah-wsf.wsf-form .wsf-field.uline:focus-visible { outline: none; border-bottom-width: 2px; }
.ah-wsf.wsf-form .wsf-field.uline::placeholder { color: #8d8b86; opacity: 1; }
.ah-wsf.wsf-form .field .wsf-field.uline { border-bottom-color: var(--line-2); color: var(--text); }
.ah-wsf.wsf-form .field .wsf-field.uline:focus { border-bottom-color: var(--gold); }
.ah-wsf.wsf-form .field .wsf-field.uline::placeholder { color: #8a8a8f; }
.ah-wsf.wsf-form select.wsf-field option { color: #111; background: #fff; }

/* Select arrow (.sel i) */
.ah-wsf.wsf-form .ah-sel { position: relative; }
/* WS Form's arrow rule is very specific (.wsf-form select…:not()…+ span): outweigh it */
.ah-wsf.ah-wsf.ah-wsf.wsf-form .ah-sel.ah-sel.ah-sel select.wsf-field + span.wsf-select-arrow.wsf-select-arrow { display: none !important; }
.ah-wsf.wsf-form .ah-sel::after {
  content: ""; position: absolute; right: 4px; bottom: 18px; width: 7px; height: 7px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); pointer-events: none;
}

/* Consent and other checkboxes (.check) */
.ah-wsf.wsf-form .ah-check [data-row-checkbox] { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.ah-wsf.wsf-form .ah-check input[type="checkbox"].wsf-field {
  position: static; opacity: 1; width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
  accent-color: var(--gold); flex: none; appearance: auto; -webkit-appearance: checkbox; border: 0; box-shadow: none;
}
.ah-wsf.wsf-form .ah-check input[type="checkbox"] + .wsf-label {
  margin: 0; padding: 0; font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--muted); cursor: pointer;
}
.ah-wsf.wsf-form .ah-check input[type="checkbox"] + .wsf-label::before,
.ah-wsf.wsf-form .ah-check input[type="checkbox"] + .wsf-label::after { display: none !important; }
.ah-wsf.on-ink .ah-check input[type="checkbox"] + .wsf-label,
.on-ink .ah-wsf.wsf-form .ah-check input[type="checkbox"] + .wsf-label { color: var(--on-ink-muted); }
.ah-wsf.wsf-form .ah-check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Button (.btn.btn--gold): keep the mockup button, drop WS Form's */
.ah-wsf.wsf-form .wsf-button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto;
  min-height: 48px; height: auto; margin: 0; padding: 0 26px; border: 1px solid transparent; border-radius: 0; box-shadow: none;
  background: var(--gold); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.ah-wsf.wsf-form .wsf-button.btn:hover { background: var(--gold); color: var(--gold); }
.ah-wsf.on-ink .wsf-button.btn:hover, .on-ink .ah-wsf.wsf-form .wsf-button.btn:hover { color: var(--ink); }
.ah-wsf.wsf-form .wsf-button.btn[disabled] { opacity: .65; cursor: progress; }

/* Errors (.field-err / .form-err) */
.ah-wsf.wsf-form .wsf-invalid-feedback { margin: 6px 0 0; font-size: 13px; color: #b23a30; }
.ah-wsf.on-ink .wsf-invalid-feedback, .on-ink .ah-wsf.wsf-form .wsf-invalid-feedback { color: #f08f84; }
.ah-wsf.wsf-form .ah-check [data-row-checkbox] > .wsf-invalid-feedback { display: none !important; }
.ah-wsf.wsf-form .wsf-field.uline:invalid { box-shadow: none; }

/* Thank-you message (.form-ok) */
.wsf-form-canvas + .form-ok, .form-ok { padding: 22px 0; font-size: 1.1rem; line-height: 1.5; }
.form-ok i { color: var(--gold); font-size: 28px; display: block; margin-bottom: 8px; }
.getintouch .form-ok, .form-grid .form-ok, #enquiry .form-ok, .split--top .form-ok { text-align: center; }

/* ---------- Layouts ---------- */

/* Home: .git-form — one row, consent underneath */
.ah-wsf--row.wsf-form .wsf-fields {
  display: grid !important; grid-template-columns: 1fr 1fr 1fr 1.6fr auto; gap: 22px; align-items: end;
  max-width: 1080px; margin: 0 auto !important;
}
.ah-wsf--row .ah-check { grid-column: 1 / -1; display: flex; justify-content: center; }
@media (max-width: 900px) {
  .ah-wsf--row .wsf-fields { grid-template-columns: 1fr 1fr; }
  .ah-wsf--row .wsf-field-wrapper:nth-child(4), .ah-wsf--row .ah-actions { grid-column: 1 / -1; }
  .ah-wsf--row.wsf-form .ah-actions .wsf-button.btn { width: 100%; }
}
@media (max-width: 520px) { .ah-wsf--row .wsf-fields { grid-template-columns: 1fr; } }

/* Contact / services: .form-grid — two columns */
.ah-wsf--grid { margin-top: 34px; }
.ah-wsf--grid .wsf-fields { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.ah-wsf--grid [data-type="textarea"], .ah-wsf--grid .ah-check, .ah-wsf--grid .ah-actions { grid-column: 1 / -1; }
.ah-wsf--grid .ah-actions { display: flex; justify-content: center; }
.split--top .ah-wsf--grid .ah-actions { justify-content: flex-start; }
@media (max-width: 600px) { .ah-wsf--grid .wsf-fields { grid-template-columns: 1fr; } }

/* Property enquiry: .enq — stacked, viewing date and time side by side */
.ah-wsf--stack .wsf-fields { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }
.ah-wsf--stack .wsf-field-wrapper { grid-column: 1 / -1; }
.ah-wsf--stack .ah-visit-field { grid-column: auto; }
.ah-wsf--stack.wsf-form .ah-actions .wsf-button.btn { width: 100%; }

/* On dark bands the form inherits light text */
.on-ink .ah-wsf.wsf-form, .ah-wsf.on-ink { background: transparent; color: var(--on-ink); }

/* GTranslate: hidden engine, and no Google banner pushing the page down */
.ah-gt { display: none !important; }
body { top: 0 !important; }
.skiptranslate iframe, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Three languages in the footer switch (the mockup had two) */
.footer__lang { grid-template-columns: repeat(3, 1fr); }
.footer__lang button[lang="ar"] { letter-spacing: 0; }

/* Arabic (machine translation): text blocks read right to left; the page layout stays as designed
   (flipping whole containers breaks the carousels and the absolute-positioned pieces) */
html.translated-rtl, html.translated-rtl body { direction: ltr !important; }
body.is-rtl :is(main, .footer, .mnav) :is(p, h1, h2, h3, h4, blockquote, li, dd, dt, label, figcaption) { direction: rtl; unicode-bidi: plaintext; }
