/* -----------------------------
   HERO / LOGIN
----------------------------- */

.landing-main {
    min-height: calc(100vh - var(--header-height));

    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.10)
        ),
        url("images/login-background.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.landing-main::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 0 20%,
            rgba(50, 155, 144, 0.035) 20% 21%,
            transparent 21% 39%,
            rgba(8, 43, 80, 0.025) 39% 40%,
            transparent 40%
        );
}


.landing-content {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 5.2rem 2rem 4rem;
}


.landing-title {
    margin: 0;

    color: var(--navy);

    font-size: clamp(3rem, 5vw, 4.3rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.05;

    text-align: center;
}


.landing-subtitle {
    margin: 1.1rem 0 2.8rem;

    color: var(--muted);

    font-size: 1.35rem;
    font-weight: 400;

    text-align: center;
}


/* -----------------------------
   LOGIN CARD
----------------------------- */

.login-card {
    width: min(100%, 620px);

    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(9px);

    border-radius: 20px;

    padding: 2.7rem 3.3rem;

    box-shadow:
        0 22px 55px rgba(20, 35, 55, 0.10),
        0 4px 14px rgba(20, 35, 55, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.8);
}

.login-card.login-card-admin {
    background: rgba(8, 43, 80, 0.94);
    border-color: rgba(8, 43, 80, 0.35);
}

.login-card.login-card-admin .form-group label{
    color: #ffffff;
}

.login-card.login-card-admin .login-divider {
    color: rgba(255, 255, 255, 0.75);
}

.login-card.login-card-admin .login-divider::before,
.login-card.login-card-admin .login-divider::after {
    background: rgba(255, 255, 255, 0.25);
}

.login-card.login-card-admin .forgot-password {
    color: #7dd3c7;
}

.login-card.login-card-admin .forgot-password:hover {
    color: #a7e4dc;
}

.login-card .form-group {
    margin-bottom: 1.6rem;
}


.login-card .form-group label {
    display: block;

    margin-bottom: 0.6rem;

    font-size: 1.1rem;
    font-weight: 600;

    color: #20262d;
}


.input-wrapper {
    position: relative;
}


.input-wrapper svg {
    position: absolute;

    left: 1rem;
    top: 50%;

    transform: translateY(-50%);

    width: 21px;
    height: 21px;

    stroke: #8c959f;

    pointer-events: none;
}


.login-card .login-input {
    width: 100%;
    height: 58px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.92);

    padding: 0 1rem 0 3.1rem;

    color: var(--text);
    font-size: 1rem;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.login-card .login-input::placeholder {
    color: #a1a8b0;
}


.login-card .login-input:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px rgba(50, 155, 144, 0.12);
}


/* -----------------------------
   PASSWORD
----------------------------- */

.password-toggle {
    position: absolute;

    right: 0.7rem;
    top: 50%;

    transform: translateY(-50%);

    border: 0;
    background: transparent;

    cursor: pointer;

    width: 40px;
    height: 40px;

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


.password-toggle svg {
    position: static;
    transform: none;

    width: 22px;
    height: 22px;
}


/* -----------------------------
   LOGIN BUTTON
----------------------------- */

.login-button {
    width: 100%;
    height: 58px;

    border: 0;
    border-radius: 9px;

    background: var(--navy);
    color: white;

    font-size: 1.15rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.1s ease;
}


.login-button:hover {
    background: var(--navy-hover);
}


.login-button:active {
    transform: translateY(1px);
}


/* -----------------------------
   FORGOT PASSWORD
----------------------------- */

.login-divider {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin: 1.8rem 0;

    color: #7e8790;
}


.login-divider::before,
.login-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #dfe3e6;
}


.forgot-password {
    display: block;

    text-align: center;

    color: var(--teal);

    font-size: 1rem;
    font-weight: 500;

    text-decoration: underline;
    text-underline-offset: 3px;
}


.forgot-password:hover {
    color: var(--teal-hover);
}


/* -----------------------------
   ERROR
----------------------------- */

.login-error {
    background: #fff1f1;

    border: 1px solid #e9b6b6;

    color: #8b2525;

    padding: 0.9rem 1rem;

    border-radius: 8px;

    margin-bottom: 1.4rem;
}


/* -----------------------------
   MOBILE
----------------------------- */

@media (max-width: 850px) {

    .landing-content {
        padding-top: 3.3rem;
    }

    .login-card {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }

    .landing-title {
        font-size: 3rem;
    }

    .landing-subtitle {
        font-size: 1.1rem;
    }

}