/* Saifi LMS — Level Evaluation form
 * All rules scoped under .saifi-eval-shell to avoid bleeding into the active theme.
 */

.saifi-eval-shell {
	max-width: 760px;
	margin: 40px auto;
	padding: 32px 28px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	font-family: 'Gloriola-Regular', sans-serif;
	color: #1f2937;
	line-height: 1.55;
}
.saifi-eval-shell *,
.saifi-eval-shell *::before,
.saifi-eval-shell *::after {
	box-sizing: border-box;
}

/* ----- Header ----- */
.saifi-eval-header { text-align: center; margin-bottom: 24px; }
.saifi-eval-title {
	margin: 0 0 6px 0;
	font-size: 26px;
	font-weight: 600;
	color: var(--saifi-primary, #003B5C);
}
.saifi-eval-subtitle {
	margin: 0;
	color: #6b7280;
	font-size: 15px;
}

/* ----- Banners ----- */
.saifi-eval-banner {
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 22px;
	font-size: 14px;
}
.saifi-eval-banner strong { display: block; margin-bottom: 4px; font-size: 15px; }
.saifi-eval-banner p { margin: 4px 0 0 0; }
.saifi-eval-banner-reason {
	margin: 10px 0 6px 0;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid currentColor;
	border-radius: 4px;
	color: inherit;
	font-size: 14px;
	font-style: normal !important;
	font-weight: 400;
	font-family: inherit !important;
	text-align: left !important;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}
.saifi-eval-banner-reason::before,
.saifi-eval-banner-reason::after {
	content: none !important;
}
.saifi-eval-banner-info {
	background: #eef6fb;
	color: var(--saifi-primary-dark, #00324f);
	border: 1px solid #cfe3ee;
}
.saifi-eval-banner-warning {
	background: #fff8e6;
	color: #92580a;
	border: 1px solid #f4d985;
}

/* ----- Progress bar ----- */
.saifi-eval-progress { margin-bottom: 28px; }
.saifi-eval-progress-bar {
	height: 6px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 14px;
}
.saifi-eval-progress-fill {
	height: 100%;
	background: var(--saifi-accent, #F2A900);
	transition: width 240ms ease-out;
}
.saifi-eval-progress-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.saifi-eval-step-label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	color: #9ca3af;
	font-size: 13px;
}
.saifi-eval-step-label .saifi-eval-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	flex-shrink: 0;
}
.saifi-eval-step-label.active { color: var(--saifi-primary, #003B5C); font-weight: 500; }
.saifi-eval-step-label.active .saifi-eval-step-num { background: var(--saifi-primary, #003B5C); color: #fff; }
.saifi-eval-step-label.done .saifi-eval-step-num { background: var(--saifi-accent, #F2A900); color: #fff; }
.saifi-eval-step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- Steps & fields ----- */
.saifi-eval-step { animation: saifiEvalFade 240ms ease-out; }
@keyframes saifiEvalFade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.saifi-eval-step-title {
	margin: 0 0 6px 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--saifi-primary, #003B5C);
}
.saifi-eval-step-intro {
	margin: 0 0 18px 0;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.55;
}

.saifi-eval-field { margin-bottom: 20px; }
.saifi-eval-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 14px;
	color: #374151;
}
.saifi-eval-required-mark { color: #d33b2c; margin-left: 3px; }
.saifi-eval-help {
	margin: 0 0 8px 0;
	color: #6b7280;
	font-size: 13px;
}

.saifi-eval-input {
	width: 100%;
	padding: 11px 14px;
	font-size: 15px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font-family: inherit;
	transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.saifi-eval-input:focus {
	outline: none;
	border-color: var(--saifi-primary, #003B5C);
	box-shadow: 0 0 0 3px rgba(0, 59, 92, 0.12);
}
.saifi-eval-textarea { resize: vertical; min-height: 100px; }
.saifi-eval-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

/* Choice groups (radio / checkbox) — stacked vertically, one option per row */
.saifi-eval-choice-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.saifi-eval-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: background 120ms, border-color 120ms;
	user-select: none;
}
.saifi-eval-choice:hover { background: #f9fafb; }
.saifi-eval-choice input { margin: 0; accent-color: var(--saifi-primary, #003B5C); }
.saifi-eval-choice input:checked + .saifi-eval-choice-label { color: var(--saifi-primary, #003B5C); font-weight: 500; }
.saifi-eval-choice:has(input:checked) { border-color: var(--saifi-primary, #003B5C); background: rgba(0, 59, 92, 0.04); }

/* Field-level errors */
.saifi-eval-field.has-error .saifi-eval-input,
.saifi-eval-field.has-error .saifi-eval-choice-group { border-color: #d33b2c; }
.saifi-eval-field.has-error .saifi-eval-input:focus { box-shadow: 0 0 0 3px rgba(211, 59, 44, 0.15); }
.saifi-eval-field-error {
	margin: 6px 0 0 0;
	color: #d33b2c;
	font-size: 13px;
	min-height: 1em;
}

/* Form-level error */
.saifi-eval-form-error {
	margin-bottom: 18px;
	padding: 12px 16px;
	background: #fdecea;
	color: #a82c1f;
	border: 1px solid #f4c4be;
	border-radius: 8px;
	font-size: 14px;
}

/* ----- Actions ----- */
.saifi-eval-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid #f0f1f3;
}
.saifi-eval-actions :only-child { margin-left: auto; }

.saifi-eval-btn {
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms ease-out, transform 80ms ease-out;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	line-height: 1.2;
}
.saifi-eval-btn:active { transform: translateY(1px); }
.saifi-eval-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.saifi-eval-btn-primary {
	background: var(--saifi-primary, #003B5C);
	color: #fff;
}
.saifi-eval-btn-primary:hover:not(:disabled) { background: #F2A900; color:#fff }

.saifi-eval-btn-ghost {
	background: #fff;
	color: #374151;
	border-color: #d1d5db;
}
.saifi-eval-btn-ghost:hover { background: #f9fafb; }

/* ----- Notice screens (login wall / pending / approved) ----- */
.saifi-eval-notice { text-align: center; padding: 48px 32px; }
.saifi-eval-notice-title {
	margin: 0 0 10px 0;
	font-size: 22px;
	font-weight: 600;
	color: var(--saifi-primary, #003B5C);
}
.saifi-eval-notice-text {
	margin: 0 auto 22px auto;
	max-width: 460px;
	color: #4b5563;
	font-size: 15px;
}
.saifi-eval-notice-success .saifi-eval-notice-title { color: #15803d; }

/* ----- Responsive ----- */
@media (max-width: 600px) {
	.saifi-eval-shell { margin: 20px 12px; padding: 24px 18px; border-radius: 12px; }
	.saifi-eval-title { font-size: 22px; }
	.saifi-eval-step-name { display: none; }
	.saifi-eval-progress-steps { justify-content: flex-start; gap: 6px; }
	.saifi-eval-step-label { flex: 0 0 auto; }
	.saifi-eval-actions { flex-direction: column-reverse; }
	.saifi-eval-actions :only-child { margin-left: 0; }
}

/* "Complete beginner" stop panel — shown when the first-step question is answered
   "No, I am a complete beginner" (see saifi-eval.js). Reuses .saifi-eval-notice. */
.saifi-eval-beginner-stop{border:1px solid #cfe3fb;background:#eef6ff;}
.saifi-eval-beginner-stop .saifi-eval-notice-title{color:#1d4ed8;}