/*
|--------------------------------------------------------------------------
| MCQ Subscription System
| style.css (Part 1)
|--------------------------------------------------------------------------
*/

*{
    box-sizing:border-box;
}

.mcq-pricing-wrapper{

    max-width:1200px;

    margin:50px auto;

    padding:20px;

    text-align:center;

}

.mcq-title{

    font-size:38px;

    font-weight:700;

    margin-bottom:10px;

    color:#222;

}

.mcq-subtitle{

    font-size:17px;

    color:#777;

    margin-bottom:45px;

}

.mcq-plan-grid{

    display:flex;

    gap:30px;

    justify-content:center;

    align-items:stretch;

    flex-wrap:wrap;

}

.mcq-plan-card{

    width:360px;

    background:#fff;

    border-radius:18px;

    padding:35px;

    position:relative;

    border:1px solid #ececec;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.mcq-plan-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.mcq-plan-card.popular{

    border:2px solid #4f46e5;

}

.mcq-badge{

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);

    background:#4f46e5;

    color:#fff;

    padding:8px 20px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}

.mcq-plan-card h3{

    margin-top:15px;

    font-size:30px;

    color:#222;

}

.mcq-price{

    font-size:48px;

    font-weight:bold;

    color:#4f46e5;

    margin:25px 0 10px;

}

.mcq-duration{

    color:#666;

    margin-bottom:30px;

    font-size:16px;

}

.mcq-features{

    list-style:none;

    padding:0;

    margin:0 0 30px;

    text-align:left;

}

.mcq-features li{

    padding:12px 0;

    border-bottom:1px solid #ededed;

    font-size:15px;

    color:#444;

}

.mcq-buy-btn{

    width:100%;

    display:block;

    border:none;

    background:#4f46e5;

    color:#fff;

    text-decoration:none;

    padding:16px;

    border-radius:10px;

    cursor:pointer;

    font-size:17px;

    font-weight:700;

    transition:.3s;

}

.mcq-buy-btn:hover{

    background:#3127d8;

}

.mcq-buy-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}

.mcq-start-btn{

    display:inline-block;

    margin-top:20px;

    padding:15px 35px;

    background:#16a34a;

    color:#fff;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

}

.mcq-start-btn:hover{

    background:#15803d;

    color:#fff;

}

.mcq-login-box{

    max-width:500px;

    margin:60px auto;

    background:#fff;

    padding:35px;

    border-radius:15px;

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

}

.mcq-login-box h2{

    margin-bottom:15px;

}

.mcq-login-box p{

    color:#666;

    margin-bottom:25px;

}
/*
|--------------------------------------------------------------------------
| Active Subscription Card
|--------------------------------------------------------------------------
*/

.mcq-subscription-active{

    max-width:700px;

    margin:50px auto;

}

.mcq-success-card{

    background:#ffffff;

    border:2px solid #22c55e;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(34,197,94,.12);

}

.mcq-success-card h2{

    color:#16a34a;

    margin-bottom:20px;

    font-size:32px;

}

.mcq-success-card p{

    margin:12px 0;

    color:#555;

    font-size:17px;

}

/*
|--------------------------------------------------------------------------
| Expired Box
|--------------------------------------------------------------------------
*/

.mcq-expired-box{

    max-width:700px;

    margin:40px auto;

    padding:35px;

    background:#fff8e1;

    border:2px solid #f59e0b;

    border-radius:15px;

    text-align:center;

}

.mcq-expired-box h2{

    color:#b45309;

    margin-bottom:15px;

}

.mcq-expired-box p{

    color:#7c5a00;

}

/*
|--------------------------------------------------------------------------
| Status Box
|--------------------------------------------------------------------------
*/

.mcq-status-box{

    max-width:600px;

    margin:30px auto;

    padding:25px;

    background:#fff;

    border-radius:12px;

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

}

.mcq-status-box p{

    margin:12px 0;

    font-size:16px;

    color:#444;

}

/*
|--------------------------------------------------------------------------
| Loader
|--------------------------------------------------------------------------
*/

#mcq-payment-loader{

    display:none;

    margin:30px auto;

    text-align:center;

}

.mcq-spinner{

    display:inline-block;

    width:36px;

    height:36px;

    border:5px solid #eeeeee;

    border-top:5px solid #4f46e5;

    border-radius:50%;

    animation:mcqSpin 1s linear infinite;

    vertical-align:middle;

}

.mcq-loader-text{

    display:inline-block;

    margin-left:12px;

    font-weight:600;

    color:#4f46e5;

    vertical-align:middle;

}

@keyframes mcqSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*
|--------------------------------------------------------------------------
| Messages
|--------------------------------------------------------------------------
*/

#mcq-payment-message{

    max-width:700px;

    margin:25px auto;

}

.mcq-success{

    background:#dcfce7;

    border:1px solid #22c55e;

    color:#166534;

    padding:16px;

    border-radius:10px;

    text-align:center;

    font-weight:600;

}

.mcq-error{

    background:#fee2e2;

    border:1px solid #ef4444;

    color:#991b1b;

    padding:16px;

    border-radius:10px;

    text-align:center;

    font-weight:600;

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.mcq-subscribe-btn{

    display:inline-block;

    margin-top:20px;

    padding:14px 28px;

    background:#4f46e5;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

}

.mcq-subscribe-btn:hover{

    background:#3730a3;

    color:#fff;

}

/*
|--------------------------------------------------------------------------
| Mobile Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:991px){

    .mcq-plan-grid{

        flex-direction:column;

        align-items:center;

    }

    .mcq-plan-card{

        width:100%;

        max-width:450px;

    }

}

@media(max-width:768px){

    .mcq-title{

        font-size:30px;

    }

    .mcq-price{

        font-size:40px;

    }

    .mcq-plan-card{

        padding:25px;

    }

    .mcq-success-card{

        padding:25px;

    }

}

@media(max-width:480px){

    .mcq-title{

        font-size:26px;

    }

    .mcq-subtitle{

        font-size:15px;

    }

    .mcq-buy-btn{

        font-size:16px;

    }

    .mcq-success-card h2{

        font-size:24px;

    }

    .mcq-status-box{

        padding:18px;

    }

}