/**
 * PressPrimer Quiz - Frontend Styles
 *
 * Modern, responsive, and accessible quiz interface styling.
 *
 * @package PressPrimer_Quiz
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Theme Variables)
   ========================================================================== */

:root {
	/* Color Palette */
	--ppq-primary: #4f46e5;
	--ppq-primary-dark: #4338ca;
	--ppq-primary-light: #6366f1;
	--ppq-success: #10b981;
	--ppq-success-light: #d1fae5;
	--ppq-warning: #f59e0b;
	--ppq-warning-light: #fef3c7;
	--ppq-error: #ef4444;
	--ppq-error-light: #fee2e2;
	--ppq-info: #3b82f6;
	--ppq-info-light: #dbeafe;

	/* Neutral Colors */
	--ppq-text: #1f2937;
	--ppq-text-secondary: #6b7280;
	--ppq-text-light: #9ca3af;
	--ppq-border: #e5e7eb;
	--ppq-border-light: #f3f4f6;
	--ppq-background: #ffffff;
	--ppq-background-gray: #f9fafb;
	--ppq-background-dark: #111827;

	/* Typography */
	--ppq-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--ppq-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

	/* Spacing Scale */
	--ppq-space-xs: 0.25rem;
	--ppq-space-sm: 0.5rem;
	--ppq-space-md: 1rem;
	--ppq-space-lg: 1.5rem;
	--ppq-space-xl: 2rem;
	--ppq-space-2xl: 3rem;
	--ppq-space-3xl: 4rem;

	/* Border Radius */
	--ppq-radius-sm: 0.375rem;
	--ppq-radius-md: 0.5rem;
	--ppq-radius-lg: 0.75rem;
	--ppq-radius-xl: 1rem;
	--ppq-radius-full: 9999px;

	/* Shadows */
	--ppq-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--ppq-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--ppq-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--ppq-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--ppq-transition: all 0.2s ease-in-out;
	--ppq-transition-fast: all 0.15s ease-in-out;
}

/* ==========================================================================
   Quiz Landing Page Container
   ========================================================================== */

.ppq-quiz-landing {
	max-width: 800px;
	margin: var(--ppq-space-xl) auto;
	padding: 0;
	font-family: var(--ppq-font-sans); /* Fallback, overridden by theme CSS */
	color: var(--ppq-text);
	line-height: 1.6;
}

/* ==========================================================================
   Featured Image
   ========================================================================== */

.ppq-quiz-header-image {
	margin-bottom: var(--ppq-space-xl);
	border-radius: var(--ppq-radius-xl);
	overflow: hidden;
	box-shadow: var(--ppq-shadow-lg);
}

.ppq-featured-image {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.ppq-quiz-header-image:hover .ppq-featured-image {
	transform: scale(1.02);
}

/* ==========================================================================
   Quiz Content
   ========================================================================== */

.ppq-quiz-content {
	background: var(--ppq-background);
	border: 2px solid var(--ppq-border);
	border-radius: var(--ppq-radius-lg);
	box-shadow: var(--ppq-shadow-md);
	padding: var(--ppq-space-2xl);
}

/* ==========================================================================
   Quiz Header
   ========================================================================== */

.ppq-quiz-header {
	margin-bottom: var(--ppq-space-xl);
	text-align: center;
}

.ppq-quiz-title {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--ppq-space-lg);
	color: var(--ppq-text);
	letter-spacing: -0.025em;
}

.ppq-quiz-description {
	font-size: 1.125rem;
	color: var(--ppq-text-secondary);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.7;
}

.ppq-quiz-description p {
	margin: 0 0 var(--ppq-space-md);
}

.ppq-quiz-description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Quiz Meta Information Grid
   ========================================================================== */

.ppq-quiz-meta {
	margin-bottom: var(--ppq-space-2xl);
	padding: var(--ppq-space-xl);
	background: var(--ppq-background-gray);
	border: 1px solid var(--ppq-border);
	border-radius: var(--ppq-radius-lg);
}

.ppq-quiz-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--ppq-space-md);
}

.ppq-meta-item {
	display: flex;
	align-items: flex-start;
	gap: var(--ppq-space-sm);
	padding: var(--ppq-space-md);
	background: var(--ppq-background);
	border: 1px solid var(--ppq-border);
	border-radius: var(--ppq-radius-md);
	transition: var(--ppq-transition);
}

