/* IFSCA CMI Knowledge Quiz — v1.1 compact + mobile-friendly
   Fixes: oversized quiz area on desktop, broken/oversized layout on mobile,
   theme style bleed (labels, inputs, headings). */

.cmiq-wrap{
	--cmiq-green-900:#0c3d22;
	--cmiq-green-800:#14532d;
	--cmiq-green-700:#166534;
	--cmiq-green-600:#16a34a;
	--cmiq-green-100:#dcfce7;
	--cmiq-green-50:#f0fdf4;
	--cmiq-ink:#1a2b22;
	--cmiq-muted:#5b6b62;
	--cmiq-line:#e2e8e4;
	--cmiq-red:#dc2626;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color:var(--cmiq-ink);
	width:100%;
	max-width:960px;              /* was 1100 — tighter, less "too large" on desktop */
	margin:0 auto;
	padding:clamp(8px,2vw,16px);
	line-height:1.5;
	box-sizing:border-box;
	font-size:15px;
}
.cmiq-wrap *,.cmiq-wrap *::before,.cmiq-wrap *::after{box-sizing:inherit}

/* ---- theme-conflict guards (many WP themes style these globally) ---- */
.cmiq-wrap h1,.cmiq-wrap h2,.cmiq-wrap h3,.cmiq-wrap h4,.cmiq-wrap h5{
	margin:0;padding:0;border:0;background:none;font-family:inherit}
.cmiq-wrap p,.cmiq-wrap ul,.cmiq-wrap li{margin:0;padding:0}
.cmiq-wrap p{margin-bottom:0}
.cmiq-wrap label{display:flex;margin:0;font-weight:400}
.cmiq-wrap input[type=text],.cmiq-wrap input[type=tel],.cmiq-wrap input[type=email]{
	-webkit-appearance:none;appearance:none;box-shadow:none;height:auto;margin:0}
.cmiq-wrap input[type=radio]{width:16px;height:16px;min-width:16px;margin:0}
.cmiq-wrap button{font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none}
.cmiq-wrap svg{display:block}

.cmiq-screen{display:none}
.cmiq-screen.is-active{display:block;animation:cmiqFade .3s ease}
@keyframes cmiqFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- buttons ---- */
.cmiq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;
	padding:11px 20px;font-size:14.5px;font-weight:600;cursor:pointer;line-height:1;
	transition:background .2s,border-color .2s,transform .1s}
