/* GuardianPass login - option 2 using the generated vault artwork as the real background. */
body.login-page {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background:
        linear-gradient(rgba(3, 5, 8, 0.08), rgba(3, 5, 8, 0.08)),
        url("../images/guardianpass-vault-option2-ui-clean.jpg") center center / cover no-repeat fixed !important;
    color: #eef3f7;
}

/* Subtle animated light sweep over the metal background. */
body.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        112deg,
        transparent 0%,
        transparent 37%,
        rgba(255, 244, 214, 0.13) 47%,
        rgba(255, 244, 214, 0.05) 53%,
        transparent 64%,
        transparent 100%
    );
    mix-blend-mode: screen;
    transform: translateX(-130%);
    animation: guardianpass-light-sweep 8s ease-in-out infinite;
}

body.login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 52%, transparent 0 42%, rgba(0, 0, 0, 0.22) 76%, rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.24));
}

body.login-page .login-box {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: clamp(330px, 28.6vw, 392px);
    margin: 3.7vh 0 0;
    transform: translate(-50%, -50%);
}

/* The artwork already contains the logo, title and card. Keep the real form functional only. */
body.login-page .login-logo,
body.login-page .card-header,
body.login-page .login-card-body1::before {
    display: none !important;
}

body.login-page .card {
    overflow: visible;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

body.login-page .card::before {
    display: none;
}

body.login-page .card-body {
    padding: clamp(84px, 12.8vh, 120px) clamp(20px, 2.1vw, 28px) 0 !important;
    background: transparent !important;
    color: #f4f7fb;
}

body.login-page .input-group {
    position: relative;
    min-height: clamp(44px, 6vh, 56px);
    margin-bottom: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(216, 224, 233, 0.22);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        rgba(4, 7, 10, 0.76);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 26px rgba(0, 0, 0, 0.25);
}

body.login-page .input-group:focus-within {
    border-color: rgba(38, 222, 211, 0.76);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(5, 10, 13, 0.88);
    box-shadow:
        0 0 0 3px rgba(38, 222, 211, 0.16),
        0 18px 34px rgba(0, 0, 0, 0.36);
}

body.login-page .input-group:has(#session_duration) {
    display: none !important;
}

body.login-page .input-group-text {
    width: clamp(46px, 3.8vw, 56px);
    min-width: clamp(46px, 3.8vw, 56px);
    justify-content: center;
    border: 0;
    background: transparent;
    color: rgba(218, 224, 232, 0.72);
    font-size: 1.15rem;
}

body.login-page .form-control,
body.login-page input.form-control {
    height: clamp(44px, 6vh, 56px);
    border: 0;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #f4f9ff;
    font-size: clamp(0.95rem, 1.25vw, 1.08rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    box-shadow: none !important;
}

body.login-page .form-control::placeholder {
    color: rgba(218, 222, 228, 0.68);
    opacity: 1;
}

body.login-page .form-control:focus {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.10) !important;
    background-color: rgba(0, 0, 0, 0.10) !important;
    outline: none;
}

body.login-page input.form-control:-webkit-autofill,
body.login-page input.form-control:-webkit-autofill:hover,
body.login-page input.form-control:-webkit-autofill:focus,
body.login-page input.form-control:-webkit-autofill:active {
    border: 0 !important;
    -webkit-text-fill-color: #f4f9ff !important;
    caret-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(7, 11, 14, 0.38) inset !important;
    box-shadow: 0 0 0 1000px rgba(7, 11, 14, 0.38) inset !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
    transition: background-color 999999s ease-out 0s, color 999999s ease-out 0s;
}

body.login-page #pw {
    padding-right: 56px !important;
}

body.login-page .guardianpass-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    width: 56px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    color: rgba(218, 224, 232, 0.76);
    cursor: pointer;
    font-size: 1.05rem;
}

body.login-page .guardianpass-password-toggle:hover,
body.login-page .guardianpass-password-toggle:focus {
    background: rgba(48, 225, 214, 0.08);
    outline: 1px solid rgba(48, 225, 214, 0.35);
    outline-offset: -2px;
}

body.login-page .row.mt-5 {
    margin-top: clamp(40px, 6.8vh, 60px) !important;
}

body.login-page #but_identify_user,
body.login-page #but_confirm_otc,
body.login-page #but_confirm_new_password,
body.login-page #but_confirm_defuse_psk,
body.login-page .btn-primary {
    min-height: clamp(48px, 7vh, 64px);
    border: 0 !important;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(32, 168, 159, 0.96), rgba(3, 88, 86, 0.96)) !important;
    color: #eefdfb !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

body.login-page #but_identify_user {
    font-size: 0;
    position: relative;
}

body.login-page #but_identify_user::after {
    content: "Entrar";
    display: inline-block;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.01em;
}

body.login-page #but_identify_user::before {
    content: "\2192";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(238, 253, 251, 0.92);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1;
}

body.login-page #but_identify_user:hover,
body.login-page #but_identify_user:focus {
    background: rgba(0, 238, 224, 0.08) !important;
    outline: 1px solid rgba(57, 235, 226, 0.36);
    outline-offset: -2px;
}

body.login-page .btn-link,
body.login-page #forgot-local-password-link {
    color: #46e1d6 !important;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

body.login-page hr {
    border-top-color: rgba(57, 235, 226, 0.22);
}

body.login-page .alert {
    border: 1px solid rgba(57, 235, 226, 0.22);
    border-radius: 14px;
    background: rgba(5, 12, 16, 0.78);
    color: #eaf4f6;
}

body.login-page .user-one-time-code-card-body,
body.login-page .confirm-password-card-body,
body.login-page #card-user-treat-psk,
body.login-page .div-2fa-method,
body.login-page #2fa_methods_selector {
    border-radius: 18px;
    background: rgba(5, 12, 16, 0.78) !important;
    backdrop-filter: blur(12px);
}

@keyframes guardianpass-light-sweep {
    0%, 28% {
        transform: translateX(-130%);
        opacity: 0;
    }
    40% {
        opacity: 0.85;
    }
    58%, 100% {
        transform: translateX(130%);
        opacity: 0;
    }
}

@media (max-width: 767.98px) {
    body.login-page {
        background-position: center center !important;
    }

    body.login-page .login-box {
        width: min(86vw, 370px);
        margin-top: 5.5vh;
    }

    body.login-page .card-body {
        padding-top: clamp(78px, 13vh, 112px) !important;
    }
}