/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
.input-otp {
  margin-bottom: var(--spacing-4, 1rem);
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--spacing-2, 0.25rem);
}
.input-otp__label {
  font-family: var(--font-sans, "Montserrat", "Avenir Next", "Segoe UI", sans-serif);
  font-size: var(--text-sm, clamp(0.6875rem, 0.625rem + 0.3vw, 0.8125rem));
  line-height: var(--tw-leading, var(--text-sm--line-height, 1.2));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  --tw-tracking: var(--tracking-wide, 0.025em);
  letter-spacing: var(--tracking-wide, 0.025em);
  color: var(--color-text-on-bg, #0d263d);
  text-transform: uppercase;
}
.input-otp__description {
  margin: 0px;
  font-family: var(--font-sans, "Montserrat", "Avenir Next", "Segoe UI", sans-serif);
  font-size: var(--text-sm, clamp(0.6875rem, 0.625rem + 0.3vw, 0.8125rem));
  line-height: var(--tw-leading, var(--text-sm--line-height, 1.2));
  color: var(--color-text, rgb(5 5 5 / 0.65));
}
.input-otp__control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2, 0.25rem);
}
.input-otp__control:has(.input-otp__input:disabled) {
  opacity: 50%;
}
.input-otp__input:disabled {
  cursor: not-allowed;
}
.input-otp__group {
  display: flex;
  align-items: center;
}
.input-otp__slot {
  position: relative;
  display: flex;
  height: var(--spacing-control-md);
  width: var(--spacing-control-md);
  align-items: center;
  justify-content: center;
  border-block-style: var(--tw-border-style);
  border-block-width: 1px;
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  border-color: var(--color-border, rgb(120 184 194 / 0.33));
  background-color: var(--color-surface, #fafafa);
  font-family: var(--font-sans, "Montserrat", "Avenir Next", "Segoe UI", sans-serif);
  font-size: var(--text-base, clamp(1rem, 0.95rem + 0.3vw, 1.125rem));
  line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-strong, #0d263d);
  --tw-outline-style: none;
  outline-style: none;
  &:first-child {
    border-top-left-radius: var(--radius-sm, 0.375rem);
    border-bottom-left-radius: var(--radius-sm, 0.375rem);
  }
  &:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  &:last-child {
    border-top-right-radius: var(--radius-sm, 0.375rem);
    border-bottom-right-radius: var(--radius-sm, 0.375rem);
  }
}
.input-otp__slot[data-active="true"] {
  z-index: 10;
  border-color: var(--color-accent, #78b8c2);
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 1px;
  outline-color: var(--color-primary-highlight, #e8ba00);
}
.input-otp[data-invalid] .input-otp__slot {
  border-color: var(--color-danger, #b42318);
  color: var(--color-danger, #b42318);
}
.input-otp[data-invalid] .input-otp__slot[data-active="true"] {
  border-color: var(--color-danger, #b42318);
  outline-color: var(--color-danger, #b42318);
}
.input-otp[data-invalid] .input-otp__control {
  animation: input-otp-shake 0.4s ease-in-out;
}
.input-otp__caret {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-otp__caret-bar {
  height: var(--spacing-4, 1rem);
  width: 1px;
  background-color: var(--color-text-strong, #0d263d);
  animation: input-otp-caret-blink 1s steps(1, end) infinite;
}
.input-otp[data-invalid] .input-otp__caret-bar {
  background-color: var(--color-danger, #b42318);
}
.input-otp__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-bg-muted, rgb(5 5 5 / 0.65));
}
.input-otp[data-invalid] .input-otp__separator {
  color: var(--color-danger, #b42318);
}
.input-otp__separator-glyph {
  font-family: var(--font-sans, "Montserrat", "Avenir Next", "Segoe UI", sans-serif);
  font-size: var(--text-base, clamp(1rem, 0.95rem + 0.3vw, 1.125rem));
  line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
.input-otp__error {
  margin: 0px;
  font-family: var(--font-sans, "Montserrat", "Avenir Next", "Segoe UI", sans-serif);
  font-size: var(--text-sm, clamp(0.6875rem, 0.625rem + 0.3vw, 0.8125rem));
  line-height: var(--tw-leading, var(--text-sm--line-height, 1.2));
  color: var(--color-danger, #b42318);
}
.input-otp__error:empty, .input-otp__error[hidden] {
  display: none;
}
@keyframes input-otp-caret-blink {
  0%, 70% {
    opacity: 1;
  }
  71%, 100% {
    opacity: 0;
  }
}
@keyframes input-otp-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-0.35rem);
  }
  40% {
    transform: translateX(0.35rem);
  }
  60% {
    transform: translateX(-0.2rem);
  }
  80% {
    transform: translateX(0.2rem);
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-border-style: solid;
      --tw-outline-style: solid;
    }
  }
}