/* VeriFayda — minimal overrides matching production oracle1 UI */

/* ── Fayda fonts (from fayda-design-system) ─────────────────────────────── */
@font-face {
  font-family: "Nokia Pure Headline";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-UltraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nokia Pure Headline";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nokia Pure Headline";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nokia Pure Headline";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nokia Pure Headline";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nokia Pure Headline Ethiopic";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-Ethiopic-UltraLight.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1200-139F, U+2D80-2DDF, U+AB00-AB2F;
}
@font-face {
  font-family: "Nokia Pure Headline Ethiopic";
  src: url("/fonts/nokia-pure-headline/NokiaPureHeadline-Ethiopic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1200-139F, U+2D80-2DDF, U+AB00-AB2F;
}
@font-face {
  font-family: "Google Sans";
  src: url("/fonts/google-sans/GoogleSans-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1200-139F, U+2D80-2DDF, U+AB00-AB2F;
}

:root {
  --font-heading: "Nokia Pure Headline", "Nokia Pure Headline Ethiopic", "Segoe UI", sans-serif;
  --font-body: Figtree, "Segoe UI", system-ui, sans-serif;
  --font-body-am: "Google Sans", Figtree, "Segoe UI", sans-serif;
  --font-family: var(--font-body);
}

/* Titles (EN + AM) → Nokia Pure Headline */
h1, h2, h3, h4, h5, h6,
.vf-methods-title,
.vf-form-header-title,
.vf-form-header .verifayda-otp-heading,
.verifayda-otp-heading,
.vf-v5-card h1,
.vf-v5-card h2,
.totp-modal-title,
.vf-fan-qr-dialog [id$="-title"],
.vf-fan-qr-dialog h2,
.modal-title,
.consent-details-header,
.error-page-header {
  font-family: var(--font-heading) !important;
}

/* Body: Figtree (Latin) + Google Sans (Ethiopic) */
body,
.vf-method-desc,
.vf-method-title,
.vf-fan-label,
.totp-modal-intro,
.vf-fan-qr-hint,
p, label, input, button, span, a {
  font-family: var(--font-body), var(--font-body-am), sans-serif;
}

html[lang^="am"] body,
html[lang="am"] body {
  font-family: var(--font-body-am), var(--font-body), sans-serif;
}


#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;
}

html.vf-theme-light .verifayda-otp-heading,
html[data-vf-theme="light"] .verifayda-otp-heading {
  color: #0c0a09 !important;
}

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

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

/* ── VeriFayda v5 two-column shell (design.fayda.et/verifayda-v5) ── */
/* Drop the dark teal background.svg — page uses theme gradients instead */
section.oidc-scroll-main,
.oidc-scroll-main.login-text,
.oidc-scroll-main.body-font {
  background-image: none !important;
  background-color: transparent !important;
  background: transparent !important;
  color: var(--login-text-color) !important;
}

/* AppRouter leftover cream wash — design v5 canvas is sidebar-gradient only */
section.oidc-scroll-main > .pointer-events-none.absolute.bottom-0,
section.oidc-scroll-main > div.bg-gradient-to-t,
section.oidc-scroll-main > [class*="from-white"] {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Let the v5 grid use the full design width (baked UI wraps in max-w-[500px]) */
.oidc-page-content > .w-full.max-w-\[500px\]:has(.vf-v5-grid),
.oidc-page-content > .w-full.max-w-\[500px\]:has(.vf-v5-shell),
.oidc-page-content > div.w-full:has(.vf-v5-grid) {
  max-width: 72rem !important;
  width: 100% !important;
}

/* When baked UI stacks two acrylic cards, turn the host into the v5 grid */
.h-fit.w-full.space-y-5.vf-v5-grid,
.vf-v5-shell.vf-v5-grid,
.vf-v5-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem 2rem;
}

@media (min-width: 1024px) {
  .h-fit.w-full.space-y-5.vf-v5-grid,
  .vf-v5-shell.vf-v5-grid,
  .vf-v5-grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: center;
    min-height: calc(100vh - 8rem);
  }
}

/* First child = brand panel — design has NO outer box (logos + title float on page) */
.vf-v5-grid > .vf-v5-brand,
.vf-v5-grid > .vf-partner-brand,
.vf-v5-grid > :first-child.bg-white\\/10,
.vf-v5-grid > :first-child,
.vf-partner-brand,
aside.vf-v5-brand,
.bg-white\\/10.backdrop-blur-2xl:has(.vf-partner-logos):not(.vf-consent-card):not(.vf-v5-card),
.bg-white\\/10.backdrop-blur-2xl:has(img.data-exchange):not(.vf-consent-card):not(.vf-v5-card),
.rounded-\\[6px\\].bg-white\\/10:has(.vf-partner-logos):not(.vf-consent-card):not(.vf-v5-card),
.rounded-\\[6px\\].bg-white\\/10:has(img.client-logo-size):not(.vf-consent-card):not(.vf-v5-card) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-shadow: 0 0 #0000 !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0.25rem 0 !important;
}

html.vf-theme-light .vf-v5-grid > .vf-v5-brand,
html.vf-theme-light .vf-v5-grid > .vf-partner-brand,
html.vf-theme-light .vf-v5-grid > :first-child,
html.vf-theme-light .vf-partner-brand,
html.vf-theme-light aside.vf-v5-brand,
html[data-vf-theme="light"] .vf-v5-grid > .vf-v5-brand,
html[data-vf-theme="light"] .vf-v5-grid > .vf-partner-brand,
html[data-vf-theme="light"] .vf-v5-grid > :first-child,
html[data-vf-theme="light"] .vf-partner-brand,
html[data-vf-theme="light"] aside.vf-v5-brand {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Right column card — acrylic-surface from design globals.css.
   Exclude .vf-v5-card-col wrappers and page chrome so only the inner card gets acrylic styles. */
.vf-v5-grid > .vf-v5-card,
.vf-v5-grid > .vf-v5-card-col > .vf-v5-card,
.vf-v5-grid > :last-child.vf-v5-card,
.vf-v5-card:not(footer):not(#footer):not(.footer-container) {
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1.5rem !important;
  padding: 1.25rem 1.35rem 1.5rem !important;
  background-color: var(--vf-card-bg, rgba(9, 24, 33, 0.7)) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  border: 1px solid var(--vf-card-border, rgba(255, 255, 255, 0.1)) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.02),
    0 18px 50px rgba(0, 0, 0, 0.45) !important;
}

.vf-v5-grid > .vf-v5-card-col {
  width: 100%;
  max-width: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

html.vf-theme-light .vf-v5-grid > .vf-v5-card,
html.vf-theme-light .vf-v5-grid > .vf-v5-card-col > .vf-v5-card,
html.vf-theme-light .vf-v5-grid > :last-child.vf-v5-card,
html.vf-theme-light .vf-v5-card:not(footer):not(#footer):not(.footer-container),
html[data-vf-theme="light"] .vf-v5-grid > .vf-v5-card,
html[data-vf-theme="light"] .vf-v5-grid > .vf-v5-card-col > .vf-v5-card,
html[data-vf-theme="light"] .vf-v5-grid > :last-child.vf-v5-card,
html[data-vf-theme="light"] .vf-v5-card:not(footer):not(#footer):not(.footer-container) {
  background-color: rgba(255, 255, 255, 0.6) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.25),
    0 16px 40px rgba(2, 50, 75, 0.18) !important;
}

/* FaydaPattern layer — verifayda-v5/page.tsx absolute inset pattern */
.vf-fayda-pattern-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  user-select: none;
}

.vf-fayda-pattern {
  position: absolute;
  top: 50%;
  left: -7rem;
  transform: translateY(-50%);
  height: 100%;
  min-height: 100svh;
  width: auto;
  max-width: none;
  aspect-ratio: 1415 / 1334;
  opacity: 0.25;
}

