html,
body {
	--primary-color: #6f42c1;
	background-color: #ffffff;
	--dark-color: black;
	--focus-ring-color: #c2a0ff;
	--gray-color: #6c757d;
	--bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	font-family: var(--bs-body-font-family);
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
}

body.dark {
	background-color: #080a0e !important;
	/* Ensure readable text in dark mode where components don't override color */
	color: #e5e7eb;
}
a,
button {
	cursor: pointer;
}

.my-container {
	max-width: 100%;
	width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.mw-800 {
	max-width: 700px !important;
}

@media (max-width: 639px) {
	.my-container {
		padding-left: 1.4rem;
		padding-right: 1.4rem;
	}
}

@media (min-width: 640px) {
	.my-container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.my-container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.my-container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.my-container {
		max-width: 1280px;
	}
}

@media (min-width: 1440px) {
	.my-container {
		max-width: 1320px;
	}
}

.line-clamp-4 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow-y: hidden;
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pointer {
	cursor: pointer !important;
}

.game-container {
	position: relative;
	width: 100%; /* You can adjust this to fit your layout */
	background-color: black;
}
*:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 0.25rem var(--focus-ring-color) !important;
}

.form-control:focus,
.btn:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
	box-shadow: 0 0 0 0.25rem var(--focus-ring-color) !important;
	border-color: var(--focus-ring-color) !important;
}

.accordion-header > button {
	background-color: var(--bs-secondary-bg-subtle) !important;
	border-color: var(--bs-secondary-border-subtle) !important;
}

.accordion-button.collapsed {
	background-color: var(--bs-secondary-bg-subtle) !important;
	border-color: var(--bs-secondary-border-subtle) !important;
}
.accordion-button:not(.collapsed) {
	background-color: var(--bs-btn-bg) !important;
	border-color: var(--bs-btn-active-border-color) !important;
	color: var(--bs-btn-color) !important;
}
.bg-light {
	background-color: white !important;
}

.bg-primary {
	background-color: var(--bs-primary) !important;
}
.dropdown-item:hover {
	background-color: var(--bs-secondary-bg-subtle) !important;
}

.dropdown-item:focus {
	background-color: var(--primary-color);
}

.bg-body-secondary {
	background-color: white !important;
}

.border-primary {
	border-color: #6f42c1 !important;
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #6f42c1;
	--bs-btn-border-color: #6f42c1;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #7e4dda;
	--bs-btn-hover-border-color: #7e4dda;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #7e4dda;
	--bs-btn-active-border-color: #7e4dda;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #6f42c1;
	--bs-btn-disabled-border-color: #6f42c1;
}

.btn-primary:hover,
.btn-primary:focus {
	color: white !important;
}

.btn-secondary {
	--bs-btn-color: #6f42c1;
	--bs-btn-bg: #ffffff;
	--bs-btn-border-color: #6f42c1;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #6f42c1;
	--bs-btn-hover-border-color: #6f42c1;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #6f42c1;
	--bs-btn-active-border-color: #6f42c1;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: rgba(131, 100, 226, 0.2);
	--bs-btn-disabled-border-color: rgba(131, 100, 226, 0.2);
	border: 2px solid;
}

.btn-outlined {
	border: 2px solid #dadada !important;
}
.btn-outlined:hover,
.btn-outlined:focus {
	background-color: #dadada !important;
}

.bg-body-purple {
	opacity: 0.96 !important;
	background-color: #1e0a51 !important;
	color: white !important;
}

.nav-link {
	color: black;
	font-weight: 500;
	border-bottom-color: transparent;
}

.nav-link.active {
	color: var(--primary-color) !important;
	border-bottom-color: var(--primary-color) !important;
}

