/* =========================================================================
   Advanced Exam & Certificate Management System — Public Front-End Styles
   Same "Ledger" identity as admin, adapted for a calm, focused exam-taking
   experience: generous whitespace, one question at a time, low visual noise.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500;600&family=Poppins:wght@400;500;600;700;800&family=Pinyon+Script&display=swap');

.aecs-public-wrap {
	/* --- Irez Academy palette (spec-named variables) --- */
	--irez-primary:       #324B9B;
	--irez-secondary:     #F4F7FF;
	--irez-primary-hover: #263B7D;
	--irez-border:        #C9D3F0;

	/* --- Existing structural variables, repointed at the Irez palette --- */
	--aecs-ink:        var(--irez-primary);
	--aecs-ink-soft:   var(--irez-primary-hover);
	--aecs-parchment:  var(--irez-secondary);
	--aecs-paper:      #ffffff;
	--aecs-line:       var(--irez-border);
	--aecs-gold:       var(--irez-primary);
	--aecs-seal:       #B3261E;
	--aecs-seal-soft:  #FBEAE9;
	--aecs-success:    #2E7D45;
	--aecs-success-soft: #E5F3E8;
	--aecs-warning:    #92620A;
	--aecs-warning-soft: #FBEED7;
	--aecs-muted:      #5B6479;
	--aecs-text:       #1B2030;
	--aecs-font-display: 'Source Serif 4', Georgia, serif;
	--aecs-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--aecs-font-mono: 'IBM Plex Mono', SFMono-Regular, Consolas, monospace;

	max-width: 760px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
	font-family: var(--aecs-font-body);
	color: var(--aecs-text);
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.aecs-public-wrap { padding-left: 10px; padding-right: 10px; }
}
.aecs-public-wrap * { box-sizing: border-box; }

