/* ****************************************

	Code created by Serge Soudoplatoff
	Copyright 2026 -

	Survey (certificate claim) page.
	Graphic chart aligned on www.mentia.me:
	cream background, navy primary, orange accent, Roboto, pill buttons,
	soft navy shadows and the Mentia arch motif.
	*/

:root {
	/* ---- mentia.me palette (Elementor global colors) */
	--m-primary: #22376F;
	--m-navydeep: #1A2A55;
	--m-secondary: #1B5E9B;
	--m-accent: #D2682E;
	--m-orangedeep: #B9531F;
	--m-marigold: #F5B324;
	--m-cream: #FAF7F1;
	--m-sky: #A3C0DB;
	--m-skytint: #EEF3F8;
	--m-text: #1A2238;
	--m-muted: #5B6478;
	--m-white: #FFFFFF;
	--m-line: rgba(34, 55, 111, .12);
	--m-danger: #B42318;

	--m-shadow: 0 12px 34px -24px rgba(34, 55, 111, .45);
	--m-shadow-lg: 0 24px 60px -30px rgba(34, 55, 111, .55);
	--m-radius: 14px;
	--m-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* ---- legacy names still used by the js */
	--mentia-blue: var(--m-primary);
	--mentia-orange: var(--m-accent);

	/* ---- bootstrap overrides */
	--bs-body-font-family: var(--m-font);
	--bs-body-color: var(--m-text);
	--bs-body-bg: var(--m-cream);
	--bs-link-color: var(--m-secondary);
	--bs-link-color-rgb: 27, 94, 155;
	--bs-link-hover-color: var(--m-accent);
	--bs-border-color: rgba(34, 55, 111, .18);
	--bs-focus-ring-color: rgba(210, 104, 46, .25);
}

/***** base *****/
html, body { min-height: 100%; overflow-x: clip; }
html { scroll-padding-top: 90px; scroll-padding-bottom: 120px; }

body {
	font-family: var(--m-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--m-text);
	background:
		radial-gradient(1200px 600px at 100% -10%, rgba(163, 192, 219, .28), transparent 60%),
		radial-gradient(900px 500px at -10% 30%, rgba(245, 179, 36, .10), transparent 60%),
		var(--m-cream);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--m-primary); font-weight: 700; }

/***** buttons: pills, as on mentia.me *****/
.btn {
	--bs-btn-font-weight: 500;
	--bs-btn-border-radius: 999px;
	--bs-btn-border-width: 2px;
	--bs-btn-padding-x: 1.4rem;
	--bs-btn-padding-y: .6rem;
	--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(210, 104, 46, .25);
	letter-spacing: .01em;
	transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1.05rem; }

.btn-primary, .btn-accent {
	--bs-btn-bg: var(--m-accent);
	--bs-btn-border-color: var(--m-accent);
	--bs-btn-hover-bg: var(--m-orangedeep);
	--bs-btn-hover-border-color: var(--m-orangedeep);
	--bs-btn-active-bg: var(--m-orangedeep);
	--bs-btn-active-border-color: var(--m-orangedeep);
	--bs-btn-disabled-bg: var(--m-accent);
	--bs-btn-disabled-border-color: var(--m-accent);
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
	box-shadow: 0 10px 24px -14px rgba(185, 83, 31, .8);
}
.btn-navy {
	--bs-btn-bg: var(--m-primary);
	--bs-btn-border-color: var(--m-primary);
	--bs-btn-hover-bg: var(--m-navydeep);
	--bs-btn-hover-border-color: var(--m-navydeep);
	--bs-btn-active-bg: var(--m-navydeep);
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-navy, .btn-secondary, .btn-light {
	--bs-btn-bg: transparent;
	--bs-btn-color: var(--m-primary);
	--bs-btn-border-color: rgba(34, 55, 111, .2);
	--bs-btn-hover-bg: var(--m-skytint);
	--bs-btn-hover-color: var(--m-primary);
	--bs-btn-hover-border-color: rgba(34, 55, 111, .35);
	--bs-btn-active-bg: var(--m-skytint);
	--bs-btn-active-color: var(--m-primary);
	--bs-btn-active-border-color: rgba(34, 55, 111, .35);
}
.btn-link { --bs-btn-color: var(--m-secondary); --bs-btn-hover-color: var(--m-accent); text-decoration: none; padding-left: 0; padding-right: 0; }

/***** forms *****/
.form-control, .form-select {
	border-radius: 10px;
	border: 1.5px solid rgba(34, 55, 111, .18);
	padding: .7rem .9rem;
	background-color: #fff;
	color: var(--m-text);
	font-size: 1rem;
}
.form-control:focus, .form-select:focus {
	border-color: var(--m-accent);
	box-shadow: 0 0 0 .25rem rgba(210, 104, 46, .15);
}
.form-check-input { border: 1.5px solid rgba(34, 55, 111, .35); width: 1.2em; height: 1.2em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--m-accent); border-color: var(--m-accent); }
.form-check-input:focus { border-color: var(--m-accent); box-shadow: 0 0 0 .25rem rgba(210, 104, 46, .2); }
.form-check { margin-bottom: .35rem; }
.form-check-label { cursor: pointer; }