.nav-pills .nav-link {
	color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

.form-check-input:checked {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

.nav-pills .nav-link.active {
	background-color: var(--primary-color) !important;
	color: white !important;
	border-color: var(--primary-color) !important;
}

.word-card-icon {
	position: relative;
}
.word-card-icon button {
	position: absolute;
	top: 7px;
	right: 7px;
}

.game-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.btn-nostyle {
	border-color: transparent;
	padding: 0px;
	background: transparent;
	border-radius: 1rem;
}

.btn-reset-style {
	all: unset; /* Remove all browser default styles */
	cursor: default !important; /* Optional: show regular pointer */
	display: block; /* Ensures it behaves like a block element */
	user-select: text !important;
	padding: 0.5rem 1rem; /* Optional: match dropdown-header spacing */
	font-weight: 600; /* Optional: to mimic Bootstrap dropdown-header */
	color: #6c757d; /* Optional: Bootstrap's text-muted color */
}

.card-img-top,
.card-txt-top {
	height: 10.7rem;
}

@media only screen and (max-width: 991px) {
	.card-container {
		justify-content: start;
		align-items: center;
	}
}
@media only screen and (max-width: 768px) {
	.card-img-top,
	.card-txt-top {
		height: 9.3rem;
	}
	.card-size {
		width: 14rem !important;
		height: 14rem !important;
	}
}

.img-background {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--bs-secondary-bg-subtle) !important;
}

.svelte-select input,
.svelte-select,
.svelte-select-list div {
	cursor: pointer !important;
}

.multiselect {
	background: white !important;
	padding: 0.5rem !important;
}

.cmultiselect {
	border-radius: 0.375rem !important; /* rounded-md */
	border-width: 1px !important; /* border */
	border-color: rgb(209 213 219) !important; /* border-gray-300 */
}

.dark .cmultiselect {
	border-color: #45556c !important; /* dark:border-slate-600 */
}
.multiselect ::placeholder,
input input[type='text']::placeholder {
	color: rgb(156 163 175) !important;
}

.dark .multiselect ::placeholder,
.dark input[type='text']::placeholder {
	color: rgb(100 116 139) !important; /* #64748B */
}

.multiselect li.active,
.multiselect li:hover {
	background-color: var(--primary-color) !important;
	color: white !important;
}

.dark .multiselect {
	background-color: #0f172b !important;
	color: white !important;
	border-color: #45556c !important;
}

.dark .multiselect .selected li {
	background-color: black !important;
	color: white !important;
}
.dark .multiselect .options li {
	background-color: black;
	color: white !important;
}

.tags > svg {
	display: none;
}

.card {
	border-width: 1px;
	overflow: hidden;
}

.card-top-img {
	transition: transform 0.3s ease;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}
.card.clickable {
	cursor: pointer;
}
button img.object-cover,
a img.object-cover {
	transition: transform 0.2s ease;
}

.card.clickable:hover .card-top-img,
button:hover img.object-cover,
a:hover img.object-cover {
	transform: scale(1.03);
}
.card.clickable:hover {
	border-color: var(--bs-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
}

.check-circle {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--bs-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	color: transparent;
	z-index: 1;
}

.check-circle.selected {
	background-color: var(--bs-primary);
	color: white;
}

.text-truncate-2-lines {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: normal;
}

.blog-thumbnail {
	width: 180px !important;
	height: 140px !important;
	object-fit: cover;
}
@media only screen and (max-width: 480px) {
	.blog-thumbnail {
		height: 80px !important;
		width: 80px !important;
	}
}

.notyf__wrapper {
	padding-top: 17px !important;
	padding-bottom: 17px !important;
	padding-right: 15px !important;
	padding-left: 15px !important;
}
@media only screen and (min-width: 600px) {
	.notyf__wrapper {
		padding-top: 17px !important;
		padding-bottom: 17px !important;
		padding-right: 5px !important;
		padding-left: 5px !important;
	}
}

.fade-in-scale {
	animation: fadeScaleIn 0.25s ease;
}

@keyframes fadeScaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 575.98px) {
	.bottom-bar {
		border-top: 1px solid var(--bs-border-color);
	}
}

.vh-100-safe {
	height: calc(var(--vh, 1vh) * 100) !important;
}

/* Dark mode autofill styles */
.dark .field:-webkit-autofill,
.dark .field:-webkit-autofill:focus,
.dark .field:focus-visible,
.dark .field:-webkit-autofill:active,
.dark .field:-internal-autofill-selected {
	-webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
	box-shadow: 0 0 0 30px #0f172a inset !important;
	-webkit-text-fill-color: #f1f5f9 !important;
	caret-color: #f1f5f9;
}

.loader-top {
	border-top-color: var(--primary-color);
}
.loader-overlay {
	background-color: rgba(255, 255, 255, 0.8);
}

.dark .loader-overlay {
	background-color: rgba(0, 0, 0, 0.8);
}