@media (min-width: 640px) {
  .vf-fayda-pattern {
    left: -10rem;
  }
}

@media (min-width: 1024px) {
  .vf-fayda-pattern {
    left: 0;
    width: 100%;
    min-width: 100%;
    height: auto;
    min-height: 0;
  }
}

html.vf-theme-dark .vf-fayda-pattern,
html.dark .vf-fayda-pattern,
html[data-vf-theme="dark"] .vf-fayda-pattern {
  opacity: 0.4;
}

.vf-v5-shell,
.vf-v5-grid {
  position: relative;
  z-index: 1;
}

.vf-partner-logos {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.9rem !important;
}

@media (min-width: 1024px) {
  .vf-partner-logos {
    justify-content: flex-start;
  }
}

.vf-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.65rem;
  border-radius: 1.35rem;
  /* design: rounded-3xl bg-white/10 border-white/20 backdrop-blur */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .vf-logo-tile {
    width: 5.5rem;
    height: 5.5rem;
  }
}

/* Logo tiles stay glass on blue→sky canvas in both themes (design: bg-white/10) */
html.vf-theme-light .vf-logo-tile,
html[data-vf-theme="light"] .vf-logo-tile {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vf-logo-tile img.client-logo-size,
.vf-logo-tile img.brand-only-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.vf-exchange-wrap {
  width: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

@media (min-width: 640px) {
  .vf-exchange-wrap {
    width: 2.85rem;
  }
}

img.data-exchange {
  flex-shrink: 0;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  max-width: 100%;
  object-fit: contain !important;
  content: none !important;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
}

.vf-partner-brand,
aside.vf-v5-brand,
.vf-v5-grid > .vf-partner-brand,
.vf-v5-grid > .vf-v5-brand {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

@media (min-width: 1024px) {
  .vf-partner-brand,
  aside.vf-v5-brand,
  .vf-v5-grid > .vf-partner-brand,
  .vf-v5-grid > .vf-v5-brand {
    align-items: flex-start;
  }
}

.vf-brand-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Match brand-column gap so logos → label → title feel even */
  gap: 0.85rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .vf-brand-copy {
    align-items: flex-start;
  }
}

.vf-auth-request-label {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fbba36;
  line-height: 1.25;
}

/* Brand label stays gold on blue canvas (design: text-[var(--fayda-gold)]) */
html.vf-theme-light .vf-auth-request-label,
html[data-vf-theme="light"] .vf-auth-request-label {
  color: var(--fayda-gold, #fbba36);
}

.vf-partner-name {
  margin: 0;
  padding: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* Company name is always white — sits on sidebar-gradient in both themes */
html.vf-theme-light .vf-partner-name,
html[data-vf-theme="light"] .vf-partner-name {
  color: #ffffff;
}

/* Method rows — design badges + copy */
.vf-methods-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vf-methods-title,
.vf-v5-card h1,
.vf-v5-grid > :last-child h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fbfaf9 !important;
  text-align: left;
}

html.vf-theme-light .vf-methods-title,
html.vf-theme-light .vf-v5-card h1,
html.vf-theme-light .vf-v5-grid > :last-child h1,
html.vf-theme-light .vf-v5-card .text-white,
html.vf-theme-light .vf-v5-grid > :last-child .text-white,
html[data-vf-theme="light"] .vf-methods-title,
html[data-vf-theme="light"] .vf-v5-card h1,
html[data-vf-theme="light"] .vf-v5-grid > :last-child h1,
html[data-vf-theme="light"] .vf-v5-card .text-white,
html[data-vf-theme="light"] .vf-v5-grid > :last-child .text-white {
  color: #0c0a09 !important;
}

.vf-methods .leading-5.font-sans,
.vf-methods > h1 {
  display: none !important;
}

.vf-method-row,
button.vf-method-row,
button[id^="login_with_"] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.9rem 1rem !important;
  min-height: 4.25rem !important;
  border-radius: 0.9rem !important;
  border: 1px solid var(--vf-field-border, rgba(255, 255, 255, 0.07)) !important;
  background: var(--vf-field-bg, rgba(4, 12, 18, 0.55)) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

button[id^="login_with_"]:hover,
.vf-method-row:hover {
  border-color: rgba(64, 149, 191, 0.45) !important;
  background: var(--vf-field-bg, rgba(4, 12, 18, 0.65)) !important;
}

html.vf-theme-light button[id^="login_with_"],
html[data-vf-theme="light"] button[id^="login_with_"],
html.vf-theme-light .vf-method-row,
html[data-vf-theme="light"] .vf-method-row {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(2, 50, 75, 0.12) !important;
}

html.vf-theme-light button[id^="login_with_"]:hover,
html[data-vf-theme="light"] button[id^="login_with_"]:hover,
html.vf-theme-light .vf-method-row:hover,
html[data-vf-theme="light"] .vf-method-row:hover {
  border-color: rgba(64, 149, 191, 0.45) !important;
  background: #ffffff !important;
}

.vf-method-badge {
  position: absolute;
  top: -0.55rem;
  right: 1rem;
  z-index: 2;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.15rem 0.6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.2;
}

.vf-badge-fastest {
  background: rgba(15, 213, 161, 0.15);
  border: 1px solid rgba(15, 213, 161, 0.28);
  color: #6ee7b7;
}

html.vf-theme-light .vf-badge-fastest,
html[data-vf-theme="light"] .vf-badge-fastest {
  color: #047857;
  background: rgba(15, 213, 161, 0.18);
}

.vf-badge-secure {
  background: rgba(251, 186, 54, 0.18);
  border: 1px solid rgba(251, 186, 54, 0.32);
  color: #fbba36;
}

html.vf-theme-light .vf-badge-secure,
html[data-vf-theme="light"] .vf-badge-secure {
  color: #92400e;
}

.vf-badge-offline {
  background: rgba(64, 149, 191, 0.18);
  border: 1px solid rgba(64, 149, 191, 0.3);
  color: var(--fayda-sky, #4095bf);
}

html.vf-theme-light .vf-badge-offline,
html[data-vf-theme="light"] .vf-badge-offline {
  color: #0369a1;
}

.vf-method-icon,
button[id^="login_with_"] img {
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.vf-method-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vf-method-title,
button[id^="login_with_"] .vf-method-title,
button[id^="login_with_"] > div:not(.vf-method-copy) {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #fbfaf9 !important;
  text-align: left !important;
}

html.vf-theme-light .vf-method-title,
html.vf-theme-light button[id^="login_with_"] > div,
html.vf-theme-light .vf-v5-card .text-white,
html.vf-theme-light .vf-v5-grid > :last-child .text-white,
html[data-vf-theme="light"] .vf-method-title,
html[data-vf-theme="light"] button[id^="login_with_"] > div,
html[data-vf-theme="light"] .vf-v5-card .text-white,
html[data-vf-theme="light"] .vf-v5-grid > :last-child .text-white {
  color: #0c0a09 !important;
}

.vf-method-desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #97a7b3;
  font-weight: 400;
}

html.vf-theme-light .vf-method-desc,
html.vf-theme-light .vf-v5-card .text-white .vf-method-desc,
html[data-vf-theme="light"] .vf-method-desc,
html[data-vf-theme="light"] .vf-v5-card .text-white .vf-method-desc {
  color: #7c6d67 !important;
}

.vf-method-chevron {
  color: #97a7b3;
  margin-left: auto;
}

/* Hide legacy under-button tooltip links on method list */
.vf-methods-list .relative.flex.justify-center,
button[id^="login_with_"] + .relative.flex.justify-center {
  display: none !important;
}

/* Network error card — fayda-design-system VerifaydaNetworkErrorCard */
.vf-network-error-card {
  max-width: 32rem;
  margin-inline: auto;
  border-radius: 1.5rem !important;
  padding: 2.5rem 2rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
}
.vf-network-error-art {
  display: block;
  height: 11rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 0.25rem;
}
#try_again {
  background: #fbba36 !important;
  border: 1px solid #fbba36 !important;
  color: #001421 !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  min-height: 2.85rem;
  min-width: 11rem;
  max-width: 16rem;
}

/* Gold primary CTAs — design --brand (#fbba36) */
#get_otp,
#verify_otp,
#verify_totp,
button[type="submit"].w-full,
.vf-v5-card button.w-full[type="submit"],
.vf-v5-card #get_otp,
.vf-v5-card #verify_otp,
.vf-v5-card #verify_totp {
  background: #fbba36 !important;
  border: 1px solid #fbba36 !important;
  color: #001421 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 0.75rem !important;
  min-height: 2.85rem !important;
  box-shadow: none !important;
}

#get_otp:hover,
#verify_otp:hover,
#verify_totp:hover,
#get_otp:disabled,
#verify_otp:disabled,
#verify_totp:disabled {
  background: #e7a200 !important;
  border-color: #e7a200 !important;
  color: #001421 !important;
  opacity: 1 !important;
}

#get_otp:disabled,
#verify_otp:disabled,
#verify_totp:disabled {
  background: rgba(251, 186, 54, 0.45) !important;
  border-color: transparent !important;
  color: rgba(0, 20, 33, 0.55) !important;
}

