/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    padding: 40px 20px;

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

    background:
        #f4f7fb;

    color:
        #1f2937;

}


/* =====================================================
   PROFILE CARD
===================================================== */

.profile-card {

    width:
        min(850px, 100%);

    margin:
        0 auto;

    background:
        #ffffff;

    padding:
        35px;

    border-radius:
        18px;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.10);

}


/* =====================================================
   MAIN TITLE
===================================================== */

.profile-card h1 {

    text-align:
        center;

    color:
        #0077b6;

    margin:
        0 0 30px;

    font-size:
        34px;

}


/* =====================================================
   VERIFICATION CARD
===================================================== */

.verification-card {

    width:
        100%;

    margin:
        0 0 30px;

    padding:
        18px 20px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border:
        1px solid #dbe3ec;

    border-radius:
        14px;

    background:
        #f8fafc;

}


.verification-icon {

    width:
        52px;

    height:
        52px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e8f0ff;

    font-size:
        27px;

}


.verification-content {

    flex:
        1;

}


.verification-content h3 {

    margin:
        0 0 5px;

    font-size:
        19px;

    color:
        #111827;

}


.verification-content p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        14px;

}


.verification-badge {

    padding:
        8px 13px;

    border-radius:
        20px;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

}


.verification-badge.pending {

    background:
        #fff7ed;

    color:
        #c2410c;

}


.verification-badge.verified {

    background:
        #dcfce7;

    color:
        #15803d;

}


/* =====================================================
   PROFILE IMAGE
===================================================== */

.image-section {

    text-align:
        center;

    margin:
        10px 0 35px;

}


.profile-pic {

    display:
        block;

    width:
        140px;

    height:
        140px;

    margin:
        0 auto 18px;

    border-radius:
        50%;

    object-fit:
        cover;

    border:
        4px solid #0077b6;

    background:
        #eef2f7;

}


#profileImage {

    display:
        block;

    margin:
        0 auto;

    font-size:
        14px;

}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.profile-card h2 {

    margin:
        35px 0 18px;

    padding-bottom:
        8px;

    color:
        #0077b6;

    font-size:
        23px;

    border-bottom:
        2px solid #e5eef5;

}


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

.input-group {

    margin-bottom:
        18px;

}


.input-group label {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        14px;

    font-weight:
        700;

    color:
        #374151;

}


.input-group input,
.input-group select,
.input-group textarea {

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid #cbd5e1;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #111827;

    font-size:
        15px;

    outline:
        none;

    transition:
        0.2s ease;

}


.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {

    border-color:
        #0077b6;

    box-shadow:
        0 0 0 3px
        rgba(0, 119, 182, 0.10);

}


.input-group textarea {

    resize:
        vertical;

    min-height:
        100px;

}


.input-group small {

    display:
        block;

    margin-top:
        5px;

    color:
        #64748b;

    font-size:
        12px;

}


/* =====================================================
   TWO COLUMN ROW
===================================================== */

.row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;

}


/* =====================================================
   PROFILE COMPLETION
===================================================== */

.progress-section {

    margin:
        30px 0;

}


.progress-section > label {

    display:
        block;

    margin-bottom:
        8px;

    font-weight:
        700;

}


.progress-bar {

    width:
        100%;

    height:
        12px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #e5e7eb;

}


.progress-fill {

    height:
        100%;

    width:
        0%;

    border-radius:
        20px;

    background:
        #0077b6;

    transition:
        width 0.3s ease;

}


/* =====================================================
   SAVE BUTTON
===================================================== */

#saveBtn {

    width:
        100%;

    padding:
        14px;

    border:
        none;

    border-radius:
        10px;

    background:
        #0077b6;

    color:
        white;

    font-size:
        17px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s ease;

}


#saveBtn:hover {

    background:
        #023e8a;

}


#saveBtn:disabled {

    opacity:
        0.65;

    cursor:
        not-allowed;

}


/* =====================================================
   BACK BUTTON
===================================================== */

.back-btn {

    display:
        block;

    width:
        fit-content;

    margin:
        20px auto 0;

    color:
        #0077b6;

    text-decoration:
        none;

    font-weight:
        700;

}


.back-btn:hover {

    color:
        #023e8a;

}


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

@media (max-width: 650px) {

    body {

        padding:
            20px 12px;

    }


    .profile-card {

        padding:
            22px 16px;

        border-radius:
            14px;

    }


    .profile-card h1 {

        font-size:
            28px;

    }


    .row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .verification-card {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

    }


    .verification-content {

        min-width:
            180px;

    }


    .verification-badge {

        margin-left:
            67px;

    }

}