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

.msp-login-wrapper{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

    background:#F6F8FC;

}

.msp-login-card{

    width:100%;

    max-width:460px;

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,63,125,.08);

    border-top:5px solid #FF9E0B;

}

.msp-login-card h2{

    margin:0;

    font-size:34px;

    color:#003F7D;

}

.msp-login-card p{

    margin:15px 0 30px;

    color:#666;

    line-height:1.7;

}

.msp-form-group{

    margin-bottom:22px;

}

.msp-form-group label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#222;

}

.msp-form-group input{

    width:100%;

    height:55px;

    padding:0 18px;

    border:1px solid #d8dce5;

    border-radius:10px;

    font-size:16px;

    background:#fff;

    transition:.3s;

    box-sizing:border-box;

}

.msp-form-group input:focus{

    outline:none;

    border-color:#003F7D;

    box-shadow:0 0 0 3px rgba(0,63,125,.08);

}

.msp-btn{

    width:100%;

    height:55px;

    border:none;

    border-radius:10px;

    background:#003F7D;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.msp-btn:hover{

    background:#FF9E0B;

}

#msp-login-message{

    margin-top:20px;

    text-align:center;

}

#msp-login-message p{

    margin:0;

    font-size:15px;

}

@media(max-width:768px){

    .msp-login-card{

        padding:30px 25px;

    }

    .msp-login-card h2{

        font-size:28px;

    }

}

/*==================================================
STUDENT DASHBOARD
==================================================*/

:root{
    --primary:#003F7D;
    --primary-dark:#002E5D;

    --secondary:#FF9E0B;
    --secondary-dark:#e88f00;

    --bg:#F5F8FC;

    --white:#ffffff;

    --text:#222;
    --light:#6B7280;

    --success:#16A34A;
    --success-bg:#DCFCE7;

    --pending:#F59E0B;
    --pending-bg:#FEF3C7;

    --border:#E5E7EB;

    --shadow:0 10px 30px rgba(0,63,125,.08);

    --radius:18px;
}

/* Dashboard */

.msp-dashboard{

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

}

/* Header */

.msp-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    padding:22px 30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin-bottom:30px;

}
.msp-form-group input#msp_email {
    border: 1px solid #ccc;
    border-radius: 6px;
}
.msp-brand h2{

    margin: 0;
    color: #000;
    font-size: 30px;
    font-size: 38px;
    font-weight: 700;
    line-height: 62px;

}

.msp-brand span{

    color:#777;
    font-size: 16px;

}

.msp-user-area{

    display:flex;

    align-items:center;

    gap:18px;

}

.msp-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary),#2464b5);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.msp-user-info h4{

    margin:0;

}

.msp-user-info p{

    margin:4px 0 0;

    color:#333;

}

.msp-logout, button.msp-btn{

    background:var(--secondary);

    color:#000;

    padding:12px 22px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
    border: 1px solid var(--secondary);

}
button.msp-btn{
    width: 100%;
}

.msp-logout:hover, button.msp-btn:hover{

    background:var(--secondary-dark);
    color:#000;

}

/* Hero */

.msp-hero{
    background: #FF9E0B;
    color: #000;
    padding:45px;
    border-radius:22px;
    margin-bottom:30px;
}

.msp-hero h1{

    margin:0 0 10px;

    font-size:38px;

}

.msp-hero p{

    margin:0;

    max-width:650px;

    opacity:.95;

}

/* Stats */

.msp-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-bottom:30px;

}

.msp-stat-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:var(--shadow);

    text-align:center;

}

.msp-stat-card h2{

    margin:0;

    font-size:46px;

    color:var(--primary);

}

.msp-stat-card p{

    margin-top:10px;

    color:#333;

}

/* Tabs */

.msp-tabs{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}

.msp-tab-btn{

    border:none;

    background:#E8EEF8;

    color:var(--primary);

    padding:13px 25px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.msp-tab-btn.active{

    background:var(--primary);

    color:#fff;

}
.msp-tab-btn:hover{
    background:var(--primary);
}
.msp-tab-content{
    margin-top: 40px;
    display:none;

}

.msp-tab-content.active{

    display:block;

}

/* Profile */

.msp-profile-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.msp-profile-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:var(--shadow);

    border-top:5px solid var(--secondary);

}

.msp-profile-card label{

    display:block;

    color:#333;

    margin-bottom:10px;

    font-size:16px;

}

.msp-profile-card h3{

    margin:0;

    font-size:22px;
    margin-top: 15px;
    color:#111;

}

/* Workshop */

.msp-workshop-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    border-radius:20px;

    padding:28px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.msp-workshop-card:hover{

    transform:translateY(-3px);

}

.msp-workshop-left h3{

    margin:0 0 10px;
    font-size: 25px;
    color:#000;

}

.msp-workshop-left p{

    margin:0;

    color:#333;

}

.msp-workshop-right{

    text-align:right;

}

.msp-status{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;

}

.msp-status.completed{

    background:var(--success-bg);

    color:var(--success);

}

.msp-status.pending{

    background:var(--pending-bg);

    color:var(--pending);

}

.msp-download-btn{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    padding:12px 22px;

    border-radius:10px;

    transition:.3s;

}

.msp-download-btn:hover{

    background:var(--secondary);

}
.msp-certificate-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    align-items: center;
}

.msp-download-btn,
.msp-linkedin-btn,
.msp-facebook-btn{
    padding:10px 18px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.msp-download-btn{
    background:#FF9E0B;
    color: #000;
}

.msp-download-btn:hover{
    background:#e68f00;
    color: #000;
}

.msp-linkedin-btn{
    background:#0A66C2;
}

.msp-linkedin-btn:hover{
    background:#084d93;
    color: #fff;
}

.msp-facebook-btn{
    background:#1877F2;
    
}

.msp-facebook-btn:hover{
    background:#0f5dcf;
    color: #fff;
}
.msp-pending{

    margin-top:15px;

    max-width:260px;

}

.msp-pending strong{

    color:#d97706;

}

.msp-pending p{

    color:#333;

    margin:8px 0;

}

.msp-pending a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

/* Footer */

.msp-footer{

    text-align:center;

    margin-top:40px;

    color:#333;

    font-size:14px;

}

/* Responsive */

@media(max-width:991px){

    .msp-header{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }

    .msp-user-area{

        flex-direction:column;

    }

    .msp-stats{

        grid-template-columns:1fr;

    }

    .msp-profile-grid{

        grid-template-columns:1fr;

    }

    .msp-workshop-card{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .msp-workshop-right{

        width:100%;

        text-align:left;

    }

}