/***** typography helpers from mentia.me *****/
.m-kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.3px;
	text-transform: uppercase;
	color: var(--m-accent);
	margin-bottom: .75rem;
}
.m-kicker::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--m-accent);
}
.m-lead { font-size: 1.15rem; line-height: 1.6; color: var(--m-muted); max-width: 46rem; }
.m-muted { color: var(--m-muted); }

/* the arch motif (inline svg, see mentia.me) */
.m-arch { display: inline-block; width: 1.1em; height: 1.1em; flex: none; }
.m-arch svg { width: 100%; height: 100%; display: block; }

/***** header *****/
.m-header {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: rgba(250, 247, 241, .85);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--m-line);
}
.m-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}
.m-logo { height: 28px; width: auto; display: block; }
.m-user {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .9rem .35rem .35rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--m-shadow);
	font-weight: 500;
	color: var(--m-primary);
	font-size: .95rem;
	max-width: 60vw;
}
.m-user:empty { display: none; }
.m-avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--m-primary);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: .85rem;
	font-weight: 700;
	flex: none;
}
.m-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/***** layout *****/
.m-main { padding: 48px 0 120px; }
.m-wrap { max-width: 880px; margin: 0 auto; }

.m-hero { position: relative; margin-bottom: 36px; }
.m-hero h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.08;
	letter-spacing: -1.2px;
	margin-bottom: 1rem;
}
.m-hero h1 em { font-style: normal; color: var(--m-accent); }
.m-hero-arch {
	position: absolute;
	right: 0;
	top: 6px;
	width: 120px;
	height: 120px;
	opacity: .16;
	pointer-events: none;
	color: var(--m-accent);
}
.m-module-chip {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-top: .5rem;
	padding: .55rem 1rem;
	background: var(--m-skytint);
	border-radius: 999px;
	color: var(--m-primary);
	font-weight: 500;
	font-size: .95rem;
}
.m-module-chip i { color: var(--m-secondary); }

