.apply-page{

max-width:1100px;

margin:auto;

padding:40px 20px;

}

#courseList{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:20px;

margin-top:30px;

}

.course-card{

background:#fff;

padding:20px;

border-radius:10px;

box-shadow:0 3px 10px rgba(0,0,0,.15);

}

.course-card h3{

color:#006633;

margin-bottom:10px;

}

.apply-btn{

width:100%;

margin-top:15px;

padding:10px;

background:#0b8f3a;

color:#fff;

border:none;

border-radius:6px;

cursor:pointer;

font-size:16px;

}

.apply-btn:hover{

background:#08712e;

}


/* ==========================
   Back Button
========================== */

.back-area{

margin-bottom:20px;

}

.back-btn{

display:inline-block;

background:#006633;

color:#fff;

text-decoration:none;

padding:10px 18px;

border-radius:6px;

font-weight:600;

transition:.3s;

}

.back-btn:hover{

background:#004d26;

}


#applicationForm{

max-width:700px;

margin:40px auto;

background:#fff;

padding:25px;

border-radius:10px;

box-shadow:0 3px 12px rgba(0,0,0,.15);

}

#applicationForm input,
#applicationForm textarea{

width:100%;

padding:12px;

margin-bottom:15px;

border:1px solid #ccc;

border-radius:6px;

font-size:15px;

box-sizing:border-box;

}

#applicationForm textarea{

height:120px;

resize:vertical;

}

#submitApplication{

background:#0b8f3a;

color:#fff;

border:none;

padding:12px 25px;

border-radius:6px;

font-size:16px;

cursor:pointer;

}

#submitApplication:hover{

background:#08712e;

}


.application-card{

display:grid;

grid-template-columns:180px 1fr;

gap:12px 20px;

margin-top:20px;

}

.application-card div{

display:contents;

}

.application-card strong{

background:#f5f5f5;

padding:10px;

border-radius:6px;

}

.application-card span{

background:#fff;

padding:10px;

border:1px solid #ddd;

border-radius:6px;

}


.status-badge{

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:bold;

color:#fff;

}

.pending{

background:#f39c12;

}

.approved{

background:#27ae60;

}

.rejected{

background:#e74c3c;

}

.application-filters{

display:flex;

gap:15px;

margin:20px 0;

flex-wrap:wrap;

}

.application-filters input{

flex:1;

min-width:250px;

padding:10px;

border:1px solid #ccc;

border-radius:6px;

}

.application-filters select{

padding:10px;

border:1px solid #ccc;

border-radius:6px;

min-width:180px;

}



.course-modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

z-index:99999;

justify-content:center;

align-items:center;

padding:20px;

}

.course-modal-box{

background:#fff;

width:500px;

max-width:100%;

border-radius:12px;

padding:25px;

position:relative;

animation:popupFade .25s ease;

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

}

.course-modal-box h2{

margin-bottom:15px;

color:#004080;

}

.course-modal-box p{

line-height:1.8;

color:#444;

white-space:pre-wrap;

}

.course-modal-close{

position:absolute;

right:15px;

top:10px;

font-size:30px;

background:none;

border:none;

cursor:pointer;

color:#888;

}

.course-modal-close:hover{

color:red;

}

.course-info{

cursor:pointer;

margin-left:8px;

color:#0d6efd;

font-weight:bold;

font-size:18px;

}

@keyframes popupFade{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.course-card p{

display:flex;

margin:8px 0;

}

.course-label{

width:95px;

font-weight:700;

color:#003366;

flex-shrink:0;

}


.fee-link{

color:#0d6efd;

font-weight:600;

text-decoration:none;

transition:0.3s;

}

.fee-link:hover{

color:#0a58ca;

text-decoration:underline;

}