/* PK LAW Notes Quiz - frontend styles.
   Every selector is scoped under .pklq-quiz-app and uses the pklq- prefix
   so it never collides with theme CSS. Colors/radius come from CSS
   custom properties set inline per-quiz by the PHP renderer. */

.pklq-quiz-app {
	--pklq-primary: #2563eb;
	--pklq-primary-rgb: 37, 99, 235;
	--pklq-correct: #16a34a;
	--pklq-wrong: #dc2626;
	--pklq-radius: 10px;
	--pklq-border: #e5e7eb;
	--pklq-bg: #ffffff;
	--pklq-text: #1f2937;
	--pklq-muted: #6b7280;

	box-sizing: border-box;
	max-width: 820px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Nastaliq Urdu", "Noto Sans", Arial, sans-serif;
	color: var( --pklq-text );
	font-size: 16px;
	line-height: 1.6;
	width: 100%;
}

.pklq-quiz-app,
.pklq-quiz-app * {
	box-sizing: border-box;
}

.pklq-quiz-app img {
	max-width: 100%;
	height: auto;
}

/* Prevent horizontal overflow / accidental sideways scroll. */
.pklq-quiz-app,
.pklq-quiz-page,
.pklq-start-screen,
.pklq-results {
	overflow-x: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.pklq-notice {
	padding: 14px 16px;
	border-radius: var( --pklq-radius );
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.pklq-quiz-title {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 8px;
}

.pklq-quiz-description {
	color: var( --pklq-muted );
	margin-bottom: 16px;
}

.pklq-question-count-badge {
	display: inline-block;
	background: rgba( var( --pklq-primary-rgb ), 0.1 );
	color: var( --pklq-primary );
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9em;
	margin-bottom: 18px;
}

/* Buttons */

.pklq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	border-radius: var( --pklq-radius );
	font-size: 1em;
	font-weight: 600;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.05s ease, opacity 0.15s ease;
	min-height: 44px;
	touch-action: manipulation;
}

.pklq-btn:active {
	transform: scale( 0.98 );
}

.pklq-btn-primary {
	background: var( --pklq-primary );
	color: #fff;
}

.pklq-btn-primary:hover {
	opacity: 0.92;
}

.pklq-btn-secondary {
	background: transparent;
	color: var( --pklq-primary );
	border-color: var( --pklq-primary );
}

.pklq-btn-secondary:hover {
	background: rgba( var( --pklq-primary-rgb ), 0.08 );
}

.pklq-nav-buttons {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.pklq-nav-buttons .pklq-btn {
	flex: 1 1 auto;
}

.pklq-start-btn {
	width: 100%;
}

/* Progress + timer */

.pklq-progress-wrap {
	margin: 14px 0 20px;
}

.pklq-progress-label {
	font-size: 0.85em;
	color: var( --pklq-muted );
	margin-bottom: 6px;
}

.pklq-progress-track {
	background: var( --pklq-border );
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.pklq-progress-bar {
	background: var( --pklq-primary );
	height: 100%;
	border-radius: 999px;
	transition: width 0.2s ease;
}

.pklq-timer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff7ed;
	color: #9a3412;
	border: 1px solid #fed7aa;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 600;
	margin-bottom: 16px;
}

/* Question cards */

.pklq-question-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pklq-question-card,
.pklq-review-card {
	background: var( --pklq-bg );
	border: 1px solid var( --pklq-border );
	border-radius: var( --pklq-radius );
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.04 );
}

.pklq-question-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.pklq-question-number {
	font-weight: 700;
	color: var( --pklq-primary );
	font-size: 0.95em;
}

.pklq-question-text {
	font-weight: 600;
	margin-bottom: 14px;
	font-size: 1.05em;
}

.pklq-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pklq-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid var( --pklq-border );
	border-radius: calc( var( --pklq-radius ) * 0.7 );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	min-height: 44px;
}

.pklq-option:hover {
	border-color: var( --pklq-primary );
}

.pklq-option-input {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var( --pklq-primary );
	cursor: pointer;
}

.pklq-option-letter {
	flex: 0 0 auto;
	font-weight: 700;
	color: var( --pklq-muted );
	min-width: 20px;
}

.pklq-option-text {
	flex: 1 1 auto;
}

.pklq-option-icon {
	flex: 0 0 auto;
	font-weight: 700;
	width: 20px;
	text-align: center;
}

.pklq-option-correct {
	border-color: var( --pklq-correct );
	background: rgba( 22, 163, 74, 0.08 );
}

