/* ==========================================================
   QUOREAL MOBILE v43
   Contact submit button / iOS WebKit paint stability

   Scope: mobile only. Desktop is intentionally untouched.
========================================================== */

@media (max-width: 820px) {

  /* Keep the whole contact form in normal document flow.
     Remove compositor-heavy effects that can make the submit
     button disappear while scrolling on iOS/WebKit. */
  #contact,
  #contact > .container,
  #contact .contact-box,
  #contact .contact-actions,
  #contact .contact-form,
  #contact .contact-form__grid,
  #contact .contact-form__field,
  #contact .contact-form__consent,
  #contact .contact-form__consent-row,
  #contact .contact-form__submit-area {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  #contact .contact-actions {
    position: static !important;
    display: block !important;
  }

  #contact .contact-form {
    position: static !important;
    display: block !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: auto !important;
  }

  #contact .contact-form__submit-area {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    z-index: auto !important;
  }

  #contact .contact-form__submit {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    overflow: visible !important;
    isolation: auto !important;
    z-index: 2 !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  /* The hover sheen creates an isolated negative-z layer in the
     base button. It is unnecessary on touch screens and can cause
     WebKit paint drop-outs while scrolling. */
  #contact .contact-form__submit::before {
    display: none !important;
    content: none !important;
  }

  #contact .contact-form__submit > span:first-child {
    position: relative !important;
    left: -4px !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #contact .contact-form__submit .btn-icon {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* No dead area between the form and the completed mobile footer. */
  #contact .contact-form__consent {
    margin-bottom: 0 !important;
  }

  #contact {
    padding-bottom: 28px !important;
  }
}