/* CPhT CPE Monitor — front-end styles */

.cpht-cpe-banner {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: 8px;
	margin: 0 0 22px;
	border: 1px solid transparent;
	font-size: 15px;
	line-height: 1.5;
}
.cpht-cpe-banner-icon {
	font-size: 22px;
	line-height: 1;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex: 0 0 28px;
}
.cpht-cpe-banner-body p { margin: 6px 0; }

.cpht-cpe-ok   { background: #eaf7ee; border-color: #b6e0c2; }
.cpht-cpe-ok   .cpht-cpe-banner-icon { background: #1a7f37; }
.cpht-cpe-warn { background: #fff7e6; border-color: #f2d48a; }
.cpht-cpe-warn .cpht-cpe-banner-icon { background: #b7791f; }
.cpht-cpe-err  { background: #fdecec; border-color: #f2b8b5; }
.cpht-cpe-err  .cpht-cpe-banner-icon { background: #c0392b; }

.cpht-cpe-btn {
	display: inline-block;
	background: #0b3d5c;
	color: #fff !important;
	border: 0;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	font-size: 14px;
}
.cpht-cpe-btn:hover { background: #0a324c; }
.cpht-cpe-btn[disabled] { opacity: .6; cursor: default; }
.cpht-cpe-linkbtn { background: none; border: 0; color: #0b3d5c; text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }
.cpht-cpe-resubmit-status { margin-left: 8px; font-size: 13px; color: #555; }

/* Transcript */
.cpht-cpe-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cpht-cpe-table th, .cpht-cpe-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
.cpht-cpe-table thead th { background: #f5f7f9; border-bottom: 2px solid #dfe4e8; }
.cpht-cpe-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cpht-cpe-pill.cpht-cpe-ok   { background: #eaf7ee; color: #1a7f37; }
.cpht-cpe-pill.cpht-cpe-warn { background: #fff7e6; color: #8a5a00; }
.cpht-cpe-pill.cpht-cpe-err  { background: #fdecec; color: #c0392b; }
.cpht-cpe-hint { margin-top: 6px; font-size: 13px; color: #444; }

.cpht-cpe-notice { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.cpht-cpe-notice.cpht-cpe-ok { background: #eaf7ee; color: #1a7f37; }

/* Admin submissions status colors */
.cpht-status { font-weight: 600; }
.cpht-status-accepted { color: #1a7f37; }
.cpht-status-rejected { color: #c0392b; }
.cpht-status-retry, .cpht-status-pending, .cpht-status-action_needed { color: #8a5a00; }

/* ---- Member CE transcript ---- */
.cpht-cpe-tx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cpht-cpe-tx-head h2 { margin: 0; }
.cpht-cpe-tx-who { margin: 8px 0 14px; }
.cpht-cpe-tx-total { font-weight: 600; margin: 0 0 12px; }
.cpht-cpe-tx-muted { color: #666; font-weight: 400; }
.cpht-cpe-tx-sub { margin: 28px 0 4px; }
.cpht-cpe-tx-foot { margin-top: 18px; font-size: 13px; }
.cpht-cpe-tx-table { width: 100%; border-collapse: collapse; }
.cpht-cpe-tx-table th, .cpht-cpe-tx-table td { text-align: left; padding: 8px 10px; vertical-align: top; border-bottom: 1px solid #e3e3e3; }
@media (max-width: 720px) {
	/* Table becomes one card per credit, with each cell labelled, so it reads on a phone. */
	.cpht-cpe-tx-table thead { position: absolute; left: -9999px; }
	.cpht-cpe-tx-table, .cpht-cpe-tx-table tbody, .cpht-cpe-tx-table tr, .cpht-cpe-tx-table td { display: block; width: 100%; box-sizing: border-box; }
	.cpht-cpe-tx-table tr { border: 1px solid #e3e3e3; border-radius: 8px; margin-bottom: 12px; padding: 6px 0; }
	.cpht-cpe-tx-table td { border: 0; padding: 4px 12px; }
	.cpht-cpe-tx-table td::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #888; }
}
@media print {
	.cpht-cpe-tx-print, .cpht-cpe-resubmit, .cpht-cpe-linkbtn { display: none !important; }
	.cpht-cpe-tx-table td a[href*="cpht_cpe_cert"] { display: none; }
}

/* ---- [cpht_step_button] — "Start Course" / "Continue" on lesson pages ---- */
.cpht-step-button { margin: 16px 0; }
.cpht-step-button form { margin: 0; }
.cpht-step-button input[type="submit"],
.cpht-step-button button,
.cpht-step-button__link { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 14px 20px; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff !important; background: #5D95C2; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; }
.cpht-step-button input[type="submit"]:hover,
.cpht-step-button button:hover,
.cpht-step-button__link:hover { background: #4a7fa8; }
.cpht-step-button-note { margin: 12px 0; padding: 8px 12px; border: 1px dashed #bbb; border-radius: 6px; color: #666; font-size: 13px; background: #fafafa; }

/* ---- CPE Monitor details box + popup ---- */
.cpht-cpe-details { margin: 16px 0; padding: 16px 18px; border-radius: 8px; border: 1px solid; }
.cpht-cpe-details--onfile { background: #fff7e6; border-color: #e0b060; color: #5c4100; }          /* amber: please confirm */
.cpht-cpe-details--missing { background: #fdeeea; border-color: #d9826b; color: #7a2d1a; }         /* clay/red: we need this */
.cpht-cpe-details__title { display: block; font-size: 17px; margin-bottom: 4px; }
.cpht-cpe-details__lead { margin: 4px 0 10px; }
.cpht-cpe-details__facts { margin: 0 0 12px; padding-left: 18px; }
.cpht-cpe-details__saved { margin: 10px 0 0; font-weight: 600; color: #1a7f37; }
.cpht-cpe-modal[hidden] { display: none !important; }
.cpht-cpe-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cpht-cpe-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.cpht-cpe-modal__dialog { position: relative; background: #fff; color: #1e2126; border-radius: 10px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; padding: 22px 22px 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); box-sizing: border-box; }
.cpht-cpe-modal__dialog h3 { margin: 0 28px 6px 0; }
.cpht-cpe-modal__close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #666; }
.cpht-cpe-modal__intro, .cpht-cpe-modal__hint { color: #555; font-size: 14px; margin: 0 0 12px; }
.cpht-cpe-modal__hint { margin: -4px 0 12px; font-size: 13px; }
.cpht-cpe-modal__dialog label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.cpht-cpe-modal__dialog input[type="text"], .cpht-cpe-modal__dialog select { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 16px; }
.cpht-cpe-modal__dialog [aria-invalid="true"] { border-color: #c00; outline: 1px solid #c00; }
.cpht-cpe-details__row { display: flex; gap: 10px; }
.cpht-cpe-details__row > span { flex: 1; }
.cpht-cpe-details__error { background: #fdecec; color: #8a1f1f; border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; font-size: 14px; }
.cpht-cpe-modal__actions { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; }
body.cpht-cpe-modal-open { overflow: hidden; }

/* ---- Quiz page: make LearnDash's "Start Quiz" button the obvious next step ----
   Applies only on pages that show the CPE Monitor details box (reporting courses),
   so quizzes elsewhere are untouched. Same look as the Start Course button. The
   selector is LearnDash's documented one (.wpProQuiz_content input.wpProQuiz_button
   [name="startQuiz"]); !important is deliberate, because LearnDash's own theme and
   Elementor both style buttons with high-specificity rules. */
body:has(.cpht-cpe-details) .wpProQuiz_content input.wpProQuiz_button[name="startQuiz"] {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	height: auto !important;
	margin: 16px 0 !important;
	padding: 16px 20px !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	color: #fff !important;
	background: #5D95C2 !important;
	border: 0 !important;
	border-radius: 6px !important;
	opacity: 1 !important;
	cursor: pointer;
}
body:has(.cpht-cpe-details) .wpProQuiz_content input.wpProQuiz_button[name="startQuiz"]:hover,
body:has(.cpht-cpe-details) .wpProQuiz_content input.wpProQuiz_button[name="startQuiz"]:focus {
	background: #4a7fa8 !important;
	opacity: 1 !important;   /* LearnDash fades its buttons on hover; this one must not get paler */
}

/* ---- Quiz results: the CPE Monitor notice shown above LearnDash's results ---- */
.cpht-cpe-quiznotice { margin: 0 0 16px; }
.cpht-cpe-quiznotice .cpht-cpe-banner { margin-top: 0; }
/* Inside LearnDash's quiz area, theme link rules (blue + underline) must not wash out the notice's buttons. */
.cpht-cpe-quiznotice a.cpht-cpe-btn,
.cpht-cpe-quiznotice a.cpht-cpe-btn:hover,
.cpht-cpe-quiznotice a.cpht-cpe-btn:focus { color: #fff !important; text-decoration: none !important; }

/* ...and LearnDash's "Continue" link after the results, enlarged like Start Quiz so it is not missed.
   Same scoping and reasoning as the Start Quiz rule above (documented selector, deliberate !important). */
body:has(.cpht-cpe-details) .wpProQuiz_content a#quiz_continue_link {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 16px 0 !important;
	padding: 16px 20px !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #fff !important;
	background: #5D95C2 !important;
	border: 0 !important;
	border-radius: 6px !important;
	opacity: 1 !important;
}
body:has(.cpht-cpe-details) .wpProQuiz_content a#quiz_continue_link:hover,
body:has(.cpht-cpe-details) .wpProQuiz_content a#quiz_continue_link:focus {
	background: #4a7fa8 !important;
	opacity: 1 !important;
}

/* ---- The course-page button when it sits inside a text block (the automatic placement above "Fees:") ----
   Elementor text blocks give links the theme's colour and an underline; the button must not inherit them. */
.cpht-step-button a.cpht-step-button__link,
.cpht-step-button a.cpht-step-button__link:hover,
.cpht-step-button a.cpht-step-button__link:focus { color: #fff !important; text-decoration: none !important; }
.elementor-widget-text-editor .cpht-step-button a.cpht-step-button__link { font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; padding: 14px 20px !important; }
.elementor-widget-text-editor .cpht-step-button { margin: 0 0 16px; }