/* ---- Notices ---- */
.aecs-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--aecs-radius, 8px);
	border-left: 3px solid transparent;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 16px;
}
.aecs-notice::before {
	flex-shrink: 0;
	font-weight: 700;
	width: 20px; height: 20px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
	margin-top: 1px;
}
.aecs-notice-error { background: var(--aecs-seal-soft); color: var(--aecs-seal); border-left-color: var(--aecs-seal); }
.aecs-notice-error::before { content: '!'; background: var(--aecs-seal); color: #fff; }
.aecs-notice-success { background: var(--aecs-success-soft); color: #236030; border-left-color: var(--aecs-success); }
.aecs-notice-success::before { content: '\2713'; background: var(--aecs-success); color: #fff; }
.aecs-notice-warning { background: var(--aecs-warning-soft, #FBEED7); color: #6E4807; border-left-color: var(--aecs-warning, #92620A); }
.aecs-notice-warning::before { content: '!'; background: var(--aecs-warning, #92620A); color: #fff; }

/* ---- Progress rail (4-step indicator) — modern pill/segmented bar ---- */
.aecs-progress-rail {
	display: flex;
	background: var(--aecs-parchment);
	border: 1px solid var(--aecs-line);
	border-radius: 999px;
	padding: 6px;
	gap: 4px;
	position: relative;
	margin-bottom: 30px;
	box-shadow: inset 0 1px 2px rgba(50,75,155,0.04);
}
.aecs-progress-step {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	z-index: 1;
	padding: 9px 10px;
	border-radius: 999px;
	transition: background-color .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.aecs-progress-dot {
	width: 24px; height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--aecs-line);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--aecs-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--aecs-muted);
	transition: all .35s cubic-bezier(.4,0,.2,1);
}
.aecs-progress-label {
	font-size: 12.5px;
	color: var(--aecs-muted);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: color .3s ease;
}

/* Active segment: solid ink pill, lifted with shadow + gold badge */
.aecs-progress-step.is-active {
	background: var(--aecs-ink);
	box-shadow: 0 4px 14px rgba(50,75,155,0.28), 0 1px 2px rgba(50,75,155,0.15);
}
.aecs-progress-step.is-active .aecs-progress-dot {
	background: var(--aecs-gold);
	border-color: var(--aecs-gold);
	color: #fff;
	transform: scale(1.06);
}
.aecs-progress-step.is-active .aecs-progress-label { color: #fff; }

/* Completed segment: success-tinted dot with checkmark */
.aecs-progress-step.is-complete .aecs-progress-dot {
	background: var(--aecs-success);
	border-color: var(--aecs-success);
	color: #fff;
	font-size: 0;
}
.aecs-progress-step.is-complete .aecs-progress-dot::before {
	content: '✓';
	font-size: 12px;
	font-weight: 700;
}
.aecs-progress-step.is-complete .aecs-progress-label { color: var(--aecs-success); }

/* Upcoming steps: subtle hover affordance */
.aecs-progress-step:not(.is-active):not(.is-complete):hover .aecs-progress-dot {
	border-color: var(--aecs-ink);
	color: var(--aecs-ink);
}

/* ---- Exam title block ---- */
.aecs-exam-title-block { text-align: center; margin-bottom: 26px; }
.aecs-exam-title-block h2 { font-family: var(--aecs-font-display); font-size: 26px; color: var(--aecs-ink); margin: 0 0 6px; }
.aecs-exam-title-block p { color: var(--aecs-muted); font-size: 14px; margin: 0; }

/* ---- Step panels ---- */
.aecs-step-panel { display: none; }
.aecs-step-panel.is-active { display: block; animation: aecsFadeIn .25s ease; }
@keyframes aecsFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Form card ---- */
.aecs-form-card {
	background: var(--aecs-paper);
	border: 1px solid var(--aecs-line);
	border-radius: 8px;
	padding: 28px 28px 24px;
	box-shadow: 0 1px 2px rgba(50,75,155,0.05), 0 8px 24px rgba(50,75,155,0.06);
}
.aecs-form-card h3 { font-family: var(--aecs-font-display); font-size: 20px; color: var(--aecs-ink); margin: 0 0 6px; }
.aecs-form-intro { color: var(--aecs-muted); font-size: 13.5px; margin: 0 0 20px; }

.aecs-field-group { margin-bottom: 16px; }
.aecs-field-group label { display: block; font-size: 13px; font-weight: 600; color: var(--aecs-ink); margin-bottom: 6px; }
.aecs-field-group .req { color: var(--aecs-seal); }
.aecs-field-group input, .aecs-field-group select {
	width: 100%;
	border: 1px solid var(--aecs-line);
	border-radius: 6px;
	padding: 12px 13px;
	font-size: 16px; /* 16px avoids iOS Safari's auto-zoom-on-focus, which is jarring on a multi-field form. */
	font-family: var(--aecs-font-body);
	color: var(--aecs-text);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.aecs-field-group input::placeholder { color: #8891A3; opacity: 1; }
.aecs-field-group input:focus, .aecs-field-group select:focus {
	outline: none; border-color: var(--aecs-ink); box-shadow: 0 0 0 3px rgba(50,75,155,0.12);
}
.aecs-field-group input:disabled { background: var(--aecs-parchment); color: var(--aecs-muted); cursor: not-allowed; }
.aecs-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.aecs-field-row .aecs-field-group { flex: 1; min-width: 140px; }

.aecs-error-msg { display: block; color: var(--aecs-seal); font-size: 12px; margin-top: 4px; min-height: 14px; }
.aecs-form-error {
	background: var(--aecs-seal-soft);
	color: var(--aecs-seal);
	padding: 10px 14px;
	border-radius: var(--aecs-radius, 6px);
	font-size: 13px;
	margin-bottom: 14px;
}
.aecs-form-success {
	background: var(--aecs-success-soft);
	color: var(--aecs-success);
	padding: 10px 14px;
	border-radius: var(--aecs-radius, 6px);
	font-size: 13px;
	margin-bottom: 14px;
}

/* ---- Buttons ---- */
.aecs-btn-public {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--aecs-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease;
	text-decoration: none;
}
.aecs-btn-public:disabled {
	cursor: not-allowed;
	background: #E4E7F0 !important;
	border-color: #E4E7F0 !important;
	color: #595F7D !important;
}
/* !important on color/background/border below: many WordPress themes and
   page-builder stylesheets ship a global `button{}`/`a.button{}` reset
   that can otherwise out-specificity or out-load-order a single plugin
   class, silently repainting these buttons with the theme's own default
   button color (see the longer note above .aecs-sw-tab). Pinning these
   three properties guarantees the intended brand colors render on every
   site regardless of theme. */
.aecs-btn-public-primary { background: var(--aecs-ink) !important; color: #fff !important; border-color: var(--aecs-ink) !important; }
.aecs-btn-public-primary:hover:not(:disabled) { background: var(--aecs-ink-soft) !important; border-color: var(--aecs-ink-soft) !important; }
.aecs-btn-public-accent { background: var(--aecs-seal) !important; color: #fff !important; border-color: var(--aecs-seal) !important; }
.aecs-btn-public-accent:hover:not(:disabled) { background: #732424 !important; border-color: #732424 !important; }
.aecs-btn-public-outline { background: transparent !important; border-color: var(--aecs-line) !important; color: var(--aecs-ink) !important; }
.aecs-btn-public-outline:hover:not(:disabled) { border-color: var(--aecs-ink) !important; background: var(--aecs-parchment) !important; }
.aecs-btn-public:focus-visible { outline: 2px solid var(--aecs-ink); outline-offset: 2px; }
.aecs-btn-block { width: 100%; }

/* ---- Resource link button (Step 2, above training videos) ---- */
.aecs-resource-link-block { margin-bottom: 20px; }
.aecs-btn-resource {
	width: 100%;
	background: var(--aecs-parchment);
	border-color: var(--aecs-line);
	color: var(--aecs-ink);
}
.aecs-btn-resource:hover { border-color: var(--aecs-ink); background: var(--aecs-parchment); }
.aecs-resource-icon { font-size: 14px; line-height: 1; }

/* ---- Video step ---- */
.aecs-video-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.aecs-video-item { border: 1px solid var(--aecs-line); border-radius: 8px; overflow: hidden; }
.aecs-video-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.aecs-video-embed iframe, .aecs-video-embed video, .aecs-video-embed .aecs-yt-wrapper, .aecs-video-embed .aecs-yt-wrapper iframe {
	width: 100%; height: 100%; border: none; display: block;
}
.aecs-video-status { padding: 8px 14px; background: var(--aecs-parchment); font-size: 12px; }
.aecs-video-status-badge { font-family: var(--aecs-font-mono); color: var(--aecs-muted); }
.aecs-video-item[data-completed="1"] .aecs-video-status-badge { color: var(--aecs-success); }
.aecs-video-item[data-completed="1"] .aecs-video-status-badge::before { content: '✓ '; }

/* ---- Exam step ---- */
.aecs-exam-header-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.aecs-exam-progress-bar-wrap { flex: 1; }
.aecs-exam-progress-bar { height: 6px; background: var(--aecs-line); border-radius: 4px; overflow: hidden; }
.aecs-exam-progress-fill { height: 100%; width: 0%; background: var(--aecs-gold); transition: width .25s ease; }
.aecs-exam-progress-text { display: block; font-size: 11.5px; color: var(--aecs-muted); font-family: var(--aecs-font-mono); margin-top: 5px; }
.aecs-exam-timer {
	font-family: var(--aecs-font-mono);
	font-size: 16px;
	font-weight: 600;
	color: var(--aecs-ink);
	background: var(--aecs-parchment);
	border: 1px solid var(--aecs-line);
	padding: 6px 14px;
	border-radius: 6px;
	white-space: nowrap;
}
.aecs-exam-timer.is-low { color: var(--aecs-seal); border-color: var(--aecs-seal); }

.aecs-question-container { min-height: 220px; }
.aecs-loading-placeholder { color: var(--aecs-muted); font-size: 13px; padding: 40px 0; text-align: center; }

.aecs-question-text { font-family: var(--aecs-font-display); font-size: 18px; color: var(--aecs-ink); line-height: 1.5; margin-bottom: 22px; }
.aecs-question-number { font-family: var(--aecs-font-mono); font-size: 11.5px; color: var(--aecs-gold); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 8px; }

.aecs-options-list { display: flex; flex-direction: column; gap: 10px; }
.aecs-option-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid var(--aecs-line);
	border-radius: 7px;
	padding: 13px 16px;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}
.aecs-option-row:hover { border-color: var(--aecs-ink); background: var(--aecs-parchment); }
.aecs-option-row.is-selected { border-color: var(--aecs-ink); background: var(--aecs-parchment); }
.aecs-option-row input[type="radio"] { margin-top: 2px; accent-color: var(--aecs-ink); }
.aecs-option-letter {
	font-family: var(--aecs-font-mono);
	font-weight: 600;
	font-size: 12px;
	color: var(--aecs-muted);
	width: 20px;
}
.aecs-option-row.is-selected .aecs-option-letter { color: var(--aecs-ink); }
.aecs-option-text { font-size: 14.5px; color: var(--aecs-text); flex: 1; }

.aecs-exam-nav-row { display: flex; gap: 10px; margin-top: 24px; justify-content: space-between; }
.aecs-exam-nav-row .aecs-btn-public { flex: 1; }

/* ---- Result step ---- */
.aecs-result-summary { text-align: center; }
.aecs-result-status {
	font-family: var(--aecs-font-display);
	font-size: 24px;
	font-weight: 700;
	padding: 14px;
	border-radius: 8px;
	margin: 14px 0 22px;
}
.aecs-result-pass { background: var(--aecs-success-soft); color: var(--aecs-success); }
.aecs-result-fail { background: var(--aecs-seal-soft); color: var(--aecs-seal); }

.aecs-result-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; text-align: left; }
.aecs-result-table th, .aecs-result-table td { padding: 11px 6px; border-bottom: 1px solid var(--aecs-line); font-size: 14px; }
.aecs-result-table th { color: var(--aecs-muted); font-weight: 600; width: 45%; }
.aecs-result-table td { color: var(--aecs-ink); font-weight: 600; }
.aecs-result-table tr:last-child th, .aecs-result-table tr:last-child td { border-bottom: none; }

.aecs-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- Certificate render (captured by html2canvas) ---- */
.aecs-cert-actions { display: flex; gap: 10px; margin-bottom: 18px; justify-content: center; }

.aecs-certificate-render {
	--aecs-cert-accent: var(--aecs-gold);
	--aecs-cert-font: var(--aecs-font-display);
	background: var(--aecs-parchment) center/cover no-repeat;
	border: 3px solid var(--aecs-ink);
	border-radius: 4px;
	padding: 50px 60px;
	text-align: center;
	position: relative;
	width: 100%;
	aspect-ratio: 1.414/1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.aecs-cr-logo { max-height: 60px; margin-bottom: 14px; }
.aecs-cr-heading { font-family: var(--aecs-cert-font); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aecs-cert-accent); }
.aecs-cr-sub { font-size: 13px; color: var(--aecs-muted); margin-top: 14px; }
.aecs-cr-name { font-family: var(--aecs-cert-font); font-size: 34px; font-weight: 700; color: var(--aecs-ink); margin: 10px 0 14px; }
.aecs-cr-body { font-size: 13.5px; color: var(--aecs-text); max-width: 480px; line-height: 1.6; }
.aecs-cr-meta-row { display: flex; gap: 40px; margin-top: 24px; font-family: var(--aecs-font-mono); font-size: 11px; }
.aecs-cr-meta-label { display: block; color: var(--aecs-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.aecs-cr-meta-value { color: var(--aecs-ink); font-weight: 600; }
.aecs-cr-footer { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 30px; }
.aecs-cr-sign-block { text-align: center; min-width: 130px; }
.aecs-cr-sign-img { max-height: 38px; margin-bottom: 4px; }
.aecs-cr-sign-line { width: 130px; border-top: 1px solid var(--aecs-ink); margin: 4px auto; }
.aecs-cr-sign-label { font-size: 11px; color: var(--aecs-muted); }
.aecs-cr-qr-block { text-align: center; }
.aecs-cr-verify-text { font-size: 9.5px; color: var(--aecs-muted); margin-top: 4px; }
.aecs-cr-seal-block img { max-height: 70px; }

/* =========================================================================
   "Exact Template" certificate design — the background is the admin's own
   uploaded artwork, used as-is. Only the dynamic fields are overlaid at
   admin-configured positions. The on-screen version below is shown for
   convenience; the actual PDF is drawn fresh on a <canvas> (see
   public/js/exam-flow.js) rather than captured from this DOM, so visual
   fidelity never depends on browser layout quirks, web font load timing,
   or html2canvas's approximate re-implementation of CSS.
   ========================================================================= */
.aecs-certificate-render.is-exact-template {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	border-radius: 0;
	padding: 0;
	overflow: hidden;
	container-type: inline-size;
}
.aecs-exact-missing-bg {
	padding: 60px 30px;
	text-align: center;
	color: var(--aecs-muted);
	font-size: 14px;
}
.aecs-exact-overlay {
	position: absolute;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}
.aecs-exact-overlay.aecs-exact-text { line-height: 1.2; }
.aecs-exact-overlay.aecs-exact-qr {
	aspect-ratio: 1 / 1;
}
.aecs-exact-overlay.aecs-exact-qr > div { width: 100%; height: 100%; }
.aecs-exact-overlay.aecs-exact-qr > div canvas,
.aecs-exact-overlay.aecs-exact-qr > div img { width: 100% !important; height: 100% !important; }


/* =========================================================================
   "Modern Achievement" certificate design — bold corner ribbons, a
   geometric sans for structure (Poppins) and a flowing script for the
   recipient's name (Pinyon Script), inspired by formal achievement
   certificates with striped diagonal corner flags and a circular seal.
   Selected per-template via the Design Style option; falls back to the
   original "Classic" (Ledger) styles above when not active.
   ========================================================================= */
.aecs-certificate-render.is-modern-achievement {
	--aecs-ma-primary: var(--aecs-cert-primary, #142a5e);
	--aecs-ma-secondary: var(--aecs-cert-secondary, #d72638);
	background: #fdfdfd;
	border: none;
	border-radius: 0;
	padding: 0;
	font-family: var(--aecs-cert-font);
	overflow: hidden;
}

/* Outer hairline frame with corner accent ticks, inset from the ribbons. */
.aecs-ma-frame {
	position: absolute;
	top: 22px; left: 22px; right: 22px; bottom: 22px;
	border: 1.5px solid var(--aecs-ma-primary);
	pointer-events: none;
	z-index: 1;
}
.aecs-ma-frame::before, .aecs-ma-frame::after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	border: 2px solid var(--aecs-ma-secondary);
}
.aecs-ma-frame::before { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.aecs-ma-frame::after { bottom: -2px; left: -2px; border-right: none; border-top: none; }

/* Diagonal striped ribbon corners (top-left, bottom-right), each with a
   small star, built from rotated gradient strips rather than images so
   they scale losslessly at any capture resolution. */
.aecs-ma-ribbon {
	position: absolute;
	width: 320px;
	height: 320px;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.aecs-ma-ribbon-tl { top: 0; left: 0; }
.aecs-ma-ribbon-br { bottom: 0; right: 0; transform: rotate(180deg); }
.aecs-ma-ribbon .aecs-ma-stripe {
	position: absolute;
	top: -60px;
	left: -180px;
	width: 560px;
	height: 60px;
	transform: rotate(-45deg);
}
.aecs-ma-ribbon .aecs-ma-stripe-1 { background: var(--aecs-ma-secondary); top: -90px; }
.aecs-ma-ribbon .aecs-ma-stripe-2 { background: var(--aecs-ma-primary); top: -30px; height: 46px; }
.aecs-ma-ribbon .aecs-ma-star {
	position: absolute;
	top: 56px;
	left: 56px;
	width: 22px;
	height: 22px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 1;
	transform: rotate(45deg);
}
.aecs-ma-ribbon-br .aecs-ma-star { color: #fff; }

.aecs-ma-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: 500px;
	padding: 70px 90px 50px;
	text-align: center;
	box-sizing: border-box;
}

.aecs-ma-logo { max-height: 72px; margin-bottom: 28px; }

.aecs-ma-heading-block { margin-bottom: 22px; }
.aecs-ma-heading {
	font-family: 'Poppins', var(--aecs-cert-font);
	font-weight: 700;
	font-size: 46px;
	letter-spacing: 0.18em;
	color: var(--aecs-ma-primary);
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
.aecs-ma-subheading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 10px;
}
.aecs-ma-subheading-line { width: 90px; height: 1px; background: var(--aecs-ma-secondary); }
.aecs-ma-subheading-text {
	font-family: 'Poppins', var(--aecs-cert-font);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.25em;
	color: var(--aecs-ma-secondary);
	text-transform: uppercase;
}

.aecs-ma-sub { font-family: 'Poppins', var(--aecs-cert-font); font-size: 16px; color: #444; margin: 4px 0 6px; }

.aecs-ma-name {
	font-family: var(--aecs-cert-name-font, 'Pinyon Script', cursive);
	font-size: 72px;
	font-weight: 400;
	color: var(--aecs-ma-primary);
	margin: 8px 0 14px;
	line-height: 1.4;
	padding: 0 20px;
}
.aecs-ma-name-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 380px;
	margin: 0 auto 22px;
}
.aecs-ma-name-rule-line { flex: 1; height: 1.5px; background: var(--aecs-ma-primary); }
.aecs-ma-name-rule-star { color: var(--aecs-ma-secondary); font-family: Arial, sans-serif; font-size: 13px; }

.aecs-ma-body {
	font-family: 'Poppins', var(--aecs-cert-font);
	font-size: 15px;
	color: #2a2a2a;
	line-height: 1.7;
	max-width: 720px;
}

.aecs-ma-meta-row {
	display: flex;
	gap: 50px;
	margin-top: 26px;
	font-family: 'Poppins', var(--aecs-cert-font);
}
.aecs-ma-meta-col { text-align: center; }
.aecs-ma-meta-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1a1a1a;
	border-bottom: 1.5px solid var(--aecs-ma-secondary);
	padding-bottom: 6px;
	margin-bottom: 6px;
}
.aecs-ma-meta-value { font-size: 14px; color: #2a2a2a; }

.aecs-ma-accreditation-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.aecs-ma-accreditation-row img { height: 46px; max-width: 130px; object-fit: contain; }

.aecs-ma-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	padding-top: 26px;
}
.aecs-ma-sign-block { text-align: center; min-width: 160px; }
.aecs-ma-sign-img { max-height: 44px; margin-bottom: 4px; }
.aecs-ma-sign-line { width: 160px; border-top: 1.5px solid var(--aecs-ma-secondary); margin: 6px auto 6px; }
.aecs-ma-sign-label { font-family: 'Poppins', var(--aecs-cert-font); font-size: 13px; color: #2a2a2a; }

.aecs-ma-seal-block { display: flex; align-items: center; justify-content: center; }
.aecs-ma-seal-block img { max-height: 110px; }

.aecs-ma-qr-block { text-align: center; }
.aecs-ma-qr-box {
	display: inline-block;
	padding: 8px;
	border: 2px solid var(--aecs-ma-secondary);
}
.aecs-ma-qr-box > div { width: 84px; height: 84px; }
.aecs-ma-qr-box > div canvas, .aecs-ma-qr-box > div img { width: 100% !important; height: 100% !important; }
.aecs-ma-qr-label { font-family: 'Poppins', var(--aecs-cert-font); font-size: 13px; color: #2a2a2a; margin-top: 8px; }

/* ---------------------------------------------------------------------
   Fixed-layout certificate used ONLY as the PDF capture source. This is
   rendered off-screen at one canonical pixel size (A4 landscape at a
   96dpi-equivalent reference: 1587 x 1123px) regardless of the visitor's
   device or viewport, so html2canvas always captures the exact same
   layout on desktop, Android, iPhone, tablet, and iPad. It is never
   shown on screen and is NEVER subject to the responsive @media rules
   below — it uses fixed pixel widths throughout, not percentages, so no
   viewport-based CSS can reflow it.
   ------------------------------------------------------------------ */
.aecs-certificate-pdf-fixed {
	--aecs-cert-accent: var(--aecs-gold);
	--aecs-cert-font: var(--aecs-font-display);
	position: absolute;
	top: -99999px;
	left: -99999px;
	width: 1587px;
	height: 1123px;
	background: var(--aecs-parchment) center/cover no-repeat;
	border: 6px solid var(--aecs-ink);
	border-radius: 0;
	padding: 90px 110px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}
.aecs-certificate-pdf-fixed .aecs-cr-logo { max-height: 100px; margin-bottom: 22px; }
.aecs-certificate-pdf-fixed .aecs-cr-heading { font-family: var(--aecs-cert-font); font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aecs-cert-accent); }
.aecs-certificate-pdf-fixed .aecs-cr-sub { font-size: 22px; color: var(--aecs-muted); margin-top: 22px; }
.aecs-certificate-pdf-fixed .aecs-cr-name { font-family: var(--aecs-cert-font); font-size: 58px; font-weight: 700; color: var(--aecs-ink); margin: 16px 0 22px; }
.aecs-certificate-pdf-fixed .aecs-cr-body { font-size: 23px; color: var(--aecs-text); max-width: 820px; line-height: 1.6; }
.aecs-certificate-pdf-fixed .aecs-cr-meta-row { display: flex; gap: 70px; margin-top: 40px; font-family: var(--aecs-font-mono); font-size: 19px; }
.aecs-certificate-pdf-fixed .aecs-cr-meta-label { display: block; color: var(--aecs-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.aecs-certificate-pdf-fixed .aecs-cr-meta-value { color: var(--aecs-ink); font-weight: 600; }
.aecs-certificate-pdf-fixed .aecs-cr-footer { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 50px; }
.aecs-certificate-pdf-fixed .aecs-cr-sign-block { text-align: center; min-width: 220px; }
.aecs-certificate-pdf-fixed .aecs-cr-sign-img { max-height: 66px; margin-bottom: 6px; }
.aecs-certificate-pdf-fixed .aecs-cr-sign-line { width: 220px; border-top: 1px solid var(--aecs-ink); margin: 6px auto; }
.aecs-certificate-pdf-fixed .aecs-cr-sign-label { font-size: 18px; color: var(--aecs-muted); }
.aecs-certificate-pdf-fixed .aecs-cr-qr-block { text-align: center; }
.aecs-certificate-pdf-fixed .aecs-cr-qr-block > div { width: 150px; height: 150px; }
.aecs-certificate-pdf-fixed .aecs-cr-qr-block > div canvas,
.aecs-certificate-pdf-fixed .aecs-cr-qr-block > div img { width: 100% !important; height: 100% !important; }
.aecs-certificate-pdf-fixed .aecs-cr-verify-text { font-size: 16px; color: var(--aecs-muted); margin-top: 8px; }
.aecs-certificate-pdf-fixed .aecs-cr-seal-block img { max-height: 120px; }

/* ---- Modern Achievement design, scaled for the fixed 1587x1123px PDF capture canvas ---- */
.aecs-certificate-pdf-fixed.is-modern-achievement {
	background: #fdfdfd;
	border: none;
	padding: 0;
}
.aecs-certificate-pdf-fixed .aecs-ma-frame { top: 30px; left: 30px; right: 30px; bottom: 30px; border-width: 2px; }
.aecs-certificate-pdf-fixed .aecs-ma-frame::before, .aecs-certificate-pdf-fixed .aecs-ma-frame::after { width: 38px; height: 38px; border-width: 3px; }
.aecs-certificate-pdf-fixed .aecs-ma-ribbon { width: 460px; height: 460px; }
.aecs-certificate-pdf-fixed .aecs-ma-ribbon .aecs-ma-stripe { top: -86px; left: -260px; width: 800px; height: 86px; }
.aecs-certificate-pdf-fixed .aecs-ma-ribbon .aecs-ma-stripe-1 { top: -130px; }
.aecs-certificate-pdf-fixed .aecs-ma-ribbon .aecs-ma-stripe-2 { top: -44px; height: 66px; }
.aecs-certificate-pdf-fixed .aecs-ma-ribbon .aecs-ma-star { top: 80px; left: 80px; width: 32px; height: 32px; }
.aecs-certificate-pdf-fixed .aecs-ma-content { padding: 100px 130px 70px; }
.aecs-certificate-pdf-fixed .aecs-ma-logo { max-height: 104px; margin-bottom: 40px; }
.aecs-certificate-pdf-fixed .aecs-ma-heading { font-size: 66px; }
.aecs-certificate-pdf-fixed .aecs-ma-subheading-line { width: 130px; }
.aecs-certificate-pdf-fixed .aecs-ma-subheading-text { font-size: 23px; }
.aecs-certificate-pdf-fixed .aecs-ma-sub { font-size: 23px; margin: 6px 0 8px; }
.aecs-certificate-pdf-fixed .aecs-ma-name { font-size: 104px; margin: 12px 0 20px; line-height: 1.4; }
.aecs-certificate-pdf-fixed .aecs-ma-name-rule { width: 550px; margin: 0 auto 32px; }
.aecs-certificate-pdf-fixed .aecs-ma-name-rule-star { font-size: 19px; }
.aecs-certificate-pdf-fixed .aecs-ma-body { font-size: 21px; max-width: 1040px; }
.aecs-certificate-pdf-fixed .aecs-ma-meta-row { gap: 72px; margin-top: 38px; }
.aecs-certificate-pdf-fixed .aecs-ma-meta-label { font-size: 17px; padding-bottom: 8px; margin-bottom: 8px; }
.aecs-certificate-pdf-fixed .aecs-ma-meta-value { font-size: 20px; }
.aecs-certificate-pdf-fixed .aecs-ma-accreditation-row { gap: 38px; margin-top: 32px; }
.aecs-certificate-pdf-fixed .aecs-ma-accreditation-row img { height: 66px; max-width: 190px; }
.aecs-certificate-pdf-fixed .aecs-ma-footer { padding-top: 38px; }
.aecs-certificate-pdf-fixed .aecs-ma-sign-block { min-width: 230px; }
.aecs-certificate-pdf-fixed .aecs-ma-sign-img { max-height: 64px; margin-bottom: 6px; }
.aecs-certificate-pdf-fixed .aecs-ma-sign-line { width: 230px; margin: 8px auto; }
.aecs-certificate-pdf-fixed .aecs-ma-sign-label { font-size: 19px; }
.aecs-certificate-pdf-fixed .aecs-ma-seal-block img { max-height: 160px; }
.aecs-certificate-pdf-fixed .aecs-ma-qr-box { padding: 12px; border-width: 3px; }
.aecs-certificate-pdf-fixed .aecs-ma-qr-box > div { width: 150px; height: 150px; }
.aecs-certificate-pdf-fixed .aecs-ma-qr-label { font-size: 19px; margin-top: 12px; }

/* ---- Verification page ---- */
.aecs-verify-card { max-width: 540px; margin: 0 auto; }
.aecs-field-hint-public { display: block; font-size: 11.5px; color: var(--aecs-muted); margin-top: 5px; }
.aecs-verify-result { margin-top: 22px; }
.aecs-verify-banner {
	font-family: var(--aecs-font-display);
	font-size: 17px;
	font-weight: 700;
	padding: 14px 16px;
	border-radius: 7px;
	margin-bottom: 16px;
	text-align: center;
}
.aecs-verify-valid { background: var(--aecs-success-soft); color: var(--aecs-success); }
.aecs-verify-invalid { background: var(--aecs-seal-soft); color: var(--aecs-seal); }

/* ---- Exam list cards ---- */
.aecs-exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.aecs-exam-card { border: 1px solid var(--aecs-line); border-radius: 8px; overflow: hidden; background: #fff; }
.aecs-exam-card-image { height: 140px; background-size: cover; background-position: center; background-color: var(--aecs-parchment); }
.aecs-exam-card-body { padding: 18px; }
.aecs-exam-card-body h3 { font-family: var(--aecs-font-display); font-size: 17px; color: var(--aecs-ink); margin: 0 0 8px; }
.aecs-exam-card-body p { font-size: 13px; color: var(--aecs-muted); margin: 0 0 12px; }
.aecs-exam-meta { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12px; color: var(--aecs-muted); font-family: var(--aecs-font-mono); }
.aecs-exam-meta li { margin-bottom: 3px; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.aecs-form-card { padding: 20px 18px; }
	.aecs-progress-label { display: none; }
	.aecs-progress-step { padding: 10px; flex: 0 0 auto; }
	.aecs-progress-rail { justify-content: space-between; }
	.aecs-field-row { flex-direction: column; }
	.aecs-cr-footer { flex-direction: column; gap: 16px; align-items: center; }
	.aecs-certificate-render { padding: 30px 22px; aspect-ratio: auto; }
	.aecs-exam-nav-row { flex-wrap: wrap; }
}

/* =========================================================================
   v2.0.0 — Student Approval & Email-Login Workflow
   Reuses every existing token/class above (form-card, btn-public, field-
   group, result-table, video-item, resource-link, etc.) so the new pages
   are visually identical to the legacy flow; only net-new layout pieces
   (5-step progress rail, success/denied states, logged-in student bar)
   are defined here.
   ========================================================================= */

.aecs-sw-wrap { padding-bottom: 10px; }

/* 5-step progress rail: same visual language as .aecs-progress-rail but
   with a connector line between dots, suited to a 5-step (vs 4-step) flow
   spread across separate pages rather than one single-page app. */
.aecs-sw-progress-rail {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	background: var(--aecs-parchment);
	border: 1px solid var(--aecs-line);
	border-radius: 14px;
	padding: 18px 16px 14px;
	margin-bottom: 28px;
}
.aecs-sw-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 56px;
}
.aecs-sw-progress-dot {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--aecs-line);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--aecs-font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--aecs-muted);
	transition: all .3s ease;
	flex-shrink: 0;
}
.aecs-sw-progress-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--aecs-muted);
	text-align: center;
	max-width: 76px;
	line-height: 1.25;
}
.aecs-sw-progress-connector {
	flex: 1 1 auto;
	height: 1.5px;
	background: var(--aecs-line);
	margin-top: 15px;
	min-width: 16px;
}
.aecs-sw-progress-connector.is-complete { background: var(--aecs-success); }

.aecs-sw-progress-step.is-active .aecs-sw-progress-dot {
	background: var(--aecs-ink);
	border-color: var(--aecs-ink);
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 4px 10px rgba(50,75,155,0.25);
}
.aecs-sw-progress-step.is-active .aecs-sw-progress-label { color: var(--aecs-ink); }

.aecs-sw-progress-step.is-complete .aecs-sw-progress-dot {
	background: var(--aecs-success);
	border-color: var(--aecs-success);
	color: #fff;
}
.aecs-sw-progress-step.is-complete .aecs-sw-progress-label { color: var(--aecs-success); }

/* Registration success state */
.aecs-sw-success-card { text-align: center; }
.aecs-sw-success-icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--aecs-success-soft);
	color: var(--aecs-success);
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	margin: 0 auto 14px;
}
.aecs-sw-success-card h3 { text-align: center; }
.aecs-sw-reg-number { font-family: var(--aecs-font-mono); font-size: 13px; color: var(--aecs-ink); font-weight: 600; margin-bottom: 18px; }

/* v2.2.0 — inline success state shown inside the Register form itself
   after a successful submission, replacing the form fields in place
   (rather than a brief auto-dismissing toast) so the required
   pending-approval message can actually be read at the student's own
   pace before they choose to continue. */
.aecs-sw-reg-success { text-align: center; padding: 6px 0 2px; animation: aecsFadeIn .3s ease; }
.aecs-sw-reg-success h3 { font-family: var(--aecs-font-display); font-size: 20px; color: var(--aecs-ink); margin: 0 0 10px; }
.aecs-sw-reg-success .aecs-sw-reg-message {
	color: var(--aecs-text);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0 0 24px;
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}

/* Access-denied / login-required state */
.aecs-sw-access-denied { text-align: center; }
.aecs-sw-denied-icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--aecs-seal-soft);
	color: var(--aecs-seal);
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
	margin: 0 auto 14px;
}
.aecs-sw-access-denied h3 { text-align: center; }
.aecs-sw-denied-message { color: var(--aecs-muted); margin-bottom: 18px; }
.aecs-sw-denied-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Logged-in student bar shown above the protected exam/result/dashboard pages */
.aecs-sw-student-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--aecs-paper);
	border: 1px solid var(--aecs-line);
	border-radius: 8px;
	padding: 10px 16px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--aecs-ink);
	font-weight: 600;
	flex-wrap: wrap;
}

.aecs-sw-login-footer { text-align: center; font-size: 13px; color: var(--aecs-muted); margin-top: 14px; }
.aecs-sw-login-footer a { color: var(--aecs-ink); font-weight: 600; }

.aecs-sw-cert-hint { font-size: 12.5px; color: var(--aecs-muted); text-align: center; margin-top: 10px; }
.aecs-sw-retake-info { font-size: 13.5px; color: var(--aecs-muted); margin-bottom: 14px; }

/* Tab pill count badge reused on the admin Exam Students screen description below */
.aecs-tab-count { opacity: 0.65; font-weight: 500; }

/* =========================================================================
   v2.2.0 — Single Unified Exam Shortcode
   Register/Login tabs, panel transitions, and small additions needed for
   the consolidated one-page flow. Reuses every token/class above (form-
   card, btn-public, field-group, video-item, result-table, sw-student-bar,
   sw-denied-*, etc.) so this looks identical in style to the rest of the
   plugin's UI.

   v2.2.2 — Auth card redesign: stronger tab contrast with a sliding
   indicator, a more confident card shell, bold/high-contrast buttons with
   real hover/active/loading states, and the required helper-text lines.
   Still 100% the same markup contract (#aecs-sw-tab-*, #aecs-sw-tabpanel-*,
   .is-active, data-tab, data-switch-tab) — student-flow.js is untouched.
   ========================================================================= */

.aecs-sw-panel { display: none; }
.aecs-sw-panel.is-active { display: block; animation: aecsFadeIn .3s cubic-bezier(.16,1,.3,1); }

/* ---- Auth card (Register / Login) — a distinct, branded shell around the
   tabs and forms, separate from the plain .aecs-form-card used elsewhere
   so the entry point to the whole flow has real visual presence. ---- */
.aecs-sw-auth-card {
	position: relative;
	background: var(--aecs-paper);
	border: 1px solid var(--aecs-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(20,42,94,0.04), 0 18px 44px -12px rgba(20,42,94,0.22);
	overflow: hidden;
	animation: aecsAuthCardIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes aecsAuthCardIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Thin brand-colour rule along the top edge — a quiet signature that reads
   as "official" without relying on imagery. */
.aecs-sw-auth-card::before {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--aecs-ink) 0%, var(--aecs-gold) 50%, var(--aecs-ink) 100%);
}

/* ---- Tab bar: a segmented control. The active tab gets a solid brand-
   colour fill that physically lifts (shadow + 1px translateY) above its
   sibling, so switching reads as one tab visibly taking focus rather than
   a flat colour swap. Pure CSS — no JS changes needed beyond toggling
   .is-active, which student-flow.js already does. ---- */
.aecs-sw-tabs {
	position: relative;
	display: flex;
	background: var(--aecs-parchment);
	border-bottom: 1px solid var(--aecs-line);
	padding: 7px;
	gap: 6px;
	margin-bottom: 0;
}
.aecs-sw-tab {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none !important;
	background: transparent !important;
	color: var(--aecs-muted) !important;
	font-family: var(--aecs-font-body);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0.01em;
	padding: 13px 14px;
	min-height: 46px;
	border-radius: 11px;
	cursor: pointer;
	transition: color .25s ease, transform .15s ease, background-color .2s ease;
	box-shadow: none;
}
.aecs-sw-tab .aecs-sw-tab-icon { display: flex; flex-shrink: 0; opacity: 0.85; transition: opacity .25s ease; }
.aecs-sw-tab .aecs-sw-tab-icon svg { stroke: currentColor !important; }
.aecs-sw-tab:hover { color: var(--aecs-ink) !important; }
.aecs-sw-tab:hover:not(.is-active) { background: rgba(50,75,155,0.07) !important; }
.aecs-sw-tab:active { transform: scale(0.98); }
.aecs-sw-tab:focus-visible { outline: 2px solid var(--aecs-ink); outline-offset: 2px; }

/* Inactive tab: soft, quiet, clearly "not selected". The !important pins
   below are deliberate — many WordPress themes / page-builder stylesheets
   ship a global `button { background: ...; color: ...; }` reset that is
   either more specific than a single plugin class or loaded after this
   stylesheet, which otherwise paints every <button> (including these
   tabs and the password show/hide toggle) with the theme's default solid
   button color, hiding the label/icon entirely. Pinning background/color/
   border here guarantees the tab looks the same on every site. */
.aecs-sw-tab:not(.is-active) { color: var(--aecs-muted) !important; background: transparent !important; }

/* Active tab: strong solid fill + white text + lift, unmistakably "current" */
.aecs-sw-tab.is-active {
	background: var(--aecs-ink) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px -4px rgba(50,75,155,0.45), 0 2px 4px rgba(20,42,94,0.18);
	transform: translateY(-1px);
}
.aecs-sw-tab.is-active .aecs-sw-tab-icon { opacity: 1; }
.aecs-sw-tab.is-active:hover { background: var(--aecs-ink) !important; }

.aecs-sw-tab-panel { animation: aecsTabIn .28s cubic-bezier(.16,1,.3,1); }
@keyframes aecsTabIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.aecs-sw-auth-card, .aecs-sw-tab-panel, .aecs-sw-panel.is-active { animation: none; }
	.aecs-sw-tab.is-active { transform: none; }
}

.aecs-sw-auth-form { padding: 30px 30px 28px; }

.aecs-sw-auth-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
}
.aecs-sw-auth-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--aecs-parchment);
	color: var(--aecs-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}
.aecs-sw-auth-head h3 { font-family: var(--aecs-font-display); font-size: 21px; color: var(--aecs-ink); margin: 0 0 5px; line-height: 1.25; }
.aecs-sw-auth-head .aecs-form-intro { margin: 0; line-height: 1.5; }

/* ---- Required helper notices: "Only admin-approved students can access
   the examination." / "After registration, your account must be approved
   by the admin..." Distinct from .aecs-notice (which is for outcomes
   like errors/success) — this is calm, informational, always-visible
   context, so it gets its own quieter "info" treatment. ---- */
.aecs-sw-helper-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	background: var(--aecs-parchment);
	border: 1px solid var(--aecs-line);
	border-radius: 10px;
	padding: 11px 13px;
	margin: 0 0 22px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--aecs-ink-soft);
}
.aecs-sw-helper-note svg { flex-shrink: 0; margin-top: 1px; color: var(--aecs-ink); }

/* ---- Input icons + password visibility toggle ---- */
.aecs-input-icon-wrap { position: relative; }
.aecs-input-icon-wrap input { padding-left: 40px; }
.aecs-input-icon {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--aecs-muted);
	display: flex;
	pointer-events: none;
}
.aecs-input-icon-wrap input[type="password"],
.aecs-input-icon-wrap input[data-pw-visible] { padding-right: 42px; }
.aecs-pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* !important: guards against theme/page-builder global `button{}`
	   resets that otherwise paint this as a solid colored block and hide
	   the eye icon — see the matching note above .aecs-sw-tab. */
	background: transparent !important;
	border: none !important;
	border-radius: 6px;
	color: var(--aecs-muted) !important;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
}
.aecs-pw-toggle svg { stroke: currentColor !important; }
.aecs-pw-toggle:hover { color: var(--aecs-ink) !important; background: var(--aecs-parchment) !important; }
.aecs-pw-toggle:focus-visible { outline: 2px solid var(--aecs-ink); outline-offset: 1px; }