.ppq-meta-icon,
.ppq-quiz-interface-meta-item .ppq-meta-icon,
.ppq-button-icon {
	display: none;
}

/* Tooltip for meta items */
.ppq-has-tooltip {
	cursor: help;
	position: relative;
}

.ppq-has-tooltip:hover {
	background: var(--ppq-background-gray);
}

.ppq-meta-content {
	display: flex;
	flex-direction: column;
	gap: var(--ppq-space-xs);
	min-width: 0;
}

.ppq-meta-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ppq-text-secondary);
}

.ppq-meta-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ppq-text);
	line-height: 1.2;
}

/* ==========================================================================
   Previous Attempts Section
   ========================================================================== */

.ppq-previous-attempts {
	margin-bottom: var(--ppq-space-2xl);
}

.ppq-section-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 var(--ppq-space-lg);
	color: var(--ppq-text);
}

.ppq-attempts-list {
	display: grid;
	gap: var(--ppq-space-md);
}

.ppq-attempt-card {
	padding: var(--ppq-space-lg);
	background: var(--ppq-background);
	border: 2px solid var(--ppq-border-light);
	border-radius: var(--ppq-radius-lg);
	transition: var(--ppq-transition);
}

.ppq-attempt-card:hover {
	border-color: var(--ppq-primary-light);
	box-shadow: var(--ppq-shadow-md);
}

.ppq-attempt-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ppq-space-md);
}

.ppq-attempt-date {
	font-size: 0.875rem;
	color: var(--ppq-text-secondary);
}

.ppq-attempt-score {
	display: inline-flex;
	align-items: center;
	gap: var(--ppq-space-sm);
	padding: var(--ppq-space-sm) var(--ppq-space-md);
	border-radius: var(--ppq-radius-full);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.ppq-attempt-score.ppq-passed {
	background: var(--ppq-success-light);
	color: var(--ppq-success);
}

.ppq-attempt-score.ppq-failed {
	background: var(--ppq-error-light);
	color: var(--ppq-error);
}

.ppq-pass-badge {
	font-size: 1rem;
	line-height: 1;
}

/* ==========================================================================
   Quiz Actions Section
   ========================================================================== */

.ppq-quiz-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ppq-space-lg);
	align-items: center;
}

/* ==========================================================================
   Notices
   ========================================================================== */

.ppq-notice {
	padding: var(--ppq-space-lg);
	border-radius: var(--ppq-radius-lg);
	margin-bottom: var(--ppq-space-lg);
	border-left: 4px solid;
	box-shadow: var(--ppq-shadow-sm);
}

.ppq-notice p {
	margin: 0;
	line-height: 1.6;
}

.ppq-notice-info {
	background: var(--ppq-info-light);
	border-color: var(--ppq-info);
	color: #1e40af;
}

.ppq-notice-warning {
	background: var(--ppq-warning-light);
	border-color: var(--ppq-warning);
	color: #92400e;
}

.ppq-notice-error {
	background: var(--ppq-error-light);
	border-color: var(--ppq-error);
	color: #991b1b;
}

.ppq-notice-success {
	background: var(--ppq-success-light);
	border-color: var(--ppq-success);
	color: #065f46;
}

.ppq-resume-notice {
	text-align: center;
}

.ppq-backward-not-allowed-message {
	margin-bottom: var(--ppq-space-lg);
	animation: ppq-shake 0.5s ease-in-out;
}

@keyframes ppq-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
	20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ==========================================================================
   Guest Email Form
   ========================================================================== */

.ppq-guest-email-form {
	width: 100%;
	max-width: 400px;
	margin-bottom: var(--ppq-space-lg);
}

.ppq-form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: var(--ppq-space-sm);
	color: var(--ppq-text);
}

.ppq-form-help {
	font-size: 0.875rem;
	color: var(--ppq-text-secondary);
	margin: var(--ppq-space-xs) 0 var(--ppq-space-md);
}

.ppq-input {
	width: 100%;
	max-width: 100%;
	padding: var(--ppq-space-md) var(--ppq-space-lg);
	font-size: 1rem;
	border: 2px solid var(--ppq-border);
	border-radius: var(--ppq-radius-lg);
	background: var(--ppq-background);
	color: var(--ppq-text);
	transition: var(--ppq-transition);
	font-family: inherit;
	box-sizing: border-box;
}

