/* =================================
   KanoMart Customer Login
================================= */


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

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


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f5f7fb;

    color:
        #1f2937;

    min-height:
        100vh;

}


/* =================================
   HEADER
================================= */

.login-header {

    height: 64px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e5e7eb;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 18px;

    position:
        sticky;

    top:
        0;

    z-index:
        10;

}


.back-btn {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background:
        #f3f4f6;

    color:
        #111827;

    font-size:
        22px;

    cursor:
        pointer;

}


.back-btn:hover {

    background:
        #e5e7eb;

}


.header-title {

    font-size:
        20px;

    font-weight:
        700;

    color:
        #0f766e;

}


.header-spacer {

    width:
        42px;

}


/* =================================
   MAIN CONTAINER
================================= */

.login-container {

    width:
        100%;

    max-width:
        520px;

    margin:
        0 auto;

    padding:
        35px 18px 50px;

}


/* =================================
   INTRO
================================= */

.login-intro {

    text-align:
        center;

    margin-bottom:
        25px;

}


.login-icon {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    background:
        #dff7f2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        34px;

}


.login-intro h1 {

    font-size:
        30px;

    margin-bottom:
        9px;

    color:
        #111827;

}


.login-intro p {

    font-size:
        15px;

    line-height:
        1.6;

    color:
        #6b7280;

}


/* =================================
   LOGIN CARD
================================= */

.login-card {

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:
        16px;

    padding:
        25px 20px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.05);

}


/* =================================
   CARD TITLE
================================= */

.card-title {

    margin-bottom:
        24px;

}


.card-title h2 {

    font-size:
        21px;

    color:
        #111827;

    margin-bottom:
        6px;

}


.card-title p {

    font-size:
        14px;

    color:
        #6b7280;

}


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

.form-group {

    margin-bottom:
        19px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        14px;

    font-weight:
        600;

    color:
        #374151;

}


.form-group input {

    width:
        100%;

    height:
        50px;

    border:
        1px solid #d1d5db;

    border-radius:
        10px;

    padding:
        0 14px;

    font-size:
        15px;

    outline:
        none;

    background:
        #ffffff;

    transition:
        0.2s;

}


.form-group input:focus {

    border-color:
        #0f766e;

    box-shadow:
        0 0 0 3px
        rgba(15, 118, 110, 0.10);

}


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

.password-wrapper {

    position:
        relative;

}


.password-wrapper input {

    padding-right:
        52px;

}


.password-toggle {

    position:
        absolute;

    right:
        8px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        38px;

    height:
        38px;

    border:
        none;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        18px;

}


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

.error-message {

    display:
        block;

    min-height:
        18px;

    margin-top:
        5px;

    font-size:
        12px;

    color:
        #dc2626;

}


.input-error {

    border-color:
        #dc2626 !important;

    background:
        #fff7f7 !important;

}


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

.login-options {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin:
        3px 0 22px;

}


.remember-me {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        13px;

    color:
        #4b5563;

    cursor:
        pointer;

}


.remember-me input {

    width:
        16px;

    height:
        16px;

    accent-color:
        #0f766e;

}


.forgot-password {

    border:
        none;

    background:
        transparent;

    color:
        #0f766e;

    font-size:
        13px;

    font-weight:
        600;

    cursor:
        pointer;

}


.forgot-password:hover {

    text-decoration:
        underline;

}


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

.login-submit-btn {

    width:
        100%;

    height:
        52px;

    border:
        none;

    border-radius:
        11px;

    background:
        #0f766e;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s;

}


.login-submit-btn:hover {

    background:
        #0b5f59;

}


.login-submit-btn:disabled {

    opacity:
        0.65;

    cursor:
        not-allowed;

}


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

.register-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        23px;

    padding-top:
        20px;

    border-top:
        1px solid #e5e7eb;

    font-size:
        14px;

    color:
        #6b7280;

}


.register-btn {

    border:
        none;

    background:
        transparent;

    color:
        #0f766e;

    font-weight:
        700;

    cursor:
        pointer;

    font-size:
        14px;

}


.register-btn:hover {

    text-decoration:
        underline;

}


/* =================================
   SECURITY
================================= */

.login-security {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin-top:
        18px;

    padding:
        16px;

    border-radius:
        12px;

    background:
        #ecfdf5;

    border:
        1px solid #d1fae5;

}


.security-icon {

    font-size:
        22px;

}


.login-security strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        13px;

    color:
        #065f46;

}


.login-security p {

    font-size:
        12px;

    line-height:
        1.5;

    color:
        #047857;

}


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

@media (max-width: 480px) {

    .login-header {

        height:
            60px;

        padding:
            0 14px;

    }


    .header-title {

        font-size:
            18px;

    }


    .login-container {

        padding:
            28px 14px 40px;

    }


    .login-intro h1 {

        font-size:
            26px;

    }


    .login-intro p {

        font-size:
            14px;

    }


    .login-card {

        padding:
            21px 16px;

        border-radius:
            14px;

    }


    .login-options {

        align-items:
            flex-start;

    }

}


/* =================================
   LARGE SCREEN
================================= */

@media (min-width: 768px) {

    .login-container {

        padding-top:
            55px;

    }


    .login-card {

        padding:
            30px;

    }

}