.aecs-btn-lg { padding: 16px 24px; font-size: 16px; }
.aecs-btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* ---- Button polish: bigger/bolder text, real hover lift, active press,
   and a loading state (spinner + dimmed label) driven by [data-loading],
   so JS only needs to toggle one attribute instead of writing inline
   styles. Background/color/border for each variant are pinned once,
   above, with !important — this block only adds shadow/motion, so there
   is a single source of truth for color and no risk of it drifting out
   of sync with the guarded declarations. ---- */
.aecs-btn-public {
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 1px 2px rgba(20,42,94,0.06);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease,
		box-shadow .18s ease, transform .12s ease;
}
.aecs-btn-public-primary:hover:not(:disabled) {
	box-shadow: 0 8px 18px -6px rgba(50,75,155,0.5);
	transform: translateY(-1px);
}
.aecs-btn-public-primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(50,75,155,0.35);
}
.aecs-btn-public-outline:hover:not(:disabled) {
	transform: translateY(-1px);
}
.aecs-btn-public-outline:active:not(:disabled) { transform: translateY(0); }
.aecs-btn-public-accent:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(179,38,30,0.45); }
.aecs-btn-public-accent:active:not(:disabled) { transform: translateY(0); }

/* Loading state: set by JS via $btn.attr('data-loading','1') alongside
   .prop('disabled', true). Keeps the button's footprint stable (no text
   reflow) and gives clear "something is happening" feedback. Overrides
   the generic :disabled greying-out above — a button that's working is
   a different state from a button that's unavailable, and should keep
   its brand color so the spinner reads as "in progress", not "blocked". */
