/* ============================================================================
   jpic-course.css — SHARED "course player" shell for JPC INTERNATIONAL
   static LearnDash-replacement courses (agent-training, overseas-student-
   handbook, homestay-training, and future courses).

   Load AFTER css/jpic-shared.css (uses its --jpic-* / --km-* / --grey-* tokens).
   All rules are prefixed .crs-* so they never collide with a page's own
   content components (.atr-*, .hst-*, .osh-*, etc.), which stay inline on
   each page. Pair with js/jpic-course.js.

   Markup contract (per page):
     <div class="… crs-page"> … </div>
     #crsSteps           wrapper holding the .crs-step articles
                         (set data-store-key="jpicYourCourse:v1" on it)
     .crs-step           one topic; data-lesson / data-lesson-title / data-title
                         (add data-final on the sign-off / certificate step)
   ========================================================================== */

.crs-page{background:#eef2f7;}

/* ---------- COURSE TOP BAR ---------- */
.crs-topbar{position:sticky;top:0;z-index:42;background:linear-gradient(135deg,var(--jpic-blue-dark),var(--jpic-blue));box-shadow:0 4px 18px rgba(0,26,51,.14);}
.crs-topbar-inner{max-width:1320px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px;}
.crs-topbar-brand{display:flex;flex-direction:column;gap:2px;min-width:0;}
.crs-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--km-display);font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--jpic-gold);}
.crs-topbar-title{font-family:var(--km-display);font-weight:700;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crs-progress{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:200px;}
.crs-progress-track{position:relative;flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;min-width:120px;}
.crs-progress-fill{position:absolute;inset:0 auto 0 0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--jpic-gold),var(--jpic-gold-dark));transition:width .4s ease;}
.crs-progress-label{font-size:12.5px;color:rgba(255,255,255,.9);white-space:nowrap;}
.crs-progress-label strong{color:var(--jpic-gold);font-family:var(--km-display);font-size:14px;}
.crs-outline-toggle{display:none;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--km-display);font-weight:700;font-size:13px;padding:9px 14px;border-radius:8px;cursor:pointer;}
.crs-outline-toggle i{color:var(--jpic-gold);}

/* ---------- LAYOUT ---------- */
.crs-layout{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:330px 1fr;gap:26px;padding:26px 22px 60px;align-items:start;}

