/* =========================================================
   Contact Us — Al Hamra Mall
   Form UI matches Yas Mall (SS1)
   Cream panel · white boxed inputs · placeholders · black SUBMIT
   Fixes: label overlap, underline inputs, repeating select arrows,
          invisible/white SUBMIT
   Recaptcha left empty (not in markup yet)
   Updated: 27 July 2026 — Nationality + Address/Country same row
   Updated: remove thin line under SUBMIT (border-bottom)
   ========================================================= */

.contact_n_map {
  position: relative;
}

.contact_n_map > .box-holder {
  position: relative;
  z-index: 1;
}

.contact_n_map .cont_top_bg {
  height: 460px;
  width: 100%;
  margin-left: -15px;
  background: #f7f7f7;
  position: absolute;
}

.contact_n_map .cont_info_holder {
  position: relative;
  min-height: 440px;
  height: auto !important;
  margin-top: 0;
  background-size: cover;
  background-position: top left;
}

.contact_n_map .cont_info_overlay {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem) 1.5rem !important;
}

.contact_n_map .cont_info li {
  font-size: 18px;
  line-height: 31px;
}

.contact_n_map .cont_social.cstm-padding {
  margin-top: 0.25rem;
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

.contact_n_map .cont_feedback_form_holder {
  position: relative;
  margin-top: 0 !important;
}

/* ---------- Form panel (full gold box — keep all 4 sides) ---------- */
.contact_n_map .cont_feedback_form,
.contact_n_map .cont_feedback_form_holder,
.contact_n_map .cont_feedback_form_holder .cont_feedback_form {
  background: rgb(225, 198, 153) !important;
  background-color: #fdf7f2 !important;
  color: #111111 !important;
  border: 2px solid rgb(225, 198, 153) !important;
  box-shadow: none !important;
}

.contact_n_map .cont_feedback_form {
  padding: 40px 30px 35px !important;
  display: block !important;
  box-sizing: border-box;
  width: 100%;
}

/* ---------- Titles ---------- */
.contact_n_map .cont_feedback_form h3,
.contact_n_map .cont_feedback_form_holder h3 {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.contact_n_map .cont_feedback_form > p,
.contact_n_map .cont_feedback_form_holder > p {
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 0 28px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.4 !important;
}

/* ---------- 2-column grid ---------- */
.contact_n_map .arContactForm .umbraco-forms-container,
.contact_n_map .arContactForm .umbraco-forms-container.contact-form-grid__inner,
.contact_n_map .umbraco-forms-container,
.contact_n_map .contact-form-grid__inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 0 !important;
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

.contact_n_map .arContactForm.row,
.contact_n_map .contact-form-grid.row {
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

.contact_n_map .umbraco-forms-page,
.contact_n_map .umbraco-forms-page.contact-form,
.contact_n_map .umbraco-forms-fieldset,
.contact_n_map .cont_feedback_form .umbraco-forms-page,
.contact_n_map .umbraco-forms-form,
.contact_n_map .umbraco-forms-form.contactform {
  border: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  box-shadow: none !important;
}

.contact_n_map .umbraco-forms-fieldset legend {
  display: none !important;
}

/* ---------- Field shells ---------- */
.contact_n_map .contact-form-grid__inner > .field,
.contact_n_map .umbraco-forms-container > .field,
.contact_n_map .field.umbraco-forms-field {
  display: block !important;
  position: relative !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  border: 0 !important;
}

.contact_n_map .umbraco-forms-field-wrapper {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Full width: Subject + Comments only (NOT Address/Country) */
.contact_n_map .field.contact-form__field--full:not(.address):not(.nationality):not(.country),
.contact_n_map .field.longanswer,
.contact_n_map .field.subject,
.contact_n_map .field.dropdown.contact-form__field--full,
.contact_n_map .umbraco-forms-field.longanswer,
.contact_n_map .umbraco-forms-field.subject {
  grid-column: 1 / -1 !important;
}

/* Nationality + Address/Country = same row (2 columns) */
.contact_n_map .field.nationality,
.contact_n_map .umbraco-forms-field.nationality,
.contact_n_map .field.address,
.contact_n_map .umbraco-forms-field.address,
.contact_n_map .field.country,
.contact_n_map .umbraco-forms-field.country,
.contact_n_map .field.address.contact-form__field--full,
.contact_n_map .umbraco-forms-field.address.contact-form__field--full,
.contact_n_map .field.country.contact-form__field--full,
.contact_n_map .umbraco-forms-field.country.contact-form__field--full {
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
}

.contact_n_map .field.dropdown:not(.contact-form__field--full):not(.subject),
.contact_n_map .umbraco-forms-field.dropdown:not(.contact-form__field--full):not(.subject) {
  grid-column: auto !important;
}

/* ---------- HIDE labels (Yas = placeholders only) ---------- */
.contact_n_map .cont_feedback_form label,
.contact_n_map .cont_feedback_form .floating-label,
.contact_n_map .cont_feedback_form label.umbraco-forms-label,
.contact_n_map .cont_feedback_form label.control-label,
.contact_n_map .field > label,
.contact_n_map .umbraco-forms-field > label,
.contact_n_map .umbraco-forms-label,
.contact_n_map .control-label,
.contact_n_map .floating-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kill leftover decorative arrows / floating label ghosts */
.contact_n_map .field::before,
.contact_n_map .field::after,
.contact_n_map .umbraco-forms-field::before,
.contact_n_map .umbraco-forms-field::after,
.contact_n_map .umbraco-forms-field-wrapper::before,
.contact_n_map .umbraco-forms-field-wrapper::after,
.contact_n_map .field.dropdown::before,
.contact_n_map .field.dropdown::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* ---------- White boxed TEXT inputs (kill underlines) ---------- */
.contact_n_map .cont_feedback_form input.form-control,
.contact_n_map .cont_feedback_form input.text,
.contact_n_map .cont_feedback_form input[type="text"],
.contact_n_map .cont_feedback_form input[type="email"],
.contact_n_map .cont_feedback_form input[type="tel"],
.contact_n_map .cont_feedback_form input[type="number"],
.contact_n_map .field input.form-control,
.contact_n_map .field input.text,
.contact_n_map .field.shortanswer input,
.contact_n_map .umbraco-forms-field.shortanswer input,
.contact_n_map .contact-form-grid__inner input:not([type="submit"]):not([type="button"]):not(.next_btn):not(.contact-form__submit):not(#btnSubmit) {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 52px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.contact_n_map .cont_feedback_form input:not([type="submit"]):focus,
.contact_n_map .field input:not([type="submit"]):focus {
  border: 1px solid #d0d5db !important;
  outline: none !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: none !important;
}

.contact_n_map .cont_feedback_form input::placeholder,
.contact_n_map .field input::placeholder {
  color: #999999 !important;
  text-transform: none !important;
  opacity: 1 !important;
  letter-spacing: 0 !important;
}

/* ---------- White boxed SELECTS (single chevron — no repeat) ---------- */
.contact_n_map .cont_feedback_form select,
.contact_n_map .cont_feedback_form select.form-control,
.contact_n_map .field select,
.contact_n_map .field.dropdown select,
.contact_n_map .umbraco-forms-field.dropdown select,
.contact_n_map .contact-form-grid__inner select {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 44px 0 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: #ffffff !important;
  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 fill='none' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  color: #999999 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 52px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.contact_n_map .cont_feedback_form select:focus,
.contact_n_map .field select:focus {
  border: 1px solid #d0d5db !important;
  color: #111111 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.contact_n_map .cont_feedback_form select option {
  color: #111111;
  background: #fff;
}

/* ---------- Textarea ---------- */
.contact_n_map .cont_feedback_form textarea,
.contact_n_map .cont_feedback_form textarea.form-control,
.contact_n_map .cont_feedback_form textarea.textArea,
.contact_n_map .field.longanswer textarea,
.contact_n_map .umbraco-forms-field.longanswer textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 150px !important;
  height: 150px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  resize: vertical;
}

.contact_n_map .cont_feedback_form textarea:focus {
  border: 1px solid #d0d5db !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: none !important;
}

.contact_n_map .cont_feedback_form textarea::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
  text-transform: none !important;
}

/* ---------- Submit row (no recaptcha yet → right aligned) ---------- */
.contact_n_map .umbraco-forms-navigation,
.contact_n_map .umbraco-forms-navigation .buttons,
.contact_n_map .cont_feedback_form .buttons {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  float: none !important;
}

.contact_n_map .field.recaptcha,
.contact_n_map .umbraco-forms-field.recaptcha,
.contact_n_map .g-recaptcha {
  grid-column: 1 / 2 !important;
  margin: 12px 0 0 !important;
  align-self: center !important;
}

.contact_n_map .field.recaptcha label,
.contact_n_map .umbraco-forms-field.recaptcha label {
  display: none !important;
}

/* Black SUBMIT — Yas style */
.contact_n_map .cont_feedback_form input[type="submit"],
.contact_n_map .cont_feedback_form input.contact-form__submit,
.contact_n_map .cont_feedback_form input.next_btn,
.contact_n_map .cont_feedback_form .next_btn.contact-form__submit,
.contact_n_map .cont_feedback_form #btnSubmit,
.contact_n_map #btnSubmit,
.contact_n_map .contact-form-grid__inner > input[type="submit"],
.contact_n_map .contact-form-grid__inner > input.contact-form__submit,
.contact_n_map .contact-form-grid__inner > .next_btn,
.contact_n_map .umbraco-forms-navigation input[type="submit"],
.contact_n_map .umbraco-forms-navigation .next_btn,
.contact_n_map .buttons input[type="submit"],
.contact_n_map .buttons .next_btn {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  align-self: center !important;
  float: none !important;
  display: inline-block !important;
  margin: 12px 0 0 auto !important;
  min-width: 180px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  padding: 14px 48px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  letter-spacing: 0.06em;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  cursor: pointer;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.contact_n_map .cont_feedback_form input[type="submit"]:hover,
.contact_n_map .cont_feedback_form .contact-form__submit:hover,
.contact_n_map .cont_feedback_form #btnSubmit:hover,
.contact_n_map #btnSubmit:hover {
  background: #222222 !important;
  background-color: #222222 !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}

/* ---------- RTL ---------- */
[dir="rtl"] .contact_n_map .cont_feedback_form input[type="submit"],
[dir="rtl"] .contact_n_map .cont_feedback_form .contact-form__submit,
[dir="rtl"] .contact_n_map #btnSubmit,
html[lang="ar"] .contact_n_map .cont_feedback_form input[type="submit"],
html[lang="ar"] .contact_n_map .cont_feedback_form .contact-form__submit,
html[lang="ar"] .contact_n_map #btnSubmit {
  justify-self: start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

[dir="rtl"] .contact_n_map .umbraco-forms-navigation,
[dir="rtl"] .contact_n_map .cont_feedback_form .buttons,
html[lang="ar"] .contact_n_map .umbraco-forms-navigation,
html[lang="ar"] .contact_n_map .cont_feedback_form .buttons {
  justify-content: flex-start !important;
}

[dir="rtl"] .contact_n_map .field.recaptcha,
html[lang="ar"] .contact_n_map .field.recaptcha {
  grid-column: 2 / 3 !important;
}

[dir="rtl"] .contact_n_map .cont_feedback_form select,
html[lang="ar"] .contact_n_map .cont_feedback_form select {
  background-position: left 16px center !important;
  padding: 0 18px 0 44px !important;
}

[dir="rtl"] .contact_n_map .cont_feedback_form input:not([type="submit"]),
[dir="rtl"] .contact_n_map .cont_feedback_form select,
[dir="rtl"] .contact_n_map .cont_feedback_form textarea,
html[lang="ar"] .contact_n_map .cont_feedback_form input:not([type="submit"]),
html[lang="ar"] .contact_n_map .cont_feedback_form select,
html[lang="ar"] .contact_n_map .cont_feedback_form textarea {
  direction: rtl;
  text-align: right;
}

.contact_n_map .field-validation-error,
.contact_n_map span.field-validation-error,
.contact_n_map .field-validation-valid {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #d32f2f !important;
}

.contact-map-section .cont_map_contr iframe {
  display: block;
  width: 100%;
  height: 250px;
  border: 0;
}

/* Kill ONLY the black divider line under SUBMIT (NOT the gold panel border) */
.contact_n_map .cont_feedback_form > hr,
.contact_n_map .cont_feedback_form_holder > hr,
.contact_n_map .umbraco-forms-form > hr,
.contact_n_map .umbraco-forms-page > hr,
.contact_n_map .umbraco-forms-fieldset > hr,
.contact_n_map .contact-form > hr,
.contact_n_map .cont_feedback_form hr,
.contact_n_map .umbraco-forms-page hr,
.contact_n_map .umbraco-forms-fieldset hr {
  display: none !important;
  visibility: hidden !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

/* Inner form chrome — strip dark bottom lines only (panel gold border stays) */
.contact_n_map .umbraco-forms-page,
.contact_n_map .umbraco-forms-page.contact-form,
.contact_n_map .umbraco-forms-fieldset,
.contact_n_map .umbraco-forms-form,
.contact_n_map .umbraco-forms-form.contactform,
.contact_n_map .umbraco-forms-container,
.contact_n_map .contact-form-grid,
.contact_n_map .contact-form-grid__inner,
.contact_n_map .umbraco-forms-navigation,
.contact_n_map .cont_feedback_form .buttons {
  border-bottom: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.contact_n_map .cont_feedback_form::before,
.contact_n_map .cont_feedback_form::after,
.contact_n_map .cont_feedback_form_holder::before,
.contact_n_map .cont_feedback_form_holder::after,
.contact_n_map .umbraco-forms-page::before,
.contact_n_map .umbraco-forms-page::after,
.contact_n_map .umbraco-forms-container::before,
.contact_n_map .umbraco-forms-container::after,
.contact_n_map .umbraco-forms-form::before,
.contact_n_map .umbraco-forms-form::after,
.contact_n_map .contact-form-grid::before,
.contact_n_map .contact-form-grid::after,
.contact_n_map .contact-form-grid__inner::before,
.contact_n_map .contact-form-grid__inner::after {
  content: none !important;
  display: none !important;
  border: none !important;
  background: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .contact_n_map .cont_feedback_form_holder {
    margin-top: 1.5rem;
  }

  .contact_n_map .cont_feedback_form {
    padding: 32px 24px !important;
  }

  .contact_n_map .cont_feedback_form h3 {
    font-size: 22px !important;
  }
}

@media (max-width: 767.98px) {
  .contact_n_map .umbraco-forms-container,
  .contact_n_map .contact-form-grid__inner {
    grid-template-columns: 1fr !important;
  }

  .contact_n_map .field.recaptcha,
  .contact_n_map .umbraco-forms-field.recaptcha,
  .contact_n_map .cont_feedback_form input[type="submit"],
  .contact_n_map .cont_feedback_form .contact-form__submit,
  .contact_n_map #btnSubmit {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .contact_n_map .umbraco-forms-navigation,
  .contact_n_map .cont_feedback_form .buttons {
    justify-content: stretch !important;
  }

  .contact_n_map .umbraco-forms-navigation input[type="submit"],
  .contact_n_map .buttons input[type="submit"] {
    width: 100% !important;
  }
}