/* One-time code dialog: templates/components/otp-dialog.html. Its shell (dimmed page, card, opening
   and closing) comes from dialog.css. */
.otp-close {
  position: absolute;
  inset-block-start: .8rem;
  inset-inline-start: .8rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: #f1f5f6;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform var(--spring-duration) var(--spring);
}
.otp-close:active { transform: scale(var(--press-scale)); filter: brightness(.94); transition-duration: var(--press-duration); }
.otp-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 1.15rem;
  color: var(--primary-dark);
  background: #e7f2f3;
  font-size: 1.6rem;
}
.otp-card h2 { margin-bottom: .45rem; font-size: 1.45rem; }
.otp-card > .muted { margin: 0 0 1.35rem; }
/* A phone number never breaks at its dash, e.g. "050-1234567". */
.otp-phone { white-space: nowrap; }
.otp-card .field { text-align: start; }
.otp-card .field input {
  min-height: 3.4rem;
  text-align: center;
  letter-spacing: .5rem;
  font-size: 1.35rem;
}
.otp-card .field input:focus {
  border-color: var(--primary);
  outline: 3px solid rgb(23 107 114 / 15%);
}
/* A rejected code shakes the field from side to side, as a wrong passcode does on iPhone (see
   shakeOtpInput() in otp-dialog.js). With reduced motion the field stays still and the error text
   says it all. */
.otp-card .field input.shake { animation: otp-shake .4s ease-out; }
@keyframes otp-shake {
  15% { transform: translateX(-10px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
.otp-error { min-height: 1.25rem; margin: -.5rem 0 0; color: var(--danger); font-size: .9rem; }
.otp-success {
  min-height: 1.25rem;
  margin: .25rem 0 0;
  color: var(--success);
  font-size: .85rem;
  text-align: center;
}
.otp-countdown {
  margin: .15rem 0 0;
  color: var(--primary-dark);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}
.otp-demo-note {
  padding: .75rem;
  margin: 1rem 0 .5rem;
  border: 1px solid #ead9a8;
  border-radius: 10px;
  color: #745716;
  background: #fff8e6;
  font-size: .85rem;
  line-height: 1.6;
}
.otp-edit {
  padding: .4rem;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2rem;
}
.otp-resend {
  display: block;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  margin: .25rem auto 0;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font-weight: 700;
}
/* Dimmed while the code can't be sent again yet, but not while it is being sent (see
   .button[aria-busy] in base.css). */
.otp-resend:disabled:not([aria-busy="true"]) {
  color: var(--muted);
  cursor: not-allowed;
}
.otp-resend[aria-busy="true"] { cursor: progress; }
.otp-resend:not(:disabled):hover { text-decoration: underline; text-underline-offset: .2rem; }
.otp-edit:active, .otp-resend:active:not(:disabled) { opacity: var(--press-opacity); }
@media (prefers-reduced-motion: reduce) {
  .otp-card .field input.shake { animation: none; }
}
@media (pointer: coarse) {
  .otp-close { inset-block-start: .5rem; inset-inline-start: .5rem; width: 2.75rem; height: 2.75rem; }
  .otp-edit, .otp-resend { min-height: 2.75rem; }
}