/* ===> Shared styles */
@import url('../theme/main-theme.css');
@import url('../theme/buttons-theme.css');
@import url('../theme/inputs-theme.css');

:root {
    --color-primary: #164C8D;
    --padding-container-top: clamp(50px, 5vw, 90px);
    --padding-container-left: clamp(20px, 8vw, 140px);
}


.body__container {
    height: 100dvh;
}

/* 
-----------------------------
-   ==> Form Header <==
-----------------------------
*/

.form__header {
    gap: 16px;
    max-width: 900px;
    margin: 0px auto 0px 0px;
    padding: var(--padding-container-top) 30px;
}

.form__header--title {
    font-size: clamp(26px, 3vw, 36px);
    line-height: clamp(36.8px, 3vw, 46.8px);
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111111;
    margin: 0;
}

.form__header--subtitle {
    font-size: clamp(18px, 3vw, 20px);
    line-height: clamp(22px, 3vw, 32px);
    font-weight: 600;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #164C8D;
    margin: 0;
}


@media (min-width: 992px) {
    .form__header {
        padding: var(--padding-container-top) 0px 0px var(--padding-container-left);
    }

}

/* 
-----------------------------
-   ==> Form Body <==
-----------------------------
*/
.main__container {
    padding: 10px 30px 50px 30px;
    margin: 0px auto 0px 0px;
}

@media (min-width: 992px) {
    .main__container {
        padding: 25px 0 0 var(--padding-container-left);
    }
}

@media (min-width: 2000px) {
    .main__container {
        padding: 25px 0 var(--padding-container-top) var(--padding-container-left);
    }
}

/*  ==> Form Inputs */
.form__wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;

}

.form__wrapper:disabled {
    transition: all 0.3s ease-in-out;
}

/* ==> Password */
.input__password--wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.input__password--input {
    padding-right: 3rem !important;
    background-color: #f2f2f2;
}

.input__password--button {
    padding-inline: clamp(0px, 0.75vw, 0.5rem) !important;
    padding: auto;
    z-index: 100;
    position: absolute;
    bottom: clamp(12%, 1vw, 10%);
    right: 1.3rem;
    border: 0px solid;
    font-size: 14px;
    cursor: pointer;
}

.input__password--button:disabled {
    color: #CCCCCC;
}

.input__password--show {
    color: #111111;
    border-radius: 50% !important;
}

.input__password--show:focus {
    border: none;
    outline: none !important;
}


@media (min-width: 992px) {
    .form__wrapper {
        max-width: 575px;
        gap: 20px;
    }
}

@media (min-width: 2000px) {
    .form__wrapper {
        gap: 40px;
    }
}