/* ============================================================
   KCC Video Lectures — Frontend Styles
   ============================================================ */

:root {
  --kcc-blue:   #1a237e;
  --kcc-blue2:  #3949ab;
  --kcc-orange: #e8850a;
  --kcc-light:  #f5f7ff;
  --kcc-border: #e0e4f0;
  --kcc-radius: 12px;
}

/* ── Dashboard ───────────────────────────────────────────── */
.kcc-vl-dashboard { max-width:1100px; margin:0 auto; padding:24px 16px; }
.kcc-vl-dashboard h2 { color:var(--kcc-blue); font-size:1.6rem; margin-bottom:24px; }

.kcc-courses-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
}

.kcc-course-card {
  background:#fff;
  border-radius:var(--kcc-radius);
  border:1.5px solid var(--kcc-border);
  overflow:hidden;
  box-shadow:0 4px 16px rgba(26,35,126,.07);
  transition:transform .2s, box-shadow .2s;
}
.kcc-course-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(26,35,126,.13); }

.kcc-course-thumb {
  height:160px;
  background-size:cover;
  background-position:center;
}
.kcc-course-thumb-default {
  background:linear-gradient(135deg,var(--kcc-blue),var(--kcc-blue2));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
}

.kcc-course-info { padding:16px; }
.kcc-course-info h3 { margin:0 0 6px; color:var(--kcc-blue); font-size:1rem; }
.kcc-course-meta { color:#666; font-size:0.82rem; margin:0 0 10px; }

.kcc-progress-bar-wrap { background:#e8eaf6; border-radius:6px; height:7px; overflow:hidden; margin-bottom:4px; }
.kcc-progress-bar { height:100%; background:linear-gradient(90deg,var(--kcc-blue2),var(--kcc-orange)); border-radius:6px; transition:width .5s; }
.kcc-progress-text { font-size:0.78rem; color:#888; margin:0 0 12px; }

.kcc-btn-watch {
  display:block;
  background:linear-gradient(135deg,var(--kcc-blue),var(--kcc-blue2));
  color:#fff; text-align:center; padding:10px;
  border-radius:8px; text-decoration:none; font-weight:700; font-size:0.9rem;
  transition:opacity .2s;
}
.kcc-btn-watch:hover { opacity:.88; color:#fff; }

.kcc-no-courses { text-align:center; padding:48px; }
.kcc-btn-primary {
  background:var(--kcc-blue); color:#fff; padding:12px 28px;
  border-radius:8px; text-decoration:none; font-weight:700;
}

/* ── Video Player Page ───────────────────────────────────── */
.kcc-vl-player-page {
  display:flex;
  gap:0;
  min-height:80vh;
  max-width:1300px;
  margin:0 auto;
  background:#0d0f1a;
  border-radius:var(--kcc-radius);
  overflow:hidden;
}

/* Sidebar */
.kcc-vl-sidebar {
  width:320px;
  min-width:280px;
  background:#141625;
  border-right:1px solid #2a2d4a;
  overflow-y:auto;
  max-height:90vh;
  position:sticky;
  top:0;
}
.kcc-sidebar-header {
  background:var(--kcc-blue);
  padding:16px;
  position:sticky;
  top:0;
  z-index:10;
}
.kcc-sidebar-header h3 { color:#fff; margin:0 0 4px; font-size:0.9rem; }
.kcc-back-link { color:#90caf9; font-size:0.8rem; text-decoration:none; }
.kcc-back-link:hover { color:#fff; }

.kcc-chapter { border-bottom:1px solid #2a2d4a; }
.kcc-chapter-title {
  padding:12px 16px;
  color:#c5cae9;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
  font-weight:600;
  user-select:none;
}
.kcc-chapter-title:hover { background:#1e2138; }
.kcc-chevron { font-size:0.7rem; transition:transform .2s; }
.kcc-chapter-title.collapsed .kcc-chevron { transform:rotate(-90deg); }

.kcc-lesson-item {
  padding:10px 16px 10px 28px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:0.82rem;
  color:#9fa8da;
  transition:background .15s;
}
.kcc-lesson-item:hover { background:#1e2138; }
.kcc-lesson-item.active { background:#1a237e; color:#fff; }
.kcc-lesson-item.locked { opacity:.55; cursor:default; }
.lesson-icon { flex-shrink:0; font-size:0.75rem; }
.lesson-title { flex:1; line-height:1.3; }
.lesson-meta { color:#5c6bc0; font-size:0.72rem; white-space:nowrap; }
.lesson-check { color:#4caf50; font-size:0.75rem; }

/* Main area */
.kcc-vl-main { flex:1; display:flex; flex-direction:column; }

.kcc-player-container { position:relative; width:100%; background:#000; aspect-ratio:16/9; }

.kcc-player-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0d0f1a,#141625);
}
.kcc-placeholder-inner { text-align:center; color:#5c6bc0; }
.kcc-placeholder-inner h3 { color:#c5cae9; margin:12px 0 4px; }
.kcc-placeholder-inner p { color:#5c6bc0; font-size:0.85rem; }

.kcc-video-wrapper { position:relative; width:100%; height:100%; }

#kcc-video-el {
  width:100%; height:100%;
  display:block;
  background:#000;
  outline:none;
}

/* Watermark */
.kcc-watermark {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.15);
  font-size:clamp(0.6rem, 1.5vw, 0.9rem);
  font-family:monospace;
  pointer-events:none;
  z-index:10;
  user-select:none;
  text-align:center;
  padding:20px;
  letter-spacing:1px;
  word-break:break-all;
  /* Diagonal watermark */
  transform:rotate(-20deg);
  white-space:nowrap;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

/* DevTools blocker */
.kcc-devtools-block {
  position:absolute;
  inset:0;
  background:#000;
  z-index:100;
  display:flex; align-items:center; justify-content:center;
  color:#ff5252;
  font-size:1.1rem;
  text-align:center;
}

/* Lesson info bar */
.kcc-lesson-info {
  background:#141625;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #2a2d4a;
}
.kcc-lesson-info h3 { color:#c5cae9; margin:0; font-size:1rem; }
.kcc-lesson-actions { display:flex; gap:8px; }
.kcc-btn-nav {
  background:#1e2138; color:#9fa8da; border:1px solid #2a2d4a;
  padding:6px 14px; border-radius:6px; cursor:pointer; font-size:0.82rem;
  transition:background .15s;
}
.kcc-btn-nav:hover { background:#2a2d4a; color:#fff; }

/* Paywall section */
.kcc-vl-paywall {
  background:linear-gradient(135deg,#0d0f1a,#141625);
  padding:32px 24px;
  text-align:center;
  border-top:2px solid var(--kcc-blue);
}
.kcc-paywall-inner { max-width:420px; margin:0 auto; }
.kcc-paywall-inner h2 { color:#fff; margin:12px 0 8px; }
.kcc-paywall-inner p { color:#9fa8da; margin-bottom:16px; }
.kcc-price-tag {
  background:#1e2138; border:2px solid var(--kcc-blue2);
  border-radius:12px; padding:14px 24px;
  font-size:2rem; font-weight:900; color:var(--kcc-orange);
  display:inline-block; margin-bottom:20px;
}
.kcc-price-tag span { font-size:0.8rem; color:#9fa8da; display:block; font-weight:400; }

.kcc-buy-btn {
  background:linear-gradient(135deg,var(--kcc-orange),#f5a623);
  color:#fff; border:none; border-radius:10px;
  padding:14px 32px; font-size:1rem; font-weight:900;
  cursor:pointer; width:100%; box-shadow:0 6px 20px rgba(232,133,10,.4);
  transition:transform .15s, box-shadow .15s;
}
.kcc-buy-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(232,133,10,.5); }
.kcc-already-purchased { color:#5c6bc0; font-size:0.82rem; margin-top:12px; }
.kcc-already-purchased a { color:#90caf9; }

/* Payment Modal */
.kcc-payment-modal {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
.kcc-payment-inner {
  background:#fff; border-radius:16px;
  padding:28px; width:94%; max-width:420px;
  position:relative;
  max-height:90vh; overflow-y:auto;
}
.kcc-payment-inner h3 { color:var(--kcc-blue); margin:0 0 4px; }
.kcc-payment-inner p { color:#666; margin-bottom:16px; font-size:0.9rem; }
.kcc-payment-inner label {
  display:block; font-size:0.85rem; font-weight:600;
  color:#333; margin-bottom:12px;
}
.kcc-payment-inner input {
  width:100%; padding:10px 12px; border:1.5px solid #ddd;
  border-radius:8px; margin-top:4px; font-size:0.9rem;
  box-sizing:border-box;
}
.kcc-modal-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none; font-size:1.2rem;
  cursor:pointer; color:#999;
}
.kcc-secure-note { text-align:center; color:#888; font-size:0.78rem; margin-top:12px; }

/* Responsive */
@media (max-width:768px) {
  .kcc-vl-player-page { flex-direction:column; }
  .kcc-vl-sidebar { width:100%; min-width:unset; max-height:40vh; }
  .kcc-player-container { aspect-ratio:16/9; }
}