/* ==========================================================================
   Market — design system for the video-course marketplace (homepage, catalog,
   course/bundle detail, student portal). Reuses the same component class
   names as admin.css/student.css (.panel, .btn-flame, table, .badge, .alert,
   .form-grid, .progress-track, .lesson-list, .video-embed, .certificate, ...)
   so every existing student-portal PHP file works unchanged — only the
   stylesheet + header/footer markup differ from the admin/flame system.
   ========================================================================== */

:root{
  --mkt-ink:#101828;
  --mkt-muted:#667085;
  --mkt-muted-2:#98A2B3;
  --mkt-line:#E4E7EC;
  --mkt-paper:#F7F9FC;
  --mkt-card:#FFFFFF;

  --mkt-blue:#175CD3;
  --mkt-blue-dark:#0E4DA4;
  --mkt-blue-light:#EFF6FF;
  --mkt-accent:#FF6A1A;
  --mkt-accent-dark:#E85D0F;
  --mkt-accent-light:#FFF1E8;

  --mkt-success:#12B76A;
  --mkt-success-light:#ECFDF3;
  --mkt-danger:#F04438;
  --mkt-danger-light:#FEF3F2;

  --mkt-radius:14px;
  --mkt-radius-lg:20px;
  --mkt-shadow:0 1px 2px rgba(16,24,40,.05);
  --mkt-shadow-md:0 8px 24px -8px rgba(16,24,40,.16);
  --mkt-shadow-lg:0 24px 48px -16px rgba(16,24,40,.22);
}

