/* Theme Variables */
:root {
	/* Base variables */
	--transition-speed: 0.3s;
	--border-radius: 15px;
	--box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Question Mode Button Styles */
.question-mode-btn {
	border-color: var(--pastel-primary) !important;
	color: var(--pastel-primary) !important;
}

.btn-check:checked + .question-mode-btn {
	background-color: var(--pastel-primary) !important;
	border-color: var(--pastel-primary) !important;
	color: white !important;
}

/* Text Size Classes */
.pali-text {
	font-size: 2.7rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

.thai-text {
	font-size: 1.1rem !important;
	line-height: 1.4 !important;
}

.thai-text-large {
	font-size: 1.8rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

/* Theme Classes */
.theme-orange {
	--pastel-primary: #FF6B35;
	--pastel-secondary: #FF8C42;
	--pastel-success: #FFA500;
	--pastel-warning: #FF7518;
	--pastel-danger: #FF4500;
	--pastel-info: #FFB347;
	--text-dark: #2C1810;
	--bg-color: #FFF5F0;
	--gradient: linear-gradient(135deg, #FF6B35, #FF8C42);
}

.theme-blue {
	--pastel-primary: #2196F3;
	--pastel-secondary: #42A5F5;
	--pastel-success: #00BCD4;
	--pastel-warning: #03A9F4;
	--pastel-danger: #1976D2;
	--pastel-info: #64B5F6;
	--text-dark: #0D47A1;
	--bg-color: #F3F8FF;
	--gradient: linear-gradient(135deg, #2196F3, #42A5F5);
}

.theme-pink {
	--pastel-primary: #E91E63;
	--pastel-secondary: #F06292;
	--pastel-success: #FF4081;
	--pastel-warning: #EC407A;
	--pastel-danger: #C2185B;
	--pastel-info: #F8BBD9;
	--text-dark: #880E4F;
	--bg-color: #FCE4EC;
	--gradient: linear-gradient(135deg, #E91E63, #F06292);
}

.theme-green {
	--pastel-primary: #2E7D32;
	--pastel-secondary: #388E3C;
	--pastel-success: #4CAF50;
	--pastel-warning: #689F38;
	--pastel-danger: #1B5E20;
	--pastel-info: #66BB6A;
	--text-dark: #0D2818;
	--bg-color: #F1F8E9;
	--gradient: linear-gradient(135deg, #2E7D32, #388E3C);
}

.theme-purple {
	--pastel-primary: #9C27B0;
	--pastel-secondary: #BA68C8;
	--pastel-success: #AB47BC;
	--pastel-warning: #8E24AA;
	--pastel-danger: #7B1FA2;
	--pastel-info: #CE93D8;
	--text-dark: #4A148C;
	--bg-color: #F3E5F5;
	--gradient: linear-gradient(135deg, #9C27B0, #BA68C8);
}

.theme-brown {
	--pastel-primary: #8D6E63;
	--pastel-secondary: #A1887F;
	--pastel-success: #BCAAA4;
	--pastel-warning: #795548;
	--pastel-danger: #6D4C41;
	--pastel-info: #D7CCC8;
	--text-dark: #3E2723;
	--bg-color: #EFEBE9;
	--gradient: linear-gradient(135deg, #8D6E63, #A1887F);
}

.theme-teal {
	--pastel-primary: #009688;
	--pastel-secondary: #26A69A;
	--pastel-success: #4DB6AC;
	--pastel-warning: #00796B;
	--pastel-danger: #00695C;
	--pastel-info: #80CBC4;
	--text-dark: #004D40;
	--bg-color: #E0F2F1;
	--gradient: linear-gradient(135deg, #009688, #26A69A);
}

/* Global Styles */
body {
	background: var(--bg-color, #FFF8F3);
	font-family: 'Sarabun', sans-serif;
	color: var(--text-dark, #6B4F4F);
	transition: background-color var(--transition-speed);
}

[v-cloak] {
	display: none !important;
}

/* Navigation */
.navbar {
	background: var(--gradient, linear-gradient(135deg, #FFB99A, #FFDAB9)) !important;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	box-shadow: var(--box-shadow);
}

.navbar-brand {
	font-weight: 600;
	font-size: 1.4rem !important;
}

/* Theme Dropdown */
.theme-dropdown .color-circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
}

/* Search Container */
.search-container {
	position: relative;
}

.search-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--pastel-primary);
	z-index: 10;
}

.search-box {
	padding-left: 45px !important;
	border: 2px solid var(--pastel-primary) !important;
	border-radius: var(--border-radius) !important;
	background: white;
	font-size: 1rem;
	transition: all var(--transition-speed);
}

.search-box:focus {
	border-color: var(--pastel-primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 185, 154, 0.25) !important;
}

/* Cards */
.card {
	border: none;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	background: white;
	transition: all var(--transition-speed);
	overflow: hidden;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.card-header {
	background: var(--pastel-secondary) !important;
	border-bottom: none;
	font-weight: 600;
}

/* Category Toggle Button */
.card-header .btn-link {
	color: var(--text-dark) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.card-header .btn-link:hover {
	color: var(--pastel-primary) !important;
}

.card-header .btn-link:focus {
	box-shadow: none !important;
}

/* Relation Cards */
.relation-card {
	border-left: 4px solid var(--pastel-primary);
}

.relation-card .text-primary {
	color: var(--pastel-primary) !important;
	font-weight: 600;
	font-size: 1.6rem;
}

.relation-card .text-success {
	color: var(--pastel-success) !important;
	font-weight: 600;
}

.relation-card .card-body {
	padding: 1.5rem;
}

.relation-card .mb-2 {
	margin-bottom: 0.75rem !important;
}

/* Flashcard */
.flashcard {
	min-height: 400px;
	background: white;
	border: 2px solid var(--pastel-primary);
}

.flashcard .card-header {
	background: var(--pastel-primary) !important;
	color: white;
}

.flashcard .question {
	padding: 2rem;
	background: white;
}

.flashcard .question h4 {
	color: #333;
	font-weight: 600;
	font-size: 1.8rem;
}

.flashcard .question .text-muted {
	color: #666 !important;
}

.flashcard .answer .alert {
	background: #f8f9fa !important;
	border: 2px solid var(--pastel-primary) !important;
	color: #333 !important;
}

.flashcard .answer .alert h5 {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
}

.flashcard .answer .answer-label {
	position: absolute;
	top: -8px;
	left: 12px;
	background: white;
	padding: 0 8px;
	font-weight: 600;
	border-radius: 4px;
}

.flashcard .card-body {
	background: white;
}

.flashcard .question h4 {
	color: #333;
	font-weight: 600;
	font-size: 2.2rem;
	border-bottom: 2px solid #f1f3f4;
	padding-bottom: 1rem;
	line-height: 1.3;
}

.flashcard .answer .text-success {
	color: #28a745 !important;
	font-weight: 600;
}

/* Flashcard Back Button */
.flashcard .card-header .btn-outline-light {
	border-color: rgba(255,255,255,0.5);
	color: white;
	padding: 0.25rem 0.5rem;
}

.flashcard .card-header .btn-outline-light:hover {
	background-color: rgba(255,255,255,0.2);
	border-color: white;
	color: white;
}

/* Score Display */
.score-display {
	background: #f8f9fa;
	border: 2px solid var(--pastel-primary);
	border-radius: var(--border-radius);
	padding: 2rem;
	margin: 1rem 0;
}

.score-display .text-primary {
	color: var(--pastel-primary) !important;
}

/* Buttons */
.btn:not([class*="btn-border"]):not(.btn-link):not(.btn-outline-light) {
	border-radius: calc(var(--border-radius) / 2);
	font-weight: 500;
	transition: all var(--transition-speed);
	border: 2px solid transparent;
}

.btn-primary {
	background: var(--pastel-primary) !important;
	border-color: var(--pastel-primary) !important;
	color: white !important;
}

.btn-primary:hover {
	background: var(--pastel-secondary) !important;
	border-color: var(--pastel-secondary) !important;
	transform: translateY(-2px);
}

.btn-outline-primary {
	color: var(--pastel-primary) !important;
	border-color: var(--pastel-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
	background: var(--pastel-primary) !important;
	border-color: var(--pastel-primary) !important;
	color: white !important;
}

.btn-warning {
	background: #ffc107 !important;
	border-color: #ffc107 !important;
	color: #000 !important;
	font-weight: 600;
}

.btn-warning:hover {
	background: #e0a800 !important;
	border-color: #e0a800 !important;
	color: #000 !important;
}

.btn-outline-warning {
	color: #ffc107 !important;
	border-color: #ffc107 !important;
	font-weight: 500;
}

.btn-outline-warning:hover {
	background: #ffc107 !important;
	border-color: #ffc107 !important;
	color: #000 !important;
}

/* Favorite Icon Button */
.btn-sm.position-relative {
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.btn-sm.position-relative i {
	font-size: 1.1rem;
}

.btn-sm.position-relative .badge {
	font-size: 0.6rem;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-outline-light {
	border-color: rgba(255,255,255,0.5) !important;
}

.btn-outline-light:hover,
.btn-outline-light.active {
	background: rgba(255,255,255,0.2) !important;
	border-color: white !important;
}

.btn-success {
	background: #28a745 !important;
	border-color: #28a745 !important;
	color: white !important;
	font-weight: 600;
}

.btn-success:hover {
	background: #218838 !important;
	border-color: #218838 !important;
	color: white !important;
}

.btn-danger {
	background: #dc3545 !important;
	border-color: #dc3545 !important;
	color: white !important;
	font-weight: 600;
}

.btn-danger:hover {
	background: #c82333 !important;
	border-color: #c82333 !important;
	color: white !important;
}

/* List Group */
.list-group-item {
	border: none;
	border-radius: calc(var(--border-radius) / 2) !important;
	margin-bottom: 0.5rem;
	transition: all var(--transition-speed);
}

.list-group-item:hover {
	background: var(--pastel-secondary) !important;
}

.list-group-item.active {
	background: var(--pastel-primary) !important;
	border-color: var(--pastel-primary) !important;
	color: white !important;
}

/* Badges */
.badge {
	border-radius: calc(var(--border-radius) / 3);
	padding: 0.5rem 1rem;
	font-weight: 500;
}

.badge-outline {
	background: transparent !important;
	border: 1.5px solid var(--pastel-primary) !important;
	color: var(--pastel-primary) !important;
	font-weight: 600;
	padding: 0.4rem 0.8rem;
}

.bg-secondary {
	background: var(--pastel-secondary) !important;
	color: var(--text-dark) !important;
}

.bg-primary {
	background: var(--pastel-primary) !important;
	color: white !important;
}

.bg-success {
	background: #28a745 !important;
	color: white !important;
}

/* Favorite Star */
.favorite-star {
	font-size: 1.2rem;
	cursor: pointer;
	transition: all var(--transition-speed);
	color: #ddd;
}

.favorite-star:hover {
	color: #ffc107;
	transform: scale(1.2);
}

.favorite-star.bi-star-fill {
	color: #ffc107;
}

/* Alert */
.alert {
	border: none;
	border-radius: var(--border-radius);
	border-left: 4px solid var(--pastel-primary);
}

.alert-info {
	background: #e3f2fd !important;
	color: #0d47a1 !important;
	border-left-color: #2196f3 !important;
}

/* Responsive */
@media (max-width: 768px) {
	.flashcard {
		min-height: 300px;
	}

	.flashcard .question {
		padding: 1rem;
	}

	.flashcard .question h4 {
		font-size: 1.4rem;
	}

	.score-display {
		padding: 1rem;
	}

	.navbar-brand {
		font-size: 1.2rem !important;
	}
}

/* Animation */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.card {
	animation: fadeIn 0.5s ease-out;
}

/* Mode Toggle */
.btn-outline-light.active {
	background: rgba(255,255,255,0.3) !important;
	font-weight: 600;
}

/* Category Selection Buttons */
.category-btn {
	height: auto !important;
	padding: 1rem !important;
	text-align: center;
}

.category-btn .category-name {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.25rem;
}

.category-btn .question-count {
	font-size: 0.75rem;
	opacity: 0.8;
	font-weight: 500;
}

.category-btn.active .question-count {
	opacity: 1;
}

/* Practice Category Buttons */
.practice-category-btn {
	position: relative;
	transition: all 0.3s ease;
	border: 2px solid var(--pastel-primary) !important;
}

.practice-category-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	background: var(--pastel-primary) !important;
	color: white !important;
}

.practice-category-btn .play-icon {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	font-size: 1.2rem;
	color: var(--pastel-primary);
}

.practice-category-btn:hover .play-icon {
	opacity: 1;
	color: white;
}

.practice-category-btn:hover .question-count {
	color: rgba(255,255,255,0.9) !important;
}

/* Mobile adjustments for category buttons */
@media (max-width: 768px) {
	.category-btn {
		padding: 0.75rem !important;
	}

	.category-btn .category-name {
		font-size: 0.8rem;
	}

	.category-btn .question-count {
		font-size: 0.7rem;
	}

	.practice-category-btn .play-icon {
		font-size: 1rem;
		top: 0.25rem;
		right: 0.25rem;
	}

	/* Adjust font sizes for mobile */
	.relation-card .text-primary {
		font-size: 1.5rem !important;
	}

	.flashcard .question h4 {
		font-size: 1.8rem !important;
	}

	.flashcard .answer .alert h5 {
		font-size: 1.2rem !important;
	}
}

/* Practice List Items */
.practice-list-item {
	padding: 1rem 1.5rem;
	border-radius: var(--border-radius) !important;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
	border: 2px solid #e9ecef !important;
	background: white;
}

.practice-list-item:hover {
	background: var(--pastel-primary) !important;
	color: white !important;
	border-color: var(--pastel-primary) !important;
	transform: translateX(5px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.practice-list-item:hover .text-muted {
	color: rgba(255,255,255,0.8) !important;
}

.practice-list-item:hover .text-primary {
	color: white !important;
}

.practice-list-item:hover .badge {
	background: rgba(255,255,255,0.2) !important;
	color: white !important;
}

.practice-list-item .category-name {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}

.practice-list-item .badge {
	font-size: 0.75rem;
	padding: 0.4rem 0.8rem;
	border-radius: 20px;
	font-weight: 600;
}

.practice-list-item .play-button {
	font-size: 1.5rem;
	transition: transform 0.3s ease;
}

.practice-list-item:hover .play-button {
	transform: scale(1.1);
}

/* Mobile adjustments for practice list */
@media (max-width: 768px) {
	.practice-list-item {
		padding: 0.75rem 1rem;
	}

	.practice-list-item .category-name {
		font-size: 0.9rem;
	}

	.practice-list-item .play-button {
		font-size: 1.3rem;
	}
}