/* 
    =========================================================
    LOGIN Design System
    ========================================================= 
*/

/*
    =========================================================
    THEME-READY CSS
    =========================================================
    To change the site's visual theme, start with the variables
    inside :root near the top of this file.

    Primary  = main accent color
    Secondary = highlight/accent color
    Black/Dark = dark surfaces and text
    White/Off-white = light surfaces
    Gray/Border = supporting UI colors

    The layout, spacing, typography, animations, and responsive
    behavior remain unchanged.
    =========================================================
    */


/* 
    =========================================================
    LOGIN — THEME READY
    =========================================================
    Theme colors are shared with the public website/login.
    Django WebsiteSettings can override these variables.
    ========================================================= 
*/

:root {
    --primary: #f4511e;
    --primary-dark: #d84315;
    --secondary: #ffc107;

    --black: #171717;
    --dark: #242424;
    --white: #ffffff;
    --off-white: #f7f7f5;

    --gray: #707070;
    --light-gray: #e4e4e1;
    --border: #dededb;

    --text: var(--black);
    --text-muted: var(--gray);
    --text-light: #888888;
    --text-inverse: var(--white);

    --input-background: #fafaf9;
    --danger: #d93025;
    --danger-background: #fff5f4;

    --primary-soft: rgba(244, 81, 30, .07);
    --primary-focus: rgba(244, 81, 30, .08);
    --button-icon-background: rgba(255, 255, 255, .16);

    --grid-line: rgba(0, 0, 0, .04);
    --visual-background: #f1f1ef;

    --display: "Barlow Condensed", sans-serif;
    --body: "Inter", sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    min-height: 100%;
}


body {

    background: var(--white);

    color: var(--black);

    font-family: var(--body);

}


a {
    color: inherit;
    text-decoration: none;
}


button,
input {
    font-family: inherit;
}


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

.login-page {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    min-height: 100vh;

}


/* =========================================================
   LEFT VISUAL
========================================================= */

.login-visual {

    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    min-height: 100vh;

    padding: 55px 70px;

    background:

        linear-gradient(135deg,
            var(--white) 0%,
            var(--off-white) 65%,
            var(--visual-background) 100%);

    overflow: hidden;

}


/* =========================================================
   GRID
========================================================= */

.visual-grid {

    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:

        linear-gradient(var(--grid-line) 1px,
            transparent 1px),

        linear-gradient(90deg,
            var(--grid-line) 1px,
            transparent 1px);

    background-size: 45px 45px;

}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.visual-shape {

    position: absolute;

    pointer-events: none;

}


/* Orange diagonal */

.visual-shape-one {

    right: -190px;
    top: -120px;

    width: 530px;
    height: 530px;

    border: 100px solid var(--primary-soft);

    transform: rotate(45deg);

}


/* Yellow accent */

.visual-shape-two {

    left: -90px;
    bottom: -120px;

    width: 270px;
    height: 270px;

    background: var(--secondary);

    transform: rotate(45deg);

    opacity: .85;

}

/* LOGO */

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
}

.logo-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background: var(--primary);

    color: #fff;

    font-family: var(--display);
    font-size: 27px;
    font-weight: 900;

    transform: skew(-7deg);
}

.logo-name {
    display: flex;
    flex-direction: column;
    color: var(--primary);
}

.logo-name strong {
    font-family: var(--display);
    font-size: 25px;
    font-weight: 900;

    line-height: .8;
}

