/* ═══════════════════════════════════════════════════
   components.css — Page-specific component styles
═══════════════════════════════════════════════════ */

/* ── Course Hero (detail page) ── */
.course-hero         { background:var(--navy); padding:40px 0; }
.course-hero-content { max-width:720px; }
.course-hero h1      { color:#fff; font-size:1.75rem; font-weight:700; margin-bottom:16px; line-height:1.3; }
.course-hero p       { color:rgba(255,255,255,.8); font-size:1rem; margin-bottom:16px; line-height:1.7; }
.course-hero-meta    { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:12px; }
.course-hero-meta span { font-size:.875rem; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:6px; }
.breadcrumb          { display:flex; align-items:center; gap:8px; font-size:.875rem; color:rgba(255,255,255,.5); margin-bottom:16px; flex-wrap:wrap; }
.breadcrumb a        { color:rgba(255,255,255,.6); transition:color var(--t); }
.breadcrumb a:hover  { color:#fff; }
.breadcrumb-sep      { opacity:.4; }

/* Sticky purchase card */
.course-sticky-card      { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; }
.course-sticky-thumb     { aspect-ratio:16/9; background:var(--navy-soft); display:flex; align-items:center; justify-content:center; font-size:4rem; }
.course-sticky-body      { padding:20px; }
.course-price            { font-size:2rem; font-weight:800; }
.course-price-original   { text-decoration:line-through; color:var(--ink-soft); font-size:1rem; margin-left:8px; }
.course-includes         { font-size:.875rem; }
.course-includes-item    { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:var(--ink); }
.course-includes-item svg{ color:var(--ink-soft); flex-shrink:0; }

/* What you'll learn */
.what-learn-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.what-learn-item { display:flex; gap:10px; font-size:.9375rem; }
.check-icon      { flex-shrink:0; margin-top:3px; }

/* Package accordion */
.pkg-list        { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.pkg-header      { padding:16px 20px; background:var(--surface); display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; border-bottom:1px solid var(--border); transition:background var(--t); }
.pkg-header:hover { background:#eef0f2; }
.pkg-header.open  { background:var(--purple-bg); color:var(--purple); }
.pkg-header-left  { display:flex; align-items:center; gap:12px; }
.pkg-header-right { display:flex; align-items:center; gap:16px; }
.pkg-body        { padding:20px; border-bottom:1px solid var(--border); display:none; }
.pkg-body.open   { display:block; animation:fadeIn .15s ease; }
.pkg-meta        { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:16px; font-size:.875rem; color:var(--ink-soft); }
.pkg-meta span   { display:flex; align-items:center; gap:6px; }

/* Review section */
.review-item      { padding:24px 0; border-bottom:1px solid var(--border-soft); }
.review-author    { display:flex; gap:14px; margin-bottom:12px; }
.review-avatar    { width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.review-name      { font-weight:600; }
.review-meta      { display:flex; align-items:center; gap:10px; margin-top:4px; }

/* ── Quiz Page ── */
.exam-layout       { display:grid; grid-template-columns:1fr 300px; min-height:calc(100vh - var(--nav-h)); }
.exam-main         { padding:32px; max-width:760px; }
.exam-sidebar      { background:var(--surface); border-left:1px solid var(--border); padding:24px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.exam-quiz-header  { background:var(--navy); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; }
.exam-timer        { font-family:var(--font-mono); font-size:1.25rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
.exam-timer.warning { color:var(--red); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.question-num      { font-size:.8125rem; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.question-text     { font-size:1.125rem; font-weight:600; line-height:1.6; margin-bottom:24px; }
.question-badges   { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.option            { padding:14px 18px; border:2px solid var(--border); border-radius:var(--r-md); cursor:pointer; margin-bottom:10px; font-size:.9375rem; line-height:1.5; transition:all var(--t); display:flex; align-items:flex-start; gap:12px; }
.option:hover      { border-color:var(--navy); background:var(--surface); }
.option.selected   { border-color:var(--purple); background:var(--purple-bg); }
.option.correct    { border-color:var(--green); background:var(--green-bg); }
.option.wrong      { border-color:var(--red); background:var(--red-bg); }
.option.revealed   { cursor:default; }
.option-key        { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:.8125rem; font-weight:700; margin-top:-1px; transition:all var(--t); }
.option.selected .option-key { background:var(--purple); color:#fff; }
.option.correct  .option-key { background:var(--green); color:#fff; }
.option.wrong    .option-key { background:var(--red); color:#fff; }
.explanation-box   { margin-top:16px; padding:16px; background:var(--surface); border-radius:var(--r-md); border-left:4px solid var(--purple); animation:fadeIn .2s ease; }
.explanation-title { font-weight:700; color:var(--purple); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.hint-box          { margin-top:12px; padding:14px; background:var(--purple-bg); border-radius:var(--r-md); border-left:3px solid var(--purple); font-size:.9375rem; animation:fadeIn .2s ease; }
.hint-title        { font-weight:600; color:var(--purple); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.quiz-actions      { display:flex; align-items:center; justify-content:space-between; margin-top:28px; flex-wrap:wrap; gap:12px; }

/* Q navigator */
.q-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:12px; }
.q-dot  { aspect-ratio:1; border-radius:var(--r); border:1.5px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:600; cursor:pointer; transition:all var(--t); }
.q-dot.answered { background:var(--purple); color:#fff; border-color:var(--purple); }
.q-dot.current  { outline:2px solid var(--navy); outline-offset:1px; }
.q-dot.correct  { background:var(--green); color:#fff; border-color:var(--green); }
.q-dot.wrong    { background:var(--red); color:#fff; border-color:var(--red); }
.q-dot.locked   { background:var(--surface); color:var(--text-muted); border-color:var(--border); cursor:not-allowed; opacity:.6; font-size:.6rem; }

/* Result */
.result-card      { text-align:center; padding:48px 32px; background:var(--white); border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow); }
.result-score     { width:140px; height:140px; border-radius:50%; margin:0 auto 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:8px solid var(--border); }
.result-score.pass { border-color:var(--green); }
.result-score.fail { border-color:var(--red); }
.result-pct       { font-size:2.5rem; font-weight:800; line-height:1; }
.result-pct.pass  { color:var(--green); }
.result-pct.fail  { color:var(--red); }
.result-label     { font-size:.875rem; font-weight:700; margin-top:4px; }
.result-label.pass { color:var(--green); }
.result-label.fail { color:var(--red); }

/* ── Profile Page ── */
.profile-header      { background:var(--navy); padding:48px 0; }
.profile-avatar-lg   { width:80px; height:80px; border-radius:50%; background:var(--purple); color:#fff; font-size:2rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:4px solid rgba(255,255,255,.2); flex-shrink:0; }
.stat-card           { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; text-align:center; }
.stat-card-num       { font-size:2rem; font-weight:800; color:var(--purple); }
.stat-card-lbl       { font-size:.8125rem; color:var(--ink-soft); margin-top:4px; }

/* ── Admin Layout ── */
.admin-layout        { display:flex; min-height:calc(100vh - var(--nav-h)); }
.admin-sidebar       { width:var(--sidebar-w); background:var(--navy); flex-shrink:0; position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); overflow-y:auto; padding:24px 0; }
.admin-sidebar-title { padding:0 20px 16px; font-size:.75rem; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; }
.admin-nav-item      { padding:10px 20px; font-size:.9375rem; color:rgba(255,255,255,.7); cursor:pointer; display:flex; align-items:center; gap:10px; transition:all var(--t); border-left:3px solid transparent; }
.admin-nav-item:hover { color:#fff; background:rgba(255,255,255,.06); }
.admin-nav-item.active { color:#fff; background:rgba(86,36,208,.3); border-color:var(--purple); }
.admin-content       { flex:1; padding:32px; background:var(--surface); min-width:0; }
.admin-stat-grid     { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:32px; }
.admin-stat-card     { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; }
.admin-stat-card h3  { font-size:.8125rem; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.admin-stat-card .num { font-size:2rem; font-weight:800; }
.admin-stat-card .trend { font-size:.8125rem; color:var(--green); margin-top:4px; font-weight:500; }
.admin-card          { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:24px; }
.admin-page-header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }

/* ── Auth Pages ── */
.auth-page           { min-height:calc(100vh - var(--nav-h)); display:flex; align-items:center; justify-content:center; background:var(--surface); padding:40px 24px; }
.auth-box            { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:40px; width:100%; max-width:440px; box-shadow:var(--shadow); }
.auth-logo           { text-align:center; margin-bottom:28px; }
.auth-logo-text      { font-family:var(--font-serif); font-size:2rem; color:var(--purple); }
.auth-divider        { display:flex; align-items:center; gap:16px; margin:20px 0; color:var(--ink-soft); font-size:.8125rem; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-social-btn     { flex:1; }

/* ── My Learning ── */
.learning-card         { cursor:pointer; }
.learning-card-thumb   { aspect-ratio:16/9; background:var(--navy-soft); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.learning-card-body    { padding:16px; }
.learning-card-title   { font-size:.9375rem; font-weight:700; margin-bottom:4px; line-height:1.35; }
.learning-card-sub     { font-size:.8125rem; color:var(--ink-soft); margin-bottom:12px; }

/* ── Chips ── */
.chip { display:inline-flex; align-items:center; padding:4px 12px; border:1px solid var(--border); border-radius:100px; font-size:.8125rem; color:var(--ink); cursor:pointer; transition:all var(--t); }
.chip:hover,.chip.active { background:var(--purple); color:#fff; border-color:var(--purple); }

/* ── Bar chart (admin) ── */
.bar-row          { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.bar-label        { width:140px; font-size:.875rem; font-weight:500; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track        { flex:1; height:10px; background:var(--border); border-radius:5px; overflow:hidden; }
.bar-fill         { height:100%; background:var(--purple); border-radius:5px; transition:width .4s ease; }
.bar-value        { width:48px; font-size:.8125rem; color:var(--ink-soft); text-align:right; flex-shrink:0; }

/* ── Certificate card ── */
.cert-card        { background:linear-gradient(135deg,var(--navy) 0%,#2a1060 100%); border-radius:var(--r-lg); padding:32px; color:#fff; position:relative; overflow:hidden; }
.cert-card::before { content:''; position:absolute; top:0; right:0; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.03); transform:translate(50px,-50px); }
.cert-sub         { font-size:.8125rem; color:rgba(255,255,255,.6); margin-bottom:8px; }
.cert-title       { font-family:var(--font-serif); font-size:1.25rem; margin-bottom:4px; }
.cert-score       { color:rgba(255,255,255,.7); font-size:.875rem; }

/* ── Responsive page-specifics ── */
@media(max-width:1024px) {
  .admin-stat-grid { grid-template-columns:repeat(2,1fr); }
  .what-learn-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .exam-layout { grid-template-columns:1fr; }
  .exam-sidebar { display:none; }
  .admin-layout { flex-direction:column; }
  .admin-sidebar { width:100%; height:auto; position:static; }
  .auth-box { padding:24px; }
  .result-card { padding:32px 20px; }
}
@media(max-width:480px) {
  .course-sticky-card { margin-top:24px; }
}