/* =========================
Logo
========================= */

.logo{

width:70px;
height:70px;
object-fit:contain;

}

.academy-name{

font-family:'Poppins',sans-serif;
font-size:18px;
font-weight:700;
color:var(--primary);
margin:0;

}

.academy-tagline{

font-size:13px;
color:#666;

}

/* =========================
Navbar
========================= */

.navbar{

background:var(--white, #fff) !important;
box-shadow:0 2px 15px rgba(0,0,0,.06);

}

html.monetix-dark .navbar{
background:#1a1d27 !important;
box-shadow:0 2px 15px rgba(0,0,0,.4);
}

.navbar-nav .nav-link{

position:relative;
color:var(--text, #222) !important;
font-weight:600;
margin:0 6px;
padding-bottom:4px;
transition:color .3s;

}

/* Animated underline */

.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:50%;
bottom:0;

width:0;
height:2px;

background:var(--primary);

transition:width .3s ease, left .3s ease;

}

.navbar-nav .nav-link:hover{

color:var(--primary) !important;

}

.navbar-nav .nav-link:hover::after{

width:80%;
left:10%;

}

/* Current page link stays underlined */

.navbar-nav .nav-link.active{

color:var(--primary) !important;

}

.navbar-nav .nav-link.active::after{

width:80%;
left:10%;

}

.enroll-btn{

border-radius:30px;
padding:12px 28px;
font-weight:600;
transition:transform .25s ease, box-shadow .25s ease;

}

.enroll-btn:hover{

transform:translateY(-2px);
box-shadow:0 6px 14px rgba(13,110,253,.35);

}

/* =========================
HERO
========================= */

.hero{

position:relative;
width:100%;
min-height:700px;
overflow:hidden;

}

/* Hero Background */

.hero-bg{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:1;

}

/* Light Overlay */

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(255,255,255,.12);

z-index:2;

}

/* Bootstrap Container */

.hero .container{

position:relative;

z-index:3;

height:100%;

}

.hero .row{

min-height:700px;

}

/* Hero Text */

.hero-content{

max-width:540px;

}

.hero-content h1{

font-size:64px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

color:#222;

}

.hero-content h1 span{

color:var(--primary);

}

.hero-content p{

font-size:22px;

line-height:1.7;

color:#333;

margin-bottom:35px;

}

.hero-content .btn{

padding:14px 30px;

border-radius:10px;

font-weight:600;

}

/* =========================
Courses Section
========================= */

.courses-section{

background:var(--light);

}

.section-heading{

max-width:720px;
margin:0 auto 50px;

}

.section-heading h2{

font-weight:800;
font-size:38px;
color:var(--dark);
margin-bottom:18px;

}

.section-heading p{

font-size:16px;
line-height:1.8;
color:#555;

}

.course-card{

background:var(--white);
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 18px rgba(0,0,0,.06);
display:flex;
flex-direction:column;
transition:transform .3s ease, box-shadow .3s ease;

}

.course-card:hover{

transform:translateY(-6px);
box-shadow:0 14px 30px rgba(13,110,253,.15);

}

.course-thumb{

position:relative;
width:100%;
aspect-ratio:4/3;
overflow:hidden;
background:#e9ecef;

}

.course-thumb img{

width:100%;
height:100%;
object-fit:cover;
transition:transform .4s ease;

}

.course-card:hover .course-thumb img{

transform:scale(1.08);

}

.course-level{

position:absolute;
top:12px;
left:12px;

background:var(--secondary);
color:#212529;

font-size:12px;
font-weight:600;

padding:5px 12px;
border-radius:20px;

}

.course-body{

padding:20px;
display:flex;
flex-direction:column;
flex-grow:1;

}

.course-title{

font-size:19px;
font-weight:600;
color:var(--dark);
margin-bottom:10px;

}

.course-desc{

font-size:14.5px;
line-height:1.7;
color:#666;
margin-bottom:16px;
flex-grow:1;

}

.course-meta{

display:flex;
align-items:center;
justify-content:space-between;

font-size:14px;
color:#555;
font-weight:500;

margin-bottom:16px;

padding-top:14px;
border-top:1px dashed #e2e2e2;

}

.course-meta i{

color:var(--primary);
margin-right:4px;

}

.course-fee{

color:var(--primary);
font-weight:700;
font-size:16px;

}

.course-btn{

border-radius:30px;
font-weight:600;
font-size:14.5px;
padding:9px 0;
width:100%;

}

/* =========================
Footer
========================= */

footer{

background:#212529;
color:#fff;
padding:25px 0;
text-align:center;

}

/* =========================
Responsive
========================= */

@media(max-width:992px){

.hero{

min-height:auto;

}

.hero-bg{

position:relative;
height:auto;

}

.hero .row{

min-height:auto;
padding:60px 0;

}

.hero-content{

max-width:100%;
text-align:center;

}

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:18px;

}

.section-heading h2{

font-size:30px;

}

}

@media(max-width:576px){

.logo{

width:55px;
height:55px;

}

.academy-name{

font-size:15px;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

}

.hero-content .btn{

width:100%;
margin-bottom:12px;

}

}

