/* Theme fixes moved to theme files themselves */

/* ====== SIDEBAR ANSWER STYLING ====== */

/* ====== BACK TO TOP BUTTON ====== */
.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: var(--bs-primary);
	color: #fff;
	cursor: pointer;
	z-index: 999;
	opacity: 1;
	visibility: visible;
	box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.35);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
	transform: translateY(0);
}

.back-to-top i,
.back-to-top .fa {
	font-size: 16px;
	line-height: 1;
}

.back-to-top:hover {
	background-color: color-mix(in srgb, var(--bs-primary), black 12%);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.45);
}

.back-to-top:active {
	transform: translateY(0);
}

.back-to-top:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.35), 0 8px 20px rgba(var(--bs-primary-rgb), 0.35);
}

/* Hidden state when not needed */
.back-to-top.hide {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
}

/* Support for dark backgrounds if needed */
@media (prefers-color-scheme: dark) {
	.back-to-top {
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
	}

	.back-to-top:hover {
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
	}
}

/* ====== TEST ANSWER COLORING ====== */
.btn-answer-question {
	border-width: 2px;
	font-weight: 600;
	min-width: 44px;
}

/* Selected correct answer */
.btn-answer-question.btn-answer-true {
	background-color: #16a34a !important;
	/* green-600 */
	border-color: #15803d !important;
	/* green-700 */
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}

