/* assets/css/pages/login.css */

/* ===================================================== */
/* LOGIN PAGE */
/* ===================================================== */

.login-container {

    width: 100%;
    min-height: 100vh;

    padding:
        8rem 2rem 3rem;

    display: flex;

    justify-content: center;
    align-items: center;

    position: relative;

}

.login-section {

    width: 100%;
    max-width: 1180px;

    display: grid;

    grid-template-columns:
        minmax(260px, 420px) minmax(320px, 520px);

    align-items: center;

    gap: 4rem;

}

.login-welcome {

    color: white;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}

.login-welcome img {

    width: clamp(180px, 22vw, 300px);

    display: block;

    margin:
        0 auto 0rem;

    filter:
        drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));

    animation:
        floating 5s ease-in-out infinite;

}

.login-welcome h1 {

    font-size: clamp(2.6rem, 5vw, 4.8rem);

    color: white;

    margin-bottom: 0.4rem;

}

.login-welcome p {

    max-width: 420px;

    margin:
        0 auto;

    color:
        rgba(255, 255, 255, 0.9);

}

.login-card {

    width: 100%;

    padding:
        2rem;

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

    backdrop-filter: blur(18px);

    border:
        2px solid rgba(255, 255, 255, 0.16);

    border-radius: 28px;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.18);

    color: white;

}

.login-card h2 {

    color: white;

    margin-bottom: 0.75rem;

}

.login-card p {

    color:
        rgba(255, 255, 255, 0.86);

    margin-bottom: 1.5rem;

}

.login-form {

    display: grid;

    gap: 1.25rem;

}

.form-group {

    display: grid;

    gap: 0.5rem;

}

.form-group label {

    color: white;

    font-weight: 800;

}

.form-group input {

    width: 100%;

    min-height: 60px;

    border:
        2px solid rgba(255, 255, 255, 0.18);

    border-radius: 18px;

    padding:
        0 1rem;

    font:
        inherit;

    color:
        var(--color-text);

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

}

.form-group select {

    width: 100%;

    min-height: 60px;

    border:
        2px solid rgba(255, 255, 255, 0.18);

    border-radius: 18px;

    padding:
        0 1rem;

    font:
        inherit;

    color:
        var(--color-text);

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

}

.form-group select optgroup {

    font-weight: 900;
    font-style: italic;

}

.form-group select option {

    font-weight: 400;
    font-style: normal;

}

.form-group input:focus {

    outline:
        4px solid rgba(255, 255, 255, 0.45);

    outline-offset: 3px;

}

.form-group select:focus {

    outline:
        4px solid rgba(255, 255, 255, 0.45);

    outline-offset: 3px;

}

.login-submit {

    margin-top: 0.5rem;

    width: 100%;

}

.login-help {

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

    margin-top: 0.5rem;

}

.login-help a {

    color: white;

    font-weight: 800;

}

body[data-theme="dark"] .login-card {

    background:
        rgba(0, 0, 0, 0.28);

    border:
        1px solid rgba(255, 255, 255, 0.08);

}

/* ===================================================== */
/* REGISTER PAGE */
/* ===================================================== */

.register-container {

    align-items: flex-start;

}

.register-section {

    max-width: 1280px;

    grid-template-columns:
        minmax(240px, 360px) minmax(420px, 760px);

    align-items: start;

}

.register-card {

    padding:
        1.6rem;

}

.register-form {

    gap: 1rem;

}

.form-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;

}

.avatar-field {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: 1rem;

    padding:
        1rem;

    border:
        2px solid rgba(255, 255, 255, 0.14);

    border-radius: 22px;

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

}

.avatar-label {

    display: block;

    color: white;

    font-weight: 900;

    margin-bottom: 0.25rem;

}

.avatar-field p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.86);

}

.avatar-controls {

    display: flex;

    align-items: center;

    gap: 1rem;

}

.avatar-preview {

    width: 88px;
    height: 88px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border:
        4px solid rgba(255, 255, 255, 0.82);

    border-radius: 50%;

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);

    overflow: hidden;

    color:
        var(--color-primary-dark);

    font-size: 2rem;

    font-weight: 900;

}

.avatar-preview img {

    width: 78%;
    height: 78%;

    object-fit: contain;

}

.avatar-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        2rem;

    z-index: 10000;

}

.avatar-modal.active {

    display: flex;

}

.avatar-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.58);

    backdrop-filter: blur(8px);

}

.avatar-modal-panel {

    position: relative;

    width: min(920px, 100%);
    max-height: min(720px, 86vh);

    padding:
        1.5rem;

    overflow: auto;

    color: white;

    background:
        rgba(8, 35, 20, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 28px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32);

}

.avatar-modal-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1rem;

}

.avatar-modal-header h2 {

    color: white;

}

.avatar-close {

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color:
        var(--color-primary-dark);

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

    font:
        inherit;

    font-weight: 900;

}

.avatar-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(92px, 1fr));

    gap: 1rem;

}

.avatar-option {

    aspect-ratio: 1;

    border:
        3px solid transparent;

    border-radius: 24px;

    cursor: pointer;

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

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

}

.avatar-option:hover,
.avatar-option:focus {

    transform:
        translateY(-4px);

    border-color:
        var(--color-gold);

    outline: none;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.18);

}

.avatar-option.selected {

    border-color:
        var(--color-primary-light);

}

.avatar-option img {

    width: 74%;
    height: 74%;

    object-fit: contain;

}

body[data-theme="dark"] .avatar-modal-panel,
body[data-theme="dark"] .avatar-field {

    background:
        rgba(0, 0, 0, 0.34);

    border:
        1px solid rgba(255, 255, 255, 0.08);

}

/* ===================================================== */
/* ACCESS DENIED */
/* ===================================================== */

.access-denied-container {

    min-height: calc(100vh - 100px);

    padding:
        4rem 2rem 2rem;

}

.access-denied-section {

    width: 100%;
    max-width: 760px;

    position: relative;

}

.access-denied-card {

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}

.access-denied-card h1 {

    color: white;

    font-size: clamp(2.4rem, 5vw, 4.8rem);

    margin-bottom: 0.25rem;

}

.access-denied-card img {

    width: clamp(220px, 34vw, 420px);

    display: block;

    margin:
        0 auto 0;

    filter:
        drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));

    animation:
        floating 5s ease-in-out infinite;

}

.access-denied-card p {

    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.9);

    font-weight: 700;

}

@media (max-width: 900px) {

    .login-section {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    .register-section {

        grid-template-columns: 1fr;

    }

    .login-welcome {

        text-align: center;

    }

    .login-welcome img {

        margin-left: auto;
        margin-right: auto;

    }

    .login-welcome p {

        margin:
            0 auto;

    }

}

@media (max-width: 600px) {

    .login-container {

        padding:
            7rem 1rem 2rem;

    }

    .login-card {

        padding:
            1.25rem;

    }

    .form-row,
    .avatar-field {

        grid-template-columns: 1fr;

    }

    .avatar-controls {

        justify-content: space-between;

        flex-wrap: wrap;

    }

}