*{box-sizing:border-box;}
body{
  margin:0; font-family:'Hind Siliguri',sans-serif; background:var(--mkt-paper); color:var(--mkt-ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:'Baloo Da 2','Hind Siliguri',sans-serif; font-weight:700; line-height:1.3; margin:0;}
.mkt-wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
:focus-visible{outline:2px solid var(--mkt-accent); outline-offset:2px;}

/* ---------- Buttons (shared names with admin.css/student.css) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:100px; font-weight:600; font-size:14.5px;
  border:none; cursor:pointer; font-family:inherit; transition:.18s;
}
.btn-flame{background:var(--mkt-blue); color:#fff; box-shadow:0 6px 18px -6px rgba(23,92,211,.55);}
.btn-flame:hover{background:var(--mkt-blue-dark); transform:translateY(-1px);}
.btn-outline{background:#fff; color:var(--mkt-ink); border:1.5px solid var(--mkt-line);}
.btn-outline:hover{border-color:var(--mkt-blue); color:var(--mkt-blue);}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:#fff;}
.btn-danger{background:var(--mkt-danger-light); color:var(--mkt-danger);}
.btn-danger:hover{background:var(--mkt-danger); color:#fff;}
.btn-accent{background:var(--mkt-accent); color:#fff;}
.btn-accent:hover{background:var(--mkt-accent-dark);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-icon{padding:8px; border-radius:8px;}
.btn-icon svg{width:15px; height:15px;}
.btn-block{width:100%;}

/* Logo asset is a wide icon+wordmark lockup where the wordmark is rendered in
   white (invisible on light backgrounds, but still reserves its full width).
   On light backgrounds we crop to just the icon glyph and label it with our
   own text instead — this fixed-size box + object-position:left crop does
   that without needing a separate icon-only asset. */
.brand-mark{display:inline-block; overflow:hidden; position:relative; flex:none;}
.brand-mark img{position:absolute; left:0; top:0; height:100%; width:auto; max-width:none;}

/* ---------- Header / nav ---------- */
.mkt-header{background:#fff; border-bottom:1px solid var(--mkt-line); position:sticky; top:0; z-index:40;}
.mkt-header .bar{display:flex; align-items:center; gap:28px; padding:14px 0;}
.mkt-header .brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--mkt-ink); margin-right:auto;}
.mkt-header .brand .brand-mark{width:32px; height:32px;}
.mkt-nav{display:flex; align-items:center; gap:6px;}
.mkt-nav a{padding:9px 14px; border-radius:100px; font-size:14.5px; font-weight:600; color:var(--mkt-muted);}
.mkt-nav a:hover{color:var(--mkt-ink); background:var(--mkt-paper);}
.mkt-nav a.active{color:var(--mkt-blue); background:var(--mkt-blue-light);}
.mkt-search-widget{position:relative; display:flex; align-items:center; flex:none;}
.mkt-search-icon-btn{width:38px; height:38px; border-radius:50%; border:none; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--mkt-muted); transition:.15s; flex:none;}
.mkt-search-icon-btn:hover{background:var(--mkt-paper); color:var(--mkt-ink);}
.mkt-search-icon-btn svg{width:18px; height:18px;}
.mkt-search-widget.open .mkt-search-icon-btn{opacity:0; pointer-events:none;}
.mkt-search-panel{position:absolute; top:50%; right:0; transform:translateY(-50%); display:flex; align-items:center; background:#fff; border:1.5px solid var(--mkt-line); border-radius:100px; box-shadow:var(--mkt-shadow-md); width:0; opacity:0; pointer-events:none; overflow:hidden; transition:width .22s ease, opacity .18s ease; z-index:5;}
.mkt-search-widget.open .mkt-search-panel{width:280px; opacity:1; pointer-events:auto; padding:3px 3px 3px 16px;}
.mkt-search-panel input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:14px; font-family:inherit; padding:8px 0; color:var(--mkt-ink);}
.mkt-search-panel button{border:none; background:var(--mkt-ink); color:#fff; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.mkt-search-panel button:hover{background:var(--mkt-blue);}
.mkt-search-panel button svg{width:13px; height:13px;}
.mkt-header-cta{display:flex; align-items:center; gap:10px;}
.mkt-hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.mkt-hamburger span{width:22px; height:2px; background:var(--mkt-ink); border-radius:2px;}
@media (max-width:920px){
  .mkt-nav{position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column; align-items:stretch; padding:14px; gap:4px; transform:translateX(100%); transition:.25s; overflow-y:auto;}
  .mkt-nav.open{transform:translateX(0);}
  .mkt-nav a{padding:14px 16px;}
  .mkt-search-panel{position:fixed; top:14px; left:14px; right:14px; width:auto !important; max-width:none;}
  .mkt-search-widget.open .mkt-search-panel{opacity:1; pointer-events:auto;}
  .mkt-hamburger{display:flex;}
}

/* ---------- Hero ---------- */
.mkt-hero{background:linear-gradient(180deg,#0B1B3B 0%,#0E2559 100%); color:#fff; padding:64px 0 56px; position:relative; overflow:hidden;}
.mkt-hero::before{content:""; position:absolute; top:-120px; right:-80px; width:420px; height:420px; background:radial-gradient(circle,rgba(255,106,26,.35),transparent 70%); pointer-events:none;}
.mkt-hero::after{content:""; position:absolute; bottom:-160px; left:-100px; width:420px; height:420px; background:radial-gradient(circle,rgba(23,92,211,.4),transparent 70%); pointer-events:none;}
.mkt-hero-inner{position:relative; z-index:1; max-width:720px;}
.mkt-hero .eyebrow-mkt{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:6px 14px; border-radius:100px; font-size:12.5px; font-weight:600; color:#FFD9BF; margin-bottom:18px;}
.mkt-hero h1{font-size:clamp(28px,4vw,44px); color:#fff;}
.mkt-hero h1 .accent{color:var(--mkt-accent);}
.mkt-hero p{color:#B7C4E8; font-size:16px; line-height:1.75; margin-top:16px; max-width:560px;}
.mkt-search{display:flex; gap:0; margin-top:30px; background:#fff; border-radius:100px; padding:6px; max-width:520px; box-shadow:var(--mkt-shadow-lg);}
/* Higher specificity + explicit resets: the generic `input[type=text]` rule
   further down this file (same specificity as a plain class selector) would
   otherwise win on source order and clobber this pill's border/background/
   radius/margin, leaving a squared-off, bordered input inside a rounded pill. */
.mkt-hero .mkt-search input[type=text]{
  flex:1; min-width:0; border:none; outline:none; padding:12px 18px; margin:0;
  font-size:14.5px; font-family:inherit; border-radius:100px; background:#fff; color:var(--mkt-ink);
}
.mkt-search button{border:none; background:var(--mkt-accent); color:#fff; border-radius:100px; padding:12px 22px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; flex:none; white-space:nowrap;}
.mkt-search button:hover{background:var(--mkt-accent-dark);}
@media (max-width:520px){
  .mkt-search{flex-wrap:wrap; border-radius:20px;}
  .mkt-hero .mkt-search input[type=text]{width:100%; flex:1 1 100%; border-radius:14px;}
  .mkt-search button{width:100%; justify-content:center; border-radius:14px; margin-top:6px;}
}
.mkt-hero-stats{display:flex; gap:34px; margin-top:36px; flex-wrap:wrap;}
.mkt-hero-stats div b{display:block; font-family:'Space Grotesk',sans-serif; font-size:22px; color:#fff;}
.mkt-hero-stats div span{font-size:12.5px; color:#8FA0CC;}
@media (max-width:640px){
  .mkt-hero{padding:40px 0 34px;}
  .mkt-hero-stats{gap:22px;}
}

/* ---------- Section heads ---------- */
.mkt-section{padding:56px 0;}
.mkt-section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap;}
.mkt-section-head h2{font-size:clamp(22px,2.6vw,30px);}
.mkt-section-head p{color:var(--mkt-muted); font-size:14.5px; margin-top:6px;}
.mkt-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--mkt-blue); margin-bottom:8px;}
.mkt-eyebrow::before{content:""; width:20px; height:2px; background:var(--mkt-accent); border-radius:2px;}

/* ---------- Category chips ---------- */
.chip-row{display:flex; gap:10px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--mkt-line); border-radius:100px; padding:10px 18px; font-size:13.5px; font-weight:600; color:var(--mkt-ink); transition:.15s;}
.chip:hover{border-color:var(--mkt-blue); color:var(--mkt-blue);}
.chip.active{background:var(--mkt-blue); border-color:var(--mkt-blue); color:#fff;}

/* ---------- Course cards (catalog + homepage rows) ---------- */
.course-grid-mkt{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:1000px){ .course-grid-mkt{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .course-grid-mkt{grid-template-columns:1fr;} }
.course-card-mkt{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); overflow:hidden; transition:.2s; display:flex; flex-direction:column;}
.course-card-mkt:hover{box-shadow:var(--mkt-shadow-md); transform:translateY(-3px); border-color:transparent;}
.course-card-mkt .thumb-wrap{position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--mkt-blue),#3A7BE0); overflow:hidden;}
.course-card-mkt .thumb-wrap img{width:100%; height:100%; object-fit:cover;}
.course-card-mkt .cat-badge{position:absolute; top:10px; left:10px; background:rgba(16,24,40,.65); color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; backdrop-filter:blur(4px); z-index:2;}

/* Generated thumbnail (used when no real thumbnail image is uploaded yet) —
   a distinct gradient + icon + the course title itself, so cards read as
   designed rather than as N identical flat boxes. */
.thumb-gen{display:flex; align-items:flex-end; padding:16px; position:relative;}
.thumb-gen::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% -10%, rgba(255,255,255,.28), transparent 55%);}
.thumb-gen .thumb-icon{position:absolute; top:14px; right:14px; width:34px; height:34px; opacity:.9;}
.thumb-gen .thumb-icon svg{width:100%; height:100%; stroke:#fff; opacity:.85;}
.thumb-gen .thumb-title{position:relative; z-index:1; color:#fff; font-family:'Baloo Da 2','Hind Siliguri',sans-serif; font-weight:700; font-size:16px; line-height:1.35; text-shadow:0 2px 10px rgba(0,0,0,.25);}
.thumb-gen-1{background:linear-gradient(135deg,#175CD3,#3A7BE0);}
.thumb-gen-2{background:linear-gradient(135deg,#7A2FE0,#B45FE8);}
.thumb-gen-3{background:linear-gradient(135deg,#0E8F6B,#22C39B);}
.thumb-gen-4{background:linear-gradient(135deg,#E0562F,#FF9142);}
.thumb-gen-5{background:linear-gradient(135deg,#C0209E,#E85CC8);}
.thumb-gen-6{background:linear-gradient(135deg,#1E6E8C,#2FAEDB);}
.course-card-mkt .body{padding:18px; display:flex; flex-direction:column; flex:1;}
.course-card-mkt h3{font-size:15.5px; margin-bottom:8px; line-height:1.4;}
.course-card-mkt p{font-size:13px; color:var(--mkt-muted); line-height:1.6; flex:1; margin-bottom:12px;}
.course-card-mkt .meta-row{display:flex; align-items:center; gap:12px; font-size:12px; color:var(--mkt-muted-2); margin-bottom:14px;}
.course-card-mkt .meta-row span{display:flex; align-items:center; gap:4px;}
.course-card-mkt .meta-row svg{width:13px; height:13px;}
.price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:14px;}
.price-row .old{text-decoration:line-through; color:var(--mkt-muted-2); font-size:13px;}
.price-row .now{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--mkt-accent);}
.course-card-mkt .card-actions{display:flex; gap:8px; margin-top:auto;}
.course-card-mkt .card-actions .btn{flex:1;}

/* ---------- Bundle cards ---------- */
.bundle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:1000px){ .bundle-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .bundle-grid{grid-template-columns:1fr;} }
.bundle-card{background:linear-gradient(135deg,#0B1B3B,#122B63); color:#fff; border-radius:var(--mkt-radius); padding:26px; position:relative; overflow:hidden; display:flex; flex-direction:column;}
.bundle-card::before{content:""; position:absolute; top:-50px; right:-50px; width:160px; height:160px; background:radial-gradient(circle,rgba(255,106,26,.35),transparent 70%);}
.bundle-card .tag{position:relative; z-index:1; display:inline-flex; align-self:flex-start; background:rgba(255,106,26,.18); color:#FFB37A; font-size:11px; font-weight:700; padding:4px 12px; border-radius:100px; margin-bottom:14px; letter-spacing:.4px;}
.bundle-card h3{position:relative; z-index:1; font-size:17px; color:#fff; margin-bottom:8px;}
.bundle-card p{position:relative; z-index:1; font-size:13px; color:#AEBBDD; line-height:1.6; margin-bottom:16px; flex:1;}
.bundle-card .price-row .now{color:#FFB37A;}
.bundle-card .price-row .old{color:#7C8AB5;}

/* ---------- Filter sidebar + sort bar (catalog page) ---------- */
.catalog-layout{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start;}
@media (max-width:900px){ .catalog-layout{grid-template-columns:1fr;} }
.filter-box{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); padding:20px; margin-bottom:18px;}
.filter-box h4{font-size:13.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--mkt-muted); margin-bottom:14px;}
.filter-check{display:flex; align-items:center; gap:9px; margin-bottom:11px; font-size:14px;}
.filter-check input{width:16px; height:16px; accent-color:var(--mkt-blue);}
.filter-price{display:flex; align-items:center; gap:8px;}
.filter-price input{width:100%; padding:9px 10px; border-radius:8px; border:1.5px solid var(--mkt-line); font-size:13.5px; font-family:inherit;}
.sort-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.sort-bar .count{font-size:14px; color:var(--mkt-muted);}
.sort-bar select{padding:10px 14px; border-radius:10px; border:1.5px solid var(--mkt-line); font-family:inherit; font-size:13.5px; background:#fff;}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:36px;}
.pagination a, .pagination span{display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:10px; border:1.5px solid var(--mkt-line); font-size:14px; font-weight:600; color:var(--mkt-ink);}
.pagination a:hover{border-color:var(--mkt-blue); color:var(--mkt-blue);}
.pagination .current{background:var(--mkt-blue); border-color:var(--mkt-blue); color:#fff;}

/* ---------- Detail pages (course / bundle) ---------- */
.detail-hero{background:#0E1B3D; color:#fff; padding:50px 0;}
.detail-hero .mkt-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start;}
@media (max-width:860px){ .detail-hero .mkt-wrap{grid-template-columns:1fr;} }
.detail-hero img{border-radius:var(--mkt-radius); width:100%; aspect-ratio:16/9; object-fit:cover;}
.detail-hero h1{color:#fff; font-size:clamp(24px,3vw,32px); margin:14px 0;}
.detail-hero p{color:#AEBBDD; font-size:15px; line-height:1.8;}
.buy-box-mkt{background:#fff; color:var(--mkt-ink); border-radius:var(--mkt-radius); padding:26px; box-shadow:var(--mkt-shadow-lg);}
.buy-box-mkt .price{font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--mkt-accent); margin-bottom:4px;}
.buy-box-mkt .price .old{font-size:16px; color:var(--mkt-muted-2); text-decoration:line-through; margin-right:8px; font-weight:500;}

.lesson-outline{list-style:none; margin:0; padding:0;}
.lesson-outline li{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--mkt-line);}
.lesson-outline li:last-child{border-bottom:none;}
.lesson-outline .li-icon{width:32px; height:32px; flex:none; border-radius:50%; background:var(--mkt-blue-light); display:flex; align-items:center; justify-content:center;}
.lesson-outline .li-icon svg{width:14px; height:14px; stroke:var(--mkt-blue);}
.lesson-outline .li-title{flex:1; font-size:14.5px;}
.lesson-outline .li-badge{font-size:11.5px; font-weight:600; color:var(--mkt-muted);}
.lesson-outline .li-badge.free{color:var(--mkt-accent);}
.module-heading{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--mkt-muted); margin:22px 0 4px;}

.included-course-row{display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--mkt-line); border-radius:12px; margin-bottom:10px; background:#fff;}
.included-course-row img{width:64px; height:44px; object-fit:cover; border-radius:8px; background:var(--mkt-paper);}
.included-course-row .name{font-size:14px; font-weight:600; flex:1;}
.included-course-row .price{font-size:13px; color:var(--mkt-muted);}

.reviews-list{margin-top:10px;}
.review-row{border-bottom:1px solid var(--mkt-line); padding:16px 0;}
.review-row:last-child{border-bottom:none;}
.review-row .stars{color:var(--mkt-accent); letter-spacing:2px; font-size:15px;}
.review-row .who{font-weight:600; font-size:14px; margin-top:4px;}
.review-row .cmt{font-size:13.5px; color:var(--mkt-muted); margin-top:4px; line-height:1.6;}

/* ---------- Course detail page (Learning-Bangladesh style: white layout,
   tabs, collapsible curriculum, rating breakdown, FAQ, sticky sidebar) ---------- */
.course-breadcrumb{padding:16px 0; font-size:13px; color:var(--mkt-muted);}
.course-breadcrumb a:hover{color:var(--mkt-blue);}
.course-breadcrumb span{color:var(--mkt-ink); font-weight:600;}

.course-detail-section{padding-bottom:60px;}
.course-detail-layout{display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start;}
@media (max-width:960px){ .course-detail-layout{grid-template-columns:1fr;} }

.course-title{font-size:clamp(22px,3vw,30px); margin:14px 0 8px;}
.course-tagline{color:var(--mkt-muted); font-size:15px; line-height:1.7; margin-bottom:10px;}
.course-meta-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--mkt-muted); margin-bottom:18px;}
.course-meta-row .stars{font-size:14px;}
.dot-sep{color:var(--mkt-muted-2);}

.course-tabs{display:flex; gap:4px; border-bottom:1.5px solid var(--mkt-line); margin-bottom:26px; overflow-x:auto;}
.course-tab{padding:12px 18px; font-size:14px; font-weight:600; color:var(--mkt-muted); border-bottom:2.5px solid transparent; white-space:nowrap;}
.course-tab:hover{color:var(--mkt-ink);}

.course-promo-banner{background:var(--mkt-accent-light); border:1px solid #FFD9BF; color:var(--mkt-accent-dark); font-size:14px; font-weight:600; padding:14px 18px; border-radius:12px; margin-bottom:26px;}

.course-section{margin-bottom:38px; scroll-margin-top:90px;}
.course-section h2{font-size:19px; margin-bottom:16px;}
.course-description{font-size:14.5px; color:var(--mkt-muted); line-height:1.85;}

.learn-points-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; list-style:none; margin:0; padding:0;}
@media (max-width:560px){ .learn-points-grid{grid-template-columns:1fr;} }
.learn-points-grid li{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.6; background:var(--mkt-blue-light); border-radius:10px; padding:11px 14px;}
.learn-points-grid li::before{content:"✓"; color:var(--mkt-blue); font-weight:700; flex:none;}

.curriculum-summary{font-size:13.5px; color:var(--mkt-muted); margin-bottom:14px;}
.curriculum-module{border:1px solid var(--mkt-line); border-radius:12px; margin-bottom:12px; overflow:hidden;}
.curriculum-module summary{list-style:none; display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; background:var(--mkt-paper); font-weight:600; font-size:14.5px;}
.curriculum-module summary::-webkit-details-marker{display:none;}
.curriculum-module .module-title{flex:1;}
.curriculum-module .module-count{font-size:12.5px; font-weight:600; color:var(--mkt-muted); white-space:nowrap;}
.module-chevron{width:26px; height:26px; border-radius:50%; background:#fff; border:1.5px solid var(--mkt-line); display:flex; align-items:center; justify-content:center; flex:none; transition:.2s;}
.module-chevron svg{width:13px; height:13px; color:var(--mkt-muted); transition:transform .2s;}
.curriculum-module:hover .module-chevron{border-color:var(--mkt-blue);}
.curriculum-module[open] .module-chevron{background:var(--mkt-blue); border-color:var(--mkt-blue);}
.curriculum-module[open] .module-chevron svg{color:#fff; transform:rotate(180deg);}
.curriculum-module .lesson-outline{padding:4px 18px 6px;}

.rating-summary{display:flex; gap:36px; align-items:center; flex-wrap:wrap; background:var(--mkt-paper); border-radius:14px; padding:22px 24px; margin-bottom:22px;}
.rating-summary-big{text-align:center; flex:none;}
.rating-big-num{font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:700; line-height:1;}
.rating-count-lbl{font-size:12.5px; color:var(--mkt-muted); margin-top:6px;}
.rating-bars{flex:1; min-width:220px; display:flex; flex-direction:column; gap:7px;}
.rating-bar-row{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--mkt-muted);}
.rating-bar-label{width:34px; flex:none;}
.rating-bar-track{flex:1; height:8px; background:var(--mkt-line); border-radius:100px; overflow:hidden;}
.rating-bar-fill{height:100%; background:var(--mkt-accent); border-radius:100px;}
.rating-bar-count{width:26px; flex:none; text-align:right;}

.faq-item{border-bottom:1px solid var(--mkt-line); padding:6px 0;}
.faq-item summary{list-style:none; cursor:pointer; padding:12px 0; font-weight:600; font-size:14.5px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--mkt-muted); flex:none;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{font-size:13.5px; color:var(--mkt-muted); line-height:1.75; padding-bottom:14px; margin:0;}

.course-sidebar{position:sticky; top:88px;}
.sidebar-card{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); overflow:hidden; box-shadow:var(--mkt-shadow-lg);}
.sidebar-thumb{position:relative; aspect-ratio:16/9;}
.sidebar-thumb img{width:100%; height:100%; object-fit:cover;}
.sidebar-video-preview{cursor:pointer;}
.play-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.play-overlay svg{width:56px; height:56px; color:#fff; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); transition:transform .15s;}
.sidebar-video-preview:hover .play-overlay svg{transform:scale(1.08);}
.play-overlay::before{content:""; position:absolute; inset:0; background:rgba(16,24,40,.2);}
.preview-badge{position:absolute; top:10px; left:10px; background:var(--mkt-accent); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; z-index:2;}

/* Custom-skinned YouTube preview player: the underlying iframe is set to
   pointer-events:none so nothing inside it (including YouTube's own
   clickable logo/watermark, which stays visible even with controls=0) can
   be clicked — all interaction goes through our own overlay buttons. */
.yt-custom-player{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;}
.yt-player-target{position:absolute; inset:0; pointer-events:none;}
.yt-player-target iframe{width:100%; height:100%; border:0; display:block;}
.yt-center-controls{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:26px; pointer-events:none;}
.yt-center-controls button{pointer-events:auto;}
.yt-skip{width:38px; height:38px; border-radius:50%; background:rgba(16,24,40,.55); border:none; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.yt-skip:hover{background:rgba(16,24,40,.75);}
.yt-skip svg{width:16px; height:16px;}
.yt-skip b{font-size:8.5px; font-weight:700; margin-top:-2px;}
.yt-play-toggle{width:54px; height:54px; border-radius:50%; background:var(--mkt-blue); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.yt-play-toggle:hover{background:var(--mkt-blue-dark);}
.yt-play-toggle svg{width:24px; height:24px;}
.yt-bottom-bar{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:8px; padding:20px 10px 8px; background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);}
.yt-mini-toggle, .yt-mute, .yt-fullscreen{background:none; border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:4px; flex:none; opacity:.9;}
.yt-mini-toggle:hover, .yt-mute:hover, .yt-fullscreen:hover{opacity:1;}
.yt-mini-toggle svg, .yt-mute svg, .yt-fullscreen svg{width:15px; height:15px;}
.yt-progress{flex:1; accent-color:#fff; height:3px; cursor:pointer; margin:0;}
.yt-time{font-size:10.5px; color:#fff; flex:none; min-width:42px;}
.yt-brand{font-size:10.5px; font-weight:700; color:#fff; opacity:.8; flex:none; letter-spacing:.3px; user-select:none;}
.sidebar-body{padding:22px;}
.sidebar-price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.sidebar-price-row .old{text-decoration:line-through; color:var(--mkt-muted-2); font-size:15px;}
.sidebar-price-row .now{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; color:var(--mkt-ink);}
.sidebar-price-row .discount-badge{background:var(--mkt-success-light); color:var(--mkt-success); font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px;}
.sidebar-social-proof{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mkt-muted); margin-bottom:16px;}
.sidebar-social-proof svg{width:15px; height:15px; stroke:var(--mkt-muted); flex:none;}
.sidebar-learn-mini{margin-top:20px; padding-top:18px; border-top:1px solid var(--mkt-line);}
.sidebar-learn-mini h4{font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--mkt-muted); margin-bottom:10px;}
.sidebar-learn-mini ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.sidebar-learn-mini li{display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5;}
.sidebar-learn-mini li::before{content:"✓"; color:var(--mkt-blue); font-weight:700; flex:none;}
.sidebar-info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px;}
.sidebar-info-box{background:var(--mkt-paper); border-radius:10px; padding:12px 14px;}
.sidebar-info-box .lbl{font-size:11.5px; color:var(--mkt-muted); text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px;}
.sidebar-info-box .val{font-size:13.5px; font-weight:700; color:var(--mkt-ink);}

/* ---------- Trust / why-online section ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .trust-grid{grid-template-columns:1fr;} }
.trust-card{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); padding:24px;}
.trust-card .ico{width:44px; height:44px; border-radius:12px; background:var(--mkt-blue-light); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.trust-card .ico svg{width:22px; height:22px; stroke:var(--mkt-blue);}
.trust-card h4{font-size:15px; margin-bottom:6px;}
.trust-card p{font-size:13px; color:var(--mkt-muted); line-height:1.6;}

/* ---------- Bridge CTA to offline training ---------- */
.bridge-cta{background:linear-gradient(120deg,var(--mkt-blue),#0E2559); border-radius:var(--mkt-radius-lg); padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff;}
.bridge-cta h3{color:#fff; font-size:22px; margin-bottom:8px;}
.bridge-cta p{color:#C7D3F0; font-size:14px; max-width:460px;}

/* ---------- Footer ---------- */
.mkt-footer{background:#0B1B3B; color:#B7C4E8; padding:56px 0 26px; margin-top:20px;}
.mkt-foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
@media (max-width:820px){ .mkt-foot-grid{grid-template-columns:1fr 1fr; gap:28px;} }
.mkt-foot-brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:#fff; margin-bottom:12px;}
.mkt-foot-brand img{height:28px;}
.mkt-footer p{font-size:13.5px; line-height:1.8; max-width:280px;}
.mkt-footer h4{color:#fff; font-size:14px; margin-bottom:14px;}
.mkt-footer .foot-col li{margin-bottom:9px; font-size:13.5px;}
.mkt-footer .foot-col a:hover{color:#fff;}
.mkt-footer .foot-social{display:flex; gap:10px; margin-top:16px;}
.mkt-footer .foot-social a{width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;}
.mkt-footer .foot-social a:hover{background:var(--mkt-accent); border-color:transparent;}
.mkt-footer .foot-social svg{width:16px; height:16px; stroke:#fff;}
.mkt-foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; font-size:12.5px;}

/* ==========================================================================
   Shared component vocabulary (same class names as admin.css/student.css) —
   used verbatim by the student-portal pages (dashboard/course/lesson/etc.)
   ========================================================================== */
.panel{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); padding:24px; margin-bottom:22px;}
.panel h2{font-size:17px; margin:0 0 18px;}
.panel .panel-desc{font-size:13.5px; color:var(--mkt-muted); margin:-12px 0 18px;}
.empty{color:var(--mkt-muted); font-size:14px; padding:30px 0; text-align:center;}

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr);} }
.stat{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); padding:20px;}
.stat .num{font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700;}
.stat .lbl{font-size:13px; color:var(--mkt-muted); margin-top:4px;}

table{width:100%; border-collapse:collapse; font-size:14px;}
th, td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--mkt-line); vertical-align:middle;}
th{font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--mkt-muted); font-weight:600;}
tr:last-child td{border-bottom:none;}
.row-actions{display:flex; gap:8px; flex-wrap:wrap;}
.badge{display:inline-block; padding:3px 10px; border-radius:100px; font-size:11.5px; font-weight:600;}
.badge.on{background:var(--mkt-success-light); color:var(--mkt-success);}
.badge.off{background:var(--mkt-danger-light); color:var(--mkt-danger);}
.badge.featured{background:var(--mkt-accent-light); color:var(--mkt-accent-dark);}

label{display:block; font-size:13.5px; font-weight:600; color:var(--mkt-muted); margin-bottom:6px;}
input[type=text], input[type=number], input[type=tel], input[type=email], input[type=password], input[type=url], input[type=date], textarea, select{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--mkt-line); font-family:inherit;
  font-size:14.5px; background:var(--mkt-paper); margin-bottom:16px; transition:.2s;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--mkt-blue); background:#fff;}
textarea{resize:vertical;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.checkline{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.checkline input{width:auto; margin:0;}
.checkline label{margin:0; font-weight:500; color:var(--mkt-ink);}
.help{font-size:12px; color:var(--mkt-muted-2); margin:-12px 0 16px;}

.alert{padding:14px 16px; border-radius:10px; font-size:14px; margin-bottom:20px;}
.alert.success{background:var(--mkt-success-light); border:1px solid #B3ECCF; color:#08774A;}
.alert.error{background:var(--mkt-danger-light); border:1px solid #FBC5C0; color:#B3261E;}

.img-preview{width:220px; max-width:100%; border-radius:10px; border:1px solid var(--mkt-line); margin-bottom:12px; display:block;}

/* Student progress + lessons + certificate (identical selectors to student.css) */
.progress-track{background:var(--mkt-paper); border:1px solid var(--mkt-line); border-radius:100px; height:10px; overflow:hidden;}
.progress-fill{background:linear-gradient(90deg,var(--mkt-blue),var(--mkt-accent)); height:100%; border-radius:100px;}
.progress-label{font-size:12.5px; color:var(--mkt-muted); margin-top:6px;}

.enroll-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
.enroll-card{background:#fff; border:1px solid var(--mkt-line); border-radius:var(--mkt-radius); overflow:hidden;}
.enroll-card img{width:100%; height:140px; object-fit:cover; display:block; background:var(--mkt-paper);}
.enroll-card .body{padding:16px;}
.enroll-card h3{font-size:15.5px; margin:0 0 10px;}

.lesson-list{list-style:none; margin:0; padding:0;}
.lesson-list li{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--mkt-line);}
.lesson-list li:last-child{border-bottom:none;}
.lesson-list .lesson-icon{width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mkt-paper);}
.lesson-list .lesson-icon svg{width:16px; height:16px;}
.lesson-list .lesson-icon.done{background:var(--mkt-success-light); color:var(--mkt-success);}
.lesson-list .lesson-icon.locked{color:var(--mkt-muted);}
.lesson-list .lesson-title{flex:1; font-size:14.5px;}
.lesson-list .lesson-title a{color:var(--mkt-ink);}
.lesson-list .lesson-title a:hover{color:var(--mkt-blue);}
.lesson-list .lesson-dur{font-size:12.5px; color:var(--mkt-muted);}

.video-embed{position:relative; padding-bottom:56.25%; height:0; border-radius:var(--mkt-radius); overflow:hidden; background:#000; margin-bottom:20px;}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.stars{color:var(--mkt-accent); letter-spacing:2px;}
.review-item{border-bottom:1px solid var(--mkt-line); padding:14px 0;}
.review-item:last-child{border-bottom:none;}
.review-item .who{font-weight:600; font-size:13.5px;}
.review-item .cmt{font-size:13.5px; color:var(--mkt-muted); margin-top:4px;}

.certificate{background:#fff; border:10px solid var(--mkt-blue); border-radius:20px; padding:60px 40px; text-align:center; max-width:820px; margin:0 auto;}
.certificate .flame-line{height:5px; background:linear-gradient(90deg,var(--mkt-blue),var(--mkt-accent)); width:120px; margin:0 auto 24px; border-radius:100px;}
.certificate h1{font-family:'Space Grotesk',sans-serif; font-size:30px; margin:0 0 8px;}
.certificate .name{font-family:'Space Grotesk',sans-serif; font-size:26px; margin:18px 0; color:var(--mkt-blue);}
.certificate .course{font-size:18px; font-weight:600; margin-bottom:18px;}
.certificate .meta{font-size:12.5px; color:var(--mkt-muted); margin-top:30px;}
@media print{
  body *{visibility:hidden;}
  .certificate, .certificate *{visibility:visible;}
  .certificate{position:absolute; left:0; top:0; border-width:6px;}
  .no-print{display:none !important;}
}

/* ---------- Student portal top bar (layout_start.php) ---------- */
.student-topbar{display:flex; align-items:center; gap:24px; background:#fff; border-bottom:1px solid var(--mkt-line); padding:16px 28px; position:sticky; top:0; z-index:20; flex-wrap:wrap;}
.student-topbar .brand-link img{height:26px;}
.student-nav{display:flex; align-items:center; gap:20px; margin-right:auto;}
.student-nav a{font-size:14px; font-weight:600; color:var(--mkt-muted); padding:6px 0; border-bottom:2px solid transparent;}
.student-nav a:hover{color:var(--mkt-ink);}
.student-nav a.active{color:var(--mkt-blue); border-bottom-color:var(--mkt-blue);}
.student-topbar .profile-widget{display:flex; align-items:center; gap:10px; background:var(--mkt-paper); border-radius:100px; padding:6px 8px 6px 6px; flex:none;}
.student-topbar .profile-identity{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; border-radius:100px; transition:.15s;}
.student-topbar .profile-identity:hover{opacity:.85;}
.student-topbar .who-avatar{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none;}
.student-topbar .who-avatar-fallback{display:flex; align-items:center; justify-content:center; background:var(--mkt-blue); color:#fff; font-weight:700; font-size:15px;}
.student-topbar .profile-text{display:flex; flex-direction:column; line-height:1.35; margin-right:4px;}
.student-topbar .profile-name{font-size:13.5px; font-weight:700; color:var(--mkt-ink);}
.student-topbar .profile-email{font-size:11.5px; color:var(--mkt-muted);}
.student-topbar .profile-actions{display:flex; align-items:center; gap:2px; padding-left:8px; border-left:1px solid var(--mkt-line);}
.student-topbar .icon-btn{position:relative; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--mkt-muted); transition:.15s;}
.student-topbar .icon-btn:hover{background:#fff; color:var(--mkt-blue); box-shadow:0 4px 10px -4px rgba(16,24,40,.25);}
.student-topbar .icon-btn svg{width:16px; height:16px; stroke:currentColor;}
.student-content{max-width:1000px; margin:0 auto; padding:28px 24px 60px;}
@media (max-width:720px){
  .student-topbar{flex-wrap:wrap; gap:12px;}
  .student-nav{order:3; width:100%; gap:16px; flex-wrap:wrap; margin-right:0;}
  .student-topbar .profile-text{display:none;}
}