.aecs-btn-public[data-loading="1"]:disabled {
	cursor: progress;
}
.aecs-btn-public-primary[data-loading="1"]:disabled {
	background: var(--aecs-ink) !important;
	border-color: var(--aecs-ink) !important;
	color: transparent !important;
}
.aecs-btn-public-accent[data-loading="1"]:disabled {
	background: var(--aecs-seal) !important;
	border-color: var(--aecs-seal) !important;
	color: transparent !important;
}
.aecs-btn-public-outline[data-loading="1"]:disabled {
	background: transparent !important;
	border-color: var(--aecs-line) !important;
	color: transparent !important;
}
.aecs-btn-public[data-loading="1"] {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}
.aecs-btn-public[data-loading="1"]::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	top: 50%;
	left: 50%;
	margin: -9px 0 0 -9px;
	border: 2.5px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: aecsSpin .7s linear infinite;
}
.aecs-btn-public-outline[data-loading="1"]::after {
	border-color: rgba(50,75,155,0.25);
	border-top-color: var(--aecs-ink);
}
@keyframes aecsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.aecs-btn-public { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
	.aecs-btn-public:hover:not(:disabled), .aecs-btn-public:active:not(:disabled) { transform: none; }
}

/* Status badges (approval status, pass/fail, etc.) — shares the same
   visual language and color tokens as the admin Student Management
   badges, ported here since AECS_Helpers::status_badge() is also used on
   this public-facing unified exam page (the logged-in student bar). */