.pklq-option-correct .pklq-option-icon {
	color: var( --pklq-correct );
}

.pklq-option-wrong {
	border-color: var( --pklq-wrong );
	background: rgba( 220, 38, 38, 0.08 );
}

.pklq-option-wrong .pklq-option-icon {
	color: var( --pklq-wrong );
}

.pklq-option-static {
	cursor: default;
}

.pklq-option-static:hover {
	border-color: var( --pklq-border );
}

.pklq-option-static.pklq-option-correct:hover,
.pklq-option-static.pklq-option-wrong:hover {
	border-color: currentColor;
}

/* Results */

.pklq-results-summary {
	text-align: center;
	background: var( --pklq-bg );
	border: 1px solid var( --pklq-border );
	border-radius: var( --pklq-radius );
	padding: 28px 20px;
	margin-bottom: 24px;
}

.pklq-results-heading {
	margin: 0 0 12px;
	font-size: 1.4em;
}

.pklq-score-big {
	font-size: 2.6em;
	font-weight: 800;
	color: var( --pklq-primary );
	line-height: 1.1;
}

.pklq-score-percentage {
	font-size: 1.3em;
	font-weight: 700;
	color: var( --pklq-muted );
	margin-top: 4px;
}

.pklq-pass-fail {
	display: inline-block;
	margin-top: 12px;
	padding: 6px 18px;
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.pklq-pass {
	background: rgba( 22, 163, 74, 0.12 );
	color: var( --pklq-correct );
}

.pklq-fail {
	background: rgba( 220, 38, 38, 0.12 );
	color: var( --pklq-wrong );
}

.pklq-stats-row {
	display: flex;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.pklq-stat {
	font-weight: 600;
}

.pklq-stat-correct {
	color: var( --pklq-correct );
}

.pklq-stat-wrong {
	color: var( --pklq-wrong );
}

.pklq-stat-unanswered {
	color: var( --pklq-muted );
}

.pklq-completion-message {
	margin-top: 16px;
	color: var( --pklq-text );
	font-size: 1.05em;
}

.pklq-retake-btn {
	margin-top: 20px;
}

.pklq-review-heading {
	margin: 0 0 14px;
}

.pklq-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pklq-review-card.pklq-review-correct {
	border-left: 4px solid var( --pklq-correct );
}

.pklq-review-card.pklq-review-wrong {
	border-left: 4px solid var( --pklq-wrong );
}

.pklq-review-card.pklq-review-unanswered {
	border-left: 4px solid var( --pklq-muted );
}

.pklq-review-icon {
	font-weight: 800;
}

.pklq-review-correct .pklq-review-icon {
	color: var( --pklq-correct );
}

.pklq-review-wrong .pklq-review-icon {
	color: var( --pklq-wrong );
}

.pklq-answer-line {
	margin-top: 10px;
	font-size: 0.92em;
	color: var( --pklq-muted );
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.pklq-explanation {
	margin-top: 12px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px dashed var( --pklq-border );
	border-radius: calc( var( --pklq-radius ) * 0.6 );
	font-size: 0.95em;
}

.pklq-explanation-body {
	margin-top: 4px;
}

/* Ad slots */

.pklq-ad-slot {
	margin: 18px 0;
	text-align: center;
	overflow: hidden;
}

.pklq-hidden {
	display: none;
}

/* RTL / Urdu support: right-to-left languages naturally mirror this
   layout via the dir="auto" attribute set by PHP, but a few flex
   directions benefit from an explicit rule for browsers that need it. */
.pklq-quiz-app[dir="rtl"] .pklq-option,
[dir="rtl"] .pklq-quiz-app .pklq-option {
	text-align: right;
}

.pklq-quiz-app[dir="rtl"] .pklq-answer-line,
[dir="rtl"] .pklq-quiz-app .pklq-answer-line {
	direction: rtl;
}

/* Responsive breakpoints */

@media ( max-width: 600px ) {
	.pklq-quiz-app {
		font-size: 15px;
		margin: 12px auto;
	}

	.pklq-question-card,
	.pklq-review-card,
	.pklq-results-summary {
		padding: 14px;
	}

	.pklq-score-big {
		font-size: 2em;
	}

	.pklq-nav-buttons {
		flex-direction: column;
	}

	.pklq-stats-row {
		gap: 10px 16px;
	}
}

@media ( min-width: 601px ) and ( max-width: 960px ) {
	.pklq-quiz-app {
		max-width: 90%;
	}
}