.ppq-input:focus {
	outline: none;
	border-color: var(--ppq-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.ppq-input::placeholder {
	color: var(--ppq-text-light);
}

/* Email required state */
.ppq-guest-email-form[data-email-required="1"] .ppq-email-input {
	border-color: var(--ppq-warning);
}

.ppq-guest-email-form[data-email-required="1"] .ppq-email-input:focus {
	border-color: var(--ppq-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.ppq-guest-email-form[data-email-required="1"] .ppq-form-label {
	color: var(--ppq-text);
}

/* Email input error state */
.ppq-input.ppq-input-error {
	border-color: var(--ppq-error);
	animation: ppq-shake 0.5s ease-in-out;
}

.ppq-input.ppq-input-error:focus {
	border-color: var(--ppq-error);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   Login Required State
   ========================================================================== */

.ppq-login-required {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ppq-space-lg);
	padding: var(--ppq-space-2xl);
	background: var(--ppq-background-gray);
	border: 2px solid var(--ppq-border);
	border-radius: var(--ppq-radius-xl);
	text-align: center;
	width: 100%;
	max-width: 500px;
}

.ppq-login-required-icon {
	font-size: 3rem;
	line-height: 1;
	opacity: 0.8;
}

.ppq-login-required-message {
	font-size: 1.125rem;
	color: var(--ppq-text);
	line-height: 1.7;
}

.ppq-login-required-message p {
	margin: 0 0 var(--ppq-space-md);
}

.ppq-login-required-message p:last-child {
	margin-bottom: 0;
}

.ppq-login-button {
	box-shadow: var(--ppq-shadow-lg);
}

.ppq-login-button:hover:not(:disabled) {
	box-shadow: var(--ppq-shadow-xl);
}

.ppq-register-prompt {
	font-size: 0.875rem;
	color: var(--ppq-text-secondary);
	margin: 0;
}

.ppq-register-prompt a {
	color: var(--ppq-primary);
	text-decoration: none;
	font-weight: 600;
	transition: var(--ppq-transition-fast);
}

.ppq-register-prompt a:hover {
	color: var(--ppq-primary-dark);
	text-decoration: underline;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ppq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ppq-space-sm);
	padding: var(--ppq-space-md) var(--ppq-space-xl);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: var(--ppq-radius-lg);
	cursor: pointer;
	transition: var(--ppq-transition);
	font-family: inherit;
	white-space: nowrap;
}

.ppq-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

.ppq-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ppq-button-primary {
	background: var(--ppq-primary);
	color: #ffffff;
}

.ppq-button-primary:hover:not(:disabled) {
	background: var(--ppq-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--ppq-shadow-lg);
}

.ppq-button-primary:active:not(:disabled) {
	transform: translateY(0);
}

.ppq-button-large {
	padding: var(--ppq-space-lg) var(--ppq-space-2xl);
	font-size: 1.125rem;
	min-width: 200px;
}

.ppq-button-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.ppq-start-quiz-button,
.ppq-resume-button {
	box-shadow: var(--ppq-shadow-lg);
}

.ppq-start-quiz-button:hover:not(:disabled),
.ppq-resume-button:hover:not(:disabled) {
	box-shadow: var(--ppq-shadow-xl);
}

/* Loading State */
.ppq-button.ppq-loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.ppq-button.ppq-loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: ppq-spin 0.6s linear infinite;
}

@keyframes ppq-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Responsive Design - Tablet
   ========================================================================== */

@media (max-width: 768px) {
	.ppq-quiz-title {
		font-size: 1.875rem;
	}

	.ppq-quiz-description {
		font-size: 1rem;
	}

	.ppq-quiz-meta {
		padding: var(--ppq-space-lg);
	}

	.ppq-quiz-meta-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ppq-space-md);
	}

	.ppq-meta-item {
		padding: var(--ppq-space-sm) var(--ppq-space-md);
	}

	.ppq-meta-value {
		font-size: 1.125rem;
	}

	.ppq-button-large {
		font-size: 1rem;
		padding: var(--ppq-space-md) var(--ppq-space-xl);
		min-width: 180px;
	}
}

/* ==========================================================================
   Responsive Design - Mobile
   ========================================================================== */