/* ---------- SIDEBAR ---------- */
.crs-sidebar{position:sticky;top:84px;background:#fff;border:1px solid var(--grey-200);border-radius:16px;box-shadow:0 10px 30px rgba(0,26,51,.06);overflow:hidden;max-height:calc(100vh - 104px);display:flex;flex-direction:column;}
.crs-sidebar-head{position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,#f7fafd,#eef4fb);border-bottom:1px solid var(--grey-200);}
.crs-sidebar-head h2{font-family:var(--km-display);font-weight:800;font-size:17px;color:var(--jpic-blue);margin:0 0 4px;}
.crs-sidebar-head p{font-size:12.5px;color:var(--grey-500);margin:0;}
.crs-sidebar-close{display:none;position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:8px;border:1px solid var(--grey-200);background:#fff;color:var(--jpic-blue);font-size:16px;cursor:pointer;align-items:center;justify-content:center;}
.crs-outline{overflow-y:auto;padding:10px 10px 6px;flex:1;}
.crs-les{margin-bottom:4px;}
.crs-les-head{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;cursor:pointer;text-align:left;padding:11px 12px;border-radius:9px;font-family:var(--km-display);font-weight:700;font-size:13.5px;color:var(--jpic-blue);transition:background .15s;}
.crs-les-head:hover{background:var(--grey-100);}
.crs-les-num{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--jpic-blue),var(--jpic-blue-dark));color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.crs-les.is-done .crs-les-num{background:linear-gradient(135deg,#1a9d4c,#127a39);}
.crs-les-txt{flex:1;line-height:1.25;}
.crs-les-caret{flex:0 0 auto;color:var(--grey-500);font-size:12px;transition:transform .2s;}
.crs-les.is-open .crs-les-caret{transform:rotate(180deg);}
.crs-topics{list-style:none;margin:2px 0 6px;padding:0 0 0 8px;display:none;}
.crs-les.is-open .crs-topics{display:block;}
.crs-topic{display:flex;align-items:flex-start;gap:10px;width:100%;background:transparent;border:none;text-align:left;cursor:pointer;padding:9px 12px 9px 10px;border-radius:8px;font-family:var(--km-body);font-size:13px;color:var(--grey-500);line-height:1.35;transition:background .15s,color .15s;border-left:2px solid var(--grey-200);margin-left:16px;}
.crs-topic:hover{background:var(--grey-100);color:var(--jpic-blue);}
.crs-topic-tick{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--grey-300,#c4ccd8);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;margin-top:1px;transition:all .15s;}
.crs-topic.is-done .crs-topic-tick{background:#1a9d4c;border-color:#1a9d4c;color:#fff;}
.crs-topic.is-active{background:rgba(0,73,144,.08);color:var(--jpic-blue);font-weight:700;border-left-color:var(--jpic-gold);}
.crs-topic.is-active .crs-topic-tick{border-color:var(--jpic-blue);}
.crs-reset{margin:6px 12px 14px;background:none;border:none;color:var(--grey-500);font-size:12px;text-decoration:underline;cursor:pointer;align-self:flex-start;padding:4px;}
.crs-reset:hover{color:var(--jpic-red);}
.crs-scrim{display:none;}

/* ---------- CONTENT PANE ---------- */
.crs-content{background:#fff;border:1px solid var(--grey-200);border-radius:16px;box-shadow:0 10px 34px rgba(0,26,51,.07);overflow:hidden;min-height:60vh;display:flex;flex-direction:column;}
.crs-crumb{padding:16px 40px 0;font-family:var(--km-display);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--jpic-gold-dark);}
.crs-steps{padding:8px 40px 20px;flex:1;}
.crs-step{display:none;animation:crsFade .35s ease;}
.crs-step.is-active{display:block;}
@keyframes crsFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.crs-step-hero{border-radius:14px;overflow:hidden;margin:8px 0 22px;aspect-ratio:16/6;box-shadow:0 12px 28px rgba(0,51,102,.16);}
.crs-step-hero img{width:100%;height:100%;object-fit:cover;object-position:center 32%;}
.crs-step-title{font-family:var(--km-display);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--jpic-blue-dark);line-height:1.15;margin:4px 0 14px;}
.crs-lead{font-size:16.5px;line-height:1.7;color:var(--grey-600,#41505f);margin:0 0 18px;}
.crs-lead strong{color:var(--jpic-blue);}
.crs-body{font-size:15px;line-height:1.7;color:var(--grey-500);margin:0 0 18px;}
.crs-body-center{text-align:center;max-width:640px;margin-left:auto;margin-right:auto;}
.crs-sub{font-family:var(--km-display);font-weight:700;font-size:18px;color:var(--jpic-blue);margin:28px 0 16px;}

/* ---------- STEP NAV ---------- */
.crs-stepnav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 40px;border-top:1px solid var(--grey-200);background:#f7fafd;position:sticky;bottom:0;}
.crs-nav-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--km-display);font-weight:700;font-size:14px;padding:12px 22px;border-radius:9px;cursor:pointer;border:2px solid transparent;transition:transform .15s,background .2s,box-shadow .2s;}
.crs-nav-prev{background:#fff;border-color:var(--grey-200);color:var(--jpic-blue);}
.crs-nav-prev:hover{background:var(--grey-100);}
.crs-nav-prev:disabled{opacity:.4;cursor:not-allowed;}
.crs-nav-next{background:var(--jpic-gold);color:var(--jpic-blue-dark);box-shadow:0 8px 18px rgba(254,190,80,.35);}
.crs-nav-next:hover{background:var(--jpic-gold-dark);transform:translateY(-2px);}
.crs-nav-next.is-done{background:var(--jpic-blue);color:#fff;box-shadow:0 8px 18px rgba(0,73,144,.28);}
.crs-stepcount{font-size:13px;color:var(--grey-500);font-family:var(--km-display);font-weight:600;text-align:center;}

/* ---------- SIGN-OFF GATE + DECLARATION ---------- */
.crs-gate{display:flex;gap:12px;align-items:flex-start;background:#fdf3f4;border:1px solid rgba(237,27,46,.3);border-radius:10px;padding:16px 20px;margin-bottom:22px;color:#b3202e;font-size:14px;line-height:1.6;}
.crs-gate i{font-size:20px;margin-top:1px;}
.crs-gate-link{background:none;border:none;color:var(--jpic-red);font-weight:700;text-decoration:underline;cursor:pointer;padding:0;font-size:14px;}
.crs-decl{background:#f7fafd;border:1px solid var(--grey-200);border-radius:14px;padding:28px 30px;}
.crs-decl-check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;margin-bottom:22px;}
.crs-decl-check input{flex:0 0 auto;width:22px;height:22px;margin-top:2px;accent-color:var(--jpic-blue);cursor:pointer;}
.crs-decl-check span{font-size:14.5px;color:var(--grey-600,#41505f);line-height:1.65;}
.crs-decl-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-bottom:22px;}
.crs-field{display:flex;flex-direction:column;gap:6px;}
.crs-field:first-child{grid-column:1/-1;}
.crs-field label{font-family:var(--km-display);font-weight:700;font-size:13px;color:var(--jpic-blue);}
.crs-req{color:var(--jpic-red);}
.crs-opt{color:var(--grey-500);font-weight:400;font-size:12px;}
.crs-field input{font-family:var(--km-body);font-size:15px;padding:12px 14px;border:1.5px solid var(--grey-200);border-radius:9px;background:#fff;color:var(--jpic-blue-dark);}
.crs-field input:focus{outline:none;border-color:var(--jpic-blue);box-shadow:0 0 0 3px rgba(0,73,144,.12);}
.crs-field input[readonly]{background:var(--grey-100);color:var(--grey-500);}
.crs-decl-btn{width:100%;justify-content:center;font-size:15.5px;padding:16px;}
.crs-decl-btn:disabled{opacity:.45;cursor:not-allowed;}
.crs-decl-hint{text-align:center;font-size:12.5px;color:var(--grey-500);margin:12px 0 0;}

/* ---------- CERTIFICATE (completion) ---------- */
.crs-cert{text-align:center;background:linear-gradient(160deg,#f7fafd,#eef4fb);border:2px solid var(--jpic-gold);border-radius:16px;padding:40px 34px;}
.crs-cert-badge{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--jpic-gold),var(--jpic-gold-dark));color:var(--jpic-blue-dark);display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 18px;box-shadow:0 12px 28px rgba(254,190,80,.45);}
.crs-cert h3{font-family:var(--km-display);font-weight:800;font-size:24px;color:var(--jpic-blue);margin:0 0 10px;}
.crs-cert>p{font-size:15px;color:var(--grey-500);line-height:1.65;max-width:520px;margin:0 auto 22px;}
.crs-cert-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 40px;margin:0 0 24px;text-align:left;}
.crs-cert-meta dt{font-family:var(--km-display);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--grey-500);font-weight:700;margin-bottom:3px;}
.crs-cert-meta dd{font-family:var(--km-display);font-weight:700;font-size:16px;color:var(--jpic-blue);margin:0;}
.crs-cert-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.crs-cert-note{display:inline-flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--grey-500);line-height:1.55;max-width:520px;margin:18px auto 0;text-align:left;}
.crs-cert-note i{color:var(--jpic-gold);margin-top:2px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1023px){
  .crs-layout{grid-template-columns:1fr;padding:18px 16px 50px;}
  .crs-outline-toggle{display:inline-flex;}
  .crs-progress{min-width:auto;flex:1;}
  .crs-sidebar{position:fixed;top:0;left:0;bottom:0;width:min(360px,86vw);max-height:none;border-radius:0;z-index:60;transform:translateX(-102%);transition:transform .3s ease;box-shadow:0 0 40px rgba(0,20,45,.4);}
  .crs-sidebar.is-open{transform:none;}
  .crs-sidebar-close{display:flex;}
  .crs-scrim{display:block;position:fixed;inset:0;background:rgba(6,12,24,.5);opacity:0;visibility:hidden;transition:opacity .3s;z-index:55;}
  .crs-scrim.is-open{opacity:1;visibility:visible;}
  .crs-crumb{padding:16px 24px 0;}
  .crs-steps{padding:8px 24px 20px;}
  .crs-stepnav{padding:16px 24px;}
}
@media (max-width: 640px){
  .crs-topbar-title{display:none;}
  /* Brand + progress + "Outline" button can't share one 320px row: the progress
     bar's content minimum (120px track + label) plus the 105px toggle overflowed
     and scrolled the page sideways. Wrap the progress onto its own full-width row. */
  .crs-topbar-inner{padding:12px 16px;gap:10px;flex-wrap:wrap;}
  .crs-topbar-brand{flex:1 1 auto;}
  .crs-outline-toggle{flex:0 0 auto;}
  .crs-progress{order:3;flex:1 0 100%;min-width:0;margin-left:0;}
  .crs-progress-track{min-width:0;}
  .crs-crumb{padding:14px 18px 0;}
  .crs-steps{padding:8px 18px 18px;}
  .crs-stepnav{padding:14px 18px;flex-wrap:wrap;}
  .crs-stepcount{order:3;width:100%;}
  .crs-nav-btn{flex:1;justify-content:center;}
  .crs-step-hero{aspect-ratio:16/9;}
  .crs-decl-fields{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .crs-step{animation:none;}
  .crs-progress-fill,.crs-sidebar,.crs-scrim{transition:none;}
}

/* ---------- PRINT (certificate / confirmation) ---------- */
@media print{
  .jpicnav,.jpic-footer,.crs-topbar,.crs-sidebar,.crs-scrim,.crs-stepnav,.crs-crumb,.crs-decl,.crs-gate{display:none !important;}
  .crs-layout,.crs-content{display:block;border:none;box-shadow:none;margin:0;padding:0;}
  .crs-step:not(.crs-step-final){display:none !important;}
  .crs-cert{border:2px solid #000;}
}