/* Secondary outline CTA (Scan Faydapass QR) */
.vf-secondary-cta,
.vf-v5-card a.vf-secondary-cta,
button.vf-secondary-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 2.85rem !important;
  border-radius: 0.75rem !important;
  background: transparent !important;
  border: 1px solid rgba(64, 149, 191, 0.65) !important;
  color: var(--primary-color, #2d8ab8) !important;
  font-weight: 600 !important;
}

/* FAN / ID text inputs — recessed; when inside combined Scan-QR shell, border lives on the shell */
.vf-v5-card input[type="text"],
.vf-v5-card input[type="tel"],
.vf-v5-card input[id^="Otp_"],
.vf-v5-card input[id^="Bio_"],
.vf-v5-card input[placeholder*="FAN" i],
.vf-v5-card input[placeholder*="1234"] {
  background: rgba(2, 18, 28, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  color: #fbfaf9 !important;
  padding: 0.85rem 1rem !important;
  min-height: 3rem !important;
  box-shadow: none !important;
  text-align: left !important;
}

.vf-v5-card input::placeholder {
  color: #8a9499 !important;
  opacity: 1 !important;
  letter-spacing: 0.04em;
}

/* Form page header: title | method chip (inputs stay BELOW, not in this row) */
.vf-form-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  width: 100%;
}

.vf-form-header #back-button,
.vf-form-header .vf-back-btn,
#back-button.vf-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0.65rem !important;
  color: var(--primary-color, #2d8ab8) !important;
  background: transparent !important;
  line-height: 1 !important;
  position: static !important;
  top: auto !important;
}

.vf-form-header #back-button:hover,
.vf-form-header .vf-back-btn:hover,
#back-button.vf-back-btn:hover {
  background: color-mix(in srgb, var(--primary-color, #2d8ab8) 12%, transparent) !important;
}

.vf-form-header #back-button svg,
.vf-form-header .vf-back-btn svg,
#back-button.vf-back-btn svg {
  color: inherit !important;
  fill: currentColor !important;
  width: 15px;
  height: 13px;
}

.vf-form-header .vf-form-method-chip {
  margin-left: auto !important;
}

/* Hide empty wrapper that used to stack the arrow above the title */
.vf-form-header + .inline.w-max,
.vf-back-row-hidden,
div.inline.w-max.mb-1:empty,
div.inline.w-max.mb-1:has(#back-button:only-child) {
  /* kept for layout until JS moves the button */
}
div.inline.w-max.mb-1:has(#back-button) {
  display: contents;
}

.vf-form-header .verifayda-otp-heading,
.vf-form-header-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  padding: 0 !important;
}

.vf-form-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(251, 250, 249, 0.88);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  line-height: 1;
}

.vf-form-method-chip .vf-method-chip-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--fayda-sky, #4095bf);
}

.vf-form-method-chip .vf-method-chip-text {
  color: rgba(251, 250, 249, 0.9);
  letter-spacing: 0.01em;
}

html.vf-theme-light .vf-form-header .verifayda-otp-heading,
html.vf-theme-light .vf-form-header-title,
html[data-vf-theme="light"] .vf-form-header .verifayda-otp-heading,
html[data-vf-theme="light"] .vf-form-header-title {
  color: #0c0a09 !important;
}

