/**
 * OD-11 — the public on_demand_course product page: course facts, intro video, and the
 * locked-but-visible curriculum with its inline free-preview panel.
 */

/* Course facts row (under the price, above the buy button) */
.lms-odsf-facts { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.lms-odsf-facts li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #f7f8fa; border-radius: 8px; min-width: 96px; }
.lms-odsf-fact-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.lms-odsf-fact-v { font-size: 14px; font-weight: 700; color: #111827; }

/* Buy-box states */
.lms-odsf-notice { padding: 14px 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 14px; color: #374151; }
.lms-odsf-notice.lms-odsf-soon { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.lms-odsf-notice strong { display: block; margin-bottom: 4px; }
.lms-odsf-notice p { margin: 0; }
.lms-odsf-enrolled { padding: 14px 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; }
.lms-odsf-enrolled-note { margin: 0 0 10px; font-size: 14px; color: #166534; }
.lms-odsf-continue { display: inline-block; }

/* Intro video (replaces the gallery when the course has one) */
.lms-odsf-intro { margin-bottom: 18px; }
.lms-odsf-intro .lms-odsf-video,
.lms-odsf-preview .lms-odsf-video { width: 100%; max-width: 100%; border-radius: 12px; background: #000; display: block; }
.lms-odsf-embed { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; }
.lms-odsf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Curriculum */
.lms-odsf-curriculum { margin: 32px 0; }
.lms-odsf-h { font-size: 22px; margin: 0 0 4px; }
.lms-odsf-sub { font-size: 13px; color: #6b7280; margin: 0 0 16px; }
.lms-odsf-sec { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.lms-odsf-sec.is-sub { margin: 10px 0 10px 18px; }
.lms-odsf-sec-h { font-size: 15px; margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #f3f4f6; }
.lms-odsf-sec-d { font-size: 13px; color: #6b7280; margin: 0; padding: 8px 16px 0; }
.lms-odsf-lessons { list-style: none; margin: 0; padding: 0; }
.lms-odsf-lesson { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #f3f4f6; font-size: 14px; }
.lms-odsf-lesson:first-child { border-top: 0; }
.lms-odsf-lesson a { display: flex; align-items: center; gap: 10px; width: 100%; text-decoration: none; color: #1d4ed8; }
.lms-odsf-lesson.is-locked { color: #6b7280; }
.lms-odsf-lesson.is-open { background: #eff6ff; }
.lms-odsf-icon { flex: none; width: 18px; text-align: center; }
.lms-odsf-ltitle { flex: 1; }
.lms-odsf-ltype { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #4b5563; }
.lms-odsf-ldur { font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; }
.lms-odsf-free { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534; }
.lms-odsf-lock { font-size: 11px; color: #9ca3af; }

/* Inline free-preview panel */
.lms-odsf-preview { border: 1px solid #c7d2fe; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: #f8faff; }
.lms-odsf-preview-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.lms-odsf-preview-t { flex: 1; font-weight: 700; color: #111827; }
.lms-odsf-preview-x { font-size: 13px; color: #1d4ed8; text-decoration: underline; }
.lms-odsf-reading { font-size: 15px; line-height: 1.7; }
.lms-odsf-pdf iframe { width: 100%; height: 60vh; border: 1px solid #e5e7eb; border-radius: 8px; }
.lms-odsf-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lms-odsf-slides img { width: 100%; height: auto; border-radius: 8px; display: block; }
.lms-odsf-slides figcaption { font-size: 12px; color: #6b7280; margin-top: 4px; }
.lms-odsf-empty { font-size: 14px; color: #6b7280; margin: 0; }

@media (max-width: 640px) {
    .lms-odsf-lesson { flex-wrap: wrap; }
    .lms-odsf-ltitle { flex: 1 1 100%; order: 1; }
    .lms-odsf-pdf iframe { height: 50vh; }
}

/* OD-2c — plan chooser (radio cards) */
.lms-odsf-planform { margin: 0 0 1.2em; }
.lms-odsf-plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lms-odsf-plan { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #e2e6ec; border-radius: 10px; cursor: pointer; background: #fff; }
.lms-odsf-plan:has(input:checked) { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.lms-odsf-plan input { margin-top: 4px; }
.lms-odsf-plan-body { display: flex; flex-direction: column; gap: 2px; }
.lms-odsf-plan-name { font-weight: 600; }
.lms-odsf-plan-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #2271b1; color: #fff; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.lms-odsf-plan-price { font-size: 1.05em; }
.lms-odsf-plan-price del { opacity: .6; margin-right: 4px; }
.lms-odsf-plan-per { font-size: .85em; opacity: .75; }
.lms-odsf-plan-notes { font-size: .85em; opacity: .8; }
.lms-odsf-plan-desc { font-size: .85em; opacity: .7; }