/* ================================ Comedy Safe Driver — Course Styles File: /courses/assets/course.css ================================ */ /* --- Design tokens --- */ :root{ --brand:#FFE34A; /* lighter default yellow */ --brand-hover:#E6B800; /* darker hover yellow */ --ink:#111827; --bg:#f8fafc; --card:#ffffff; --muted:#6b7280; --ring:#e5e7eb; --radius:14px; --shadow:0 10px 20px rgba(17,24,39,.06); --wrap: 1100px; /* shared content width */ --gutter: 20px; /* shared left/right padding */ } /* Dark theme tokens */ html[data-theme="dark"]{ --bg:#0b1220; /* page background */ --card:#0f172a; /* surfaces (cards, header) */ --ink:#e5e7eb; /* primary text */ --muted:#94a3b8; /* secondary text */ --ring:#1f2937; /* borders/dividers */ --brand:#FFD60A; /* keep your yellow bright on dark */ --brand-hover:#d1ad00; /* slightly deeper yellow on hover */ } /* Make text readable in dark */ html[data-theme="dark"] body{ background:var(--bg); color:var(--ink); } /* Tables and table headers */ html[data-theme="dark"] table{ background:var(--card); } html[data-theme="dark"] thead th{ background:#111827; color:var(--ink); } /* Inputs on dark surfaces */ html[data-theme="dark"] .input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background:#0b1220; color:var(--ink); border-color:var(--ring); } /* Notices look better with darker backdrop */ html[data-theme="dark"] .notice{ background:#092532; border-color:#0ea5b7; color:#d1f7ff; } /* --- Base & reset --- */ * { box-sizing: border-box; } html,body{ height:100%; } body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--ink); line-height:1.55; } img,video,canvas,svg { max-width:100%; display:block; } a { color:var(--ink); text-decoration:none; } a:hover { text-decoration:underline; } /* If Astra’s page wrapper is constraining width, neutralize it only when our course header is active */ .csd .site-content .ast-container{ max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* --- Layout helpers --- */ .container{ max-width:1100px; margin:0 auto; padding:20px; } .page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:10px 0 18px; } .page-header .h1, .page-header h1{ font-size:1.7rem; margin:0; } .muted{ color:var(--muted); font-size:.95rem; } /* --- Top bar (appears after ) --- */ /* centered title in the header bar (used by header.php) */ .header-center-title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:800; font-size:18px; letter-spacing:.2px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; /* lets logo/nav remain clickable */ } .site-topbar{ position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--ring); } .site-topbar{ position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--ring); } .topbar-inner{ max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); /* 12px top/bottom, 20px left/right */ position: relative; /* needed for absolute-centered title */ } /* Keep the Logout button in the header red and compact */ .site-topbar .logout-btn, .site-topbar .btn-danger{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:#ef4444; /* red */ border:1px solid #991b1b; color:#fff; font-weight:700; text-decoration:none; cursor:pointer; } .site-topbar .logout-btn:hover, .site-topbar .btn-danger:hover{ filter:brightness(0.95); } .logo{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); } .logo img{ height:28px; width:auto; } .top-actions{ display:flex; gap:10px; align-items:center; } .link{ color:var(--ink); font-weight:600; } .link:hover{ text-decoration:underline; } .logo{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); } .logo img{ height:28px; width:auto; } .top-actions{ display:flex; gap:10px; align-items:center; } .link{ color:var(--ink); font-weight:600; } .link:hover{ text-decoration:underline; } /* Header Dashboard button: yellow, same dimensions as Logout */ .site-topbar .btn-dashboard{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; /* match .logout-btn */ border-radius:10px; /* match .logout-btn */ border:1px solid var(--ink); background:var(--brand); /* yellow */ color:#000; font-weight:700; line-height:1; /* normalizes anchor vs button height */ text-decoration:none; cursor:pointer; } .site-topbar .btn-dashboard:hover{ background:var(--brand-hover); text-decoration:none; } /* Theme toggle button: match Dashboard/Logout size */ .site-topbar .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; /* same as .logout-btn / .btn-dashboard */ border-radius:10px; border:1px solid var(--ink); background:transparent; color:var(--ink); font-weight:700; line-height:1; /* critical for equal height */ text-decoration:none; cursor:pointer; } .site-topbar .theme-toggle .icon{ line-height:1; } .site-topbar .theme-toggle:hover{ text-decoration:none; filter:brightness(0.95); } /* (optional) lock font-size across all three to ensure exact match */ .site-topbar .theme-toggle, .site-topbar .logout-btn, .site-topbar .btn-dashboard{ font-size:14px; } /* --- Sticky footer: pin footer to bottom; keep page bg to the footer --- */ /* CHANGE this: html { background:#000; } */ /* TO: */ html { background: var(--bg); } /* page background behind everything */ body{ min-height:100vh; display:flex; flex-direction:column; background:var(--bg); padding-bottom:1px; /* stops margin-collapsing from revealing html bg */ } .site-footer{ margin-top:auto; /* pushes footer to bottom */ background:#000; /* black footer itself */ color:#fff; border-top:1px solid #000; } .site-footer a{ color:#fff; text-decoration:underline; } /* Add breathing room before the black footer on long pages */ body > .container:last-of-type{ margin-bottom:28px; } body > .container > .container:last-child{ margin-bottom:28px; } /* if nested */ /* Actions row: center the Continue button and the timer together */ .actions-inline{ display:flex; align-items:center; justify-content:center; gap:12px; margin:12px 0 16px; flex-wrap:wrap; /* wrap on small screens */ } .actions-inline .timer{ margin:0; /* neutralize default

margins */ display:inline-flex; align-items:center; } /* Center the HTML5 audio controls used on course pages */ .course-audio{ display:block; margin:12px auto; } /* --- Cards --- */ .card{ background:var(--card); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; } .card + .card{ margin-top:16px; } .card-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .card-title{ font-size:1.1rem; margin:0; } .card-body{ display:flex; flex-direction:column; gap:8px; } .card-actions{ display:flex; flex-wrap:wrap; gap:10px; } /* --- Buttons --- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--ink); background:var(--brand); color:#000; font-weight:700; cursor:pointer; text-decoration:none; } .btn:hover{ background:var(--brand-hover); text-decoration:none; /* prevent link underline on .btn hover */ filter:none; /* remove prior darken filter */ } a.btn-submit, button.btn-submit, input.btn-submit, a.btn-primary, button.btn-primary, input.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--ink); background:var(--brand); color:#000; font-weight:700; text-decoration:none; cursor:pointer; } a.btn-submit:hover, button.btn-submit:hover, input.btn-submit:hover, a.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover{ background:var(--brand-hover); text-decoration:none; } .btn.disabled, .btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; } /* Space before the quiz Submit Answer button */ .quiz form .btn{ margin-top:14px; /* bump to 18px if you want more space */ } /* Only style submit buttons inside the page content, not the header */ .csd .container input[type="submit"], .csd .container button[type="submit"]{ padding:10px 16px; border-radius:10px; border:1px solid var(--ink); background:var(--brand); color:#000; font-weight:700; cursor:pointer; } .csd .container input[type="submit"]:hover, .csd .container button[type="submit"]:hover{ background:var(--brand-hover); } /* --- Forms --- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width: 900px){ .form-grid{ grid-template-columns:1fr; } } .form-field{ display:flex; flex-direction:column; gap:6px; } label{ font-weight:600; } .input, select, textarea{ border:1px solid var(--ring); border-radius:10px; padding:10px 12px; background:#fff; font-size:1rem; } .input:focus, select:focus, textarea:focus{ outline:2px solid #000; outline-offset:0; } .help{ font-size:.9rem; color:var(--muted); } .form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; } .form-actions--center { justify-content: center; } .field-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .small-muted{ color:var(--muted); font-size:.85rem; } .inline-links a{ color:var(--ink); text-decoration:underline; } /* Field errors */ .error-under{ color:#b91c1c; font-size:.85rem; margin-top:6px; } .input-error{ border-color:#b91c1c !important; } /* Notices & badges */ .notice{ background:#ecfeff; border:1px solid #06b6d4; color:#0e7490; padding:10px 12px; border-radius:10px; margin:0 0 12px; } .badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:.8rem; border:1px solid var(--ring); background:#fff; } .badge--inprogress{ background:#fff7ed; border-color:#fed7aa; } .badge--done{ background:#ecfdf5; border-color:#bbf7d0; } .alert{ border-left:4px solid; background:#fff; border:1px solid var(--ring); padding:12px; border-radius:12px; } .alert--error{ border-color:#ef4444; } .alert--success{ border-color:#10b981; } .secure-note{ display:flex; align-items:center; gap:8px; color:#065f46; background:#ecfdf5; border:1px solid #10b981; padding:10px 12px; border-radius:10px; margin-top:10px; font-weight:600; } .secure-note .lock{ font-size:18px; } /* --- Stepper (registration steps) --- */ .stepper{ display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 16px; } .step{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--ring); border-radius:999px; background:#fff; } .step__dot{ width:8px; height:8px; border-radius:999px; background:#d1d5db; } .step--current .step__dot{ background:#000; } .step--done{ opacity:.7; } /* --- Dashboard grid --- */ .grid-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } @media (max-width: 1100px){ .grid-cards{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 700px){ .grid-cards{ grid-template-columns:1fr; } } /* --- Progress bar & timer --- */ .progress{ margin:14px 0 18px; } .progress__label{ font-size:.95rem; color:#374151; margin-bottom:6px; } .progress__track{ height:12px; background:#e5e7eb; border-radius:9999px; overflow:hidden; } .progress__bar{ height:100%; background:#10b981; width:0; transition:width .4s ease; } .timer{ font-weight:700; color:#c0392b; font-size:1.1rem; } /* Dark: ensure progress text is white (override later light style) */ html[data-theme="dark"] .progress__label{ color:#fff; } /* --- Registration option cards (State / Purpose / Delivery) --- */ .option-list{ display:flex; flex-direction:column; gap:10px; } .state-row{ display:grid; gap:10px; grid-template-columns:repeat(3, minmax(0,1fr)); } @media (max-width:720px){ .state-row{ grid-template-columns:1fr; } } .option-card{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--ring); border-radius:12px; padding:12px 14px; cursor:pointer; user-select:none; background:#fff; transition:box-shadow .15s ease, border-color .15s ease; } .option-card:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); } .option-card.selected{ border-color:#111827; box-shadow:0 0 0 2px #111827 inset; } .option-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .option-left{ display:flex; align-items:center; gap:10px; } .option-icon{ width:40px; height:28px; object-fit:contain; border-radius:4px; background:#f3f4f6; } .emoji-icon{ width:40px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; background:#f3f4f6; font-size:18px; } .option-name{ font-weight:700; } .option-price{ font-weight:700; white-space:nowrap; } .option-desc{ font-size:13px; color:#374151; padding-left:50px; line-height:1.35; } .option-radio, .option-checkbox{ position:absolute; opacity:0; pointer-events:none; } .toggle-card .option-top{ justify-content:space-between; gap:12px; } /* --- Tables (for checkout charges or details) --- */ table{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; } th, td{ padding:10px 12px; border:1px solid var(--ring); text-align:left; } thead th{ background:#f3f4f6; } /* --- Utilities --- */ .mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; } .mt-3{ margin-top:18px; } .mb-1{ margin-bottom:6px; } .mb-2{ margin-bottom:12px; } .mb-3{ margin-bottom:18px; } .center{ text-align:center; } .hidden{ display:none !important; } /* Narrow content column for forms/checkout */ .narrow { max-width: 760px; /* tweak 680–840px to taste */ margin: 0 auto; } .narrow .card + .card { margin-top: 16px; } /* Narrow content column for forms/checkout */ .narrow { max-width: 760px; margin: 0 auto; } .secure-strip{ margin-top:16px; padding:10px 12px; background:#fff; border:1px solid var(--ring); border-radius:10px; display:flex; align-items:center; gap:8px; font-size:.95rem; color:#374151; } .secure-strip .lock{ font-size:16px; } .secure-strip a{ text-decoration:underline; } /* --- Uniform form look across pages --- */ .form-card{ background:var(--card); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; } /* Inputs/selects/textarea inside any .form-card */ .form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card input[type="password"], .form-card input[type="date"], .form-card input[type="number"], .form-card select, .form-card textarea{ width:100%; border:1px solid var(--ring); border-radius:10px; padding:10px 12px; background:#fff; font-size:1rem; line-height:1.25; } /* Password field: button sits inside the input on the right */ .pw-field{ position:relative; } .pw-field .input{ width:100%; padding-right:78px; } /* room for the button */ /* The "Show" button (inside the input) */ #pwToggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); height:44px; padding:0 12px; display:inline-flex; align-items:center; line-height:1; background:#fff; color:var(--ink); border:1px solid var(--ring); border-radius:10px; font-weight:600; } #pwToggle:hover{ background:#f9fafb; } /* Nice default label + actions spacing in form cards */ .form-card label{ font-weight:600; display:block; margin:0 0 6px; } .form-card .form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; } /* Center any actions row when you add .form-actions--center */ .form-card .form-actions.form-actions--center{ justify-content: center !important; } .form-card br { display: none; } /* labels are block-level, so we don't need
*/ .form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card input[type="password"], .form-card input[type="date"], .form-card input[type="number"], .form-card select, .form-card textarea { margin-bottom: 12px; } /* consistent vertical rhythm */ /* Make the password input and the Show button the same height */ #password.input{ height:44px; } /* match your input height */ /* === Dashboard layout & UX tweaks === */ /* Make the dashboard container identifiable for scoped rules */ .container.dashboard { padding-bottom: 28px; } /* Tighten header and card spacing so page is shorter */ .dashboard .page-header{ margin:6px 0 10px; } .dashboard .card{ padding:14px; } .dashboard .card + .card{ margin-top:12px; } /* 2-column layout on desktop; stacks on phones automatically */ .dashboard-grid{ display:grid; grid-template-columns: 2fr 1fr; /* main left, sidebar right */ gap:14px; } @media (max-width: 900px){ .dashboard-grid{ grid-template-columns: 1fr; } } /* Make "Download Affidavit" look like a classic link */ .affidavit-link{ color:#2563eb; /* blue */ text-decoration:underline; font-weight:700; } .affidavit-link:visited{ color:#1d4ed8; } html[data-theme="dark"] .affidavit-link{ color:#60a5fa; } /* Compact, nice disclosure for the “Can’t verify…” help */ .inline-help{ border:1px solid var(--ring); border-radius:10px; background:var(--card); } .inline-help > summary{ list-style:none; /* hide default triangle */ cursor:pointer; padding:10px 12px; font-weight:700; } .inline-help[open] > summary{ border-bottom:1px solid var(--ring); } .inline-help__body{ padding:12px; color:var(--ink); } /* Add our own chevron */ .inline-help > summary::-webkit-details-marker { display:none; } .inline-help > summary::after{ content:"\25BC"; float:right; transition: transform .2s ease; } .inline-help[open] > summary::after{ transform: rotate(180deg); } /* Make tables scroll on small screens if you have any on dashboard */ .table-responsive{ overflow:auto; -webkit-overflow-scrolling:touch; } /* Slightly reduce default container vertical space on dashboard */ .dashboard .container, .container.dashboard { padding-top: 14px; } /* === Exam quiz card (theme-aware) === */ /* ADDED: makes the exam Q&A box respect light/dark theme tokens */ .quiz{ background: var(--card); color: var(--ink); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } /* ==== Dark mode surface fixes (global) ==== */ /* Make any remaining white boxes use the theme surface in dark mode */ html[data-theme="dark"] .card, html[data-theme="dark"] .form-card, html[data-theme="dark"] .section, html[data-theme="dark"] .quiz, html[data-theme="dark"] .option-card, html[data-theme="dark"] .inline-help, html[data-theme="dark"] .notice, html[data-theme="dark"] .alert, html[data-theme="dark"] .secure-strip, html[data-theme="dark"] table { background: var(--card) !important; color: var(--ink) !important; border-color: var(--ring) !important; } /* Inputs inside those boxes */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--card) !important; color: var(--ink) !important; border-color: var(--ring) !important; } /* Labels, muted text and answer labels inside dark cards */ html[data-theme="dark"] .muted, html[data-theme="dark"] .option-desc, html[data-theme="dark"] .quiz .debug-info, html[data-theme="dark"] .quiz .answer-list label { color: var(--muted) !important; } /* Zebra striping for tables in dark mode (keeps contrast) */ html[data-theme="dark"] tbody tr:nth-child(odd){ background: rgba(255,255,255,.03) !important; } /* ==== Dark mode selection highlight (cards, state/purpose/delivery) ==== */ html[data-theme="dark"] .option-card.selected{ border-color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, /* inner white ring */ 0 0 0 1px #fff; /* crisp outer edge */ } /* Better keyboard visibility too */ html[data-theme="dark"] .option-card:focus-within{ outline: 2px solid #fff; outline-offset: 2px; } /* If you also use a “toggle-card” variant, make it pop the same way */ html[data-theme="dark"] .toggle-card .option-card.selected{ border-color:#fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 0 1px #fff; } /* ==== Dark mode fixes for review pages ==== */ /* review_page.php’s white content wrapper */ html[data-theme="dark"] .wrap .content{ background: var(--card) !important; color: var(--ink) !important; border-color: var(--ring) !important; } /* review.php’s light note panel */ html[data-theme="dark"] .wrap .note{ background: var(--card) !important; color: var(--ink) !important; border-color: var(--ring) !important; } /* review.php’s list container + rows */ html[data-theme="dark"] .wrap .list{ background: var(--card) !important; border-color: var(--ring) !important; } html[data-theme="dark"] .wrap .item{ background: transparent !important; /* keep rows on dark surface */ border-bottom-color: var(--ring) !important; } /* === SAMPLE GALLERY: don't crop thumbnails === */ .sample-grid .vid-card img.vid-media{ object-fit: contain !important; /* show full image inside 16:9 */ background: transparent !important; } /* === VIDEO MODAL: keep close button above media === */ .video-modal__sheet{ position: relative !important; } .video-modal__close{ position: absolute; top: 8px; right: 8px; z-index: 5 !important; } .video-modal__video, .video-modal__frame{ position: relative; z-index: 1; } /* === SAMPLE GALLERY: make thumbs a touch shorter (less vertical space) === */ .sample-grid .vid-card .vid-media{ /* 16/9 = 1.777... — try 1.68 for a subtle reduction in height */ aspect-ratio: 1.68; } /* keep our previous no-crop behavior */ .sample-grid .vid-card img.vid-media{ object-fit: contain !important; background: transparent !important; } /* === SAMPLE GALLERY: card height = image height (no extra grey space) === */ .sample-grid .vid-card{ position: relative; aspect-ratio: 16 / 9; /* or 1.68 if you liked the shorter look */ padding: 0; /* remove inner padding that creates space */ overflow: hidden; } /* The image becomes absolutely positioned inside the card box */ .sample-grid .vid-card .vid-media{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* keep your non-cropped, alpha-corner look */ background: transparent; display: block; } /* Keep overlays pinned inside the same box */ .sample-grid .vid-card .vid-overlay{ position:absolute; inset:0; } .sample-grid .vid-card .play-btn{ position:absolute; left:12px; bottom:12px; } .sample-grid .vid-card .vid-meta{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; color:#fff; font-weight:800; font-size:14px; } /* (From earlier) don’t crop the thumbs */ .sample-grid .vid-card img.vid-media{ object-fit: contain !important; background: transparent !important; } /* =========================== SAMPLE GALLERY POLISH (end) =========================== */ /* Make the card itself the 16:9 box so it matches the image height */ .sample-grid .vid-card{ position: relative; aspect-ratio: 16 / 9; /* tweak to 1.68 if you want slightly shorter cards */ padding: 0; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .sample-grid .vid-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17,24,39,.14); } /* The thumbnail sits inside the card box */ .sample-grid .vid-card .vid-media{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* no cropping; preserves alpha corners */ background: transparent; display: block; } /* Overlays stay pinned inside the same box */ .sample-grid .vid-card .vid-overlay{ position:absolute; inset:0; } .sample-grid .vid-card .play-btn{ position:absolute; left:12px; bottom:12px; } .sample-grid .vid-card .vid-meta{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; color:#fff; font-weight:800; font-size:14px; } /* Do not crop the actual thumb anywhere in the sample grid */ .sample-grid .vid-card img.vid-media{ object-fit: contain !important; background: transparent !important; } /* Ensure the X is always clickable above the media */ .video-modal__sheet{ position: relative !important; } .video-modal__close{ position:absolute; top:8px; right:8px; z-index:5 !important; } .video-modal__video, .video-modal__frame{ position: relative; z-index:1; } /* ===== Exam, Quiz, Verification: unified look ===== */ /* White card wrapper (same look for all three) */ .quiz, .exam-content, .verification-card{ display:block; width:100%; max-width:720px; margin:20px auto; background:var(--card); color:var(--ink); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; box-sizing:border-box; } /* Headings inside the card (match exam scale) */ h2.exam-title, .quiz h3, .verification-card h3{ font-size:1.2rem; line-height:1.2; font-weight:700; margin:0 0 10px; } /* Question text & answers (same size as exam) */ .quiz p.question-text, .verification-card p.question-text, .exam-content p.question-text{ font-weight:700; font-size:1rem; margin:8px 0 14px; } /* Radio label layout (works whether or not you use