html.vf-theme-light .vf-form-method-chip,
html[data-vf-theme="light"] .vf-form-method-chip {
  border-color: var(--vf-field-border, rgba(2, 50, 75, 0.18)) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

html.vf-theme-light .vf-form-method-chip .vf-method-chip-text,
html[data-vf-theme="light"] .vf-form-method-chip .vf-method-chip-text {
  color: #0c0a09 !important;
}

html.vf-theme-light .vf-form-method-chip .vf-method-chip-icon,
html[data-vf-theme="light"] .vf-form-method-chip .vf-method-chip-icon {
  color: var(--fayda-sky, #4095bf) !important;
}

html.vf-theme-light .verifayda-otp-heading,
html[data-vf-theme="light"] .verifayda-otp-heading {
  color: #0c0a09 !important;
}

.verifayda-otp-heading {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  color: #ffffff !important;
  margin: 0 0 1.1rem !important;
  padding: 0 !important;
}

/* FAN/FCN label above input — text then (i), matching design */
.vf-fan-label-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 0 0.55rem !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.vf-fan-label,
.vf-fan-label-row button.vf-fan-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  background: transparent !important;
  border: none !important;
  cursor: help;
  visibility: visible !important;
  opacity: 1 !important;
}

html.vf-theme-light .vf-fan-label,
html[data-vf-theme="light"] .vf-fan-label,
html.vf-theme-light .vf-fan-label-row button.vf-fan-label,
html[data-vf-theme="light"] .vf-fan-label-row button.vf-fan-label {
  color: #0c0a09 !important;
}

.vf-fan-label .vf-fan-label-text {
  order: 1;
  display: inline !important;
  color: #ffffff !important;
  visibility: visible !important;
}

html.vf-theme-light .vf-fan-label .vf-fan-label-text,
html[data-vf-theme="light"] .vf-fan-label .vf-fan-label-text {
  color: #0c0a09 !important;
}

.vf-fan-label svg {
  order: 2;
  width: 15px !important;
  height: 15px !important;
  opacity: 0.75;
  color: rgba(251, 250, 249, 0.7) !important;
  fill: currentColor !important;
  flex-shrink: 0;
}

html.vf-theme-light .vf-fan-label svg,
html[data-vf-theme="light"] .vf-fan-label svg {
  color: rgba(2, 50, 75, 0.4) !important;
  fill: var(--vf-muted, #8a7e78) !important;
}

/* Combined FAN field shell: input | divider | Scan QR (exact design) */
.vf-fan-input-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  background: var(--vf-field-bg, rgba(2, 18, 28, 0.55)) !important;
  border: 1px solid var(--vf-field-border, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 0.75rem !important;
  overflow: hidden;
  min-height: 3.15rem !important;
  box-sizing: border-box !important;
}

html.vf-theme-light .vf-fan-input-row,
html[data-vf-theme="light"] .vf-fan-input-row {
  background: var(--vf-field-bg, rgba(255, 255, 255, 0.5)) !important;
  border-color: var(--vf-field-border, rgba(2, 50, 75, 0.14)) !important;
}

.vf-fan-input-row input,
.vf-fan-input-row input[type="text"],
.vf-fan-input-row input[type="tel"],
.vf-v5-card .vf-fan-input-row input[id^="Otp_"],
.vf-v5-card .vf-fan-input-row input[placeholder*="1234"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 3.15rem !important;
  height: 100% !important;
  padding: 0.85rem 1rem !important;
  color: var(--vf-ink, #fbfaf9) !important;
  text-align: left !important;
}

html.vf-theme-light .vf-fan-input-row input,
html[data-vf-theme="light"] .vf-fan-input-row input,
html.vf-theme-light .vf-fan-input-row input[type="text"],
html[data-vf-theme="light"] .vf-fan-input-row input[type="text"],
html.vf-theme-light .vf-fan-input-row input[type="tel"],
html[data-vf-theme="light"] .vf-fan-input-row input[type="tel"],
html.vf-theme-light .vf-v5-card .vf-fan-input-row input[id^="Otp_"],
html[data-vf-theme="light"] .vf-v5-card .vf-fan-input-row input[id^="Otp_"],
html.vf-theme-light .vf-v5-card .vf-fan-input-row input[placeholder*="1234"],
html[data-vf-theme="light"] .vf-v5-card .vf-fan-input-row input[placeholder*="1234"] {
  color: var(--vf-ink, #0c0a09) !important;
}

.vf-fan-input-row input:focus,
.vf-fan-input-row input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.vf-fan-input-row input::placeholder {
  color: #8a9499 !important;
  opacity: 1 !important;
  letter-spacing: 0.06em;
}

html.vf-theme-light .vf-fan-input-row input::placeholder,
html[data-vf-theme="light"] .vf-fan-input-row input::placeholder {
  color: var(--vf-muted, #8a7e78) !important;
}

.vf-scan-qr-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 3.15rem !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5ec8e8 !important;
  box-shadow: none !important;
}

.vf-scan-qr-btn:hover {
  background: rgba(94, 200, 232, 0.08) !important;
}

.vf-scan-qr-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #5ec8e8 !important;
  color: #5ec8e8 !important;
  flex-shrink: 0;
}

html.vf-theme-light .vf-scan-qr-btn svg,
html[data-vf-theme="light"] .vf-scan-qr-btn svg {
  stroke: var(--fayda-sky, #4095bf) !important;
  color: var(--fayda-sky, #4095bf) !important;
}

.vf-scan-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #5ec8e8 !important;
  white-space: nowrap;
}

html.vf-theme-light .vf-scan-label,
html[data-vf-theme="light"] .vf-scan-label {
  color: var(--fayda-sky, #4095bf) !important;
}

/* TOTP digit boxes — rounded dark squares */
html.vf-theme-dark #totp_verify_input .pincode-input-text,
html.dark #totp_verify_input .pincode-input-text,
html[data-vf-theme="dark"] #totp_verify_input .pincode-input-text,
html.vf-theme-dark #otp_verify_input .pincode-input-text,
html.dark #otp_verify_input .pincode-input-text,
html[data-vf-theme="dark"] #otp_verify_input .pincode-input-text {
  width: 2.55rem !important;
  height: 2.75rem !important;
  margin: 0 0.28rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.65rem !important;
  background: rgba(2, 18, 28, 0.55) !important;
  color: #ffffff !important;
  font-size: 1.15rem !important;
  box-shadow: none !important;
}

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: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  flex-shrink: 0 !important;
  filter: none !important;
}

button[id^='login_with_otp'] img,
button[id^='login_with_pin'] img,
button[id^='login_with_bio'] img,
button[id^='login_with_totp'] img {
  width: 2.25rem !important;
  height: 2.25rem !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 — compact full-width dark panel (design.apps) ── */
.vf-altcha-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.75rem 0 0.85rem !important;
}

/* Captcha host: don't center-shrink */
.vf-v5-card .flex.justify-center:has(altcha-widget),
.vf-v5-card .flex.justify-center:has(.vf-altcha-wrap) {
  display: block !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.35rem !important;
}

altcha-widget,
.vf-altcha-wrap altcha-widget {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  --altcha-max-width: 100%;
  --altcha-padding: 0.55rem 0.85rem;
  --altcha-border-radius: 0.65rem;
  --altcha-border-width: 1px;
  --altcha-border-color: rgba(255, 255, 255, 0.12);
  --altcha-color-base: rgba(2, 18, 28, 0.72);
  --altcha-color-base-content: #fbfaf9;
  --altcha-color-neutral: rgba(255, 255, 255, 0.28);
  --altcha-color-neutral-content: rgba(251, 250, 249, 0.78);
  --altcha-color-primary: #4095bf;
  --altcha-color-primary-content: #ffffff;
  --altcha-color-success: #0fd5a1;
  --altcha-color-success-content: #001421;
  --altcha-color-error: #ff8f8f;
  --altcha-color-error-content: #ffffff;
  --altcha-checkbox-size: 16px;
  --altcha-checkbox-border-radius: 4px;
  --altcha-checkbox-border-color: rgba(255, 255, 255, 0.55);
  --altcha-spinner-color: var(--fayda-sky, #4095bf);
}

altcha-widget::part(main),
altcha-widget .altcha,
.vf-altcha-wrap .altcha {
  background: rgba(2, 18, 28, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.65rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fbfaf9 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 3.5rem !important;
  max-height: 3.75rem !important;
  padding: 0.75rem 1rem !important;
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

/* One horizontal row: checkbox+label | Protected by ALTCHA */
altcha-widget .altcha-main,
.vf-altcha-wrap .altcha-main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0.5rem !important;
  max-width: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

altcha-widget .altcha-main > *,
.vf-altcha-wrap .altcha-main > * {
  width: auto !important;
  flex-direction: row !important;
}

altcha-widget .altcha-checkbox-wrap,
.vf-altcha-wrap .altcha-checkbox-wrap {
  align-items: center !important;
  gap: 0.55rem !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}

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

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

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

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

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

/* Pull footer onto the same row (right side) — compact height */
altcha-widget .altcha-footer,
.vf-altcha-wrap .altcha-footer {
  display: flex !important;
  align-items: center !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.9;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  width: auto !important;
  gap: 0.3rem;
  position: static !important;
  transform: none !important;
  background: transparent !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(251, 250, 249, 0.65) !important;
  font-size: 0.68rem !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 0 !important;
}

altcha-widget .altcha-logo,
.vf-altcha-wrap .altcha-logo {
  display: flex !important;
  color: #a78bfa !important;
  opacity: 0.95;
  transform: scale(0.78);
  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.25rem 0.4rem !important;
  font-size: 0.72rem !important;
  margin: 0 0.5rem 0.4rem !important;
}

altcha-widget .altcha-spinner,
.vf-altcha-wrap .altcha-spinner {
  border-color: rgba(125, 211, 232, 0.25) !important;
  border-top-color: var(--primary-color, #2d8ab8) !important;
  width: 16px !important;
  height: 16px !important;
}

altcha-widget[data-state='verifying'] .altcha,
.vf-altcha-wrap altcha-widget[data-state='verifying'] .altcha {
  border-color: rgba(64, 149, 191, 0.55) !important;
  box-shadow: none !important;
}

altcha-widget[data-state='verified'] .altcha,
.vf-altcha-wrap .altcha-widget[data-state='verified'] .altcha,
.vf-altcha-wrap altcha-widget[data-state='verified'] .altcha {
  border-color: rgba(15, 213, 161, 0.45) !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: var(--fayda-sky, #4095bf) !important;
}

/* ═══════════════════════════════════════════════════════════════
   VeriFayda 2.0 layout — design.fayda.et/verifayda-v5
   Light (:root) / Dark (html.vf-theme-dark)
   ═══════════════════════════════════════════════════════════════ */

body {
  /* verifayda-v5: bg-sidebar-gradient */
  background-color: var(--sidebar-bg-stop-0, #031019) !important;
  background-image: var(--login-background) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--login-text-color);
  font-family: var(--font-body), var(--font-body-am), sans-serif;
  position: relative;
  overflow-x: hidden;
}

html.vf-theme-dark body,
html.dark body,
html[data-vf-theme="dark"] body,
html.vf-theme-dark,
html.dark,
html[data-vf-theme="dark"] {
  background-color: #031019 !important;
}

/* Light mode page canvas = sidebar-gradient (blue→sky), same as design v5 */
html.vf-theme-light body,
html[data-vf-theme="light"] body,
html.vf-theme-light,
html[data-vf-theme="light"] {
  background-color: var(--sidebar-bg-stop-0, #02324b) !important;
  background-image: var(--sidebar-gradient) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html.vf-theme-light .vf-fayda-pattern,
html[data-vf-theme="light"] .vf-fayda-pattern {
  /* design: opacity-25 dark:opacity-40 */
  opacity: 0.25;
}

/* Ensure page chrome inherits teal page wash in dark mode */
html.vf-theme-dark #root,
html.dark #root,
html[data-vf-theme="dark"] #root,
html.vf-theme-dark .section-background,
html.dark .section-background,
html[data-vf-theme="dark"] .section-background,
html.vf-theme-dark section.oidc-scroll-main,
html.dark section.oidc-scroll-main,
html[data-vf-theme="dark"] section.oidc-scroll-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Light mode also keeps chrome transparent so sidebar-gradient canvas shows */
html.vf-theme-light #root,
html[data-vf-theme="light"] #root,
html.vf-theme-light .section-background,
html[data-vf-theme="light"] .section-background,
html.vf-theme-light section.oidc-scroll-main,
html[data-vf-theme="light"] section.oidc-scroll-main,
html.vf-theme-light .oidc-app-shell,
html[data-vf-theme="light"] .oidc-app-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.oidc-page-content,
.section-background {
  background: transparent !important;
}

/* Kill residual MOSIP section illustration / glow bars */
section.oidc-scroll-main::before,
section.oidc-scroll-main::after,
.section-background::before,
.section-background::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Solid opaque cards (no acrylic / glass) — design --card */
.multipurpose-login-card,
div.w-full.max-w-\[500px\] > .shadow-lg,
.shadow-lg.rounded-xl,
.rounded-\[20px\] {
  background: var(--vf-card-bg, #ffffff) !important;
  border: 1px solid var(--vf-card-border, rgba(2, 50, 75, 0.12)) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 40px rgba(2, 50, 75, 0.1) !important;
}

/* Footer must never pick up acrylic card chrome (layout mishits) */
footer.vf-v5-card,
#footer.vf-v5-card,
.footer-container.vf-v5-card,
footer,
.footer,
#footer,
.footer-container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  color: var(--footer-text-color, rgba(255, 255, 255, 0.7)) !important;
}

html.vf-theme-dark .multipurpose-login-card,
html.dark .multipurpose-login-card,
html[data-vf-theme="dark"] .multipurpose-login-card {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4) !important;
}

/* Method list styles live in the v5 block above — keep dark/light tokens only */

/* Gold eyebrow — do NOT target .login-text (it is on the whole page section) */
.service-auth-label,
.vf-auth-request-label {
  color: var(--fayda-gold, #fbba36) !important;
}

/* Light-mode OTP digits use dark ink */
html.vf-theme-light #totp_verify_input .pincode-input-text,
html.vf-theme-light #otp_verify_input .pincode-input-text,
html[data-vf-theme="light"] #totp_verify_input .pincode-input-text,
html[data-vf-theme="light"] #otp_verify_input .pincode-input-text,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) #otp_verify_input .pincode-input-text,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) #totp_verify_input .pincode-input-text {
  color: #02324b !important;
  -webkit-text-fill-color: #02324b !important;
  caret-color: #02324b !important;
  border-bottom-color: #02324b !important;
}

/* Dark-mode OTP digits stay white */
html.vf-theme-dark #totp_verify_input .pincode-input-text,
html.vf-theme-dark #otp_verify_input .pincode-input-text,
html.dark #totp_verify_input .pincode-input-text,
html.dark #otp_verify_input .pincode-input-text,
html[data-vf-theme="dark"] #totp_verify_input .pincode-input-text,
html[data-vf-theme="dark"] #otp_verify_input .pincode-input-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.85) !important;
}

/* ALTCHA — light */
html.vf-theme-light altcha-widget,
html[data-vf-theme="light"] altcha-widget,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) altcha-widget {
  --altcha-border-color: rgba(2, 50, 75, 0.18);
  --altcha-color-base: rgba(255, 255, 255, 0.75);
  --altcha-color-base-content: #02324b;
  --altcha-color-neutral: rgba(2, 50, 75, 0.25);
  --altcha-color-neutral-content: #5a6b76;
  --altcha-color-primary: #02324b;
  --altcha-checkbox-border-color: rgba(2, 50, 75, 0.45);
}

html.vf-theme-light altcha-widget .altcha,
html[data-vf-theme="light"] altcha-widget .altcha,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) altcha-widget .altcha {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(233, 242, 237, 0.85) 100%) !important;
  border: 1px solid rgba(2, 50, 75, 0.14) !important;
  color: #02324b !important;
  box-shadow: 0 8px 22px rgba(2, 50, 75, 0.08) !important;
}

html.vf-theme-light altcha-widget .altcha-checkbox-wrap label,
html[data-vf-theme="light"] altcha-widget .altcha-checkbox-wrap label,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) altcha-widget .altcha-checkbox-wrap label {
  color: #02324b !important;
}

html.vf-theme-light altcha-widget .altcha-footer p,
html.vf-theme-light altcha-widget .altcha-footer a,
html[data-vf-theme="light"] altcha-widget .altcha-footer p,
html[data-vf-theme="light"] altcha-widget .altcha-footer a,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) altcha-widget .altcha-footer p,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) altcha-widget .altcha-footer a {
  color: rgba(2, 50, 75, 0.55) !important;
}

/* Footer soft on both themes */
footer,
.footer,
#footer {
  background: transparent !important;
  color: var(--footer-text-color) !important;
}

/* ── Header: remove white bar (design: transparent / no chrome) ── */
#navbar-header,
nav.navbar-header,
.navbar-header,
nav.bg-white.navbar-header,
nav.bg-white {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 3.25rem;
  padding-top: 0.85rem !important;
  padding-bottom: 0.35rem !important;
}

/* Design: language chip top-right only — hide left brand chrome on login */
#navbar-header .brand-logo,
nav.navbar-header .brand-logo,
.navbar-header img.brand-logo,
.navbar-header a[href="/"] img {
  display: none !important;
}

/* Language pill — globe + ENG + chevron (design.apps glass chip) */
#language_dropdown #language_selection,
#language_selection.vf-lang-pill,
#language_dropdown > span,
#language_dropdown [aria-label="Customise options"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border-radius: 0.65rem !important;
  padding: 0.4rem 0.7rem !important;
  padding-left: 0.7rem !important;
  padding-right: 0.7rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  min-height: 2.15rem;
  min-width: 0 !important;
  width: auto !important;
  line-height: 1 !important;
}

