/*
 * GBCC Member Portal Login
 */


/* ------------------------------------------------------------
   Page
------------------------------------------------------------ */

.login-page {

    min-height: 100vh;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #061b2b 0%,
            #0a2931 50%,
            #0d3a2b 100%
        );

    padding: 40px 20px;

    box-sizing: border-box;

}


/* ------------------------------------------------------------
   Main Container
------------------------------------------------------------ */

.login-container {
    width: 100%;
    max-width: 420px;       /* reduce from around 620px */
    padding: 16px;         /* reduce internal spacing */
    margin: 0 auto;
    border-radius: 18px;
}


/* ------------------------------------------------------------
   Login Panel
------------------------------------------------------------ */

.login-panel {

    width: 100%;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 18px;

    padding: 26px 36px 26px;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28);

}


/* ------------------------------------------------------------
   Branding
------------------------------------------------------------ */

.login-branding {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

}


.login-logo {

    width: 100px;

    height: 100px;

    object-fit: contain;

    display: block;

    margin-bottom: 10px;

}


.login-branding .club-name {

    font-size: 1.25rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    color: #0b2239;

    padding-left: 0.2em;

}


/* ------------------------------------------------------------
   Heading
------------------------------------------------------------ */

.login-heading {

    text-align: center;

    margin-bottom: 24px;

}


.portal-label {

    margin: 0 0 12px;

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.2em;

    color: #0d633f;

}


.login-heading h1 {

    margin: 0;

    color: #0b2239;

    font-size: 1.6rem;

    line-height: 1.2;

    font-weight: 700;

}


.login-introduction {

    margin: 10px 0 0;

    color: #66717c;

    font-size: 1rem;

    line-height: 1.5;

}


/* ------------------------------------------------------------
   Form
------------------------------------------------------------ */

.login-form {

    width: 100%;

}


.form-field {

    margin-bottom: 6px;
text-align: left;
}


.form-field label {

    display: block;

    margin-bottom: 6px;

    color: #18232d;

    font-size: 0.8rem;

    font-weight: 650;

}


.form-field input {

    width: 100%;

    height: 40px;

    box-sizing: border-box;

    border: 1px solid #d4dbe0;

    border-radius: 9px;

    background: #ffffff;

    color: #18232d;

    padding: 0 15px;

    font-family: inherit;

    font-size: 1rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;

}


.form-field input:hover {

    border-color: #aeb9c1;

}


.form-field input:focus {

    border-color: #0d633f;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(13, 99, 63, 0.12);

}


/* ------------------------------------------------------------
   Error
------------------------------------------------------------ */

.login-error {

    margin-bottom: 24px;

    padding: 13px 15px;

    border: 1px solid #e5bcbc;

    border-radius: 8px;

    background: #fff4f4;

    color: #9d3030;

    font-size: 0.9rem;

    line-height: 1.45;

}


/* ------------------------------------------------------------
   Sign In Button
------------------------------------------------------------ */

.login-submit {

    display: flex;

    justify-content: center;

    margin-top: 20px;

}


.login-button {

    min-width: 220px;

    height: 50px;

    padding: 0 32px;

    border: none;

    border-radius: 8px;

    background: #0b3d2e;

    color: #ffffff;

    font-family: inherit;

    font-size: 0.95rem;

    font-weight: 700;

    letter-spacing: 0.03em;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.login-button:hover {

    background: #0d633f;

    box-shadow:
        0 8px 18px rgba(11, 34, 57, 0.18);

    transform: translateY(-1px);

}


.login-button:focus-visible {

    outline: 3px solid rgba(13, 99, 63, 0.25);

    outline-offset: 3px;

}


.login-button:active {

    transform: translateY(0);

}


/* ------------------------------------------------------------
   Return Link
------------------------------------------------------------ */

.login-return {

    text-align: center;

    margin-top: 20px;

}


.login-return a {

    color: #0b2239;

    font-size: 0.9rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease;

}


.login-return a:hover {

    color: #0d633f;

    text-decoration: underline;

}


/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media (max-width: 620px) {

    .login-page {

        padding: 25px 15px;

        align-items: flex-start;

        padding-top: 45px;

    }


    .login-panel {

        padding: 38px 25px 32px;

        border-radius: 14px;

    }


    .login-logo {

        width: 80px;

        height: 80px;

    }


    .login-heading h1 {

        font-size: 1.7rem;

    }


    .login-introduction {

        font-size: 0.95rem;

    }


    .login-button {

        width: 100%;

        min-width: 0;

    }

}


@media (max-width: 380px) {

    .login-page {

        padding-left: 10px;

        padding-right: 10px;

    }


    .login-panel {

        padding-left: 20px;

        padding-right: 20px;

    }

}