/* ======= Variables ======= */
:root {
    /* Assets */
    --logo-url: url("../images/logo/logo-ar.svg");
    --signin-image: url("../images/pages/signin.webp");
    --signup-image: url("../images/pages/signup.webp");
    --reset-bg: url("../images/pages/reset-password.svg");
}

/* ======= Dark Mode ======= */
[data-bs-theme="dark"] {
    --logo-url: url("../images/logo/logo-ar-dark.webp");
    --signin-image: url("../images/pages/signin-dark.webp");
    --signup-image: url("../images/pages/signup-dark.webp");
    --reset-bg: url("../images/pages/reset-password-dark.svg");
}

/* ======= Images (Dynamic via variables) ======= */
.main-logo {
    content: var(--logo-url);
    width: 130px;
}

.signin-image {
    content: var(--signin-image);
}

.signup-image {
    content: var(--signup-image);
}

.div-login {
    width: 100%;
    height: calc(100vh - 30px);
    border-radius: 20px;
    overflow: hidden;
}

.div-login img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.reset-pass-background {
    background-image: var(--reset-bg);
    background-position: top;
    background-size: 100% 60%;
    background-repeat: no-repeat;
}

.custom-input {
    position: relative;
}

.custom-input span i {
    position: absolute;
    top: 18%;
    right: 13px;
    width: 20px;
}

.custom-input i {
    position: absolute;
    top: 18%;
    left: 13px;
    font-size: 13pt;
}

.custom-input input {
    padding-right: 35px;
}

.custom-input input[type="password"] {
    padding-right: 35px;
    padding-left: 35px;
}

/* ======= Components ======= */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    border: 2px solid #eaecf0;

    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.icon-box img {
    width: 25px;
}