/* Bookton Online Courses - student-facing player + catalogue.
   Scoped under .boc-wrap so it never leaks into the host theme. */

.boc-wrap{--boc-accent:#14B8A6;--boc-accent-d:#0d9488;--boc-bg:#ffffff;--boc-fg:#111827;--boc-muted:#6b7280;--boc-border:#e5e7eb;--boc-soft:#f9fafb;--boc-radius:14px;
  color:var(--boc-fg);max-width:1180px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;box-sizing:border-box}
.boc-wrap *,.boc-wrap *::before,.boc-wrap *::after{box-sizing:inherit}
.boc-muted{color:var(--boc-muted)}
.boc-loading{padding:60px 0;text-align:center;color:var(--boc-muted)}

/* Buttons */
.boc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;border:1px solid transparent;
  font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s ease;line-height:1}
.boc-btn--primary{background:var(--boc-accent);color:#fff}
.boc-btn--primary:hover{background:var(--boc-accent-d)}
.boc-btn--ghost{background:transparent;color:var(--boc-fg);border-color:var(--boc-border)}
.boc-btn--ghost:hover{background:var(--boc-soft)}
.boc-btn--block{width:100%}
.boc-btn[disabled]{opacity:.6;cursor:default}

/* Catalogue */
.boc-cat-title{font-size:26px;font-weight:800;margin:0 0 20px}
.boc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.boc-card{display:flex;flex-direction:column;border:1px solid var(--boc-border);border-radius:var(--boc-radius);overflow:hidden;
  text-decoration:none;color:inherit;background:var(--boc-bg);transition:.15s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.boc-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.10)}
