/* =================================
   KanoMart Customer Registration
   CSS
================================= */


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

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


body {

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

    background:
        #f5f7fb;

    color:
        #1f2937;

    min-height:
        100vh;

}


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

.registration-header {

    height: 64px;

    background:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 16px;

    border-bottom:
        1px solid #e5e7eb;

    position:
        sticky;

    top:
        0;

    z-index:
        100;

}


.back-btn {

    width:
        42px;

    height:
        42px;

    border:
        none;

    background:
        #f3f4f6;

    border-radius:
        50%;

    font-size:
        24px;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.back-btn:hover {

    background:
        #e5e7eb;

}


.header-title {

    font-size:
        20px;

    font-weight:
        700;

    color:
        #0f766e;

}


.header-spacer {

    width:
        42px;

}


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

.registration-container {

    width:
        100%;

    max-width:
        520px;

    margin:
        0 auto;

    padding:
        28px 16px 40px;

}


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

.registration-intro {

    text-align:
        center;

    margin-bottom:
        24px;

}


.registration-icon {

    width:
        68px;

    height:
        68px;

    margin:
        0 auto 16px;

    border-radius:
        50%;

    background:
        #e6fffb;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        32px;

}


.registration-intro h1 {

    font-size:
        28px;

    line-height:
        1.25;

    margin-bottom:
        10px;

    color:
        #111827;

}


.registration-intro p {

    font-size:
        14px;

    line-height:
        1.6;

    color:
        #6b7280;

}


/* =================================
   REGISTRATION CARD
================================= */

.registration-card {

    background:
        #ffffff;

    border-radius:
        16px;

    padding:
        22px 18px;

    border:
        1px solid #e5e7eb;

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

}


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

.card-title {

    margin-bottom:
        22px;

}


.card-title h2 {

    font-size:
        20px;

    margin-bottom:
        6px;

    color:
        #111827;

}


.card-title p {

    font-size:
        13px;

    line-height:
        1.5;

    color:
        #6b7280;

}


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

.form-group {

    margin-bottom:
        18px;

}


.form-group label {

    display:
        block;

    font-size:
        14px;

    font-weight:
        600;

    margin-bottom:
        7px;

    color:
        #374151;

}


.form-group input {

    width:
        100%;

    height:
        48px;

    border:
        1px solid #d1d5db;

    border-radius:
        10px;

    padding:
        0 13px;

    font-size:
        15px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #111827;

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

}


.form-group input:focus {

    border-color:
        #0f766e;

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

}


.form-group input::placeholder {

    color:
        #9ca3af;

}


/* =================================
   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;

}


.form-hint {

    display:
        block;

    margin-top:
        6px;

    font-size:
        12px;

    color:
        #6b7280;

}


/* =================================
   ERROR MESSAGE
================================= */

.error-message {

    display:
        block;

    min-height:
        0;

    margin-top:
        5px;

    font-size:
        12px;

    color:
        #dc2626;

}


/* =================================
   TERMS
================================= */

.terms-group {

    margin:
        4px 0 20px;

}


.terms-label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    font-size:
        12px;

    line-height:
        1.5;

    color:
        #6b7280;

    cursor:
        pointer;

}


.terms-label input {

    width:
        17px;

    height:
        17px;

    margin-top:
        1px;

    flex-shrink:
        0;

    accent-color:
        #0f766e;

}


.terms-label a {

    color:
        #0f766e;

    font-weight:
        600;

    text-decoration:
        none;

}


.terms-label a:hover {

    text-decoration:
        underline;

}


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

.register-btn {

    width:
        100%;

    height:
        50px;

    border:
        none;

    border-radius:
        10px;

    background:
        #0f766e;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.2s,
        transform 0.1s;

}


.register-btn:hover {

    background:
        #0b5f59;

}


.register-btn:active {

    transform:
        scale(0.98);

}


.register-btn:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

}


/* =================================
   LOGIN LINK
================================= */

.login-link {

    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        1px solid #e5e7eb;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    flex-wrap:
        wrap;

    font-size:
        13px;

    color:
        #6b7280;

}


.login-btn {

    border:
        none;

    background:
        transparent;

    color:
        #0f766e;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    padding:
        4px;

}


.login-btn:hover {

    text-decoration:
        underline;

}


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

.registration-security {

    margin-top:
        18px;

    background:
        #ecfdf5;

    border:
        1px solid #d1fae5;

    border-radius:
        12px;

    padding:
        14px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

}


.security-icon {

    font-size:
        20px;

    flex-shrink:
        0;

}


.registration-security strong {

    display:
        block;

    font-size:
        13px;

    color:
        #065f46;

    margin-bottom:
        4px;

}


.registration-security p {

    font-size:
        12px;

    line-height:
        1.5;

    color:
        #047857;

}


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

.form-group input.input-error {

    border-color:
        #dc2626;

    background:
        #fffafa;

}


.form-group input.input-error:focus {

    border-color:
        #dc2626;

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.10);

}


/* =================================
   SUCCESS STATE
================================= */

.form-group input.input-success {

    border-color:
        #059669;

}


/* =================================
   TABLET / DESKTOP
================================= */

@media (min-width: 600px) {

    .registration-header {

        padding:
            0 24px;

    }


    .registration-container {

        padding:
            45px 20px 60px;

    }


    .registration-card {

        padding:
            30px;

    }


    .registration-intro h1 {

        font-size:
            32px;

    }


    .registration-intro p {

        font-size:
            15px;

    }

}