/**
 * Public facing Stylesheet.
 * Inspired by Testbook, Adda247, and BanglaMCQ.org.
 * Supports beautiful light/dark modes, custom MCQ cards, and animations.
 *
 * @package Nandan_Mock_Test_Pro
 */

/* =========================================================================
 * DESIGN SYSTEM & ROOT VARIABLES (Light Theme Default)
 * ======================================================================= */
:root {
	--nmtp-primary: #3b82f6;
	--nmtp-primary-hover: #2563eb;
	--nmtp-primary-light: rgba(59, 130, 246, 0.08);
	--nmtp-success: #10b981;
	--nmtp-success-hover: #059669;
	--nmtp-success-light: rgba(16, 185, 129, 0.08);
	--nmtp-danger: #ef4444;
	--nmtp-danger-hover: #dc2626;
	--nmtp-danger-light: rgba(239, 68, 68, 0.08);
	--nmtp-warning: #f59e0b;
	--nmtp-warning-light: rgba(245, 158, 11, 0.08);
	--nmtp-bg: #f8fafc;
	--nmtp-card-bg: #ffffff;
	--nmtp-text: #1e293b;
	--nmtp-text-muted: #64748b;
	--nmtp-border: #e2e8f0;
	--nmtp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--nmtp-radius: 16px;
	--nmtp-font: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
 * DARK THEME VARIABLES
 * ======================================================================= */
[data-theme="dark"] {
	--nmtp-bg: #0f172a;
	--nmtp-card-bg: #1e293b;
	--nmtp-text: #f1f5f9;
	--nmtp-text-muted: #94a3b8;
	--nmtp-border: #334155;
	--nmtp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
	--nmtp-primary-light: rgba(59, 130, 246, 0.15);
	--nmtp-success-light: rgba(16, 185, 129, 0.15);
	--nmtp-danger-light: rgba(239, 68, 68, 0.15);
	--nmtp-warning-light: rgba(245, 158, 11, 0.15);
}

/* =========================================================================
 * UTILITY & CONTAINER STYLES
 * ======================================================================= */
.font-bengali {
	font-family: var(--nmtp-font);
}

/* Base Wrapper Reset to align with WordPress themes */
.nmtp-auth-container,
.nmtp-exam-wrapper,
.nmtp-result-wrapper,
.nmtp-dashboard-wrapper,
.nmtp-leaderboard-wrapper {
	font-family: var(--nmtp-font);
	background-color: var(--nmtp-bg);
	color: var(--nmtp-text);
	border-radius: var(--nmtp-radius);
	padding: 24px;
	box-shadow: var(--nmtp-shadow);
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card Styling overrides */
.nmtp-auth-container .card,
.nmtp-exam-wrapper .card,
.nmtp-result-wrapper .card,
.nmtp-dashboard-wrapper .card,
.nmtp-leaderboard-wrapper .card {
	background-color: var(--nmtp-card-bg) !important;
	border: 1px solid var(--nmtp-border) !important;
	box-shadow: var(--nmtp-shadow) !important;
	color: var(--nmtp-text) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Gradient backgrounds for Dashboard cards */
.bg-gradient-card {
	background: linear-gradient(135deg, var(--nmtp-card-bg) 0%, var(--nmtp-primary-light) 100%) !important;
}

/* Text overrides */
.text-dark {
	color: var(--nmtp-text) !important;
}
.text-muted {
	color: var(--nmtp-text-muted) !important;
}
.border-bottom {
	border-bottom-color: var(--nmtp-border) !important;
}

#nmtpQuestionText {
	font-size: 28px !important;
	line-height: 1.4 !important;
}


/* Light Background Alerts */
.bg-primary-light { background-color: var(--nmtp-primary-light) !important; }
.bg-success-light { background-color: var(--nmtp-success-light) !important; }
.bg-danger-light { background-color: var(--nmtp-danger-light) !important; }
.bg-warning-light { background-color: var(--nmtp-warning-light) !important; }

.table-success-light { background-color: rgba(16, 185, 129, 0.05) !important; }
.table-danger-light { background-color: rgba(239, 68, 68, 0.05) !important; }
.table-secondary-light { background-color: rgba(107, 114, 128, 0.05) !important; }

/* Icon Boxes */
.nmtp-icon-box {
	width: 64px;
	height: 64px;
	line-height: 64px;
}

/* =========================================================================
 * MCQ OPTION CARDS (THE MAIN WOW FACTOR IN FRONTEND UI)
 * ======================================================================= */
.nmtp-option-card {
	border: 2px solid var(--nmtp-border);
	border-radius: 12px;
	padding: 16px 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--nmtp-card-bg);
}

.nmtp-option-card:hover {
	border-color: var(--nmtp-primary);
	background-color: var(--nmtp-primary-light);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

/* Option Letter Badge */
.nmtp-option-letter {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--nmtp-bg);
	border: 1px solid var(--nmtp-border);
	display: flex;
	align-items: center;
	justify-content-center;
	font-weight: 700;
	margin-right: 16px;
	color: var(--nmtp-text);
	transition: all 0.2s ease;
	flex-shrink: 0;
}

/* Option Content */
.nmtp-option-text {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--nmtp-text);
}

