body.logged-in .otpl-popup {
  display: none;
}

form#optl-form {
  position: relative;
}

#otpl-body {
  background: #f9f9f9;
  padding: 3rem;
}

#failedloginsec {
  display: none;
}

#submitotpsec {
  display: none;
}

span.loginback {
  cursor: pointer;
  z-index: 99;
  top: 6px;
  position: absolute;
  left: 0px;
  padding: 2px 15px;
  color: #e96125;
  margin: 15px 0 0 32px;
}

#optl-form input,
#optl-form textarea {
  border: 1px solid #ccc;
  color: #666;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0px 10px;
}

#optl-form input[type=button],
#optl-form input[type=submit],
#optl-form .otpl_submit_btn {
  background: #9f17a9ff;
  color: #FFF !important;
  font-size: 100% !important;
  font-weight: 700 !important;
  width: 100% !important;
  padding: 10px 0px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
}

#optl-form label {
  color: #000;
  display: block;
  font-size: 16px;
}

#optl-form .req {
  color: red;
  font-size: 14px;
  display: inline-block;
}

#optl-form input[type="button"]:disabled,
#optl-form input[type="submit"]:disabled {
  background: #ccc;
  cursor: initial;
}

#otpl_contact {
  padding: 0 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------
   2. OTIMIZAÇÃO DE CAMPOS E BOTÕES (TOUCH-FRIENDLY)
   ----------------------------------------------------- */

/* Aplica-se ao campo de e-mail e ao campo do código OTP */
#optl-form input[type="email"],
#optl-form input[type="number"] {
  display: block;
  width: 100%;
  /* Ocupa toda a largura disponível */
  margin-bottom: 20px;
  box-sizing: border-box;

  /* Altura mínima para ser fácil de tocar no celular */
  min-height: 48px;

  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Aplica-se aos botões 'Continuar...' e 'Enviar código' */
.otpl_submit_btn.generateOtp,
.submitOtp {
  display: block;
  width: 100%;
  /* Ocupa toda a largura disponível */
  margin-bottom: 20px;
  box-sizing: border-box;

  /* Altura mínima para ser fácil de tocar no celular */
  min-height: 48px;

  /* Estilos Visuais do Botão */
  background-color: #007bff;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Garante que o elemento 'Voltar' não quebre o layout */
.loginback {
  display: block;
  margin-bottom: 10px;
}

/* -------------------------------------
   1. REGRA PRINCIPAL PARA RESPONSIVIDADE
   ------------------------------------- */
#optl-form.otpl-section {
  /* Largura fixa original (600px) como MÁXIMA */
  max-width: 600px;

  /* Largura FLUIDA para celular (ocupa 90% da tela) */
  width: 90%;

  /* Centraliza o formulário */
  margin: 2px auto;

  /* Melhora a aparência e o espaçamento interno */
  padding: 30px;
  box-sizing: border-box;
  /* Garante que o padding não aumente a largura além de 600px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #ffffff;
}

/* -----------------------------------------------------
   3. MEDIA QUERY (AJUSTES PARA TELAS < 400PX)
   ----------------------------------------------------- */
@media (max-width: 390px) {

  /* Reduz o padding do container para dar mais espaço útil */
  #optl-form.otpl-section {
    padding: 10px 10px;
    margin: 0 auto;
    /* Reduz a margem superior/inferior também */
  }

  #otpl_contact {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* -----------------------------------------------------
   4. AJUSTE PARA MODO PAISAGEM (HORIZONTAL)
   ----------------------------------------------------- */
@media (max-width: 400px) and (orientation: landscape) {
  /* Alvo: Telas de celular giradas (ex: iPhone em modo paisagem) */

  #optl-form.otpl-section {
    /* Reduz a largura máxima para dar mais margem nas laterais,
           já que a tela é mais larga */
    max-width: 400px;

    /* O width: 90% ainda funciona, mas o max-width será o limitador principal */
    width: 90%;

    /* Reduz o padding para que o conteúdo não fique tão espaçado */
    padding: 15px 20px;
  }

  /* Opcional: Reduz a margem superior/inferior para otimizar o espaço vertical */
  .otpl-section {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}