/* ==========================================
   OnlineOPD Processing & Payment CSS
   ========================================== */

body{
    margin:0;
    padding:0;
    background:#f8fbff;
    font-family:Arial,Helvetica,sans-serif;
}

/* ===============================
   Processing Request
================================= */

.processing-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px 15px;
}

.processing-box,
.processing-card{
    background:#fff;
    max-width:700px;
    width:100%;
    padding:60px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.processing-box img{
    width:180px;
    margin-bottom:30px;
}

.processing-box h2,
.processing-card h2{
    font-size:40px;
    font-weight:700;
    color:#24364b;
    margin-bottom:20px;
}

.processing-box p,
.processing-card p{
    font-size:18px;
    color:#66788a;
    line-height:32px;
    margin-bottom:20px;
}

/* Loader */

.spinner,
.loader{
    width:80px;
    height:80px;
    margin:35px auto;
    border:7px solid #e8eef8;
    border-top:7px solid #2f80ed;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

/* Status */

.status{
    display:inline-block;
    padding:14px 28px;
    background:#eef5ff;
    color:#2f80ed;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
}

.note{
    margin-top:30px;
    color:#98a4b3;
    font-size:16px;
}

/* Loading Dots */

.dots{
    margin-top:20px;
}

.dots span{
    display:inline-block;
    width:12px;
    height:12px;
    background:#c7d7f7;
    border-radius:50%;
    margin:0 6px;
    animation:blink 1.5s infinite;
}

.dots span:nth-child(2){
animation-delay:.3s;
}

.dots span:nth-child(3){
animation-delay:.6s;
}

@keyframes blink{

0%,100%{
opacity:.3;
}

50%{
opacity:1;
background:#2f80ed;
}

}

/* ===============================
   Payment Page
================================= */

.payment-section{
    padding:80px 0;
}

.payment-card{
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    padding:45px;
}

.page-title{
    font-size:38px;
    font-weight:700;
    color:#24364b;
    margin-bottom:15px;
}

.page-desc{
    color:#66788a;
    font-size:17px;
    line-height:30px;
    margin-bottom:35px;
}

.summary-box{
    background:#f5f9fd;
    border-radius:15px;
    padding:25px;
    margin-bottom:30px;
}

.summary-box h4{
    font-size:22px;
    font-weight:700;
    color:#24364b;
    margin-bottom:20px;
}

.summary-table td{
    padding:12px 0;
    font-size:16px;
}

.total{
    font-size:22px;
    font-weight:700;
    color:#2f80ed;
}

.pay-btn{
    width:100%;
    background:#3399cc;
    color:#fff;
    border:none;
    border-radius:30px;
    padding:16px;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.pay-btn:hover{
    background:#2b89b4;
}

.secure{
    margin-top:25px;
    text-align:center;
    color:#6c757d;
}

/* Responsive */

@media(max-width:768px){

.processing-box,
.processing-card,
.payment-card{
padding:35px 25px;
}

.processing-box h2,
.processing-card h2,
.page-title{
font-size:30px;
}

.processing-box p,
.processing-card p{
font-size:16px;
line-height:28px;
}

.spinner,
.loader{
width:65px;
height:65px;
}

}

.processing-section{
    padding:90px 0;
    background:#f8fbff;
}

.processing-card{

    max-width:700px;
    margin:auto;
    background:#fff;
    border-radius:20px;
    padding:60px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.loader{

    width:80px;
    height:80px;
    margin:0 auto 35px;
    border:7px solid #e6eefb;
    border-top:7px solid #2f80ed;
    border-radius:50%;
    animation:spin 1s linear infinite;

}

@keyframes spin{

0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}

}

.processing-card h2{

    font-size:42px;
    font-weight:700;
    color:#24364b;
    margin-bottom:20px;

}

.processing-card p{

    font-size:18px;
    color:#66788a;
    line-height:32px;
    margin-bottom:20px;

}

.status{

    display:inline-block;
    padding:14px 28px;
    background:#eef5ff;
    color:#2f80ed;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
    margin-top:15px;

}

.note{

    margin-top:35px;
    color:#98a4b3;
    font-size:16px;

}

.dots{

    margin-top:20px;

}

.dots span{

    display:inline-block;
    width:12px;
    height:12px;
    background:#c7d7f7;
    border-radius:50%;
    margin:0 6px;
    animation:blink 1.5s infinite;

}

.dots span:nth-child(2){
animation-delay:.3s;
}

.dots span:nth-child(3){
animation-delay:.6s;
}

@keyframes blink{

0%,100%{
opacity:.3;
}

50%{
opacity:1;
background:#2f80ed;
}

}