/*
|--------------------------------------------------------------------------
| Fixquo Authentication
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   Application
   ========================================================================== */

html,
body.fixquo-auth-page {

    margin: 0;
    padding: 0;

    min-height: 100%;

    background: linear-gradient(135deg,
            #f8fafc 0%,
            #f1f5f9 100%);

    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#fixquo-app {

    min-height: 100vh;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.fixquo-auth {

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

    min-height: 100vh;

    padding: 40px 20px;
}

.fixquo-auth__container {

    width: 100%;
    max-width: 460px;
}

/* ==========================================================================
   Card
   ========================================================================== */

.fixquo-auth__card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 24px;

    padding: 42px;

    box-shadow:
        0 25px 60px rgba(15, 23, 42, .08);
}

/* ==========================================================================
   Header
   ========================================================================== */

.fixquo-auth__header {

    text-align: center;

    margin-bottom: 36px;
}

.fixquo-auth__logo {

    display: inline-block;

    margin-bottom: 22px;

    text-decoration: none;

    color: #0f172a;

    font-size: 26px;
    font-weight: 700;
}

.fixquo-auth__title {

    margin: 0 0 12px;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.fixquo-auth__description {

    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.7;
}

/* ==========================================================================
   Notices
   ========================================================================== */

.fixquo-auth__notice {

    margin-bottom: 28px;

    padding: 16px 18px;

    border-radius: 14px;

    font-size: 14px;
}

.fixquo-auth__notice p {

    margin: 0;
}

.fixquo-auth__notice--error {

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #b91c1c;
}

.fixquo-auth__notice--success {

    padding: 16px 18px;

    margin-bottom: 24px;

    background: #ecfdf5;

    border: 1px solid #a7f3d0;

    border-radius: 14px;

    color: #065f46;
}

.fixquo-auth__notice--success p {

    margin: 0;
}

/* ==========================================================================
   Form
   ========================================================================== */

.fixquo-auth__form {

    display: flex;
    flex-direction: column;

    gap: 24px;
}

.fixquo-auth__field {

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.fixquo-auth__field label {

    color: #334155;

    font-size: 14px;
    font-weight: 600;
}

.fixquo-auth__field input {

    width: 100%;

    height: 54px;

    padding: 0 18px;

    background: #ffffff;

    border: 1px solid #dbe2ea;

    border-radius: 14px;

    font-size: 15px;

    transition: .25s ease;

    box-sizing: border-box;
}

.fixquo-auth__field input:focus {

    outline: none;

    border-color: #f5b335;

    box-shadow:
        0 0 0 4px rgba(245, 179, 53, .15);
}

/* ==========================================================================
   Options
   ========================================================================== */

.fixquo-auth__options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: 14px;
}

.fixquo-auth__remember {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    color: #475569;
}

.fixquo-auth__remember input {

    width: 18px;
    height: 18px;
}

.fixquo-auth__options a {

    color: #f59e0b;

    text-decoration: none;

    font-weight: 600;
}

.fixquo-auth__options a:hover {

    text-decoration: underline;
}

/* ==========================================================================
   Button
   ========================================================================== */

.fixquo-auth__submit {

    height: 56px;

    border: 0;

    border-radius: 14px;

    background: #f5b335;

    color: #111827;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;
}

.fixquo-auth__submit:hover {

    background: #e8a414;

    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(245, 179, 53, .30);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fixquo-auth__footer {

    margin-top: 34px;

    padding-top: 24px;

    border-top: 1px solid #edf2f7;

    text-align: center;
}

.fixquo-auth__footer p {

    margin: 0 0 10px;

    color: #64748b;

    font-size: 14px;
}

.fixquo-auth__footer a {

    color: #f59e0b;

    text-decoration: none;

    font-weight: 600;
}

.fixquo-auth__footer a:hover {

    text-decoration: underline;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {

    .fixquo-auth {

        padding: 20px;
    }

    .fixquo-auth__card {

        padding: 28px;
        border-radius: 18px;
    }

    .fixquo-auth__title {

        font-size: 28px;
    }

    .fixquo-auth__options {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;
    }
}