.vf-lang-globe,
.vf-lang-glyph {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  opacity: 0.95;
}

/* Phosphor Translate — gold like fayda LanguageSwitcher */
.vf-lang-glyph {
  color: var(--fayda-gold, #fbba36) !important;
}

.vf-lang-globe {
  color: #ffffff !important;
}

.vf-lang-chevron,
#language_selection svg.vf-lang-chevron {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 0.1rem !important;
  position: static !important;
  top: auto !important;
  flex-shrink: 0;
  opacity: 0.7;
  color: #ffffff !important;
}

#language_selection svg.vf-lang-chevron path {
  fill: currentColor !important;
}

html.vf-theme-dark #language_dropdown #language_selection,
html.dark #language_dropdown #language_selection,
html[data-vf-theme="dark"] #language_dropdown #language_selection {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* Language pill stays glass-white on blue canvas (LanguageSwitcher variant=sidebar) */
html.vf-theme-light #language_dropdown #language_selection,
html.vf-theme-light #language_selection.vf-lang-pill,
html.vf-theme-light #language_dropdown > span,
html.vf-theme-light #language_dropdown [aria-label="Customise options"],
html[data-vf-theme="light"] #language_dropdown #language_selection,
html[data-vf-theme="light"] #language_selection.vf-lang-pill,
html[data-vf-theme="light"] #language_dropdown > span,
html[data-vf-theme="light"] #language_dropdown [aria-label="Customise options"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html.vf-theme-light .vf-lang-globe,
html[data-vf-theme="light"] .vf-lang-globe {
  color: #ffffff !important;
}

