/* VeriFayda — minimal overrides matching production oracle1 UI */
#totp_verify_input .pincode-input-text,
#otp_verify_input .pincode-input-text,
.text-white .pincode-input-text,
.pincode-input-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border: none !important;
  border-bottom: 2px solid #ffffff !important;
  border-radius: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  width: 2.5rem !important;
  height: 2.6rem !important;
  margin: 0 0.45rem !important;
  padding: 0 0 0.2rem !important;
  text-align: center !important;
}

#otp_verify_input {
  padding: 0.35rem 0 0.15rem !important;
  margin: 0.15rem 0 0.1rem !important;
}

#otp_verify_input .pincode-input-container,
#otp_verify_input > div {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 0.15rem;
  width: 100%;
}

/* OTP verify: breathing room under back arrow → FAN box
   IMPORTANT: do NOT target ancestor .flex.items-center (e.g. .oidc-page-content),
   or align-items:flex-start will left-align the whole login column. */
body.vf-otp-verify #back-button,
:has(#otp_verify_input) #back-button {
  line-height: 1 !important;
  padding: 0 !important;
}

/* Only the local back-button row (direct/near parent), not page wrappers */
body.vf-otp-verify .vf-otp-back-row,
:has(#otp_verify_input) .vf-otp-back-row,
body.vf-otp-verify .flex.items-center:has(> #back-button),
body.vf-otp-verify .flex.items-center:has(> div > #back-button),
:has(#otp_verify_input) .flex.items-center:has(> #back-button),
:has(#otp_verify_input) .flex.items-center:has(> div > #back-button) {
  margin-bottom: 2rem !important;
  min-height: 1.75rem !important;
}

body.vf-otp-verify .vf-otp-back-row > div,
:has(#otp_verify_input) .vf-otp-back-row > div,
body.vf-otp-verify .flex.items-center:has(> div > #back-button) > div,
:has(#otp_verify_input) .flex.items-center:has(> div > #back-button) > div {
  height: auto !important;
  min-height: 1.75rem !important;
}

/* Keep login column centered */
.oidc-page-content {
  align-items: center !important;
}

.oidc-page-content > .w-full.max-w-\[500px\],
.oidc-page-content > div.w-full {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Readonly FAN on verify step */
form:has(#otp_verify_input) > input[readonly],
form:has(#otp_verify_input) > input[disabled],
body.vf-otp-verify form > input[readonly],
body.vf-otp-verify form > input[disabled] {
  height: 2.75rem !important;
  border-radius: 0.5rem !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.15rem !important;
}

form:has(#otp_verify_input),
body.vf-otp-verify form {
  row-gap: 1.35rem;
}

form:has(#otp_verify_input).space-y-4 > :not([hidden]) ~ :not([hidden]),
body.vf-otp-verify form.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.35rem !important;
}

form:has(#otp_verify_input) .text-center.break-words span,
body.vf-otp-verify form .text-center.break-words span {
  line-height: 1.5 !important;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

#verify_otp {
  margin-top: 0.25rem !important;
}

img.brand-logo,
img.brand-only-logo,
img.footer-brand-logo {
  content: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

img.client-logo-size {
  object-fit: contain;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* OTP FAN entry — prominent heading (injected when baked bundle omits it) */
.verifayda-otp-heading {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: #ffffff;
  margin: 0 0 1.25rem;
  padding: 0 0.25rem;
}

.bg-white\/10.backdrop-blur-2xl > .flex.justify-center.items-center {
  gap: 1.75rem !important;
}

.bg-white\/10.backdrop-blur-2xl > .flex.justify-center.items-center > * + * {
  margin-left: 0 !important;
}

img.data-exchange {
  flex-shrink: 0;
  min-width: 2.5rem;
}

button[id^='login_with_'] img {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
}

button[id^='login_with_otp'] img,
button[id^='login_with_pin'] img {
  width: 2.25rem !important;
  height: 1.6rem !important;
}

/* First-time TOTP registration (totp-setup.js) */
.totp-setup-reg-wrap {
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  text-align: center;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.totp-first-time-q {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.9rem !important;
  margin: 0 0 0.55rem !important;
  line-height: 1.35;
}

.totp-fayda-app-info {
  max-width: 22rem;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
}

.totp-register-btn {
  display: none !important;
}

#vf-totp-reg-host {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.totp-modal-fan-step {
  margin-bottom: 0.5rem;
}

.totp-modal-fan {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff !important;
  font-size: 0.9rem !important;
}

.totp-modal-fan::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

body.totp-modal-open {
  overflow: hidden;
}

.totp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.totp-modal-overlay[hidden] {
  display: none !important;
}

.totp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 40, 48, 0.72);
  backdrop-filter: blur(4px);
}

.totp-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.35rem 1.25rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(18, 72, 86, 0.96);
  color: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.totp-modal-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.totp-modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.totp-modal-intro {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.totp-modal-qr-area {
  text-align: center;
}

.totp-modal-qr {
  display: block;
  margin: 0 auto 0.75rem;
  width: 11rem;
  height: 11rem;
  background: #ffffff;
  border-radius: 8px;
  padding: 0.35rem;
}

.totp-modal-manual {
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0 0 0.85rem;
  word-break: break-all;
  color: rgba(255, 255, 255, 0.88);
}

.totp-modal-manual code {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: #ffffff;
}

.totp-modal-label {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
  text-align: left;
}

.totp-modal-code {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-align: center;
}

.totp-modal-btn-primary {
  width: 100%;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 6px;
  background: #ffffff;
  color: #154b91;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.totp-modal-msg {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.totp-modal-msg-error {
  color: #ffb4b4 !important;
}

.totp-modal-msg-ok {
  color: #b8f0c8 !important;
}

/* ── ALTCHA (VeriFayda glass card — narrow) ───────────────────────── */
.vf-altcha-wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
  margin: 0.45rem auto 0.15rem;
}

altcha-widget,
.vf-altcha-wrap altcha-widget {
  display: block !important;
  width: 15rem !important;
  max-width: 15rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  --altcha-max-width: 15rem;
  --altcha-padding: 0.45rem 0.6rem;
  --altcha-border-radius: 9px;
  --altcha-border-width: 1px;
  --altcha-border-color: rgba(255, 255, 255, 0.32);
  --altcha-color-base: rgba(8, 40, 52, 0.52);
  --altcha-color-base-content: #f5fafb;
  --altcha-color-neutral: rgba(255, 255, 255, 0.35);
  --altcha-color-neutral-content: rgba(245, 250, 251, 0.8);
  --altcha-color-primary: #2f8ea3;
  --altcha-color-primary-content: #ffffff;
  --altcha-color-success: #3ecf8e;
  --altcha-color-success-content: #062218;
  --altcha-color-error: #ff8f8f;
  --altcha-color-error-content: #ffffff;
  --altcha-checkbox-size: 17px;
  --altcha-checkbox-border-radius: 4px;
  --altcha-checkbox-border-color: rgba(255, 255, 255, 0.75);
  --altcha-spinner-color: rgba(125, 211, 232, 0.95);
}

altcha-widget::part(main),
altcha-widget .altcha,
.vf-altcha-wrap .altcha {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(15, 67, 86, 0.42) 50%,
    rgba(6, 32, 42, 0.55) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 22px rgba(0, 18, 28, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f5fafb !important;
  max-width: 15rem !important;
  width: 15rem !important;
  box-sizing: border-box !important;
}

altcha-widget .altcha-main,
.vf-altcha-wrap .altcha-main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.45rem 0.6rem 0.3rem !important;
  gap: 0.15rem !important;
  max-width: 15rem !important;
}

altcha-widget .altcha-checkbox-wrap,
.vf-altcha-wrap .altcha-checkbox-wrap {
  align-items: center !important;
  gap: 0.55rem !important;
}

altcha-widget .altcha-checkbox-wrap label,
.vf-altcha-wrap .altcha-checkbox-wrap label {
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

altcha-widget .altcha-checkbox,
.vf-altcha-wrap .altcha-checkbox {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}

altcha-widget .altcha-checkbox input,
.vf-altcha-wrap .altcha-checkbox input {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

altcha-widget .altcha-checkbox input:checked,
.vf-altcha-wrap .altcha-checkbox input:checked {
  background-color: #2f8ea3 !important;
  border-color: #2f8ea3 !important;
}

altcha-widget .altcha-checkbox input:checked + svg,
.vf-altcha-wrap .altcha-checkbox input:checked + svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

altcha-widget .altcha-footer,
.vf-altcha-wrap .altcha-footer {
  display: flex !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.18rem 0.7rem 0.28rem !important;
  opacity: 0.75;
  justify-content: flex-end !important;
}

altcha-widget .altcha-footer p,
altcha-widget .altcha-footer a,
.vf-altcha-wrap .altcha-footer p,
.vf-altcha-wrap .altcha-footer a {
  color: rgba(245, 250, 251, 0.7) !important;
  font-size: 0.6rem !important;
  text-decoration: none !important;
}

altcha-widget .altcha-logo,
.vf-altcha-wrap .altcha-logo {
  display: flex !important;
  color: #7dd3e8 !important;
  opacity: 0.95;
  transform: scale(0.85);
  transform-origin: center;
}

altcha-widget .altcha-error,
.vf-altcha-wrap .altcha-error {
  background: rgba(180, 40, 40, 0.2) !important;
  color: #ffd0d0 !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.45rem !important;
  font-size: 0.75rem !important;
}

altcha-widget .altcha-spinner,
.vf-altcha-wrap .altcha-spinner {
  border-color: rgba(125, 211, 232, 0.25) !important;
  border-top-color: #7dd3e8 !important;
}

altcha-widget[data-state='verifying'] .altcha,
.vf-altcha-wrap altcha-widget[data-state='verifying'] .altcha {
  border-color: rgba(47, 142, 163, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(47, 142, 163, 0.22), 0 8px 22px rgba(0, 18, 28, 0.28) !important;
}

altcha-widget[data-state='verified'] .altcha,
.vf-altcha-wrap altcha-widget[data-state='verified'] .altcha {
  border-color: rgba(62, 207, 142, 0.55) !important;
}

/* TOTP: never show duplicate mid-form error; keep top banner only */
#totp-inline-error {
  display: none !important;
}

body.vf-totp-auth-error #vf-totp-reg-host,
body.vf-totp-loading #vf-totp-reg-host,
body:has(#totp_verify_input):has(.loading-indicator) #vf-totp-reg-host {
  display: none !important;
}

/* TOTP loading spinner on dark teal */
form:has(#totp_verify_input) .loading-indicator {
  color: #ffffff !important;
  margin: 0.85rem 0 0.35rem !important;
  position: relative;
  z-index: 50;
}

form:has(#totp_verify_input) .loading-indicator svg {
  color: rgba(255, 255, 255, 0.35) !important;
  fill: #7dd3e8 !important;
}