@media (max-width: 480px) {
	.ppq-quiz-landing {
		padding: var(--ppq-space-sm);
	}

	.ppq-quiz-title {
		font-size: 1.5rem;
	}

	.ppq-quiz-description {
		font-size: 0.9375rem;
	}

	.ppq-quiz-meta {
		padding: var(--ppq-space-md);
	}

	.ppq-quiz-meta-grid {
		grid-template-columns: 1fr;
		gap: var(--ppq-space-sm);
	}

	.ppq-meta-item {
		padding: var(--ppq-space-md);
	}

	.ppq-attempt-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.ppq-button-large {
		width: 100%;
		min-width: 0;
	}

	.ppq-guest-email-form {
		max-width: 100%;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Screen reader only - visually hidden but accessible to assistive technology */
.ppq-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Hidden utility class - used instead of inline style to avoid wp_kses filtering */
.ppq-hidden {
	display: none !important;
}

/* Skip link - visually hidden until focused */
.ppq-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ppq-skip-link:focus {
	position: fixed;
	top: var(--ppq-space-sm);
	left: var(--ppq-space-sm);
	width: auto;
	height: auto;
	padding: var(--ppq-space-sm) var(--ppq-space-md);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--ppq-primary);
	color: #ffffff;
	z-index: 10000;
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--ppq-radius-sm);
	outline: 2px solid var(--ppq-primary-dark);
	outline-offset: 2px;
}

/* Focus visible for keyboard navigation */
.ppq-button:focus-visible,
.ppq-input:focus-visible {
	outline: 2px solid var(--ppq-primary);
	outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.ppq-button-primary {
		border: 2px solid currentColor;
	}

	.ppq-meta-item {
		border: 2px solid var(--ppq-border);
	}
}

/* Dark mode support (optional - can be enabled in future) */
@media (prefers-color-scheme: dark) {
	/* Dark mode variables would go here if enabled */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.ppq-quiz-actions {
		display: none;
	}

	.ppq-quiz-landing {
		max-width: 100%;
		padding: 0;
	}

	.ppq-quiz-meta {
		box-shadow: none;
		background: none;
		border: 1px solid #000;
	}
}

/* ==========================================================================
   QUIZ INTERFACE STYLES
   ========================================================================== */

/* ==========================================================================
   Quiz Interface Container
   ========================================================================== */

.ppq-quiz-interface {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--ppq-space-md);
	font-family: var(--ppq-font-sans); /* Fallback, overridden by theme CSS */
	color: var(--ppq-text);
	line-height: 1.6;
}

/* ==========================================================================
   Quiz Interface Header
   ========================================================================== */

.ppq-quiz-interface-header {
	background: var(--ppq-background);
	border: 2px solid var(--ppq-border);
	border-radius: var(--ppq-radius-lg);
	padding: var(--ppq-space-xl);
	margin-bottom: var(--ppq-space-2xl);
	box-shadow: var(--ppq-shadow-sm);
}

.ppq-quiz-interface-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ppq-space-lg);
	margin-bottom: var(--ppq-space-lg);
}

.ppq-quiz-interface-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0;
	color: var(--ppq-text);
	letter-spacing: -0.025em;
}

.ppq-quiz-interface-meta {
	display: flex;
	gap: var(--ppq-space-xl);
	align-items: center;
}

.ppq-quiz-interface-meta-item {
	display: flex;
	align-items: center;
	gap: var(--ppq-space-sm);
	background: var(--ppq-background-gray);
	padding: var(--ppq-space-sm) var(--ppq-space-md);
	border: 1px solid var(--ppq-border);
	border-radius: var(--ppq-radius-md);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ppq-text);
}

.ppq-progress-text {
	font-weight: 700;
}

.ppq-current-question {
	color: var(--ppq-primary);
	font-size: 1.125rem;
}

/* Timer Styles */
.ppq-timer {
	font-family: var(--ppq-font-mono);
	font-weight: 700;
	min-width: 60px;
	text-align: center;
}

.ppq-timer.ppq-timer-warning {
	color: var(--ppq-warning);
	animation: ppq-pulse 1s ease-in-out infinite;
}

.ppq-timer.ppq-timer-danger {
	color: var(--ppq-error);
	animation: ppq-pulse 0.5s ease-in-out infinite;
}

@keyframes ppq-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

/* Progress Bar */
.ppq-progress-bar-container {
	width: 100%;
	height: 8px;
	background: var(--ppq-border-light);
	border-radius: var(--ppq-radius-sm);
	overflow: hidden;
	border: 1px solid var(--ppq-border);
}

.ppq-progress-bar {
	height: 100%;
	background: var(--ppq-primary);
	border-radius: var(--ppq-radius-sm);
	transition: width 0.3s ease-out;
}