/* Checked / Selected Option state */
.nmtp-option-card.selected {
	border-color: var(--nmtp-primary);
	background-color: var(--nmtp-primary-light);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.nmtp-option-card.selected .nmtp-option-letter {
	background-color: var(--nmtp-primary);
	border-color: var(--nmtp-primary);
	color: #ffffff;
}

/* MCQ Options inputs (hidden, logic relies on classes) */
.nmtp-option-input {
	display: none;
}

/* Fill in the blanks inputs */
.nmtp-fib-input {
	border: 2px solid var(--nmtp-border);
	border-radius: 12px;
	padding: 14px 20px;
	font-size: 1.1rem;
	width: 100%;
	outline: none;
	background-color: var(--nmtp-card-bg);
	color: var(--nmtp-text);
	transition: border-color 0.2s ease;
}
.nmtp-fib-input:focus {
	border-color: var(--nmtp-primary);
}

/* =========================================================================
 * FRONTEND LANGUAGE SWITCHER & THEME TOGGLE
 * ======================================================================= */
.nmtp-language-switcher {
	font-size: 0.9rem;
	font-weight: 600;
}
.nmtp-language-switcher a {
	text-decoration: none;
	color: var(--nmtp-text-muted);
	padding: 2px 6px;
	transition: color 0.2s;
}
.nmtp-language-switcher a.active {
	color: var(--nmtp-primary);
	border-bottom: 2px solid var(--nmtp-primary);
}
.nmtp-language-switcher .separator {
	color: var(--nmtp-border);
}

/* Floating theme toggle button */
.nmtp-theme-toggle {
	cursor: pointer;
	border: 0;
	background-color: var(--nmtp-card-bg);
	color: var(--nmtp-text);
	box-shadow: var(--nmtp-shadow);
	border: 1px solid var(--nmtp-border);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content-center;
	transition: all 0.2s ease;
}
.nmtp-theme-toggle:hover {
	transform: scale(1.05);
}

/* =========================================================================
 * COMPONENT OVERRIDES
 * ======================================================================= */

/* Question Palette Buttons */
.nmtp-palette-btn {
	background-color: var(--nmtp-bg) !important;
	border: 1px solid var(--nmtp-border) !important;
	color: var(--nmtp-text-muted) !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	transition: all 0.2s ease;
}
.nmtp-palette-btn:hover {
	border-color: var(--nmtp-primary) !important;
	color: var(--nmtp-primary) !important;
}
.nmtp-palette-btn.active {
	border-color: var(--nmtp-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Palette Statuses */
.nmtp-palette-btn.answered {
	background-color: var(--nmtp-success) !important;
	border-color: var(--nmtp-success) !important;
	color: #ffffff !important;
}
.nmtp-palette-btn.skipped {
	background-color: var(--nmtp-danger) !important;
	border-color: var(--nmtp-danger) !important;
	color: #ffffff !important;
}

/* Tables & Pagination */
.table {
	color: var(--nmtp-text) !important;
}
.table td, .table th {
	border-bottom-color: var(--nmtp-border) !important;
}
.table-light {
	background-color: var(--nmtp-bg) !important;
}
.pagination li a, .pagination li span {
	border: 1px solid var(--nmtp-border) !important;
	background-color: var(--nmtp-card-bg) !important;
	color: var(--nmtp-text) !important;
	border-radius: 8px;
	padding: 6px 12px;
	text-decoration: none;
	margin: 0 2px;
}
.pagination li.active span, .pagination li a:hover {
	background-color: var(--nmtp-primary) !important;
	color: #ffffff !important;
	border-color: var(--nmtp-primary) !important;
}