.logo-name small {
    margin-top: 5px;

    color: var(--gray);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 4px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {

    position: relative;

    z-index: 2;

    display: inline-flex;

    width: fit-content;

}


.brand-logo {

    width: 190px;

}


.brand-logo img {

    width: 100%;

    height: auto;

    object-fit: contain;

}


/* =========================================================
   VISUAL CONTENT
========================================================= */

.visual-content {

    position: relative;

    z-index: 2;

    max-width: 680px;

    margin-top: auto;
    margin-bottom: auto;

}


.visual-label {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--gray);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.visual-label i {

    display: block;

    width: 35px;
    height: 2px;

    background: var(--primary);

}


.visual-content h1 {

    margin-top: 28px;

    font-family: var(--display);

    font-size: clamp(80px, 8vw, 135px);

    font-weight: 900;

    line-height: .76;

    letter-spacing: -2px;

}


.visual-content h1 span {

    display: block;

    color: var(--primary);

}


.visual-content p {

    max-width: 510px;

    margin-top: 35px;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.8;

}


.visual-line {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 35px;

}


.visual-line span {

    width: 45px;
    height: 1px;

    background: var(--black);

}


.visual-line small {

    color: var(--text-light);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.visual-footer {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    padding-top: 25px;

    border-top: 1px solid var(--light-gray);

    color: var(--text-light);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   LOGIN PANEL
========================================================= */

.login-panel {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    padding: 60px;

    background: var(--white);

}


/* =========================================================
   LOGIN CONTAINER
========================================================= */

.login-container {

    width: 100%;

    max-width: 440px;

}


/* =========================================================
   MOBILE BRAND
========================================================= */

.mobile-brand {

    display: none;

}


/* =========================================================
   LOGIN HEADING
========================================================= */

.login-heading {

    margin-bottom: 45px;

}


.login-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--light-gray);

    color: var(--primary);

    font-family: var(--display);

    font-size: 13px;

    font-weight: 700;

}


.login-label {

    margin-left: 10px;

    color: var(--gray);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.login-heading h2 {

    margin-top: 30px;

    font-family: var(--display);

    font-size: clamp(70px, 7vw, 100px);

    font-weight: 900;

    line-height: .75;

    letter-spacing: -1px;

}


.login-heading h2 span {

    display: block;

    color: var(--primary);

}


.login-heading p {

    margin-top: 25px;

    color: var(--gray);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   FORM
========================================================= */

.login-form {

    width: 100%;

}


/* =========================================================
   FORM GROUP
========================================================= */

.form-group {

    margin-bottom: 25px;

}


.form-group label {

    display: block;

    margin-bottom: 9px;

    color: var(--text);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .7px;

}


/* =========================================================
   LABEL ROW
========================================================= */

.label-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.label-row a {

    color: var(--primary);

    font-size: 9px;

    font-weight: 600;

}


.label-row a:hover {

    text-decoration: underline;

}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper {

    position: relative;

}


.input-wrapper>i {

    position: absolute;

    left: 17px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-light);

    font-size: 15px;

    pointer-events: none;

    transition: color .25s ease;

}


.input-wrapper input {

    width: 100%;

    height: 58px;

    padding:

        0 50px 0 48px;

    border: 1px solid var(--light-gray);

    outline: none;

    background: var(--input-background);

    color: var(--black);

    font-size: 13px;

    transition:

        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.input-wrapper input::placeholder {

    color: var(--text-light);

}


.input-wrapper input:hover {

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

}


.input-wrapper input:focus {

    background: var(--white);

    border-color: var(--primary);

    box-shadow:

        0 0 0 3px var(--primary-focus);

}


.input-wrapper:focus-within>i {

    color: var(--primary);

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {

    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;

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

    width: 30px;
    height: 30px;

    color: var(--text-light);

}


.password-toggle:hover {

    color: var(--primary);

}


.password-toggle i {

    font-size: 16px;

}


/* =========================================================
   ERRORS
========================================================= */

.field-error {

    margin-top: 7px;

    color: var(--danger);

    font-size: 9px;

}


.form-error {

    display: flex;

    gap: 12px;

    margin-bottom: 25px;

    padding: 13px 15px;

    border-left: 3px solid var(--danger);

    background: var(--danger-background);

    color: var(--danger);

    font-size: 10px;

    line-height: 1.5;

}


.form-error>i {

    font-size: 15px;

}


/* =========================================================
   REMEMBER
========================================================= */

.remember-row {

    margin-top: 3px;

    margin-bottom: 25px;

}


.checkbox-label {

    display: inline-flex !important;

    align-items: center;

    gap: 10px;

    margin: 0 !important;

    color: var(--gray) !important;

    font-size: 10px !important;

    font-weight: 500 !important;

    letter-spacing: 0 !important;

    cursor: pointer;

}


.checkbox-label input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.custom-checkbox {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 17px;
    height: 17px;

    border: 1px solid var(--light-gray);

    background: var(--white);

    transition: .2s ease;

}


.custom-checkbox i {

    display: none;

    color: var(--text-inverse);

    font-size: 11px;

}


.checkbox-label input:checked+.custom-checkbox {

    border-color: var(--primary);

    background: var(--primary);

}


.checkbox-label input:checked+.custom-checkbox i {

    display: block;

}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-button {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    height: 60px;

    padding: 0 8px 0 25px;

    background: var(--primary);

    color: var(--text-inverse);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    overflow: hidden;

    transition:

        background .3s ease,
        transform .3s var(--ease);

}


.login-button::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: var(--black);

    transition: width .4s var(--ease);
    background-color: var(--primary-dark) !important;

}


.login-button:hover::before {

    background-color: var(--primary-dark) !important;

    width: 100%;

}


.login-button:hover {

    transform: translateY(-2px);

}


.login-button>* {

    position: relative;

    z-index: 2;

}


.button-icon {

    display: flex;

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

    width: 44px;
    height: 44px;

    background: var(--button-icon-background);

}


.button-icon i {

    font-size: 17px;

    transition: transform .3s var(--ease);

}


.login-button:hover .button-icon i {

    transform: translate(3px, -3px);

}


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

.register {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 30px;

    color: var(--text-light);

    font-size: 10px;

}


.register a {

    color: var(--primary);

    font-weight: 700;

}


.register a i {

    margin-left: 3px;

}


.register a:hover {

    color: var(--primary-dark);

}


/* =========================================================
   BACK HOME
========================================================= */

.back-home {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 45px;

    color: var(--text-light);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .5px;

}


.back-home i {

    transition: transform .3s var(--ease);

}


.back-home:hover {

    color: var(--black);

}


.back-home:hover i {

    transform: translateX(-4px);

}


/* =========================================================
   LOADING
========================================================= */

.login-button.loading {

    pointer-events: none;

}


.login-button.loading .button-text {

    opacity: .7;

}


.login-button.loading .button-icon i {

    animation: spin .8s linear infinite;

}


@keyframes spin {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .login-page {

        grid-template-columns: 1fr;

    }


    .login-visual {

        display: none;

    }


    .login-panel {

        min-height: 100vh;

        padding: 50px 30px;

        background:

            linear-gradient(135deg,
                var(--white) 0%,
                var(--off-white) 100%);

    }


    .login-container {

        max-width: 450px;

    }


    .mobile-brand {

        display: flex;

        margin-bottom: 55px;

    }


    .mobile-logo {

        width: 155px;

    }


    .mobile-logo img {

        width: 100%;

    }

}


@media (max-width: 500px) {

    .login-panel {

        padding: 35px 22px;

    }


    .mobile-brand {

        margin-bottom: 40px;

    }


    .mobile-logo {

        width: 135px;

    }


    .login-heading {

        margin-bottom: 35px;

    }


    .login-heading h2 {

        font-size: 72px;

    }


    .login-heading p {

        font-size: 12px;

    }


    .input-wrapper input {

        height: 55px;

    }


    .login-button {

        height: 58px;

    }


    .register {

        flex-direction: column;

        gap: 5px;

    }

}

/* =========================================================
   LOGIN OPTIONS
========================================================= */

.login-options {

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

    gap: 20px;

    margin-top: -4px;

}


/* =========================================================
   LOGIN CHECKBOX
========================================================= */

.login-checkbox {

    display: inline-flex;
    align-items: center;

    gap: 9px;

    cursor: pointer;

    color: var(--gray);

    font-size: 12px;
    font-weight: 500;

    user-select: none;

}


.login-checkbox input {

    width: 16px;
    height: 16px;

    margin: 0;

    flex-shrink: 0;

    cursor: pointer;

    accent-color: var(--primary);

}


.login-checkbox span {

    transition:
        color 0.2s ease;

}


.login-checkbox:hover span {

    color: var(--primary);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .login-options {

        align-items: flex-start;
        flex-direction: column;

        gap: 10px;

    }

}


.remember-username {

    display: inline-flex;
    align-items: center;

    gap: 9px;

    cursor: pointer;

    color: var(--gray);

    font-size: 12px;
    font-weight: 500;

    user-select: none;

}


/* =========================================================
   CHECKBOX
========================================================= */

.remember-username input {

    width: 16px;
    height: 16px;

    margin: 0;

    cursor: pointer;

    accent-color: var(--primary);

}


.remember-username span {

    transition:
        color 0.2s ease;

}


.remember-username:hover span {

    color: var(--primary);

}


/* =========================================================
   SITE LOGO
========================================================= */

.site-logo {

    display: block;

    width: auto;
    height: 44px;

    max-width: 80px;

    object-fit: contain;

    flex-shrink: 0;

}


/* =========================================================
   LOGIN BUTTON LOADING
========================================================= */

.login-button:disabled {

    cursor: not-allowed;

    opacity: 0.75;

}


.login-button:disabled .button-icon i {

    animation:
        login-spin 0.8s linear infinite;

}


@keyframes login-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}