/* ==========================================================================
   Questions Container
   ========================================================================== */

.ppq-questions-container {
	margin-bottom: var(--ppq-space-2xl);
}

/* ==========================================================================
   Question Display
   ========================================================================== */

.ppq-question {
	background: var(--ppq-background);
	border: 2px solid var(--ppq-border-light);
	border-radius: var(--ppq-radius-xl);
	padding: var(--ppq-space-2xl);
	box-shadow: var(--ppq-shadow-md);
	transition: var(--ppq-transition);
	outline: none;
}

.ppq-question:focus,
.ppq-question:focus-visible {
	outline: none;
}

.ppq-question-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--ppq-space-lg);
	padding-bottom: var(--ppq-space-md);
	border-bottom: 2px solid var(--ppq-border-light);
}

.ppq-question-number {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ppq-primary);
}

.ppq-question-points {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ppq-text-secondary);
	background: var(--ppq-background-gray);
	padding: var(--ppq-space-xs) var(--ppq-space-md);
	border-radius: var(--ppq-radius-full);
}

.ppq-question-text {
	font-size: var(--ppq-font-size-xl, 1.25rem);
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: var(--ppq-space-xl);
	color: var(--ppq-text);
}

.ppq-question-text p {
	margin: 0 0 var(--ppq-space-md);
}

.ppq-question-text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Answer Options
   ========================================================================== */

.ppq-answers {
	display: flex;
	flex-direction: column;
	gap: var(--ppq-space-md);
	margin-bottom: var(--ppq-space-lg);
}

.ppq-answer-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--ppq-space-md);
	padding: var(--ppq-space-lg);
	background: var(--ppq-background);
	border: 2px solid var(--ppq-border);
	border-radius: var(--ppq-radius-lg);
	cursor: pointer;
	transition: var(--ppq-transition);
}

.ppq-answer-option:hover {
	border-color: var(--ppq-primary-light);
	background: var(--ppq-background-gray);
	transform: translateX(4px);
}

.ppq-answer-option.ppq-selected {
	border-color: var(--ppq-primary);
	background: rgba(79, 70, 229, 0.05);
	box-shadow: var(--ppq-shadow-md);
}

.ppq-answer-option.ppq-selected .ppq-answer-radio-check {
	background: var(--ppq-primary);
	border-color: var(--ppq-primary);
}

/* Hide native input */
.ppq-answer-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Custom Radio/Checkbox */
.ppq-answer-radio-check {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 2px solid var(--ppq-border);
	background: var(--ppq-background);
	border-radius: var(--ppq-radius-full);
	transition: var(--ppq-transition);
	margin-top: 2px;
}

/* Checkbox style for multiple answer questions */
.ppq-question[data-question-type="multiple_answer"] .ppq-answer-radio-check,
.ppq-question[data-question-type="ma"] .ppq-answer-radio-check {
	border-radius: var(--ppq-radius-sm);
}

/* Checkmark/Dot */
.ppq-answer-option.ppq-selected .ppq-answer-radio-check::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-radius: 50%;
}

/* Checkmark for checkbox */
.ppq-question[data-question-type="multiple_answer"] .ppq-answer-option.ppq-selected .ppq-answer-radio-check::after,
.ppq-question[data-question-type="ma"] .ppq-answer-option.ppq-selected .ppq-answer-radio-check::after {
	width: 14px;
	height: 8px;
	background: none;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	border-radius: 0;
	transform: translate(-50%, -65%) rotate(-45deg);
}

.ppq-answer-text {
	flex: 1;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ppq-text);
}

.ppq-answer-text p {
	margin: 0 0 var(--ppq-space-sm);
}

.ppq-answer-text p:last-child {
	margin-bottom: 0;
}

/* Question Hint */
.ppq-question-hint {
	font-size: 0.875rem;
	color: var(--ppq-text-secondary);
	font-style: italic;
	margin: 0;
	text-align: center;
}

/* ==========================================================================
   Confidence Rating
   ========================================================================== */

.ppq-confidence-container {
	margin-top: var(--ppq-space-lg);
	padding-top: var(--ppq-space-lg);
	border-top: 1px solid var(--ppq-border-light);
}

.ppq-confidence-label {
	display: flex;
	align-items: center;
	gap: var(--ppq-space-md);
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--ppq-text-secondary);
	transition: color var(--ppq-transition-normal);
}

.ppq-confidence-label:hover {
	color: var(--ppq-text-primary);
}