.boc-card-cover{height:150px;background-size:cover;background-position:center;background-color:#e5e7eb}
.boc-card-cover--empty{background:linear-gradient(135deg,#a7f3d0,#5eead4)}
.boc-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.boc-card-title{font-size:17px;font-weight:700;margin:0}
.boc-card-sum{font-size:13.5px;color:var(--boc-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.boc-card-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--boc-muted);padding-top:8px}
.boc-price{font-weight:700;color:var(--boc-fg)}
.boc-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
.boc-pill--ok{background:#d1fae5;color:#065f46}
.boc-progressbar{height:6px;border-radius:999px;background:var(--boc-border);overflow:hidden}
.boc-progressbar>span{display:block;height:100%;background:var(--boc-accent);border-radius:999px}
.boc-continue{font-size:13px;font-weight:700;color:var(--boc-accent-d)}

/* Landing (single course, not enrolled) */
.boc-landing{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.boc-landing-cover{width:100%;aspect-ratio:16/9;border-radius:var(--boc-radius);background-size:cover;background-position:center;background-color:#e5e7eb;margin-bottom:18px}
.boc-landing h1{font-size:30px;font-weight:800;margin:0 0 10px}
.boc-landing-sum{font-size:17px;color:var(--boc-muted);margin:0 0 18px}
.boc-desc{font-size:15.5px}
.boc-desc img{max-width:100%;height:auto;border-radius:8px}
.boc-desc iframe{max-width:100%}
.boc-buybox{border:1px solid var(--boc-border);border-radius:var(--boc-radius);padding:20px;position:sticky;top:20px;box-shadow:0 4px 16px rgba(0,0,0,.05)}
.boc-buybox-price{font-size:30px;font-weight:800;margin:0 0 4px}
.boc-price-sale{color:var(--boc-accent-d)}
.boc-price-old{font-size:18px;font-weight:600;color:var(--boc-muted);text-decoration:line-through;margin-left:6px}
.boc-card-price-old{font-size:13px;color:var(--boc-muted);text-decoration:line-through;margin-right:6px}
.boc-pill--sale{background:#fee2e2;color:#991b1b}
.boc-buybox-note{font-size:13px;color:var(--boc-muted);margin:0 0 16px}

/* Curriculum outline */
.boc-outline{margin-top:14px}
.boc-chapter{margin-bottom:14px}
.boc-chapter-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--boc-muted);margin:0 0 6px}
.boc-lessonrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--boc-border);border-radius:10px;margin-bottom:6px;background:var(--boc-bg);width:100%;text-align:left;font:inherit;cursor:default}
.boc-lessonrow--click{cursor:pointer}
.boc-lessonrow--click:hover{background:var(--boc-soft)}
.boc-lessonrow--active{border-color:var(--boc-accent);background:#f0fdfa}
.boc-lessonrow .ic{width:18px;height:18px;flex:none;color:var(--boc-muted)}
.boc-lessonrow .ic--done{color:var(--boc-accent)}
.boc-lessonrow .t{flex:1;font-size:14.5px}
.boc-tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:#dbeafe;color:#1e40af;text-transform:uppercase}

/* Auth panel */
.boc-auth{max-width:420px;margin:0 auto;border:1px solid var(--boc-border);border-radius:var(--boc-radius);padding:26px;box-shadow:0 8px 30px rgba(0,0,0,.07)}
.boc-auth h2{font-size:21px;font-weight:800;margin:0 0 4px}
.boc-auth p.sub{color:var(--boc-muted);font-size:14px;margin:0 0 18px}
.boc-field{margin-bottom:12px}
.boc-field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.boc-input{width:100%;padding:11px 12px;border:1px solid var(--boc-border);border-radius:9px;font-size:15px;background:#fff;color:var(--boc-fg)}
.boc-input:focus{outline:none;border-color:var(--boc-accent);box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.boc-auth-toggle{display:block;width:100%;text-align:center;margin-top:14px;background:none;border:none;color:var(--boc-accent-d);font-size:14px;font-weight:600;cursor:pointer}
.boc-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px 12px;border-radius:9px;font-size:13.5px;margin-bottom:14px}
.boc-notice{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px 12px;border-radius:9px;font-size:13.5px;margin-bottom:14px}

/* Player (enrolled) */
.boc-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.boc-topbar h1{font-size:22px;font-weight:800;margin:0}
.boc-back{font-size:13.5px;color:var(--boc-muted);text-decoration:none}
.boc-back:hover{color:var(--boc-fg)}
.boc-playgrid{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.boc-sidebar{border:1px solid var(--boc-border);border-radius:var(--boc-radius);padding:16px;max-height:80vh;overflow:auto;position:sticky;top:16px}
.boc-sidebar-prog{font-size:12.5px;color:var(--boc-muted);margin:0 0 10px}
.boc-content{min-width:0}
.boc-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--boc-radius);overflow:hidden;margin-bottom:18px}
.boc-video iframe,.boc-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.boc-lesson-title{font-size:24px;font-weight:800;margin:0 0 14px}
.boc-body{font-size:16px}
.boc-body img{max-width:100%;height:auto;border-radius:8px}
.boc-body iframe{max-width:100%}
.boc-body h2{font-size:20px;margin:1.4em 0 .5em}
.boc-body h3{font-size:17px;margin:1.2em 0 .5em}
.boc-lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--boc-border);flex-wrap:wrap}
.boc-done-flag{display:inline-flex;align-items:center;gap:7px;color:var(--boc-accent-d);font-weight:700;font-size:14px}

/* Empty state */
.boc-empty{text-align:center;padding:48px 24px;border:1px dashed var(--boc-border);border-radius:var(--boc-radius);max-width:480px;margin:24px auto}
.boc-empty-icon{width:48px;height:48px;margin:0 auto 14px;color:var(--boc-accent)}
.boc-empty-icon svg{width:100%;height:100%}
.boc-empty h3{font-size:18px;font-weight:700;margin:0 0 6px}
.boc-empty p{margin:0 0 18px}

/* Lesson preview modal (full-screen backdrop) */
.boc-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;animation:boc-fade .15s ease}
@keyframes boc-fade{from{opacity:0}to{opacity:1}}
.boc-modal-box{background:#fff;border-radius:16px;max-width:860px;width:100%;max-height:90vh;overflow:auto;padding:24px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.boc-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--boc-border);background:#fff;cursor:pointer;font-size:16px;line-height:1;color:var(--boc-muted)}
.boc-modal-close:hover{background:var(--boc-soft);color:var(--boc-fg)}
.boc-spin{width:34px;height:34px;border:3px solid var(--boc-border);border-top-color:var(--boc-accent);border-radius:50%;margin:50px auto;animation:boc-rot .7s linear infinite}
@keyframes boc-rot{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------------------
   Theme-defense: the player renders on the front-end, where the host theme may
   style <button>/<a> (e.g. white text on hover). These rules pin our own
   colours with enough specificity (.boc-wrap prefix) to win, incl. hover/focus,
   so text never goes white-on-white regardless of theme.
--------------------------------------------------------------------------- */
.boc-wrap .boc-btn--primary,
.boc-wrap .boc-btn--primary:hover,
.boc-wrap .boc-btn--primary:focus,
.boc-wrap .boc-btn--primary:active{color:#fff}
.boc-wrap .boc-btn--ghost,
.boc-wrap .boc-btn--ghost:hover,
.boc-wrap .boc-btn--ghost:focus,
.boc-wrap .boc-btn--ghost:active{color:var(--boc-fg);background:transparent}
.boc-wrap .boc-btn--ghost:hover{background:var(--boc-soft)}

.boc-wrap .boc-sidebar,
.boc-wrap .boc-content,
.boc-wrap .boc-lesson-title,
.boc-wrap .boc-body,
.boc-wrap .boc-topbar h1,
.boc-wrap .boc-landing h1,
.boc-wrap .boc-lessonrow,
.boc-wrap .boc-lessonrow:hover,
.boc-wrap .boc-lessonrow:focus,
.boc-wrap .boc-lessonrow--active,
.boc-wrap .boc-lessonrow .t,
.boc-wrap .boc-card-title,
.boc-wrap .boc-cat-title{color:var(--boc-fg)}

.boc-wrap .boc-back,
.boc-wrap .boc-back:hover,
.boc-wrap .boc-chapter-title,
.boc-wrap .boc-sidebar-prog,
.boc-wrap .boc-card-sum{color:var(--boc-muted)}

/* Links inside lesson/landing body stay visible + accented. */
.boc-wrap .boc-body a,
.boc-wrap .boc-desc a{color:var(--boc-accent-d);text-decoration:underline}

/* Lesson rows are <button>s - keep their surface readable on any theme. */
.boc-wrap .boc-lessonrow{background:var(--boc-bg)}
.boc-wrap .boc-lessonrow--active{background:#f0fdfa}

/* Responsive */
@media (max-width:900px){
  .boc-landing{grid-template-columns:1fr}
  .boc-buybox{position:static}
  .boc-playgrid{grid-template-columns:1fr}
  .boc-sidebar{position:static;max-height:none;order:2}
  .boc-content{order:1}
}