/* Selected incorrect answer */
.btn-answer-question.btn-answer-false {
	background-color: #ef4444 !important;
	/* red-500 */
	border-color: #dc2626 !important;
	/* red-600 */
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

/* Unselected correct answer (when showing the key) */
.btn-answer-question.btn-success:not(.btn-answer-true) {
	background-color: #e8f5e9 !important;
	/* subtle green bg */
	border-color: #a7f3d0 !important;
	/* mint border */
	color: #166534 !important;
	/* green-800 text */
}

/* Neutral options */
.btn-answer-question.btn-light {
	background-color: #f3f4f6 !important;
	/* gray-100 */
	border-color: #e5e7eb !important;
	/* gray-200 */
	color: #374151 !important;
	/* gray-700 */
}

/* Strengthen correct answer text color within question list */
.answer-option .text-success {
	color: #16a34a !important;
	/* green-600 */
}

/* ====== OVERRIDES: precise request ====== */
/* If selected correct -> green with white border */
.btn-answer-question.btn-answer-true {
	border-color: #ffffff !important;
	border-width: 2px;
}

/* Keep wrong selection red on hover/focus/active */
.btn-answer-question.btn-answer-false:hover,
.btn-answer-question.btn-answer-false:focus,
.btn-answer-question.btn-answer-false:active {
	background-color: #ef4444 !important;
	border-color: #dc2626 !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	/* avoid extra Bootstrap glow */
}

/* Force wrong selected answer red immediately (override Bootstrap) */
.btn.btn-light.btn-answer-question.btn-answer-false,
.btn.btn-answer-question.btn-answer-false {
	background-color: #ef4444 !important;
	border-color: #dc2626 !important;
	color: #ffffff !important;
}

/* ====== Correct answer overlay check badge ====== */
.btn-answer-question {
	position: relative;
}

.btn-answer-question .answer-check {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #16a34a;
	/* green */
	color: #ffffff;
	border: 2px solid #ffffff;
	/* white ring to float above button */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	/* avoid blocking clicks */
}

.btn-answer-question .answer-check .fa {
	font-size: 10px;
	line-height: 1;
}

/* Wrong selected answer overlay cross badge */
.btn-answer-question .answer-cross {
	position: absolute;
	bottom: -6px;
	left: -6px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #ef4444;
	/* red */
	color: #ffffff;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

.btn-answer-question .answer-cross .fa {
	font-size: 10px;
	line-height: 1;
}

/* Study material section: force correct answers green bg, white text */
#questions-list .btn-answer-question.btn-success {
	background-color: #16a34a !important;
	border-color: #15803d !important;
	color: #ffffff !important;
}

/* Sidebar answer item: small top-right check badge for answered */
.answer-item-link {
	position: relative;
	margin: 4px 6px 6px 0;
}

.answer-item-link .answer-check-small {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #16a34a;
	color: #ffffff;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

.answer-item-link .answer-check-small .fa {
	font-size: 9px;
	line-height: 1;
}

/* ====== Slick slider dots restyle ====== */
.slick-dots {
	bottom: 14px;
	display: flex !important;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.slick-dots li {
	margin: 0;
	width: auto;
	height: auto;
}

.slick-dots li button {
	padding: 0;
	width: 12px;
	height: 12px;
}

.slick-dots li button:before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	opacity: 1;
	/* override slick default */
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.slick-dots li.slick-active button:before {
	background: #3b82f6;
	/* primary */
	transform: scale(1.35);
	box-shadow: 0 4px 10px rgba(59, 130, 246, 0.45);
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.slick-dots li button:focus {
	outline: none;
}

/* Dark scheme adjustment */
@media (prefers-color-scheme: dark) {
	.slick-dots li button:before {
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	}

	.slick-dots li.slick-active button:before {
		box-shadow: 0 4px 10px rgba(59, 130, 246, 0.6);
	}
}

/* Override slick dots opacity to 70% */
.slick-dots li button:before {
	background: rgba(255, 255, 255, 0.7);
}

/* Bootstrap carousel indicators: circular dots with 70% opacity */
.carousel-indicators {
	gap: 10px;
	margin-bottom: 1rem;
}

.carousel-indicators [data-bs-target] {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.7);
	border: 0;
	margin: 0 6px;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.carousel-indicators [data-bs-target]:hover,
.carousel-indicators [data-bs-target]:focus {
	background-color: rgba(255, 255, 255, 0.9);
	outline: none;
}

.carousel-indicators .active {
	background-color: #3b82f6;
	transform: scale(1.35);
	box-shadow: 0 4px 10px rgba(59, 130, 246, 0.45);
}

@media (prefers-color-scheme: dark) {
	.carousel-indicators [data-bs-target] {
		background-color: rgba(255, 255, 255, 0.5);
	}

	.carousel-indicators .active {
		box-shadow: 0 4px 10px rgba(59, 130, 246, 0.6);
	}
}

/* ====== Custom slider dots (non-slick) ====== */
.slider-dots {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.slider-dots .slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.7);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.slider-dots .slider-dot:hover,
.slider-dots .slider-dot:focus {
	background-color: rgba(255, 255, 255, 0.9);
	outline: none;
}

.slider-dots .slider-dot.active {
	background-color: rgba(59, 130, 246, 0.7);
	box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
}

@media (prefers-color-scheme: dark) {
	.slider-dots .slider-dot {
		background-color: rgba(255, 255, 255, 0.5);
	}

	.slider-dots .slider-dot.active {
		box-shadow: 0 4px 10px rgba(59, 130, 246, 0.6);
	}
}

/* ====== Theme swatch colors (match theme primary) ====== */
.text-xarsha {
	color: #47b2e4 !important;
}

.text-default {
	color: #3b82f6 !important;
}

.text-xhoaphat {
	color: #1e3a8a !important;
}

.text-xwork {
	color: #0665d0 !important;
}

.text-xplay {
	color: #c74433 !important;
}

.text-xeco {
	color: #308a5a !important;
}

.text-xsmooth {
	color: #7351c0 !important;
}

.text-xinspire {
	color: #2a807f !important;
}

/* Slight emphasis on hover for swatches */
.text-xarsha:hover {
	color: #2fa5df !important;
}

.text-default:hover {
	color: #2563eb !important;
}

.text-xhoaphat:hover {
	color: #1e40af !important;
}

.text-xwork:hover {
	color: #03356d !important;
}

.text-xplay:hover {
	color: #76281e !important;
}

.text-xeco:hover {
	color: #1f5f40 !important;
}

.text-xsmooth:hover {
	color: #5e41a3 !important;
}

.text-xinspire:hover {
	color: #1c5a59 !important;
}

/* ====== Mobile sidebar answer layout ====== */
.sidebar-answer-mobile .answer {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
	gap: 6px;
	padding: 8px 4px;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	white-space: nowrap;
}

.sidebar-answer-mobile .answer-item-link {
	margin: 0;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	border-radius: 50%;
}

/* Show scrollbar for horizontal scrolling */
.sidebar-answer-mobile .answer::-webkit-scrollbar {
	height: 6px;
	display: block;
}

.sidebar-answer-mobile .answer::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.sidebar-answer-mobile .answer::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}

.sidebar-answer-mobile .answer::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* ====== Fix: ensure btn-st matches theme info colors ====== */
.btn.btn-hero.btn-info.btn-st {
	background-color: var(--bs-btn-bg, var(--bs-info, #3c90df)) !important;
	border-color: var(--bs-btn-border-color, var(--bs-info, #3c90df)) !important;
	color: var(--bs-btn-color, #fff) !important;
}

.btn.btn-hero.btn-info.btn-st:hover,
.btn.btn-hero.btn-info.btn-st:focus {
	background-color: var(--bs-btn-hover-bg, #3073b2) !important;
	border-color: var(--bs-btn-hover-border-color, #2d6ca7) !important;
	color: var(--bs-btn-hover-color, #fff) !important;
}

.btn.btn-hero.btn-info.btn-st:active,
.btn.btn-hero.btn-info.btn-st.active {
	background-color: var(--bs-btn-active-bg, #3073b2) !important;
	border-color: var(--bs-btn-active-border-color, #2d6ca7) !important;
	color: var(--bs-btn-active-color, #fff) !important;
}

/* ====== Fix: bg-info use theme variables instead of hard-coded color ====== */
.bg-info {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

/* ====== Ensure badge .bg-info follows theme on all pages ====== */
.badge.bg-info,
.badge.bg-info.text-uppercase.fw-bold.py-2.px-3 {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
	border-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
	color: #fff !important;
}

a.badge.bg-info:hover,
a.badge.bg-info:focus,
button.badge.bg-info:hover,
button.badge.bg-info:focus {
	background-color: rgba(var(--bs-info-rgb), 0.85) !important;
	border-color: rgba(var(--bs-info-rgb), 0.85) !important;
	color: #fff !important;
}

/* ====== Force badge .bg-info to use theme primary color ====== */
.badge.bg-info,
.badge.bg-info.text-uppercase.fw-bold.py-2.px-3 {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	color: #fff !important;
}

a.badge.bg-info:hover,
a.badge.bg-info:focus,
button.badge.bg-info:hover,
button.badge.bg-info:focus {
	background-color: color-mix(in srgb, var(--bs-primary), black 15%) !important;
	border-color: color-mix(in srgb, var(--bs-primary), black 15%) !important;
}

/* ====== Force .btn-st (hero info) to use theme primary color ====== */
.btn.btn-hero.btn-info.btn-st {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	color: #fff !important;
}

.btn.btn-hero.btn-info.btn-st:hover,
.btn.btn-hero.btn-info.btn-st:focus {
	background-color: color-mix(in srgb, var(--bs-primary), black 12%) !important;
	border-color: color-mix(in srgb, var(--bs-primary), black 12%) !important;
	color: #fff !important;
}

.btn.btn-hero.btn-info.btn-st:active,
.btn.btn-hero.btn-info.btn-st.active {
	background-color: color-mix(in srgb, var(--bs-primary), black 18%) !important;
	border-color: color-mix(in srgb, var(--bs-primary), black 18%) !important;
	color: #fff !important;
}

@media (min-width: 768px) {
	.input-group .search-wrap {
		flex-grow: 1 !important;
		width: 100%;
	}
}