.ppq-confidence-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ppq-confidence-checkbox {
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid var(--ppq-border);
	border-radius: var(--ppq-radius-sm);
	background: var(--ppq-background);
	transition: all var(--ppq-transition-fast);
	flex-shrink: 0;
}

.ppq-confidence-label:hover .ppq-confidence-checkbox {
	border-color: var(--ppq-primary-light);
}

.ppq-confidence-input:checked + .ppq-confidence-checkbox {
	background: var(--ppq-primary);
	border-color: var(--ppq-primary);
}

.ppq-confidence-input:checked + .ppq-confidence-checkbox::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ppq-confidence-input:focus + .ppq-confidence-checkbox {
	outline: 2px solid var(--ppq-primary);
	outline-offset: 2px;
}

.ppq-confidence-text {
	user-select: none;
}

/* ==========================================================================
   Quiz Navigation
   ========================================================================== */

.ppq-quiz-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ppq-space-md);
	padding: var(--ppq-space-xl);
	background: var(--ppq-background-gray);
	border-radius: var(--ppq-radius-xl);
	box-shadow: var(--ppq-shadow-sm);
}

.ppq-nav-center {
	display: flex;
	margin-left: auto;
}

.ppq-button-secondary {
	background: var(--ppq-background);
	color: var(--ppq-text);
	border: 2px solid var(--ppq-border);
}

.ppq-button-secondary:hover:not(:disabled) {
	background: var(--ppq-background-gray);
	border-color: var(--ppq-primary);
	color: var(--ppq-primary);
	transform: translateY(-2px);
	box-shadow: var(--ppq-shadow-md);
}

.ppq-button-secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ppq-submit-quiz-button {
	min-width: 200px;
}

/* ==========================================================================
   Auto-save Indicator
   ========================================================================== */

.ppq-autosave-indicator {
	position: fixed;
	bottom: var(--ppq-space-xl);
	right: var(--ppq-space-xl);
	display: flex;
	align-items: center;
	gap: var(--ppq-space-sm);
	padding: var(--ppq-space-sm) var(--ppq-space-lg);
	background: var(--ppq-success);
	color: #ffffff;
	border-radius: var(--ppq-radius-full);
	box-shadow: var(--ppq-shadow-lg);
	font-size: 0.875rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(10px);
	transition: var(--ppq-transition);
	z-index: 1000;
}

.ppq-autosave-indicator.ppq-show {
	opacity: 1;
	transform: translateY(0);
}

.ppq-autosave-indicator.ppq-autosave-saving {
	background: var(--ppq-info);
}

.ppq-autosave-indicator.ppq-autosave-error {
	background: var(--ppq-error);
}

.ppq-autosave-icon {
	font-size: 1rem;
	line-height: 1;
	animation: none;
}

.ppq-autosave-saving .ppq-autosave-icon {
	animation: ppq-pulse 1s ease-in-out infinite;
}

@keyframes ppq-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Offline Indicator
   ========================================================================== */

.ppq-offline-indicator {
	position: fixed;
	top: var(--ppq-space-xl);
	left: 50%;
	transform: translateX(-50%);
	display: none;
	padding: var(--ppq-space-md) var(--ppq-space-xl);
	background: var(--ppq-warning);
	color: #ffffff;
	border-radius: var(--ppq-radius-lg);
	box-shadow: var(--ppq-shadow-xl);
	font-size: 0.875rem;
	font-weight: 600;
	z-index: 10000;
	max-width: 90%;
	text-align: center;
}

/* ==========================================================================
   Quiz Interface - Responsive Design (Tablet)
   ========================================================================== */

@media (max-width: 768px) {
	.ppq-quiz-interface-header-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.ppq-quiz-interface-title {
		font-size: 1.5rem;
	}

	.ppq-quiz-interface-meta {
		width: 100%;
		justify-content: space-between;
		gap: var(--ppq-space-md);
	}

	.ppq-question {
		padding: var(--ppq-space-xl);
	}

	.ppq-question-text {
		font-size: var(--ppq-font-size-lg, 1.125rem);
	}

	.ppq-quiz-navigation {
		padding: var(--ppq-space-lg);
	}

	.ppq-nav-button {
		padding: var(--ppq-space-sm) var(--ppq-space-md);
	}

	.ppq-submit-quiz-button {
		min-width: 160px;
	}
}

/* ==========================================================================
   Quiz Interface - Responsive Design (Mobile)
   ========================================================================== */

