/*
|--------------------------------------------------------------------------
| AE UI - AUTHENTICATION
|--------------------------------------------------------------------------
|
| Přihlašovací a registrační obrazovky.
|
*/


/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

.auth-page {
    position: relative;

    display: flex;

    min-height: 100vh;

    color: var(--ae-text);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(227, 38, 46, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(40, 120, 208, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--ae-bg-soft),
            var(--ae-bg)
        );

    overflow-x: hidden;
}


/*
|--------------------------------------------------------------------------
| BACKGROUND GRID
|--------------------------------------------------------------------------
*/

.auth-page::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.42;

    background-image:
        linear-gradient(
            var(--ae-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--ae-border) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.75),
            transparent 92%
        );
}


/*
|--------------------------------------------------------------------------
| WRAPPER
|--------------------------------------------------------------------------
*/

.auth-wrapper {
    position: relative;
    z-index: 1;

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

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

    padding: 40px 20px;
}


/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.auth-container {
    width: 100%;
    max-width: 460px;
}


/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.auth-card {
    width: 100%;

    padding: 40px;

    color: var(--ae-text);
    background:
        color-mix(
            in srgb,
            var(--ae-surface) 94%,
            transparent
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--ae-border) 80%,
            transparent
        );

    border-radius: 28px;

    box-shadow:
        0 26px 80px rgba(20, 25, 35, 0.15);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.auth-logo {
    display: flex;
    justify-content: center;

    margin-bottom: 28px;
}

.auth-logo a {
    display: inline-flex;
}

.auth-logo img {
    width: min(260px, 75vw);
    height: auto;
}


/*
|--------------------------------------------------------------------------
| DESCRIPTION
|--------------------------------------------------------------------------
*/

.auth-description {
    margin: 0 0 34px;

    color: var(--ae-text-soft);

    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| ALERT
|--------------------------------------------------------------------------
*/

.auth-alert {
    width: 100%;
    max-width: 560px;

    margin: 0 auto 18px;
    padding: 14px 16px;

    border: 1px solid transparent;
    border-radius: var(--ae-radius-sm);

    font-size: 0.9rem;
    font-weight: 600;
}

.auth-alert-error {
    color: var(--ae-danger);

    background: rgba(217, 45, 58, 0.10);
    border-color: rgba(217, 45, 58, 0.20);
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.auth-form {
    width: 100%;
}

.auth-form .form-group {
    margin-bottom: 22px;
}

.auth-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--ae-text-soft);

    font-size: 0.9rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    display: block;

    width: 100%;
    min-height: 54px;

    padding: 14px 16px;

    color: var(--ae-text);
    background: var(--ae-surface);

    border: 1px solid var(--ae-border-strong);
    border-radius: 14px;

    font-size: 1rem;

    outline: none;

    transition:
        border-color var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast),
        background-color var(--ae-transition-fast);
}

.auth-form input::placeholder {
    color: var(--ae-text-muted);
}

.auth-form input:hover {
    border-color: var(--ae-text-muted);
}

.auth-form input:focus {
    border-color: var(--ae-primary);

    box-shadow:
        0 0 0 4px rgba(227, 38, 46, 0.11);
}


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

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 92px !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;

    min-height: 38px;

    padding: 0 11px;

    color: var(--ae-text-soft);
    background: transparent;

    border: 0;
    border-radius: var(--ae-radius-xs);

    font-size: 0.8rem;
    font-weight: 700;

    transform: translateY(-50%);

    cursor: pointer;

    transition:
        color var(--ae-transition-fast),
        background-color var(--ae-transition-fast);
}

.password-toggle:hover {
    color: var(--ae-primary);
    background: var(--ae-primary-soft);
}


/*
|--------------------------------------------------------------------------
| OPTIONS
|--------------------------------------------------------------------------
*/

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin: 4px 0 26px;
}

.auth-options > a {
    color: var(--ae-text-soft);

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

    transition: color var(--ae-transition-fast);
}

.auth-options > a:hover {
    color: var(--ae-primary);
}


/*
|--------------------------------------------------------------------------
| REMEMBER
|--------------------------------------------------------------------------
*/

.remember-option {
    display: inline-flex !important;
    align-items: center;

    gap: 9px;

    margin: 0 !important;

    cursor: pointer;
}

.remember-option input {
    appearance: none;

    width: 19px;
    height: 19px;
    min-height: 19px !important;

    margin: 0;
    padding: 0 !important;

    flex: 0 0 19px;

    background: var(--ae-surface);

    border: 1px solid var(--ae-border-strong);
    border-radius: 5px;

    cursor: pointer;
}

.remember-option input:checked {
    background-color: var(--ae-primary);
    border-color: var(--ae-primary);

    background-image:
        linear-gradient(
            45deg,
            transparent 44%,
            #ffffff 44%,
            #ffffff 56%,
            transparent 56%
        ),
        linear-gradient(
            -45deg,
            transparent 40%,
            #ffffff 40%,
            #ffffff 54%,
            transparent 54%
        );

    background-position:
        3px 8px,
        8px 5px;

    background-size:
        6px 6px,
        8px 8px;

    background-repeat: no-repeat;
}

.remember-option span {
    color: var(--ae-text-soft);

    font-size: 0.9rem;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| SUBMIT
|--------------------------------------------------------------------------
*/

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    padding: 14px 20px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ae-primary),
            var(--ae-primary-hover)
        );

    border: 0;
    border-radius: 14px;

    box-shadow:
        0 10px 24px rgba(227, 38, 46, 0.24);

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

    cursor: pointer;

    transition:
        transform var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast),
        filter var(--ae-transition-fast);
}

.auth-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 30px rgba(227, 38, 46, 0.30);

    filter: brightness(1.03);
}

.auth-submit:active {
    transform: translateY(0);
}


/*
|--------------------------------------------------------------------------
| REGISTER
|--------------------------------------------------------------------------
*/

.auth-register {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    margin: 26px 0 0;

    color: var(--ae-text-soft);

    font-size: 0.92rem;
    text-align: center;
}

.auth-register a {
    color: var(--ae-primary);
    font-weight: 700;
}

.auth-register a:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| DARK MODE
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .auth-card {
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.45);
}


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

@media (max-width: 575.98px) {
    .auth-wrapper {
        align-items: flex-start;

        padding: 24px 14px;
    }

    .auth-card {
        padding: 30px 22px;

        border-radius: 22px;
    }

    .auth-logo {
        margin-bottom: 22px;
    }

    .auth-logo img {
        width: 210px;
    }

    .auth-description {
        margin-bottom: 28px;

        font-size: 0.98rem;
    }

    .auth-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;
    }

    .auth-options > a {
        margin-left: 28px;
    }
}