motor test


	<head>
        <meta charset="utf-8" />
    <style>
      .ImperadorForm {
          font-family: Montserrat,Helvetica,Arial,Lucida,sans-serif!important,
    padding-top:0px;
    padding-bottom:0px;
    padding-right:10px;
    padding-left:10px;
    text-align:center;
    border-radius:20px;
    width:100%;
    height:90px;
    font-size: 13px;
      }
 .ImperadorForm input, .ImperadorForm select{
  padding:10px;
  border:solid #333 0px;
  border-radius:20px;
  margin:0px 5px 0px 5px !important;
  width:100%;
}
.ImperadorForm .btn-success {  
  width:180px;
  height:41px;
  background-color: #ecb715;
  border-radius:0px;
  margin-right:0px;
  margin-left:0px;
  padding-left:0px;
  padding-right:0px;
  border: solid #333 0px;
  color:white;
  transition:all .4s ease 0s;
}

.ImperadorForm .btn-success:hover {
  background-color: #333;
  color:white;
}
.ImperadorForm #CheckIn,
.ImperadorForm #CheckOut,
.ImperadorForm #hotel,
.ImperadorForm #ad,
.ImperadorForm #ch {
  width: 200px;
  padding-bottom:7.2px;
  padding-top:7.2px;
  padding-right: 0px;
   -webkit-appearance: none;
  -webkit-border-radius: 0px;
}     

      .ImperadorForm input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
}
.ImperadorForm input::inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
}
.ImperadorForm input::-moz-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
}
.ImperadorForm input::-ms-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
}
      
.ImperadorForm #hotel,
      .ImperadorForm #CheckIn,
      .ImperadorForm #CheckOut,
.ImperadorForm #ad,
.ImperadorForm #ch {
    padding: 10px 12px !important;
}
  
.ImperadorForm select,
.ImperadorForm input {
    background-color: rgb(240,240,240);
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    margin: 0px;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

}


.ImperadorForm select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
@media (max-width: 980px) {
  .ImperadorForm {margin-top: -48px; }
    .ImperadorForm label {
        width: 100% !important;
        display: block;
    }
  
  .ImperadorForm #CheckIn, .ImperadorForm #CheckOut, .ImperadorForm #hotel, .ImperadorForm #ad, .ImperadorForm #ch {
    width: 80%;
    
  }
    .reserva_enviar {
        display: block;
        width: 100% !important;
    }
    .ImperadorForm .d-none-xs {
        display: none;
    }

}

    </style>
<script>
document.getElementById('ch').addEventListener('change', function () {
  var seleccion = this.value;
  var edadCriancaDiv = document.getElementById('edadCriancaDiv');
  
  if (seleccion >= 2) {
    edadCriancaDiv.style.display = 'block';
  } else {
    edadCriancaDiv.style.display = 'none';
  }
});

document.getElementById('guardarEdadCrianca').addEventListener('click', function () {
  var edadCrianca = document.getElementById('edadCrianca').value;
  document.getElementById('ag').value = edadCrianca;
  // Aquí puedes realizar otras acciones si es necesario
  // Por ejemplo, cerrar la ventana emergente o validar la entrada
});

</script>
      </head>  
<body>
<div class="ImperadorForm">
  <form id="form-faca-sua-reserva" action="https://moradadoguaruca.com.br/motor_reserva_guaru_jan_23.php" method="post" target="_blank">
    <input name="CheckIn" type="text" onfocus="(this.type='date')" class="form-control" id="CheckIn" placeholder="Entrada" title="Entrada" data-campo="CheckIn"/>
    <input name="CheckOut" type="text" onfocus="(this.type='date')" class="form-control" id="CheckOut" placeholder="Saída" title="Saída" data-campo="CheckOut" />

    <select class="form-control" name="ad" id="ad" data-campo="ad">
      <option value="">Adultos</option>
      <option value="1">1 Adulto</option>
      <option value="2">2 Adultos</option>
      <option value="3">3 Adultos</option>
      <option value="4">4 Adultos</option>
    </select>

    <select class="form-control" name="ch" id="ch" data-campo="ch">
      <option value="0">Crianças</option>
      <option value="1">1 Criança</option>
      <option value="2">2 Crianças</option>
      <option value="3">3 Crianças</option>
      <option value="4">4 Crianças</option>
    </select>

    <!-- Div para la ventana emergente -->
    <div id="edadCriancaDiv" style="display: none;">
      <label for="edadCrianca">Edad de las Crianças:</label>
      <input type="text" class="form-control" id="edadCrianca" name="ag" />
      <button type="button" id="guardarEdadCrianca">Guardar</button>
    </div>

    <input type="hidden" name="q" value="6284">
    <input class="btn btn-success" style="font-family: 'Nunito Sans', sans-serif; background-color:#edc34f;" type="submit" name="reserva_enviar" id="reserva_enviar" value="CONSULTAR VALORES">
  </form>
</div>
</body>