/* =========================================================
   TariffWolf MCQ — front-end
   Inherits the TradeComply palette (navy #0D1B2A / orange #F97316).
   Falls back to literal values if the theme variables are absent.
   ========================================================= */
.tcmcq-app {
	--tcmcq-navy:    var(--navy, #0D1B2A);
	--tcmcq-navy-700:var(--navy-700, #243f61);
	--tcmcq-orange:  var(--orange, #F97316);
	--tcmcq-orange-600: var(--orange-600, #EA6C10);
	--tcmcq-white:   #ffffff;
	--tcmcq-gray-50: var(--gray-50, #f8fafc);
	--tcmcq-gray-100:var(--gray-100, #f1f5f9);
	--tcmcq-gray-200:var(--gray-200, #e2e8f0);
	--tcmcq-text:    var(--text, #1e293b);
	--tcmcq-muted:   var(--text-muted, #64748b);
	--tcmcq-border:  var(--border, #e2e8f0);
	--tcmcq-radius:  var(--radius, 8px);
	--tcmcq-radius-lg: var(--radius-lg, 14px);
	--tcmcq-shadow:  var(--shadow, 0 4px 20px rgba(0,0,0,.10));

	max-width: 760px;
	margin: 0 auto;
	color: var(--tcmcq-text);
	font-size: 1rem;
	line-height: 1.7;
}

/* Stages -------------------------------------------------- */
.tcmcq-stage { animation: tcmcq-fade .35s ease; }
.tcmcq-stage[hidden] { display: none; }
@keyframes tcmcq-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Panel --------------------------------------------------- */
.tcmcq-panel {
	background: var(--tcmcq-white);
	border: 1px solid var(--tcmcq-border);
	border-radius: var(--tcmcq-radius-lg);
	box-shadow: var(--tcmcq-shadow);
	padding: 32px;
}
@media (max-width: 640px) { .tcmcq-panel { padding: 22px; } }

.tcmcq-eyebrow {
	display: inline-block;
	font-size: .75rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--tcmcq-orange); margin-bottom: 10px;
}
.tcmcq-h {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 700; line-height: 1.2;
	color: var(--tcmcq-navy);
	letter-spacing: -.02em; margin: 0 0 10px;
}
.tcmcq-lead { color: var(--tcmcq-muted); margin: 0 0 22px; }

/* Registration form -------------------------------------- */
.tcmcq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.tcmcq-label-full { grid-column: 1 / -1; }
@media (max-width: 560px) {
	.tcmcq-grid { grid-template-columns: 1fr; }
	.tcmcq-label-full { grid-column: auto; }
}
.tcmcq-label {
	display: flex; flex-direction: column; gap: 7px;
	font-size: .8125rem; font-weight: 600; color: var(--tcmcq-navy);
}
.tcmcq-star { color: var(--tcmcq-orange); }
.tcmcq-input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--tcmcq-border);
	border-radius: var(--tcmcq-radius);
	background: var(--tcmcq-white);
	font-size: .95rem; color: var(--tcmcq-text);
	font-weight: 400;
	transition: border-color .15s, box-shadow .15s;
}
.tcmcq-input:focus {
	outline: none;
	border-color: var(--tcmcq-orange);
	box-shadow: 0 0 0 3px rgba(249,115,22,.14);
}
.tcmcq-input.tcmcq-invalid {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

/* Buttons ------------------------------------------------- */
.tcmcq-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 13px 30px;
	border-radius: var(--tcmcq-radius);
	font-size: .95rem; font-weight: 600;
	border: 2px solid transparent; cursor: pointer;
	transition: all .18s ease; margin-top: 22px;
	font-family: inherit;
}
.tcmcq-btn-primary {
	background: var(--tcmcq-orange); color: #fff; border-color: var(--tcmcq-orange);
}
.tcmcq-btn-primary:hover {
	background: var(--tcmcq-orange-600); border-color: var(--tcmcq-orange-600);
	transform: translateY(-1px); box-shadow: 0 4px 14px rgba(249,115,22,.4);
}
.tcmcq-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.tcmcq-btn-start { font-size: 1rem; padding: 14px 36px; }

/* Errors -------------------------------------------------- */
.tcmcq-err {
	color: #dc2626; font-size: .875rem; font-weight: 600;
	margin: 14px 0 0;
}

/* Instructions ------------------------------------------- */
.tcmcq-instructions {
	background: var(--tcmcq-gray-50);
	border: 1px solid var(--tcmcq-border);
	border-left: 3px solid var(--tcmcq-orange);
	border-radius: var(--tcmcq-radius);
	padding: 18px 22px; margin-bottom: 20px;
}
.tcmcq-instructions p { margin: 0 0 10px; }
.tcmcq-instructions p:last-child { margin-bottom: 0; }

.tcmcq-meta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tcmcq-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; border-radius: 20px;
	background: rgba(13,27,42,.06); color: var(--tcmcq-navy);
	font-size: .8125rem; font-weight: 600;
}

/* Quiz top bar ------------------------------------------- */
.tcmcq-quiz-top { margin-bottom: 16px; }
.tcmcq-progress {
	height: 6px; background: var(--tcmcq-gray-200);
	border-radius: 20px; overflow: hidden;
}
.tcmcq-progress-bar {
	height: 100%; width: 0;
	background: linear-gradient(90deg, var(--tcmcq-orange), var(--tcmcq-orange-600));
	border-radius: 20px; transition: width .35s ease;
}
.tcmcq-quiz-status {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 10px;
}
.tcmcq-counter { font-size: .8125rem; font-weight: 700; color: var(--tcmcq-muted); letter-spacing: .03em; }
.tcmcq-timer {
	display: inline-flex; align-items: center; gap: 6px;
	font-variant-numeric: tabular-nums;
	font-weight: 700; font-size: .9375rem;
	color: var(--tcmcq-navy);
	background: var(--tcmcq-gray-100);
	padding: 5px 12px; border-radius: 20px;
}
.tcmcq-timer::before {
	content: ''; width: 8px; height: 8px; border-radius: 50%;
	background: var(--tcmcq-orange);
	animation: tcmcq-pulse 1.4s ease-in-out infinite;
}
@keyframes tcmcq-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Question ------------------------------------------------ */
.tcmcq-q-text {
	font-size: 1.15rem; font-weight: 700; color: var(--tcmcq-navy);
	line-height: 1.45; margin: 0 0 20px; letter-spacing: -.01em;
}
.tcmcq-q-num {
	display: inline-block; font-size: .75rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--tcmcq-orange); margin-bottom: 10px;
}
.tcmcq-options-list { display: flex; flex-direction: column; gap: 10px; }
.tcmcq-opt {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--tcmcq-border);
	border-radius: var(--tcmcq-radius);
	cursor: pointer; background: var(--tcmcq-white);
	transition: border-color .15s, background .15s;
}
.tcmcq-opt:hover { border-color: var(--tcmcq-navy-700); background: var(--tcmcq-gray-50); }
.tcmcq-opt.is-selected {
	border-color: var(--tcmcq-orange);
	background: rgba(249,115,22,.06);
}
.tcmcq-opt input { margin-top: 3px; accent-color: var(--tcmcq-orange); width: 18px; height: 18px; flex-shrink: 0; }
.tcmcq-opt span { font-size: .975rem; color: var(--tcmcq-text); font-weight: 500; }

/* Reason box --------------------------------------------- */
.tcmcq-reason { margin-top: 18px; }
.tcmcq-reason label {
	display: block; font-size: .8125rem; font-weight: 600;
	color: var(--tcmcq-navy); margin-bottom: 7px;
}
.tcmcq-reason .tcmcq-optional { color: var(--tcmcq-muted); font-weight: 500; }
.tcmcq-reason textarea {
	width: 100%; min-height: 76px; resize: vertical;
	padding: 11px 13px;
	border: 1px solid var(--tcmcq-border);
	border-radius: var(--tcmcq-radius);
	font-family: inherit; font-size: .925rem; color: var(--tcmcq-text);
	line-height: 1.6;
}
.tcmcq-reason textarea:focus {
	outline: none; border-color: var(--tcmcq-orange);
	box-shadow: 0 0 0 3px rgba(249,115,22,.14);
}

.tcmcq-quiz-actions { display: flex; justify-content: flex-end; }

/* Done ---------------------------------------------------- */
.tcmcq-done-panel { text-align: center; }
.tcmcq-done-mark { color: var(--tcmcq-orange); display: flex; justify-content: center; margin-bottom: 14px; }
.tcmcq-done-score {
	font-size: 2rem; font-weight: 700; color: var(--tcmcq-navy);
	margin: 4px 0 2px;
}
.tcmcq-done-time { color: var(--tcmcq-muted); font-weight: 600; margin: 0 0 14px; }
.tcmcq-done-msg { color: var(--tcmcq-muted); max-width: 460px; margin: 0 auto; }

/* Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tcmcq-stage, .tcmcq-progress-bar, .tcmcq-timer::before { animation: none; transition: none; }
}

/* No-hero template: clear the theme's fixed 72px header since the navy hero
   (which used to provide that clearance) is intentionally omitted on test
   pages. */
.tcmcq-no-hero { padding-top: calc(var(--header-h, 72px) + 32px) !important; }
@media screen and (max-width: 782px) {
	.tcmcq-no-hero { padding-top: calc(64px + 24px) !important; }
}

/* Make dropdown / paragraph registration fields match text inputs. */
select.tcmcq-input,
textarea.tcmcq-input { font-family: inherit; appearance: auto; }
textarea.tcmcq-input { resize: vertical; min-height: 84px; }