:root{
  --kdo-surface: #ffffff;
  --kdo-text:    #2f2f2f;
  --kdo-link:    #2271b1;
  --kdo-border:  #e9e9e9;
  --kdo-radius:  14px;
  --kdo-shadow:  0 14px 40px rgba(0,0,0,.18);
}

.kidoov-otp { position: relative; color: var(--kdo-text); }
.kidoov-otp__trigger { width: 100%; }

/* Overlay */
.kidoov-otp__panel{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
}

/* Centered modal tile */
.kidoov-otp__sheet{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(560px, 92vw);
  background: var(--kdo-surface);
  border-radius: var(--kdo-radius);
  box-shadow: var(--kdo-shadow);
  will-change: transform;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
  border: 1px solid var(--kdo-border);
}

/* Visible */
.kidoov-otp__panel.is-open{ opacity:1; pointer-events:auto; }
.kidoov-otp__panel.is-open .kidoov-otp__sheet{ transform: translate(-50%, -50%) scale(1); }

/* Topbar */
.kidoov-otp__topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px; border-bottom: 1px solid var(--kdo-border);
}
.kidoov-otp__back, .kidoov-otp__close, .kidoov-otp__link{
  background:none; border:0; padding:6px 8px; cursor:pointer; color: var(--kdo-link);
}
.kidoov-otp__close{ font-size:18px; line-height:1; color: inherit; }

/* Body */
.kidoov-otp__body{ padding: 16px; }
.kidoov-otp__label{ display:block; font-weight:600; margin: 6px 0 8px; }
.kidoov-otp__row{ display:flex; gap:.5rem; align-items:center; }
.kidoov-otp__input{
  flex:1; padding:10px 12px; border:1px solid #cfcfcf; border-radius:10px;
}
.kidoov-otp__btn{
  white-space:nowrap; padding:10px 14px; border-radius:10px; cursor:pointer;
}
.kidoov-otp__btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* GET OTP on its own line, not full width */
.kidoov-otp__btn--send{
  display:block;
  width:auto;
  margin-top:8px;
  align-self:flex-start;
}

.kidoov-otp__aux{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:.6rem;
}
.kidoov-otp__hint{ opacity:.8; font-size:.9em; }

.kidoov-otp__msg{ min-height:1.25rem; margin-bottom:.5rem; }
.kidoov-otp__msg .ok{ color:#1f7a1f; }
.kidoov-otp__msg .err{ color:#a11; }

.kidoov-otp__step[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .kidoov-otp__panel, .kidoov-otp__sheet{ transition:none; }
}

/* Resend link: look disabled + unclickable during countdown */
.kidoov-otp .kidoov-otp__link[disabled],
.kidoov-otp .kidoov-otp__link[aria-disabled="true"],
.kidoov-otp .kidoov-otp__link.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none; /* belt & suspenders in case inline style is stripped */
}