html.vf-theme-light #language_dropdown #language_selection svg.vf-lang-chevron path,
html[data-vf-theme="light"] #language_dropdown #language_selection svg.vf-lang-chevron path {
  fill: #ffffff !important;
}

html.vf-theme-light #language_dropdown #language_selection .vf-lang-glyph,
html.vf-theme-light #language_dropdown #language_selection .vf-lang-glyph path,
html[data-vf-theme="light"] #language_dropdown #language_selection .vf-lang-glyph,
html[data-vf-theme="light"] #language_dropdown #language_selection .vf-lang-glyph path {
  color: var(--fayda-gold, #fbba36) !important;
  fill: currentColor !important;
}

html.vf-theme-light #language_selection .vf-lang-globe circle,
html.vf-theme-light #language_selection .vf-lang-globe path,
html[data-vf-theme="light"] #language_selection .vf-lang-globe circle,
html[data-vf-theme="light"] #language_selection .vf-lang-globe path {
  fill: none !important;
  stroke: #ffffff !important;
}

/* Gold language glyph like design */
#language_dropdown #language_selection .vf-lang-glyph,
#language_selection.vf-lang-pill .vf-lang-glyph {
  color: var(--fayda-gold, #fbba36) !important;
  flex-shrink: 0;
}

/* Language menu panel */
#language_dropdown [data-radix-popper-content-wrapper] [role="menu"],
#language_dropdown [role="menu"],
#language_dropdown [class*="bg-[#0F4356]"] {
  background: #0b1a22 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
  min-width: 11rem !important;
  padding: 0.4rem !important;
}

#language_dropdown [role="menuitem"] {
  border-radius: 0.45rem !important;
  padding: 0.55rem 0.7rem !important;
  font-size: 0.85rem !important;
  color: #fbfaf9 !important;
  outline: none !important;
}

#language_dropdown [role="menuitem"]:hover,
#language_dropdown [role="menuitem"]:focus {
  background: rgba(64, 149, 191, 0.22) !important;
}

#language_dropdown [role="menuitem"] .checkIcon,
#language_dropdown [role="menuitem"] svg.checkIcon {
  stroke: #0fd5a1 !important;
}

/* Hide the triangle arrow under the dropdown — design uses a clean panel */
#language_dropdown [data-radix-popper-content-wrapper] > div > svg,
#language_dropdown [role="menu"] > svg {
  display: none !important;
}

html.vf-theme-light #language_dropdown [class*="bg-[#0F4356]"],
html[data-vf-theme="light"] #language_dropdown [class*="bg-[#0F4356]"],
html.vf-theme-light #language_dropdown [role="menu"],
html[data-vf-theme="light"] #language_dropdown [role="menu"] {
  background: #ffffff !important;
  border-color: rgba(2, 50, 75, 0.12) !important;
  color: #0a1620 !important;
}

html.vf-theme-light #language_dropdown [role="menuitem"],
html[data-vf-theme="light"] #language_dropdown [role="menuitem"] {
  color: #0a1620 !important;
}

/* Language menu: match the VeriFayda reference selector. Radix renders this
   portal outside #language_dropdown, so it needs its own global classes. */
.vf-lang-menu {
  min-width: 12rem !important;
  padding: 0 !important;
  overflow: hidden;
  background: #0b1f2b !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38) !important;
}

.vf-lang-menu-heading {
  padding: 0.62rem 0.85rem 0.52rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vf-lang-menu-item {
  min-height: 2rem;
  padding: 0.5rem 0.85rem !important;
  gap: 0.75rem;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
}

.vf-lang-menu-item:hover,
.vf-lang-menu-item:focus {
  background: rgba(64, 149, 191, 0.2) !important;
}

.vf-lang-menu-code {
  width: 1.8rem;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vf-lang-menu-label {
  color: #ffffff;
  font-weight: 500;
}

.vf-lang-menu .checkIcon {
  stroke: #ffffff !important;
}

html.vf-theme-light .vf-lang-menu,
html[data-vf-theme="light"] .vf-lang-menu {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(2, 50, 75, 0.15) !important;
  box-shadow: 0 12px 28px rgba(2, 50, 75, 0.16) !important;
}

html.vf-theme-light .vf-lang-menu-heading,
html[data-vf-theme="light"] .vf-lang-menu-heading {
  border-color: rgba(2, 50, 75, 0.12);
  color: #5a6b76;
}

html.vf-theme-light .vf-lang-menu-item,
html[data-vf-theme="light"] .vf-lang-menu-item,
html.vf-theme-light .vf-lang-menu-label,
html[data-vf-theme="light"] .vf-lang-menu-label {
  color: #02324b !important;
  border-color: rgba(2, 50, 75, 0.08) !important;
}

html.vf-theme-light .vf-lang-menu-code,
html[data-vf-theme="light"] .vf-lang-menu-code {
  color: #5a6b76;
}

html.vf-theme-light .vf-lang-menu-item:hover,
html.vf-theme-light .vf-lang-menu-item:focus,
html[data-vf-theme="light"] .vf-lang-menu-item:hover,
html[data-vf-theme="light"] .vf-lang-menu-item:focus {
  background: rgba(64, 149, 191, 0.12) !important;
}

html.vf-theme-light .vf-lang-menu .checkIcon,
html[data-vf-theme="light"] .vf-lang-menu .checkIcon {
  stroke: #02324b !important;
}

/* Theme toggle chip (injected by verifayda-ui-fix.js) */
#vf-theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  /* Glass chip on blue canvas (both themes) */
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

html.vf-theme-dark #vf-theme-toggle,
html.dark #vf-theme-toggle,
html[data-vf-theme="dark"] #vf-theme-toggle,
html.vf-theme-light #vf-theme-toggle,
html[data-vf-theme="light"] #vf-theme-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ========== Consent / Claims & Consent (VeriFayda v5) ========== */
/* Compact expiry chip — sits in the card header (right side) */
.vf-consent-timer {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(251, 186, 54, 0.1);
  border: 1px solid rgba(251, 186, 54, 0.28);
  color: rgba(247, 250, 252, 0.72);
  font-size: 0.72rem;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
  line-height: 1.2;
}
.vf-consent-timer-msg {
  color: rgba(247, 250, 252, 0.55);
  font-weight: 500;
}
.vf-consent-timer-value {
  color: #fbba36;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 0;
}

/* Force side-by-side brand | card like design.apps reference */
.vf-consent-shell {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
}
.vf-consent-shell > .vf-v5-grid,
.vf-consent-shell > .vf-v5-shell,
.vf-consent-shell.vf-v5-grid,
.vf-consent-shell .vf-v5-shell.vf-v5-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  min-height: calc(100vh - 6rem);
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
@media (min-width: 900px) {
  .vf-consent-shell > .vf-v5-grid,
  .vf-consent-shell > .vf-v5-shell,
  .vf-consent-shell.vf-v5-grid,
  .vf-consent-shell .vf-v5-shell.vf-v5-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
    gap: 3rem !important;
  }
}

.vf-consent-shell .vf-partner-brand,
.vf-consent-shell .vf-v5-brand {
  text-align: left;
  justify-self: start;
  width: 100%;
  gap: 0.85rem;
}
.vf-consent-shell .vf-brand-copy {
  text-align: left;
  align-items: flex-start;
  gap: 0.85rem;
}
.vf-consent-shell .vf-auth-request-label,
.vf-consent-shell .vf-partner-name {
  text-align: left !important;
}
.vf-consent-shell .vf-partner-logos {
  justify-content: flex-start !important;
}

.vf-consent-card {
  max-width: 34rem !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem 1.55rem 1.55rem !important;
}

.vf-consent-card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.vf-consent-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  border-radius: 0.4rem;
  flex-shrink: 0;
}
.vf-consent-back:hover {
  background: rgba(255, 255, 255, 0.08);
}
.vf-consent-back svg {
  width: 1.15rem;
  height: 1.15rem;
}