/* =========================
Auth (Login / Register)
========================= */

.auth-section{

min-height:70vh;
display:flex;
align-items:center;

}

.auth-card{

background:var(--white);
border-radius:16px;
padding:40px 36px;
box-shadow:0 4px 24px rgba(0,0,0,.08);

}

.auth-title{

font-weight:800;
font-size:30px;
color:var(--dark);
margin-bottom:6px;

}

.auth-subtitle{

font-size:15px;
color:#666;

}

.auth-btn{

border-radius:10px;
font-weight:600;
padding:12px 0;

}

.auth-switch{

font-size:14.5px;
color:#555;

}

.auth-switch a{

color:var(--primary);
font-weight:600;
text-decoration:none;

}

.auth-switch a:hover{

text-decoration:underline;

}

@media(max-width:576px){

.auth-card{

padding:30px 22px;

}

}

.login-type-toggle{

display:flex;
gap:10px;

}

.login-type-btn{

flex:1;
border:2px solid #e2e2e2;
border-radius:10px;
font-weight:600;
font-size:14.5px;
padding:10px 0;
color:#555;
background:var(--white);
transition:all .2s ease;

}

.btn-check:checked + .login-type-btn{

border-color:var(--primary);
background:rgba(13,110,253,.08);
color:var(--primary);

}
/* ==========================================
FEATURED COURSES
========================================== */

