/* Login Page Specific Styling */
.fi-simple-layout {
    background-color: transparent !important;
}
.fi-simple-layout::before {
    content: "";
    position: fixed;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    background-image: url("/images/LoginBG.jpeg");
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: -1;
}

/* Login Page Logo Replacement */
.fi-simple-main .fi-logo img {
    content: url("/images/Icon.png") !important;
    height: 6rem !important;
    max-height: 6rem !important;
    margin: 0 auto;
}

/* Login Page Button */
.fi-simple-main button[type="submit"] {
    background-color: #0056b3 !important;
}
.fi-simple-main button[type="submit"] * {
    color: #ffffff !important;
}

/* Center the OTP input as a block. Do NOT use flex/gap here: the boxes are a
   single absolute-positioned <input> overlaid on fixed 2rem-pitch digit fields,
   so any gap drifts the typed/pasted characters out of their boxes. */
.fi-simple-main .fi-one-time-code-input-ctn {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Center the label for the OTP code field (scoped via :has to only this field) */
.fi-simple-main .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-ctn {
    justify-content: center !important;
}

/* Center the resend-code action link below the OTP boxes.
   The belowContent schema renders as .fi-sc.fi-inline (a flex container),
   and .fi-sc-action inside it has display:contents, so target the flex parent. */
.fi-simple-main .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-sc.fi-inline {
    justify-content: center !important;
}

/* Style the OTP boxes for better clarity and premium feel */
.fi-one-time-code-input-digit-field {
    border: 2px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    border-radius: 0.5rem !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease-in-out;
}

/* Highlight active/filled boxes */
.fi-one-time-code-input-digit-field.fi-active,
.fi-one-time-code-input-ctn:focus-within .fi-one-time-code-input-digit-field.fi-active {
    border-color: #0056b3 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}