.vf-consent-card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  flex: 1 1 auto;
  min-width: 0;
}

.vf-consent-request-msg {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 400;
}

.vf-consent-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vf-consent-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vf-consent-section-head,
.vf-consent-card .vf-consent-section-head,
.vf-consent-card form > div > .grid {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  grid-template-columns: none !important;
  margin-bottom: 0.15rem;
}

.vf-consent-section-label,
.vf-consent-card .font-semibold {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: #ffffff;
}

.vf-consent-info,
.vf-consent-card .info-icon-button {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.9rem !important;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: help;
}

.vf-consent-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.vf-consent-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(251, 186, 54, 0.12);
  color: #fbba36;
  border: 1px solid rgba(251, 186, 54, 0.4);
}

.vf-consent-claims-grid,
.vf-consent-card .vf-consent-claims-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 520px) {
  .vf-consent-claims-grid,
  .vf-consent-card .vf-consent-claims-grid {
    grid-template-columns: 1fr;
  }
}

.vf-consent-claim,
.vf-consent-card .vf-consent-claim {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0;
}

.vf-consent-claim > span:first-child,
.vf-consent-claim-chevron,
.vf-consent-card .vf-consent-claim > span:first-child {
  color: #fbba36 !important;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 700;
}

.vf-consent-claim-label,
.vf-consent-claim label {
  flex: 1;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
}

/* Blue toggles like design reference */
.vf-consent-card .slide-toggle-button,
.vf-consent-card .toggle-outline,
.vf-consent-card .toggle-no-outline {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.vf-consent-card .peer:checked ~ .slide-toggle-button,
.vf-consent-card input:checked + .slide-toggle-button,
.vf-consent-card .peer:checked + div.slide-toggle-button {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

.vf-consent-actions,
.vf-consent-card .vf-consent-actions,
.vf-consent-card form > .grid.gap-y-2 {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.vf-consent-card #continue.primary-button,
.vf-consent-card .vf-consent-btn-primary,
.vf-consent-card #continue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  background: #fbba36 !important;
  background-color: #fbba36 !important;
  color: #0a1620 !important;
  border: none !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  min-height: 3rem !important;
  box-shadow: 0 8px 20px rgba(251, 186, 54, 0.28) !important;
}

.vf-consent-card #continue .vf-consent-shield {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.vf-consent-card #continue:hover {
  filter: brightness(1.05);
}

.vf-consent-card #cancel.secondary-button,
.vf-consent-card .vf-consent-btn-secondary,
.vf-consent-card #cancel {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  min-height: 3rem !important;
}

.vf-consent-share-note,
.vf-consent-card .no-claims-record-banner {
  display: none !important;
}

/* Light theme consent card text */
html.vf-theme-light .vf-consent-card-title,
html[data-vf-theme="light"] .vf-consent-card-title,
html.vf-theme-light .vf-consent-section-label,
html[data-vf-theme="light"] .vf-consent-section-label,
html.vf-theme-light .vf-consent-claim,
html[data-vf-theme="light"] .vf-consent-claim,
html.vf-theme-light .vf-consent-claim-label,
html[data-vf-theme="light"] .vf-consent-claim-label,
html.vf-theme-light .vf-consent-card .font-semibold,
html[data-vf-theme="light"] .vf-consent-card .font-semibold,
html.vf-theme-light .vf-consent-back,
html[data-vf-theme="light"] .vf-consent-back {
  color: #0a1620 !important;
}

html.vf-theme-light .vf-consent-request-msg,
html[data-vf-theme="light"] .vf-consent-request-msg {
  color: rgba(10, 22, 32, 0.7) !important;
}

html.vf-theme-light .vf-consent-claim,
html[data-vf-theme="light"] .vf-consent-claim {
  border-bottom-color: rgba(2, 50, 75, 0.1);
}

html.vf-theme-light .vf-consent-card #cancel,
html[data-vf-theme="light"] .vf-consent-card #cancel {
  color: #0a1620 !important;
  border-color: rgba(2, 50, 75, 0.25) !important;
}

/* Light consent info icon */
html.vf-theme-light .vf-consent-info,
html[data-vf-theme="light"] .vf-consent-info,
html.vf-theme-light .vf-consent-card .info-icon-button,
html[data-vf-theme="light"] .vf-consent-card .info-icon-button {
  color: rgba(10, 22, 32, 0.55) !important;
}

/* Light consent badge */
html.vf-theme-light .vf-consent-badge,
html[data-vf-theme="light"] .vf-consent-badge {
  background: rgba(251, 186, 54, 0.12) !important;
  color: #fbba36 !important;
  border: 1px solid rgba(251, 186, 54, 0.4) !important;
}

/* Light consent card uses light background */
html.vf-theme-light .vf-consent-card.bg-white\/10,
html[data-vf-theme="light"] .vf-consent-card.bg-white\/10,
html.vf-theme-light .vf-v5-card,
html[data-vf-theme="light"] .vf-v5-card {
  background-color: var(--vf-card-bg, rgba(255, 255, 255, 0.6)) !important;
  border-color: var(--vf-card-border, rgba(2, 50, 75, 0.12)) !important;
}

/* Restore the rest of the consent card styles (padding, backdrop-filter) for dark mode */
.vf-consent-card.bg-white\/10,
.vf-v5-card.vf-consent-card {
  border-radius: 1.5rem !important;
  padding: 1.4rem 1.55rem 1.55rem !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
}

/* Dark mode consent card uses dark background */
html.vf-theme-dark .vf-consent-card.bg-white\/10,
html.dark .vf-consent-card.bg-white\/10,
html[data-vf-theme="dark"] .vf-consent-card.bg-white\/10,
html.vf-theme-dark .vf-v5-card.vf-consent-card,
html.dark .vf-v5-card.vf-consent-card,
html[data-vf-theme="dark"] .vf-v5-card.vf-consent-card {
  background-color: var(--vf-card-bg, rgba(9, 24, 33, 0.72)) !important;
  border-color: var(--vf-card-border, rgba(255, 255, 255, 0.1)) !important;
}

/* Keep the dark/light mode specific backdrop-filter for consistency */
html.vf-theme-dark .vf-consent-card.bg-white\/10,
html.dark .vf-consent-card.bg-white\/10,
html[data-vf-theme="dark"] .vf-consent-card.bg-white\/10,
html.vf-theme-dark .vf-v5-card.vf-consent-card,
html.dark .vf-v5-card.vf-consent-card,
html[data-vf-theme="dark"] .vf-v5-card.vf-consent-card {
  backdrop-filter: blur(24px) saturate(1.5) !important;
}

