/* Gaya halaman login (OTP).
   Dimuat setelah CSS CDN (lihat fragment/head). */

/* pelengkap .login-signup milik CDN */
.login-signup {
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3rem;
}

.page-title {
  text-align: center;
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize4);
  color: #000;
}
.tab-pane > .page-title {
  padding-top: 2.25em;
}

/* isi panel login */
.auth-pane {
  color: var(--blue-text);
  padding: 0 0 1em;
}
.auth-pane h3 {
  font-weight: 700;
  margin-bottom: 5px;
}
.auth-pane p {
  color: var(--blue-text);
  text-align: left;
}

/* fineprint & pesan error harus tetap tengah/merah meski .auth-pane p rata kiri */
.auth-pane p.fineprint {
  text-align: center;
}
.auth-pane p.form-error {
  color: red;
  text-align: center;
}
.auth-pane input {
  font-size: var(--fsize5);
  border-radius: 5px;
  text-align: center;
  height: calc(1.5em + .75rem + 5px);
}
.auth-pane input::placeholder {
  font-size: var(--fsmall4);
}
.auth-pane input:active, .auth-pane input:focus {
  border: 1px solid var(--blue-text) !important;
}

/* input nomor +62 */
.phone-input {
  display: flex;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 5px;
  background: #FFF;
  margin-bottom: .5em;
}
.phone-input .prefix {
  padding: 0 .75em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: var(--blue-text);
}
.phone-input input {
  border: none;
  outline: none;
  text-align: left;
}
.hint {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--fsmall4);
  color: var(--blue-text);
  opacity: .8;
}
.hint.error {
  color: red;
  opacity: 1;
}
.form-error {
  color: red;
  text-align: center;
  margin-top: 10px;
}

/* fineprint & link */
.fineprint {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--fsmall4);
  color: var(--blue-text);
  opacity: .8;
  margin-top: 1em;
  text-align: center;
}
.fineprint a {
  color: #5866FF;
  font-weight: 600;
  text-decoration: underline;
}

/* popup OTP */
.otp-modal {
  max-width: 320px;
}
.otp-center {
  text-align: center;
}
.otp-hidden {
  display: none;
}
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}
.otp-inputs input {
  width: 45px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}