/***** steps *****/
.m-steps {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	counter-reset: step;
}
.m-steps li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .9rem;
	font-weight: 500;
	color: var(--m-muted);
	padding-top: 12px;
	border-top: 3px solid rgba(34, 55, 111, .12);
	counter-increment: step;
}
.m-steps li::before {
	content: counter(step);
	width: 26px; height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: .8rem;
	font-weight: 700;
	background: rgba(34, 55, 111, .1);
	color: var(--m-primary);
	flex: none;
}
.m-steps li.active { color: var(--m-primary); border-top-color: var(--m-accent); }
.m-steps li.active::before { background: var(--m-accent); color: #fff; }
.m-steps li.done { color: var(--m-primary); border-top-color: var(--m-primary); }
.m-steps li.done::before { content: "\2713"; background: var(--m-primary); color: #fff; }

/***** cards *****/
.m-card {
	background: #fff;
	border-radius: var(--m-radius);
	box-shadow: var(--m-shadow);
	padding: 28px 32px;
	margin-bottom: 20px;
}
.m-card-title {
	display: flex;
	align-items: center;
	gap: .65rem;
	font-size: 1.35rem;
	letter-spacing: -.4px;
	margin: 0 0 4px;
}
.m-card-title .m-arch { color: var(--m-accent); }
.m-card-sub { color: var(--m-muted); font-size: .95rem; margin-bottom: 18px; }

/***** certificate choice (radio cards) *****/
.m-choices { display: grid; gap: 14px; }
.m-choice {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px 22px;
	background: #fff;
	border: 2px solid transparent;
	border-radius: var(--m-radius);
	box-shadow: var(--m-shadow);
	cursor: pointer;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.m-choice:hover { transform: translateY(-2px); box-shadow: var(--m-shadow-lg); }
.m-choice input { position: absolute; opacity: 0; pointer-events: none; }
.m-choice-icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	background: var(--m-skytint);
	color: var(--m-primary);
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	flex: none;
}
.m-choice-name { font-weight: 700; color: var(--m-primary); font-size: 1.1rem; line-height: 1.3; }
.m-choice-descr { color: var(--m-muted); font-size: .95rem; margin-top: 4px; white-space: pre-line; }
.m-choice-check {
	margin-left: auto;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2px solid rgba(34, 55, 111, .25);
	flex: none;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: .75rem;
}
.m-choice:has(input:checked),
.m-choice.selected { border-color: var(--m-accent); }
.m-choice:has(input:checked) .m-choice-check,
.m-choice.selected .m-choice-check { background: var(--m-accent); border-color: var(--m-accent); }
.m-choice:has(input:focus-visible) { outline: 3px solid rgba(210, 104, 46, .35); outline-offset: 2px; }

/***** the survey form (generated by CPGlob.js / display_survey) *****/
.m-form-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.m-form-head h2 { font-size: 1.6rem; letter-spacing: -.6px; margin: 0; }

.r_group { border: 0; }
.m-card.r_group { margin: 0 0 20px; }
.r_quest {
	display: block;
	width: auto;
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--m-line);
	--bs-gutter-x: 0;
}
.m-card-title + .r_quest,
.m-card-sub + .r_quest { border-top: 0; padding-top: 4px; }
.m-card-title + .r_quest { margin-top: 14px; }
.r_quest > .form-label,
.r_quest .m-qlabel {
	display: block;
	font-weight: 500;
	color: var(--m-text);
	margin-bottom: .6rem;
	line-height: 1.45;
}
.m-req {
	display: inline-block;
	margin-left: .4rem;
	padding: .05rem .5rem;
	border-radius: 999px;
	background: rgba(210, 104, 46, .1);
	color: var(--m-orangedeep);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: .15em;
}
.r_quest.m-invalid .form-control,
.r_quest.m-invalid .m-scale label { border-color: var(--m-danger); }
.r_quest.m-invalid > .form-label,
.r_quest.m-invalid .m-qlabel { color: var(--m-danger); }

/* radio/checkbox lists as tappable rows */
.r_quest .form-check {
	padding: .55rem .9rem .55rem 2.6rem;
	border: 1.5px solid rgba(34, 55, 111, .14);
	border-radius: 10px;
	margin-bottom: .5rem;
	transition: border-color .15s, background-color .15s;
}
.r_quest .form-check:hover { border-color: rgba(34, 55, 111, .3); }
.r_quest .form-check:has(.form-check-input:checked) { border-color: var(--m-accent); background: rgba(210, 104, 46, .05); }
.r_quest .form-check .form-check-input { margin-left: -1.75rem; }

/* scale as pill segments */
.m-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.m-scale input { position: absolute; opacity: 0; pointer-events: none; }
.m-scale label {
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1.5px solid rgba(34, 55, 111, .2);
	background: #fff;
	font-weight: 500;
	color: var(--m-primary);
	cursor: pointer;
	transition: all .15s;
	user-select: none;
}
.m-scale label:hover { border-color: var(--m-primary); }
.m-scale input:checked + label { background: var(--m-primary); border-color: var(--m-primary); color: #fff; }
.m-scale input:focus-visible + label { outline: 3px solid rgba(210, 104, 46, .35); outline-offset: 2px; }
.m-scale-legend { display: flex; justify-content: space-between; font-size: .8rem; color: var(--m-muted); margin-top: .4rem; max-width: 100%; padding: 0 4px; }

.zzdisp { font-weight: 500; color: var(--m-primary); }

/***** sticky submit bar *****/
.m-submitbar {
	position: sticky;
	bottom: 16px;
	z-index: 1010;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding: 14px 16px 14px 24px;
	background: var(--m-primary);
	color: #fff;
	border-radius: 999px;
	box-shadow: var(--m-shadow-lg);
}
.m-progress { display: flex; align-items: center; gap: 12px; font-size: .95rem; min-width: 0; }
.m-progress-bar {
	width: 140px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	overflow: hidden;
	flex: none;
}
.m-progress-bar span { display: block; height: 100%; width: 0; background: var(--m-marigold); border-radius: 999px; transition: width .25s; }

/***** state screens (loading / done / error) *****/
.m-state { text-align: center; padding: 56px 32px; }
.m-state-icon {
	width: 84px; height: 84px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 2rem;
	background: var(--m-skytint);
	color: var(--m-primary);
}
.m-state-icon.ok { background: rgba(34, 55, 111, .08); color: var(--m-primary); }
.m-state-icon.warn { background: rgba(210, 104, 46, .12); color: var(--m-accent); }
.m-state h2 { font-size: 1.8rem; letter-spacing: -.6px; margin-bottom: .6rem; }
.m-state p { color: var(--m-muted); max-width: 32rem; margin: 0 auto 1.4rem; }

.m-spinner {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 4px solid var(--m-skytint);
	border-top-color: var(--m-accent);
	animation: m-spin .9s linear infinite;
	margin: 0 auto;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

.m-skel { height: 18px; border-radius: 8px; background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 50%, #eef1f6 75%); background-size: 200% 100%; animation: m-shine 1.2s infinite; margin-bottom: 12px; }
@keyframes m-shine { to { background-position: -200% 0; } }

/***** debug detail (test only) *****/
.m-debug { border-left: 4px solid var(--m-danger); }
.m-debug pre, .m-debug-pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 360px; overflow: auto; margin: 0; color: var(--m-text); background: #f6f3ee; padding: 12px; border-radius: 8px; }

/***** footer *****/
.m-footer { text-align: center; color: var(--m-muted); font-size: .85rem; padding: 0 0 32px; }
.m-footer a { color: var(--m-muted); }

/***** bootbox / bootstrap modals *****/
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--m-shadow-lg); overflow: hidden; }
.modal-header { background: var(--m-cream); border-bottom: 1px solid var(--m-line); padding: 18px 24px; }
.modal-title, .modal-title h4 { color: var(--m-primary); font-weight: 700; font-size: 1.2rem; margin: 0; }
.modal-body { padding: 22px 24px; }
.modal-footer { border-top: 0; padding: 0 24px 22px; gap: 8px; }
.modal-footer .btn { margin: 0; }

/***** fade-in for injected content *****/
.m-fade { animation: m-fade .35s ease both; }
@keyframes m-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/***** responsive *****/
@media (max-width: 767.98px) {
	body { font-size: 16px; }
	.m-main { padding: 28px 0 100px; }
	.m-card { padding: 22px 18px; border-radius: 12px; }
	.m-header-inner { min-height: 60px; }
	.m-logo { height: 22px; }
	.m-steps li span { display: none; }
	.m-steps li { justify-content: center; }
	.m-hero-arch { width: 72px; height: 72px; top: 0; }
	.m-hero .m-lead { font-size: 1.05rem; }
	.m-user { max-width: 52vw; }
	.m-submitbar { border-radius: 20px; padding: 14px 16px; }
	.m-submitbar .btn { width: 100%; }
	.m-progress { width: 100%; }
	.m-progress-bar { flex: 1; width: auto; }
	.m-scale label { min-width: 44px; height: 44px; }
	.m-choice { padding: 16px; gap: 12px; }
	.m-choice-icon { width: 40px; height: 40px; font-size: 1.1rem; }
	.m-state { padding: 40px 12px; }
}

@media (max-width: 400px) {
	.m-user { padding-right: .35rem; }
	.m-user-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}