/* Light mode consent card backdrop-filter (lighter) */
html.vf-theme-light .vf-consent-card.bg-white\/10,
html[data-vf-theme="light"] .vf-consent-card.bg-white\/10,
html.vf-theme-light .vf-v5-card.vf-consent-card,
html[data-vf-theme="light"] .vf-v5-card.vf-consent-card {
  backdrop-filter: blur(24px) saturate(1.5) !important;
}

/* Footer sits on blue canvas — white/70 like design Powered-by */
html.vf-theme-light footer,
html.vf-theme-light .footer,
html.vf-theme-light #footer,
html[data-vf-theme="light"] footer,
html[data-vf-theme="light"] .footer,
html[data-vf-theme="light"] #footer {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.vf-theme-light .vf-v5-card,
html[data-vf-theme="light"] .vf-v5-card {
  color: var(--vf-ink, #262220) !important;
}

html.vf-theme-light .vf-v5-card p,
html.vf-theme-light .vf-v5-card label,
html.vf-theme-light .vf-v5-card .text-white,
html[data-vf-theme="light"] .vf-v5-card p,
html[data-vf-theme="light"] .vf-v5-card label,
html[data-vf-theme="light"] .vf-v5-card .text-white {
  color: var(--vf-ink, #262220) !important;
}

html.vf-theme-light .vf-v5-card input:not([type="checkbox"]):not([type="radio"]),
html[data-vf-theme="light"] .vf-v5-card input:not([type="checkbox"]):not([type="radio"]) {
  background-color: rgba(255, 255, 255, 0.72) !important;
  border-color: var(--vf-field-border, rgba(2, 50, 75, 0.14)) !important;
  color: var(--vf-ink, #262220) !important;
  -webkit-text-fill-color: var(--vf-ink, #262220) !important;
}

html.vf-theme-light .vf-v5-card input::placeholder,
html[data-vf-theme="light"] .vf-v5-card input::placeholder {
  color: var(--vf-muted, #8a7e78) !important;
  -webkit-text-fill-color: var(--vf-muted, #8a7e78) !important;
  opacity: 1 !important;
}

html.vf-theme-light .vf-v5-card .vf-secondary-cta,
html[data-vf-theme="light"] .vf-v5-card .vf-secondary-cta,
html.vf-theme-light .vf-v5-card a:not([type="submit"]),
html[data-vf-theme="light"] .vf-v5-card a:not([type="submit"]) {
  color: var(--fayda-blue, #02324b) !important;
}

/* The shared OTP base rule uses white text-fill; reset it for light mode. */
html.vf-theme-light #totp_verify_input .pincode-input-text,
html.vf-theme-light #otp_verify_input .pincode-input-text,
html[data-vf-theme="light"] #totp_verify_input .pincode-input-text,
html[data-vf-theme="light"] #otp_verify_input .pincode-input-text {
  color: var(--fayda-blue, #02324b) !important;
  -webkit-text-fill-color: var(--fayda-blue, #02324b) !important;
  caret-color: var(--fayda-blue, #02324b) !important;
  border-bottom-color: rgba(2, 50, 75, 0.7) !important;
}

/* End of file */
/* Cloudflare Turnstile renders its own accessible light and dark appearance. */
.vf-turnstile-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 0.25rem;
  color-scheme: light;
}

.vf-turnstile-wrap[data-theme='dark'] {
  color-scheme: dark;
}

.vf-turnstile-wrap > div,
.vf-turnstile-wrap iframe {
  max-width: 100%;
}


/* Method icons — use design primary/sky (not washed cyan) */
.vf-method-icon,
.vf-method-icon img,
button[id^="login_with_"] img.vf-method-icon,
button[id^="login_with_"] > img {
  color: var(--primary-color, #2d8ab8) !important;
  opacity: 1 !important;
  filter: none !important;
}

.vf-form-method-chip .vf-method-chip-icon {
  color: var(--fayda-sky, #4095bf) !important;
}

html.vf-theme-dark .vf-method-icon,
html.dark .vf-method-icon,
html[data-vf-theme="dark"] .vf-method-icon,
html.vf-theme-dark button[id^="login_with_"] img,
html.dark button[id^="login_with_"] img,
html[data-vf-theme="dark"] button[id^="login_with_"] img {
  /* keep SVG intrinsic #2d8ab8 / #4095bf readable on dark cards */
  opacity: 1 !important;
  filter: brightness(1.05) saturate(1.05);
}


/* DS tooltip — wider acrylic bubble */
.vf-ds-tooltip,
[data-slot="tooltip-content"],
.react-tooltip.vf-ds-tooltip {
  max-width: 20rem !important; /* ~max-w-xs */
  min-width: 12rem !important;
  width: max-content !important;
  white-space: normal !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(9, 24, 33, 0.88) !important;
  color: #fbfaf9 !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  z-index: 10050 !important;
}

html.vf-theme-light .vf-ds-tooltip,
html[data-vf-theme="light"] .vf-ds-tooltip {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0c0a09 !important;
  border-color: rgba(2, 50, 75, 0.12) !important;
}


/* DS Dialog alignment — acrylic surface, rounded-xl, dark overlay */
.totp-modal-backdrop {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}
.totp-modal-card,
.vf-fan-qr-dialog,
.vf-ds-modal-card {
  width: min(100%, 28rem) !important;
  max-width: calc(100% - 2rem) !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  padding: 1.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(15, 32, 42, 0.78) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: #fbfaf9 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}
.totp-modal-title,
.vf-fan-qr-dialog h2,
.vf-ds-modal-title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-align: left !important;
  font-size: 1.05rem !important;
}
.totp-modal-close,
.vf-fan-qr-close {
  top: 1rem !important;
  right: 1rem !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fbfaf9 !important;
  width: auto !important;
  height: auto !important;
  padding: 0.35rem 0.65rem !important;
  font-size: 0.8rem !important;
}
.vf-fan-qr-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px);
}
.vf-fan-qr-camera-prompt {
  background: rgba(10, 24, 33, 0.92) !important;
  border-radius: 0.75rem !important;
}
.vf-fan-qr-allow {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.65rem !important;
}
.vf-ds-modal-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px);
}

/* Light-mode OTP/TOTP digit boxes — same rounded squares as dark mode, light field palette */
html.vf-theme-light #totp_verify_input .pincode-input-text,
html.vf-theme-light #otp_verify_input .pincode-input-text,
html[data-vf-theme="light"] #totp_verify_input .pincode-input-text,
html[data-vf-theme="light"] #otp_verify_input .pincode-input-text,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) #otp_verify_input .pincode-input-text,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) #totp_verify_input .pincode-input-text {
  width: 2.55rem !important;
  height: 2.75rem !important;
  margin: 0 0.28rem !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 0.65rem !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: var(--fayda-blue, #02324b) !important;
  -webkit-text-fill-color: var(--fayda-blue, #02324b) !important;
  caret-color: var(--fayda-blue, #02324b) !important;
  font-size: 1.15rem !important;
  box-shadow: none !important;
}

html.vf-theme-light #totp_verify_input .pincode-input-text:focus,
html.vf-theme-light #otp_verify_input .pincode-input-text:focus,
html[data-vf-theme="light"] #totp_verify_input .pincode-input-text:focus,
html[data-vf-theme="light"] #otp_verify_input .pincode-input-text:focus,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) #otp_verify_input .pincode-input-text:focus,
html:not(.vf-theme-dark):not(.dark):not([data-vf-theme="dark"]) #totp_verify_input .pincode-input-text:focus {
  border-color: var(--fayda-sky, #4095bf) !important;
  outline: none !important;
}