.featured-courses{
background:var(--surface-alt, #f8f9fa);
}

.section-badge{
display:inline-block;
background:#eaf2ff;
color:#0d6efd;
padding:8px 18px;
border-radius:30px;
font-weight:600;
font-size:14px;
}

.section-title{
font-size:42px;
font-weight:700;
}

.section-subtitle{
max-width:700px;
margin:auto;
color:var(--muted, #666);
font-size:18px;
}

.course-card{
background:var(--white, #fff);
border-radius:20px;
overflow:hidden;
transition:.35s;
box-shadow:0 8px 30px rgba(0,0,0,.08);
height:100%;
}
html.monetix-dark .course-card{ box-shadow:0 8px 30px rgba(0,0,0,.35); }

.course-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.course-card img{
width:100%;
height:192px;
object-fit:cover;
transition:.4s;
}

.course-card:hover img{
transform:scale(1.05);
}

.course-body{
padding:20px;
}

.course-category{
display:inline-block;
background:#eef4ff;
color:#0d6efd;
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:700;
margin-bottom:15px;
}

.course-body h4{
font-size:18px;
font-weight:700;
margin-bottom:12px;
}

.course-body p{
color:#666;
min-height:56px;
}

.course-info{
display:flex;
justify-content:space-between;
font-size:14px;
margin:16px 0;
color:#555;
}

.course-btn{
text-decoration:none;
font-weight:700;
color:#fff;
background:var(--primary);
display:inline-block;
text-align:center;
border-radius:30px;
padding:10px 16px;
width:100%;
}

.course-btn:hover{
color:#fff;
background:#0b5ed7;
}

/* ==========================================
COURSE CATALOG (public)
========================================== */

.catalog-hero{
background:linear-gradient(135deg,#0d6efd,#6610f2);
color:#fff;
}

.catalog-hero .section-badge{
background:rgba(255,255,255,.15);
color:#fff;
}

.catalog-title{
font-size:42px;
font-weight:700;
margin-top:14px;
}

.catalog-hero .section-subtitle{
color:rgba(255,255,255,.85);
max-width:640px;
}

.catalog-section{
background:var(--surface-alt, #f8f9fa);
}

.filter-card{
background:var(--white, #fff);
border-radius:20px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
padding:25px;
}
html.monetix-dark .filter-card{ box-shadow:0 8px 30px rgba(0,0,0,.35); }

.catalog-card{
display:flex;
flex-direction:column;
border:1px solid #eef0f4;
transition:transform .28s ease, box-shadow .28s ease;
}

.catalog-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 36px rgba(0,0,0,.12);
}

.catalog-card .course-thumb{
position:relative;
overflow:hidden;
}

.catalog-card .course-thumb img{
width:100%;
height:100%;
aspect-ratio:16/9;
object-fit:cover;
transition:.4s ease;
display:block;
}

.catalog-card:hover .course-thumb img{
transform:scale(1.05);
}

.catalog-card .course-level{
position:absolute;
top:12px;
left:12px;
background:rgba(13,110,253,.92);
color:#fff;
font-size:12px;
font-weight:700;
padding:4px 12px;
border-radius:20px;
letter-spacing:.3px;
}

.catalog-card .course-body{
display:flex;
flex-direction:column;
flex-grow:1;
padding:18px;
}

.catalog-card .course-title{
font-size:19px;
font-weight:700;
line-height:1.35;
margin-bottom:14px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(2 * 1.35em);
}

.catalog-card .course-title a{
color:inherit;
text-decoration:none;
}

.catalog-card .course-title a:hover{
color:#0d6efd;
}

.catalog-card .course-meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
font-size:13px;
color:#555;
margin-bottom:16px;
flex-wrap:nowrap;
}

.catalog-card .course-meta span{
display:inline-flex;
align-items:center;
white-space:nowrap;
}

.catalog-card .course-meta span i{
margin-right:5px;
color:#0d6efd;
}

.catalog-card .catalog-card-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:14px;
padding-top:12px;
border-top:1px solid #eef0f4;
}

.catalog-card .course-fee{
font-size:17px;
font-weight:700;
color:#0d6efd;
white-space:nowrap;
}

.catalog-card .course-fee small{
font-size:12px;
color:#999;
font-weight:500;
}

.catalog-card .course-btn{
text-align:center;
border-radius:10px;
padding:10px 16px;
margin-top:auto;
width:100%;
}

/* ==========================================
COURSE DETAILS (public)
========================================== */

.detail-hero{
background:linear-gradient(135deg,#f8f9fa,#eef4ff);
border-bottom:1px solid #eef0f4;
}

.detail-hero .breadcrumb{
--bs-breadcrumb-divider-color:#8a94a6;
}

.detail-hero .breadcrumb a{
color:#0d6efd;
text-decoration:none;
}

.detail-title{
font-size:38px;
font-weight:700;
line-height:1.25;
margin-bottom:6px;
}

.detail-subtitle{
color:#666;
font-size:18px;
margin-bottom:0;
}

.detail-stats{
gap:1.5rem;
}

.detail-stat{
display:flex;
align-items:center;
gap:10px;
}

.detail-stat > i{
font-size:26px;
color:#0d6efd;
}

.detail-stat strong{
display:block;
font-size:16px;
}

.detail-stat span{
display:block;
font-size:13px;
color:var(--muted, #666);
}

.detail-card{
background:var(--white, #fff);
border-radius:20px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,.1);
}

.detail-card .detail-thumb img{
width:100%;
height:240px;
object-fit:cover;
display:block;
}

.detail-card-body{
padding:24px;
}

.detail-fee-old{
color:#999;
text-decoration:line-through;
font-size:15px;
}

.detail-fee{
font-size:30px;
font-weight:700;
color:#0d6efd;
}

.detail-body{
background:var(--white, #fff);
}

.detail-block{
margin-bottom:40px;
}

.detail-heading{
font-size:24px;
font-weight:700;
margin-bottom:18px;
padding-bottom:12px;
border-bottom:2px solid var(--border, #eef0f4);
}

.detail-prose{
color:var(--muted, #555);
line-height:1.8;
font-size:15px;
}

.overview-grid{
row-gap:1rem;
}

.overview-item{
background:var(--surface-alt, #f8f9fa);
border:1px solid var(--border, #eef0f4);
border-radius:14px;
padding:16px;
}

.overview-item i{
font-size:20px;
color:#0d6efd;
display:block;
margin-bottom:8px;
}

.overview-item .label{
display:block;
font-size:12px;
color:#888;
text-transform:uppercase;
letter-spacing:.4px;
}

.overview-item .value{
display:block;
font-weight:700;
font-size:15px;
margin-top:2px;
}

.accordion-item{
border:1px solid #eef0f4 !important;
border-radius:14px !important;
margin-bottom:10px;
overflow:hidden;
}

.accordion-button{
font-weight:600;
box-shadow:none !important;
}

.accordion-button:not(.collapsed){
background:#eef4ff;
color:#0d6efd;
}

.detail-list{
list-style:none;
padding:0;
margin:0;
}

.detail-list li{
padding:8px 0;
color:#555;
}

.detail-list li i{
margin-right:8px;
}

.detail-sidebar{
top:90px;
}

.fee-list li{
display:flex;
justify-content:space-between;
padding:9px 0;
border-bottom:1px dashed #eef0f4;
color:#555;
}

.fee-list li strong{
color:#222;
}

.fee-list li.fee-total{
border-bottom:none;
padding-top:12px;
color:#222;
}

.fee-list li.fee-total strong{
color:#0d6efd;
font-size:20px;
}

@media (max-width:768px){
.catalog-title{
font-size:30px;
}
.detail-title{
font-size:28px;
}
.catalog-hero .py-5,
.detail-hero{
padding-top:40px;
padding-bottom:40px;
}
}

/* ===================== Settings tabs ===================== */

.settings-tabs{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:16px 20px 0;
border-bottom:1px solid var(--border, #e3e8ee);
}
.settings-tabs .nav-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 16px;
border-radius:8px;
color:#5b6472;
font-weight:600;
font-size:14px;
border:1px solid transparent;
transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.settings-tabs .nav-link:hover{
color:var(--primary, #0d6efd);
background:rgba(13,110,253,.06);
}
.settings-tabs .nav-link.active{
color:#fff;
background:var(--primary, #0d6efd);
border-color:var(--primary, #0d6efd);
}
.settings-tab-content{
padding:20px;
}
@media (max-width:768px){
.settings-tabs{
padding:12px 14px 0;
gap:6px;
}
.settings-tab-content{
padding:16px 14px;
}
}

/* ===================== Searchable dropdown (course assignment filter) ===================== */
/* .inst-* styles moved to components.css — admin pages don't load pages.css */