@media (max-width: 480px) {
	.ppq-quiz-interface {
		padding: var(--ppq-space-sm);
	}

	.ppq-quiz-interface-header {
		padding: var(--ppq-space-lg);
	}

	.ppq-quiz-interface-title {
		font-size: var(--ppq-font-size-xl, 1.25rem);
	}

	.ppq-quiz-interface-meta {
		flex-direction: column;
		align-items: stretch;
	}

	.ppq-quiz-interface-meta-item {
		justify-content: space-between;
	}

	.ppq-question {
		padding: var(--ppq-space-lg);
	}

	.ppq-question-text {
		font-size: var(--ppq-font-size-base, 1rem);
	}

	.ppq-answer-option {
		padding: var(--ppq-space-md);
	}

	.ppq-quiz-navigation {
		flex-direction: column;
		gap: var(--ppq-space-sm);
	}

	.ppq-nav-button,
	.ppq-submit-quiz-button {
		width: 100%;
	}

	.ppq-nav-center {
		width: 100%;
	}

	.ppq-autosave-indicator {
		bottom: var(--ppq-space-md);
		right: var(--ppq-space-md);
		left: var(--ppq-space-md);
		justify-content: center;
	}
}

/* ==========================================================================
   Quiz Interface - Accessibility
   ========================================================================== */

.ppq-answer-option:focus-within {
	outline: 2px solid var(--ppq-primary);
	outline-offset: 2px;
}

/* Keyboard navigation for answers */
.ppq-answer-input:focus + .ppq-answer-radio-check {
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* ==========================================================================
   Unanswered Questions Warning Modal
   ========================================================================== */

.ppq-unanswered-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10001;
	padding: var(--ppq-space-md);
}

.ppq-unanswered-warning {
	background: var(--ppq-background);
	border-radius: var(--ppq-radius-xl);
	padding: var(--ppq-space-2xl);
	max-width: 480px;
	width: 100%;
	box-shadow: var(--ppq-shadow-xl);
	border-left: 4px solid var(--ppq-warning);
}

.ppq-unanswered-warning p {
	margin: 0 0 var(--ppq-space-md);
	color: var(--ppq-text);
	line-height: 1.6;
}

.ppq-unanswered-warning p:last-of-type {
	margin-bottom: var(--ppq-space-xl);
}

.ppq-unanswered-warning strong {
	font-size: 1.125rem;
	color: var(--ppq-text);
}

.ppq-unanswered-actions {
	display: flex;
	gap: var(--ppq-space-md);
	flex-wrap: wrap;
}

.ppq-unanswered-actions .ppq-button {
	flex: 1;
	min-width: 140px;
}

@media (max-width: 480px) {
	.ppq-unanswered-actions {
		flex-direction: column;
	}

	.ppq-unanswered-actions .ppq-button {
		width: 100%;
	}
}

/* ==========================================================================
   Tutorial Mode - Check Answer & Feedback Styles
   ========================================================================== */

/* Check Answer button container */
.ppq-check-answer-container {
	margin-top: var(--ppq-space-xl);
	text-align: center;
}

.ppq-check-answer-button {
	min-width: 160px;
}

/* Feedback container */
.ppq-feedback {
	margin-top: var(--ppq-space-xl);
	padding: var(--ppq-space-xl);
	background: var(--ppq-background-gray);
	border-radius: var(--ppq-radius-lg);
	border: 2px solid var(--ppq-border);
}

/* Feedback result message */
.ppq-feedback-result {
	font-size: 1.25rem;
	margin-bottom: var(--ppq-space-md);
}

.ppq-feedback-result.ppq-feedback-correct {
	color: var(--ppq-success);
}

.ppq-feedback-result.ppq-feedback-incorrect {
	color: var(--ppq-error);
}

/* Feedback text */
.ppq-feedback-text {
	font-size: 1rem;
	color: var(--ppq-text-secondary);
	line-height: 1.6;
	margin-bottom: var(--ppq-space-lg);
}

.ppq-feedback-text p {
	margin: 0 0 var(--ppq-space-sm);
}

.ppq-feedback-text p:last-child {
	margin-bottom: 0;
}

/* Continue button */
.ppq-continue-button {
	margin-top: var(--ppq-space-md);
}

/* Answer styling after feedback shown */
.ppq-question.ppq-feedback-shown .ppq-answer-option {
	cursor: default;
}

