/* Norge4 Quiz – front end (same look as the Facebook post design) */
.n4q {
	--n4q-green: #4A7F3F;
	--n4q-green-dark: #2F6A2A;
	--n4q-green-bg: #E7F3E4;
	--n4q-red: #C0352B;
	--n4q-red-bg: #FCEAE8;
	--n4q-ink: #1B1F24;
	--n4q-muted: #5A6570;
	--n4q-line: #CDD4DC;
	direction: rtl;
	font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
	color: var(--n4q-ink);
	max-width: 820px;
	margin: 24px auto;
	line-height: 1.5;
}
.n4q *, .n4q *::before, .n4q *::after { box-sizing: border-box; }

.n4q .n4q-card {
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 12px;
	padding: 24px;
}

.n4q .n4q-title { margin: 0 0 12px; font-size: 28px; font-weight: 700; color: var(--n4q-ink); }
.n4q .n4q-info { margin: 0 0 20px; padding: 0 20px 0 0; color: var(--n4q-muted); font-size: 18px; }

/* top line + progress */
.n4q .n4q-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.n4q .n4q-count { justify-self: start; font-family: 'Lalezar', 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--n4q-green); white-space: nowrap; }
.n4q .n4q-badge {
	justify-self: center;
	max-width: 100%;
	font-family: 'Lalezar', 'IBM Plex Sans Arabic', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
	color: #2F6A2A;
	background: #F7D117;
	border: 3px solid #3AA647;
	border-radius: 10px;
	padding: 4px 18px 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.n4q .n4q-bar { height: 6px; background: #E6EAEE; border-radius: 99px; margin: 10px 0 18px; overflow: hidden; }
.n4q .n4q-bar-fill { height: 100%; background: var(--n4q-green); transition: width .3s ease; }

.n4q .n4q-question { margin: 0 0 16px; font-size: 24px; line-height: 1.45; font-weight: 700; color: var(--n4q-ink); }

.n4q .n4q-figure { margin: 0 0 16px; border: 1px solid #E1E6EC; border-radius: 8px; overflow: hidden; background: #F3F5F7; }
.n4q .n4q-figure img, .n4q .n4q-figure video { display: block; width: 100%; height: auto; margin: 0; }
.n4q .n4q-figure video { max-height: 70vh; background: #000; }
.n4q .n4q-expl-figure { margin: 10px 0 0; }

/* copy protection */
.n4q.n4q-protected, .n4q.n4q-protected * { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; }
.n4q.n4q-protected img { pointer-events: none; }

/* answers */
.n4q .n4q-answers { display: flex; flex-direction: column; gap: 12px; }
.n4q .n4q-answer {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: 10px 16px;
	border: 2px solid var(--n4q-line);
	border-radius: 10px;
	background: #fff;
	color: var(--n4q-ink);
	font-family: inherit;
	font-size: 19px;
	line-height: 1.4;
	text-align: right;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.n4q .n4q-answer:hover:not(:disabled) { border-color: var(--n4q-green); background: #F6FAF5; }
.n4q .n4q-answer:focus-visible { outline: 3px solid #3E7CC4; outline-offset: 2px; }
.n4q .n4q-answer:disabled { cursor: default; }
.n4q .n4q-num {
	width: 40px; height: 40px; flex-shrink: 0;
	border-radius: 50%;
	background: var(--n4q-green);
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	display: inline-flex; align-items: center; justify-content: center;
}

.n4q .n4q-answer.is-correct { border-color: var(--n4q-green-dark); background: var(--n4q-green-bg); font-weight: 600; }
.n4q .n4q-answer.is-correct .n4q-num { background: var(--n4q-green-dark); }
.n4q .n4q-answer.is-wrong { border-color: var(--n4q-red); background: var(--n4q-red-bg); }
.n4q .n4q-answer.is-wrong .n4q-num { background: var(--n4q-red); }
.n4q .n4q-answers.is-locked .n4q-answer:not(.is-correct):not(.is-wrong) { opacity: .6; }

/* timer */
.n4q .n4q-timer { justify-self: end; display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 99px; background: var(--n4q-green-bg); color: var(--n4q-green-dark); font-size: 17px; }
.n4q .n4q-timer-val { font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.n4q .n4q-timer.is-low { background: var(--n4q-red-bg); color: var(--n4q-red); }
.n4q .n4q-timeout { color: var(--n4q-red); font-weight: 700; font-size: 18px; margin: 0 0 6px; }

/* feedback */
.n4q .n4q-feedback { margin-top: 14px; font-size: 18px; font-weight: 700; }
.n4q .n4q-feedback:empty { display: none; }
.n4q .n4q-feedback.is-ok { color: var(--n4q-green-dark); }
.n4q .n4q-feedback.is-bad { color: var(--n4q-red); }
.n4q .n4q-expl { margin: 8px 0 0; font-weight: 400; color: var(--n4q-ink); font-size: 17px; }

/* buttons */
.n4q .n4q-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}
.n4q .n4q-btn-primary { background: var(--n4q-green); color: #fff; }
.n4q .n4q-btn-primary:hover { background: var(--n4q-green-dark); }
.n4q a.n4q-btn-next, .n4q a.n4q-btn-next:visited { background: #1F3A5F; color: #fff; text-decoration: none; }
.n4q a.n4q-btn-next:hover { background: #142A47; color: #fff; }
.n4q .n4q-btn:focus-visible { outline: 3px solid #3E7CC4; outline-offset: 2px; }
.n4q .n4q-next { margin-top: 18px; width: 100%; }
.n4q .n4q-next[hidden] { display: none; }

/* ad box inside the quiz */
/* The ad box takes no space until an ad actually arrives. */
.n4q .n4q-ad { margin-top: 0; text-align: center; }
.n4q .n4q-ad.is-filled { margin-top: 22px; }
.n4q .n4q-ad-slot { overflow: hidden; }
.n4q .n4q-ad.is-empty, .n4q .n4q-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* result */
.n4q .n4q-result { text-align: center; }

/* pass: congratulations */
.n4q .n4q-congrats {
	margin: -4px 0 18px;
	padding: 18px 14px 14px;
	border-radius: 12px;
	background: linear-gradient(180deg, #FFF7CC 0%, #FFFFFF 100%);
	border: 3px solid #3AA647;
	animation: n4q-pop .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.n4q .n4q-congrats-title { font-family: 'Lalezar', 'IBM Plex Sans Arabic', sans-serif; font-size: 52px; line-height: 1.1; color: #2F6A2A; }
.n4q .n4q-congrats-text { font-family: 'Lalezar', 'IBM Plex Sans Arabic', sans-serif; font-size: 28px; line-height: 1.35; color: #1B1F24; margin-top: 4px; }
.n4q .n4q-brand { display: inline-block; margin-top: 12px; padding: 4px 16px 2px; border-radius: 10px; background: #F7D117; border: 2px solid #3AA647; color: #2F6A2A; font-family: 'Lalezar', 'IBM Plex Sans Arabic', sans-serif; font-size: 20px; }
@keyframes n4q-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.n4q-party { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 99999; }
.n4q-balloon {
	position: absolute; bottom: -140px;
	width: 54px; height: 66px;
	border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
	box-shadow: inset -8px -10px 0 rgba(0,0,0,.12), inset 8px 8px 0 rgba(255,255,255,.25);
	animation-name: n4q-rise; animation-timing-function: ease-in; animation-fill-mode: both;
}
.n4q-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 70px; background: rgba(0,0,0,.35); }
.n4q-confetti {
	position: absolute; top: -20px; border-radius: 2px;
	animation-name: n4q-fall; animation-timing-function: linear; animation-fill-mode: both;
}
.n4q-sticker {
	position: absolute; bottom: -120px; display: block;
	filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
	animation-name: n4q-float; animation-timing-function: ease-in; animation-fill-mode: both;
}
.n4q-sticker svg { display: block; width: 100%; height: auto; }
@keyframes n4q-float { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-16px, -62vh) rotate(var(--n4q-spin, 20deg)); } to { transform: translate(14px, -130vh) rotate(calc(var(--n4q-spin, 20deg) * -1)); } }
@keyframes n4q-rise { from { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(18px, -60vh); } to { transform: translate(-12px, -125vh); opacity: .9; } }
@keyframes n4q-fall { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(30px, 110vh) rotate(720deg); opacity: .8; } }
@media (max-width: 600px) {
	.n4q .n4q-congrats-title { font-size: 44px; }
	.n4q .n4q-congrats-text { font-size: 24px; }
	.n4q-balloon { width: 44px; height: 54px; }
}
.n4q .n4q-big { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 8px 0; }
.n4q .n4q-big-num { font-size: 72px; font-weight: 700; line-height: 1; }
.n4q .n4q-big-of { font-size: 28px; color: var(--n4q-muted); font-weight: 600; }
.n4q .n4q-verdict { display: inline-block; margin: 6px 0 8px; padding: 6px 22px; border-radius: 99px; font-size: 24px; font-weight: 700; color: #fff; }
.n4q .is-pass .n4q-big-num { color: var(--n4q-green-dark); }
.n4q .is-pass .n4q-verdict { background: var(--n4q-green-dark); }
.n4q .is-fail .n4q-big-num { color: var(--n4q-red); }
.n4q .is-fail .n4q-verdict { background: var(--n4q-red); }
.n4q .n4q-note { color: var(--n4q-muted); font-size: 17px; margin: 0 0 18px; }
.n4q .n4q-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.n4q .n4q-actions-bottom { margin-top: 20px; }

.n4q .n4q-review { margin-top: 28px; text-align: right; border-top: 1px solid #E1E6EC; padding-top: 18px; }
.n4q .n4q-review-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.n4q .n4q-review-item { padding: 12px 14px; border: 1px solid #E1E6EC; border-radius: 8px; margin-bottom: 10px; }
.n4q .n4q-review-item p { margin: 4px 0; }
.n4q .n4q-review-q { font-weight: 700; }
.n4q .n4q-review-figure { margin: 8px 0 10px; }
.n4q .n4q-review-bad { color: var(--n4q-red); }
.n4q .n4q-review-good { color: var(--n4q-green-dark); }

@media (max-width: 600px) {
	/* full-width on phones: break out of the theme's side padding */
	.n4q {
		position: relative;
		width: 100vw;
		max-width: 100vw;
		margin: 12px calc(50% - 50vw);
	}
	.n4q .n4q-card { padding: 14px 12px; border: 0; border-radius: 0; }
	.n4q .n4q-question { font-size: 22px; margin-bottom: 12px; }
	.n4q .n4q-figure { margin-bottom: 12px; border-radius: 6px; }
	.n4q .n4q-answers { gap: 10px; }
	.n4q .n4q-answer { font-size: 20px; min-height: 68px; padding: 10px 14px; gap: 12px; }
	.n4q .n4q-num { width: 40px; height: 40px; font-size: 20px; }
	.n4q .n4q-btn { min-height: 54px; font-size: 19px; }
	.n4q .n4q-top { gap: 6px; }
	.n4q .n4q-count { font-size: 20px; }
	.n4q .n4q-badge { font-size: 18px; padding: 3px 10px 1px; border-width: 2px; }
	.n4q .n4q-timer { font-size: 15px; padding: 3px 10px; }
}