/* Correção mobile REAL para Hostinger
   A página mobile original foi desenhada em 640px fixos. Em celulares, este arquivo
   impede corte lateral e faz a arte encaixar na largura do aparelho.
   Não altera action, method, name, id nem class dos formulários. */

@media (max-width: 1099px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #fff !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .wrapper.toggle .desk {
    display: none !important;
  }

  .wrapper.toggle .mob {
    display: block !important;
    width: 640px !important;
    min-width: 640px !important;
    max-width: 640px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-origin: top left !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  .wrapper .mob #container {
    width: 640px !important;
    min-width: 640px !important;
    max-width: 640px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .wrapper .mob #section-one,
  .wrapper .mob #section-two,
  .wrapper .mob #section-three,
  .wrapper .mob #section-four,
  .wrapper .mob #section-five,
  .wrapper .mob #section-six,
  .wrapper .mob #section-seven,
  .wrapper .mob #section-eight,
  .wrapper .mob #section-nine,
  .wrapper .mob .testimonials_box,
  .wrapper .mob footer,
  .wrapper .mob #order-form {
    width: 640px !important;
    min-width: 640px !important;
    max-width: 640px !important;
    overflow-x: hidden !important;
  }

  .wrapper .mob img {
    max-width: 100%;
    height: auto;
  }

  .wrapper .mob .s5-list2 img,
  .wrapper .mob .s9-list img,
  .wrapper .mob .s6-bg1 img,
  .wrapper .mob .s7-bg img,
  .wrapper .mob .as-seen {
    max-width: 100% !important;
  }

  .wrapper .mob #cta {
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 640px !important;
    max-width: 640px !important;
    text-align: center !important;
    z-index: 9999 !important;
  }

  .wrapper .mob #cta img,
  .wrapper .mob #cta .btn {
    display: block !important;
    width: 501px !important;
    max-width: 501px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .wrapper .mob #order-form {
    box-sizing: border-box !important;
    padding: 25px 30px 175px !important;
    background: #ffffff !important;
  }

  .wrapper .mob #order-form form {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .wrapper .mob #order-form label {
    display: block !important;
    text-align: left !important;
    font-size: 24px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: #193e4e !important;
    margin: 0 0 8px !important;
  }

  .wrapper .mob #order-form input[type="text"],
  .wrapper .mob #order-form input[type="tel"] {
    display: block !important;
    width: 100% !important;
    height: 70px !important;
    box-sizing: border-box !important;
    margin: 0 0 22px !important;
    padding: 0 24px !important;
    border: 2px solid #d9d9d9 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #1c1c1c !important;
    font-size: 26px !important;
    line-height: 70px !important;
    outline: none !important;
  }

  .wrapper .mob #order-form input[type="text"]::placeholder,
  .wrapper .mob #order-form input[type="tel"]::placeholder {
    color: #7b858c !important;
  }

  .wrapper .mob #order-form button[type="submit"] {
    display: block !important;
    width: 100% !important;
    height: 101px !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: url(../img/order-btn.webp) center center / contain no-repeat !important;
    cursor: pointer !important;
  }

  .wrapper .mob .feedback {
    right: -15px !important;
    z-index: 10000 !important;
  }

  .wrapper .mob .popup-window {
    width: 520px !important;
    max-width: 520px !important;
    right: 30px !important;
    left: auto !important;
    box-sizing: border-box !important;
    z-index: 10001 !important;
  }

  .wrapper .mob .popup-window.hidden,
  .wrapper .mob .hidden {
    right: -700px !important;
  }
}