.ppq-question.ppq-feedback-shown .ppq-answer-option:hover {
	transform: none;
	border-color: var(--ppq-border);
	background: var(--ppq-background);
}

/* Correct answer styling */
.ppq-answer-option.ppq-correct {
	border-color: var(--ppq-success) !important;
	background: var(--ppq-success-light) !important;
}

.ppq-answer-option.ppq-correct .ppq-answer-radio-check {
	border-color: var(--ppq-success);
	background: var(--ppq-success);
}

/* Incorrect answer styling (selected but wrong) */
.ppq-answer-option.ppq-incorrect {
	border-color: var(--ppq-error) !important;
	background: var(--ppq-error-light) !important;
}

.ppq-answer-option.ppq-incorrect .ppq-answer-radio-check {
	border-color: var(--ppq-error);
	background: var(--ppq-error);
}

/* Hide feedback data script */
.ppq-feedback-data {
	display: none;
}

/* ==========================================================================
   Quiz Interface - Print Styles
   ========================================================================== */

@media print {
	.ppq-quiz-navigation,
	.ppq-autosave-indicator {
		display: none;
	}

	.ppq-quiz-interface {
		max-width: 100%;
		padding: 0;
	}

	.ppq-quiz-interface-header {
		background: none;
		border: 1px solid #000;
		box-shadow: none;
	}

	.ppq-question {
		page-break-inside: avoid;
		box-shadow: none;
	}
}

/* ==========================================================================
   RTL (Right-to-Left) Language Support
   ========================================================================== */

[dir="rtl"] .ppq-quiz-landing,
[dir="rtl"] .ppq-quiz-interface,
[dir="rtl"] .ppq-results {
	direction: rtl;
	text-align: right;
}

/* Alert borders flip for RTL */
[dir="rtl"] .ppq-alert {
	border-left: none;
	border-right: 4px solid;
}

[dir="rtl"] .ppq-alert.ppq-alert-info {
	border-right-color: var(--ppq-info);
}

[dir="rtl"] .ppq-alert.ppq-alert-warning {
	border-right-color: var(--ppq-warning);
}

[dir="rtl"] .ppq-alert.ppq-alert-error {
	border-right-color: var(--ppq-error);
}

[dir="rtl"] .ppq-alert.ppq-alert-success {
	border-right-color: var(--ppq-success);
}

/* Navigation buttons */
[dir="rtl"] .ppq-quiz-nav-buttons {
	flex-direction: row-reverse;
}

/* Question navigator */
[dir="rtl"] .ppq-question-nav {
	flex-direction: row-reverse;
}

/* Timer position */
[dir="rtl"] .ppq-timer {
	left: var(--ppq-space-xl);
	right: auto;
}

@media (max-width: 768px) {
	[dir="rtl"] .ppq-timer {
		left: var(--ppq-space-md);
		right: auto;
	}
}

/* Answer options text alignment */
[dir="rtl"] .ppq-answer-text {
	text-align: right;
}

/* Warning messages */
[dir="rtl"] .ppq-warning-message {
	border-left: none;
	border-right: 4px solid var(--ppq-warning);
}

/* Meta grid for quiz landing */
[dir="rtl"] .ppq-meta-item {
	flex-direction: row-reverse;
}

/* Previous attempts */
[dir="rtl"] .ppq-previous-attempts .ppq-attempt-info {
	flex-direction: row-reverse;
}

/* Pass badge positioning */
[dir="rtl"] .ppq-pass-badge {
	margin-left: 0;
	margin-right: var(--ppq-space-xs);
}

/* Skip link positioning */
[dir="rtl"] .ppq-skip-link:focus {
	left: auto;
	right: var(--ppq-space-sm);
}

/* Results page */
[dir="rtl"] .ppq-results-summary,
[dir="rtl"] .ppq-category-breakdown,
[dir="rtl"] .ppq-review-container {
	text-align: right;
}

[dir="rtl"] .ppq-review-answer {
	flex-direction: row-reverse;
}

/* Progress bar direction */
[dir="rtl"] .ppq-progress-fill {
	transform-origin: right;
}

/* Checkbox/radio custom elements */
[dir="rtl"] .ppq-answer-radio,
[dir="rtl"] .ppq-answer-checkbox {
	margin-left: var(--ppq-space-md);
	margin-right: 0;
}

/* Confidence rating */
[dir="rtl"] .ppq-confidence-rating {
	flex-direction: row-reverse;
}