.aecs-badge {
	display: inline-block;
	font-family: var(--aecs-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 3px 9px;
	border-radius: 100px;
	text-transform: uppercase;
}
.aecs-badge-success { background: var(--aecs-success-soft); color: var(--aecs-success); }
.aecs-badge-danger  { background: var(--aecs-seal-soft); color: var(--aecs-seal); }
.aecs-badge-muted   { background: var(--aecs-line-soft, #F0F1F5); color: var(--aecs-muted); }
.aecs-badge-warning { background: var(--aecs-warning-soft, #FBEED7); color: var(--aecs-warning, #92620A); }

.aecs-sw-student-bar .aecs-badge { margin-left: 8px; vertical-align: middle; }

/* Tab pill count badge reused on the admin Exam Students screen description below */
.aecs-tab-count { opacity: 0.65; font-weight: 500; }

/* Tablet: card gets a touch tighter, still two-column field rows */
@media (max-width: 760px) {
	.aecs-sw-auth-card { border-radius: 16px; }
	.aecs-sw-auth-form { padding: 26px 24px 24px; }
}

/* Mobile: stack everything, full-width tappable tabs/buttons, larger
   minimum tap targets per touch-accessibility guidance (>=44px). Tab
   label font-size uses clamp() so it scales smoothly across the whole
   320–600px mobile range instead of jumping at a couple of fixed
   breakpoints — that jumpiness was the root cause of "Student
   Registration" wrapping to two cramped lines while "Student Login"
   stayed on one (uneven, looked broken) on common 360–414px phones. */
@media (max-width: 600px) {
	.aecs-sw-auth-card { border-radius: 14px; }
	.aecs-sw-tabs { padding: 4px; gap: 4px; }
	.aecs-sw-tab {
		font-size: clamp(10.5px, 3.1vw, 13px);
		padding: 10px 4px;
		min-height: 46px;
		gap: 4px;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}
	.aecs-sw-tab .aecs-sw-tab-icon svg { width: 13px; height: 13px; }
	.aecs-sw-auth-form { padding: 22px 18px 20px; }
	.aecs-sw-auth-head { gap: 12px; margin-bottom: 18px; }
	.aecs-sw-auth-icon { width: 38px; height: 38px; }
	.aecs-sw-auth-head h3 { font-size: 19px; }
	.aecs-sw-helper-note { font-size: 12px; padding: 10px 12px; margin-bottom: 18px; }
	.aecs-field-row { flex-direction: column; gap: 0; }
	.aecs-btn-lg { padding: 15px 20px; font-size: 15px; }
}

/* Narrow phones (iPhone SE/Mini and smaller, small Android): drop the
   icon entirely so all the width goes to the label, and let the label
   wrap to two centered lines on its own terms — both tabs wrap the same
   way at this width, so they stay visually balanced rather than one
   tab wrapping and the other not. */
@media (max-width: 400px) {
	.aecs-sw-tab .aecs-sw-tab-icon { display: none; }
	.aecs-sw-tab { font-size: clamp(11px, 3.6vw, 13px); padding: 9px 3px; }
}

@media (max-width: 330px) {
	.aecs-sw-tab { font-size: 10.5px; padding: 8px 2px; min-height: 42px; }
}