.cmiq-btn:active{transform:translateY(1px)}
.cmiq-btn-primary{background:var(--cmiq-green-700);color:#fff}
.cmiq-btn-primary:hover{background:var(--cmiq-green-800);color:#fff}
.cmiq-btn-ghost{background:#fff;color:var(--cmiq-green-800);border:1.5px solid var(--cmiq-line)}
.cmiq-btn-ghost:hover{border-color:var(--cmiq-green-600);color:var(--cmiq-green-700)}
.cmiq-btn:focus-visible{outline:3px solid var(--cmiq-green-600);outline-offset:2px}

/* =========================================================
   SCREEN 1 · LANDING
   ========================================================= */
.cmiq-landing-card{background:linear-gradient(160deg,#0c3d22,#14532d);border-radius:16px;padding:8px;overflow:hidden}
.cmiq-landing-body{background:linear-gradient(180deg,#fff 0%,#f4faf6 100%);border-radius:11px;
	padding:clamp(20px,4.5vw,36px)}
.cmiq-shield{width:48px;height:48px;color:var(--cmiq-green-800);margin-bottom:12px}
.cmiq-shield svg{width:100%;height:100%}
.cmiq-title{font-size:clamp(22px,4vw,34px);font-weight:800;letter-spacing:.4px;line-height:1.1;
	text-transform:uppercase;margin-bottom:8px}
.cmiq-sub{font-size:15px;margin-bottom:4px}
.cmiq-desc{color:var(--cmiq-muted);max-width:540px;margin-bottom:14px;font-size:14px}
.cmiq-features{list-style:none;margin-bottom:18px}
.cmiq-features li{position:relative;padding:4px 0 4px 28px;font-size:14px}
.cmiq-features li::before{content:"✔";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
	background:var(--cmiq-green-700);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.cmiq-meta-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;
	padding:12px 8px 4px;color:#e6f4ea;font-size:12.5px}
.cmiq-tagline{text-align:center;color:#cde9d6;padding:6px 0 8px;font-size:12.5px}

/* =========================================================
   SCREEN 2 · LEAD CAPTURE
   ========================================================= */
.cmiq-lead-card{display:grid;grid-template-columns:1fr 1.15fr;border-radius:16px;overflow:hidden;
	box-shadow:0 8px 26px rgba(12,61,34,.13);background:#fff}
.cmiq-lead-left{background:linear-gradient(165deg,#0c3d22,#166534);color:#eef8f1;
	padding:clamp(22px,4vw,36px) clamp(18px,3vw,28px);
	display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}
.cmiq-shield-outline{color:#fff}
.cmiq-lead-welcome{margin:10px 0 2px;font-size:14px;opacity:.9}
.cmiq-lead-left h2{color:#fff;font-size:clamp(19px,2.6vw,23px);font-weight:800;margin-bottom:12px;
	line-height:1.15;text-transform:uppercase;letter-spacing:.4px}
.cmiq-lead-rule{width:46px;height:3px;background:#4ade80;border-radius:2px;margin-bottom:12px}
.cmiq-lead-left p{font-size:13.5px;max-width:290px;opacity:.92}
.cmiq-lead-icons{display:flex;gap:8px;margin-top:18px;background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.3}
.cmiq-lead-icons span{min-width:48px}
.cmiq-lead-right{padding:clamp(22px,4vw,36px) clamp(18px,3.5vw,32px)}
.cmiq-lead-heading{font-size:21px;margin-bottom:2px;position:relative;padding-bottom:9px}
.cmiq-lead-heading::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;
	background:var(--cmiq-green-600);border-radius:2px}
.cmiq-lead-note{color:var(--cmiq-muted);margin:9px 0 15px;font-size:13.5px}
.cmiq-field{margin-bottom:12px}
.cmiq-field input{width:100%;padding:11px 13px;border:1.5px solid var(--cmiq-line);border-radius:9px;
	font-size:16px; /* 16px prevents iOS auto-zoom on focus */
	color:var(--cmiq-ink);background:#fbfdfc}
.cmiq-field input:focus{outline:none;border-color:var(--cmiq-green-600);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.cmiq-error{color:var(--cmiq-red);font-size:13px;margin-bottom:8px}
.cmiq-privacy{color:var(--cmiq-muted);font-size:12px;margin-top:14px}

/* =========================================================
   SCREEN 3 · QUIZ  — compact card + slim sidebar
   ========================================================= */
.cmiq-quiz-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
	background:linear-gradient(90deg,#0c3d22,#166534);color:#fff;border-radius:12px;
	padding:11px 16px;margin-bottom:12px}
.cmiq-quiz-brand{font-weight:700;letter-spacing:.3px;font-size:13.5px}
.cmiq-quiz-progress{display:flex;align-items:center;gap:10px;font-size:12.5px}
.cmiq-bar{width:130px;height:7px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.cmiq-bar-fill{height:100%;width:0;background:#4ade80;border-radius:6px;transition:width .3s ease}

.cmiq-quiz-body{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px;align-items:start}
.cmiq-quiz-main{background:#fff;border:1px solid var(--cmiq-line);border-radius:13px;
	padding:clamp(16px,3vw,24px);box-shadow:0 3px 14px rgba(12,61,34,.06);min-width:0}
.cmiq-question{font-size:clamp(15.5px,2.2vw,17px);font-weight:700;margin-bottom:16px;line-height:1.4}
.cmiq-options{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.cmiq-option{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--cmiq-line);border-radius:10px;
	padding:11px 13px;cursor:pointer;background:#fbfdfc;font-size:14px;line-height:1.4;
	transition:border-color .15s,background .15s}
.cmiq-option:hover{border-color:var(--cmiq-green-600)}
.cmiq-option.is-selected{border-color:var(--cmiq-green-700);background:var(--cmiq-green-50);
	box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.cmiq-option input{margin-top:2px;accent-color:var(--cmiq-green-700)}
.cmiq-nav{display:flex;justify-content:space-between;gap:10px}

.cmiq-quiz-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.cmiq-side-card{background:#fff;border:1px solid var(--cmiq-line);border-radius:12px;padding:14px;
	box-shadow:0 2px 10px rgba(12,61,34,.05)}
.cmiq-side-card h4{margin-bottom:10px;font-size:13.5px}
.cmiq-donut{position:relative;width:96px;margin:0 auto 10px}
.cmiq-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.cmiq-donut-track{fill:none;stroke:#e8f1ea;stroke-width:12}
.cmiq-donut-value{fill:none;stroke:var(--cmiq-green-600);stroke-width:12;stroke-linecap:round;
	stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .4s ease}
.cmiq-donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
	justify-content:center;line-height:1.1}
.cmiq-donut-label strong{font-size:18px}
.cmiq-donut-label span{font-size:10.5px;color:var(--cmiq-muted)}
.cmiq-side-stats{list-style:none;font-size:12.5px}
.cmiq-side-stats li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--cmiq-line)}
.cmiq-side-stats li:first-child{border-top:0}
.cmiq-tips{background:var(--cmiq-green-50);border-color:var(--cmiq-green-100)}
.cmiq-tips h4{margin-bottom:6px}
.cmiq-tips p{font-size:12px;color:#2f5140}

/* =========================================================
   SCREEN 4 · RESULTS
   ========================================================= */
.cmiq-results-hero{background:linear-gradient(160deg,#0c3d22,#166534);border-radius:14px 14px 0 0;color:#fff;
	text-align:center;padding:26px 16px 20px}
.cmiq-trophy{width:52px;height:52px;background:#fff;border-radius:50%;display:flex;align-items:center;
	justify-content:center;font-size:24px;margin:0 auto 10px;box-shadow:0 5px 14px rgba(0,0,0,.18)}
.cmiq-results-hero h2{color:#fff;margin-bottom:3px;font-size:clamp(20px,3vw,25px)}
.cmiq-results-hero p{opacity:.92;font-size:13.5px}
.cmiq-results-body{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;background:#f6faf7;
	border:1px solid var(--cmiq-line);border-top:0;border-radius:0 0 14px 14px;padding:14px}
.cmiq-results-main{min-width:0}
.cmiq-score-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--cmiq-line);
	border-radius:12px;padding:16px 18px}
.cmiq-donut-lg{width:104px;flex:0 0 104px;margin:0}
.cmiq-donut-lg .cmiq-donut-label strong{font-size:20px}
.cmiq-score-text h3{margin-bottom:5px;font-size:17.5px;color:var(--cmiq-green-700)}
.cmiq-score-text p{color:var(--cmiq-muted);font-size:13.5px}
.cmiq-score-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
	border:1px solid var(--cmiq-line);border-radius:12px;margin-top:10px;overflow:hidden}
.cmiq-score-stats div{padding:11px 8px;text-align:center;border-left:1px solid var(--cmiq-line)}
.cmiq-score-stats div:first-child{border-left:0}
.cmiq-score-stats span{display:block;font-size:11px;color:var(--cmiq-muted);margin-bottom:1px}
.cmiq-score-stats b{font-size:16.5px}
.cmiq-green{color:var(--cmiq-green-600)}
.cmiq-red{color:var(--cmiq-red)}
.cmiq-grow{background:var(--cmiq-green-50);border:1px solid var(--cmiq-green-100);border-radius:12px;
	padding:11px 14px;margin-top:10px;font-size:13px}
.cmiq-grow p{color:#2f5140;margin-top:2px}
.cmiq-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cmiq-detail{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.cmiq-detail[hidden]{display:none}
.cmiq-detail-item{background:#fff;border:1px solid var(--cmiq-line);border-left:4px solid var(--cmiq-green-600);
	border-radius:10px;padding:13px 15px;font-size:13.5px}
.cmiq-detail-item.is-wrong{border-left-color:var(--cmiq-red)}
.cmiq-detail-item h5{margin-bottom:6px;font-size:13.5px;line-height:1.4}
.cmiq-detail-item .cmiq-d-row{margin:2px 0}
.cmiq-detail-item .cmiq-d-exp{margin-top:7px;padding-top:7px;border-top:1px dashed var(--cmiq-line);
	color:#41544a;font-size:12.5px}
.cmiq-d-cite{display:inline-block;background:var(--cmiq-green-100);color:var(--cmiq-green-800);
	border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;margin-bottom:5px}
.cmiq-cta{background:#fff;border:1px solid var(--cmiq-line);border-radius:10px;padding:11px 14px;
	margin-top:14px;font-size:13px;color:#3a4d42}
.cmiq-cta a{color:var(--cmiq-green-700);font-weight:700}
.cmiq-disclaimer{margin-top:12px;font-size:11.5px;color:#7b897f}
.cmiq-bands{list-style:none;font-size:12px}
.cmiq-bands li{display:flex;justify-content:space-between;gap:6px;border-radius:9px;padding:8px 10px;margin-bottom:6px}
.cmiq-bands span{color:#5a6a5f}
.cmiq-band-x{background:#f0fdf4}
.cmiq-band-g{background:#eff6ff}
.cmiq-band-a{background:#fffbeb}
.cmiq-band-n{background:#fef2f2}
.cmiq-results-side .cmiq-tips p{font-size:12px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
	.cmiq-quiz-body{grid-template-columns:minmax(0,1fr) 220px}
	.cmiq-results-body{grid-template-columns:1fr}
}
@media (max-width:768px){
	/* Quiz: sidebar collapses into a compact horizontal stats strip ABOVE the card */
	.cmiq-quiz-body{grid-template-columns:1fr}
	.cmiq-quiz-side{order:-1;flex-direction:row;flex-wrap:wrap}
	.cmiq-quiz-side .cmiq-side-card{flex:1 1 100%;display:flex;align-items:center;gap:12px;padding:10px 12px}
	.cmiq-quiz-side .cmiq-side-card h4{display:none}          /* header bar already says it */
	.cmiq-donut{width:56px;flex:0 0 56px;margin:0}
	.cmiq-donut-label strong{font-size:12px}
	.cmiq-donut-label span{display:none}
	.cmiq-side-stats{display:flex;flex:1;gap:6px;justify-content:space-between}
	.cmiq-side-stats li{flex-direction:column;align-items:center;border-top:0;padding:0;gap:1px;
		font-size:11px;text-align:center}
	.cmiq-side-stats b{font-size:13px}
	.cmiq-quiz-side .cmiq-tips{display:none}                  /* tips are nice-to-have; save space on phones */
	.cmiq-quiz-header{padding:9px 12px}
	.cmiq-quiz-progress{width:100%;justify-content:space-between}
	.cmiq-bar{flex:1;width:auto}
}
@media (max-width:640px){
	.cmiq-wrap{padding:6px;font-size:14px}
	/* Lead capture stacks; green panel becomes a slim banner */
	.cmiq-lead-card{grid-template-columns:1fr}
	.cmiq-lead-left{padding:20px 16px}
	.cmiq-lead-left p,.cmiq-lead-icons{display:none}          /* keep the banner short on phones */
	.cmiq-lead-welcome{margin-top:6px}
	.cmiq-shield-outline{width:38px;height:38px}
	.cmiq-lead-right{padding:20px 16px 24px}
	/* Landing */
	.cmiq-landing-card{padding:6px;border-radius:13px}
	.cmiq-landing-body{padding:20px 16px}
	.cmiq-start-landing,.cmiq-start-quiz{width:100%}
	.cmiq-meta-strip{gap:5px 14px;font-size:11.5px}
	/* Quiz nav buttons */
	.cmiq-nav{flex-direction:row}
	.cmiq-nav .cmiq-btn{flex:1;padding:11px 10px}
	.cmiq-option{padding:10px 11px;font-size:13.5px}
	/* Results */
	.cmiq-score-card{flex-direction:column;text-align:center;gap:10px}
	.cmiq-score-stats{grid-template-columns:repeat(2,1fr)}
	.cmiq-score-stats div{border-top:1px solid var(--cmiq-line)}
	.cmiq-score-stats div:nth-child(-n+2){border-top:0}
	.cmiq-score-stats div:nth-child(odd){border-left:0}
	.cmiq-result-actions .cmiq-btn{flex:1 1 46%}
}
@media (max-width:380px){
	.cmiq-side-stats li:nth-child(3){display:none}            /* drop timer stat on very small phones; header % remains */
}
@media (prefers-reduced-motion:reduce){
	.cmiq-screen.is-active{animation:none}
	.cmiq-donut-value,.cmiq-bar-fill{transition:none}
}