:root {
	--t-color: #fff;
	--bg-color: #004d8e;
	--fg-color: #004e8e;
	--fg-color-dark: color-mix(in srgb, var(--fg-color) 85%, black);
	--fg-color-darker: color-mix(in srgb, var(--fg-color) 70%, black);
	--fg-shadow: color-mix(in srgb, var(--fg-color) 50%, transparent);
}

* {
	font-family: "Manrope", sans-serif;
}

p,
.p {
	margin: 0;
	padding: 0;
}

.w-fit {
	width: fit-content;
}

.main-bg {
	min-height: 100vh;
	max-height: 100%;
	padding: 1rem;
	background-color: var(--bg-color);
	color: var(--t-color);
}

.logo {
	width: 170px;
}

.request-section {
	margin: 0;
	padding: 1rem;
}

.bonus-tabs-section {
	border-radius: 1rem;
	overflow: hidden;
	max-width: 700px;
	background-color: var(--bg-color);
}

.bonus-tabbar {
	background-color: #004e8e4d;
}

.btn.tab-button {
	background-color: transparent;
	color: #ffffffe6;
	font-size: 0.85rem;
	font-weight: 600;
}

	.btn.tab-button:hover {
		color: var(--t-color) !important;
		background-color: #004e8e4d !important;
	}

	.btn.tab-button.active {
		color: var(--fg-color) !important;
		background-color: var(--t-color) !important;
	}

.request-card {
	background-color: #ffffff1a;
	border: 1px solid #fff3;
	border-radius: 0.75rem;
	padding: 1rem;
}

	.request-card .request-card-label {
		color: #fffc;
	}

	.request-card .request-card-text {
		font-weight: 500;
	}

	.request-card .request-card-text-dim {
		color: #ffffffb3;
	}

	.request-card .request-card-text-green {
		color: #86efac;
		font-weight: 500;
	}

	.request-card .request-card-text-yellow {
		color: #fde047;
		font-weight: 500;
	}

.text-xs {
	font-size: 0.75rem;
}

.text-sm {
	font-size: 0.875rem;
}

.text-lg {
	font-size: 1.125rem;
}

.text-xl {
	font-size: 1.25rem;
}

.text-2xl {
	font-size: 1.5rem;
}

.text-blue-200 {
	color: #bfdbfe;
}

.text-blue-300 {
	color: #93c5fd;
}

.text-green-200 {
	color: #bbf7d0;
}

.text-green-300 {
	color: #86efac;
}

.text-green-400 {
	color: #459e74 !important;
}

.text-yellow-300 {
	color: #ffd965 !important;
}

.text-yellow-400 {
	color: #ffcd36 !important;
}

.text-red-400 {
	color: #e35b68 !important;
}

.tracking-wide {
	letter-spacing: 0.025em;
}

.bg-white-20 {
	background-color: #fff3;
}

.bg-white {
	background: white;
}

.rounded-full {
	border-radius: 9999px;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bolder {
	font-weight: 800;
}

.text-white\/70 {
	color: #ffffffb3;
}

.text-white\/80 {
	color: #fffc;
}

.text-white\/90 {
	color: #ffffffe6;
}

.opacity-90 {
	opacity: 0.9;
}

.relative {
	position: relative;
}

.font-bold {
	font-weight: 700;
}

.select-none {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.gap-3-rows > *:not(:last-child) {
	padding-right: 0.75rem;
}

.gap-2-blocks > *:not(:last-child) {
	margin-bottom: 0.5rem;
}

.gap-3-blocks > *:not(:last-child) {
	margin-bottom: 0.75rem;
}

.gap-4-blocks > *:not(:last-child) {
	margin-bottom: 1rem;
}

.gap-5-blocks > *:not(:last-child) {
	margin-bottom: 1.5rem;
}

.gap-2 {
	gap: 0.5rem !important;
}

.gap-3 {
	gap: 0.75rem !important;
}

.gap-4 {
	gap: 1rem !important;
}

.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.15s;
}

.min-w-0 {
	min-width: 0px;
}

.flex-1 {
	flex: 1 1 0%;
}

.hidden {
	display: none;
}

#bonus-section,
#referans-section,
#takimini-section {
	display: none;
	transition: all 0.3s ease;
}

.bonus-dropdown {
	transition-duration: 0.3s;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--t-color);
	border: 2px solid #ffffff33;
	border-radius: 0.75rem;
}

	.bonus-dropdown:hover {
		color: var(--t-color);
		transform: scale(1.02);
	}

	.bonus-dropdown i:not(.toggle-btn-icon) {
		font-size: x-large;
	}

	.bonus-dropdown.green-btn {
		background-image: linear-gradient(to right, #10b981, #059669);
	}

	.bonus-dropdown.blue-btn {
		background-image: linear-gradient(to right, #3b82f6, #2563eb);
	}

	.bonus-dropdown.orange-btn {
		background-image: linear-gradient(to right, #f59e0b, #d97706);
	}

	.bonus-dropdown.purple-btn {
		background-image: linear-gradient(to right, #a855f7, #9333ea);
	}

	.bonus-dropdown.red-btn {
		background-image: linear-gradient(to right, #ef4444, #dc2626);
	}

.page-link {
	color: white;
	background-color: #ffffff1a;
	border: 1px solid #fff3;
}

.page-item.disabled .page-link {
	background-color: #ffffff1a;
	border: 1px solid #fff3;
}

.bonus-card {
	transition-duration: 0.3s;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	background-image: linear-gradient( to right, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.1) );
	border: 1px solid #ffffff4d;
	border-radius: 0.75rem;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

	.bonus-card:hover {
		box-shadow: 0 0 rgb(255 255 255 / 0.1), 0 0 rgb(255 255 255 / 0.1), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
		border-color: #ffffff80;
	}

	.bonus-card .bonus-favourite-btn {
		position: absolute;
		transition-duration: 0.3s;
		transition-property: all;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		backdrop-filter: blur(4px);
		padding: 0.25rem 0.5rem;
		background-color: #0000004d;
		border-radius: 9999px;
		z-index: 10;
		top: 0.75rem;
		right: 0.75rem;
		cursor: pointer;
	}

		.bonus-card .bonus-favourite-btn:hover {
			background-color: #00000080;
		}

		.bonus-card .bonus-favourite-btn i:hover {
			color: #f87171;
		}

		.bonus-card .bonus-favourite-btn i.fa-solid {
			transform: scale(1.2);
		}

	.bonus-card .bonus-card-img {
		object-fit: cover;
		width: 100%;
		height: auto;
		pointer-events: none;
	}

	.bonus-card .bonus-card-title {
		font-size: 0.75rem;
	}

	.bonus-card:hover .bonus-card-title {
		color: #ffffffe6;
	}

	.bonus-card .bonus-card-description {
		font-size: 0.75rem;
		color: #fffc;
	}

	.bonus-card:hover .bonus-card-description {
		color: #ffffffb3;
	}

	.bonus-card:hover .bonus-card-icon {
		color: #fffc;
	}

.referan-card {
	padding: 1rem;
	border-radius: 0.75rem;
}

	.referan-card.blue-card {
		background-image: linear-gradient( to right, rgb(37 99 235 / 0.2), rgb(30 64 175 / 0.2) );
		border: 1px solid #3b82f64d;
	}

	.referan-card.green-card {
		background-image: linear-gradient( to right, rgb(22 163 74 / 0.2), rgb(22 101 52 / 0.2) );
		border: 1px solid #22c55e4d;
	}

.info-card {
	padding: 0.75rem;
	background-color: #ffffff1a;
	border-radius: 0.5rem;
}

	.info-card .info-card-icon {
		background-color: #fff3;
		border-radius: 9999px;
		width: 2rem;
		height: 2rem;
	}

		.info-card .info-card-icon svg {
			width: 1rem;
			height: 1rem;
		}

.team-card {
	transition-duration: 0.3s;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	background-color: #ffffff1a;
	border-radius: 0.75rem;
	border: 1px solid #fff3;
	overflow: hidden;
	cursor: pointer;
}

	.team-card:hover {
		border-color: #fff6;
	}

	.team-card img {
		object-fit: cover;
		width: auto;
		height: 60px;
		pointer-events: none;
	}

.favourite-icon {
	color: #fde047;
	fill: #fde047;
	width: 1.25rem;
	height: 1.25rem;
}

.favourite-card {
	color: var(--fg-color);
	padding: 1rem;
	background-image: linear-gradient(to right, #facc15, #eab308);
	border-radius: 0.75rem;
	cursor: pointer;
}

	.favourite-card i {
		width: 1.25rem;
		height: 1.25rem;
		color: #dc2626;
		cursor: pointer;
	}

.seleceted-team-card {
	color: var(--fg-color);
	padding: 1rem;
	background-image: linear-gradient(to right, #facc15, #eab308);
	border-radius: 0.75rem;
}

	.seleceted-team-card svg {
		color: var(--fg-color);
		width: 1.5rem;
		height: 1.5rem;
	}

.copy-btn {
	color: var(--fg-color);
	font-weight: 600;
	padding: 0.5rem 1rem;
	background-image: linear-gradient(to right, var(--t-color), #eff6ff);
	border: none;
	border-radius: 0.5rem;
	line-height: 21px;
	font-size: 14px;
	cursor: pointer;
}

	.copy-btn:hover {
		color: var(--fg-color);
	}

.rotate-180 {
	transform: rotate(180deg);
	transition: all 0.3s ease-in-out;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cover-not-available {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-color);
}

.not-available {
	background-color: var(--fg-color);
	color: var(--t-color);
	max-width: 35rem;
	height: 12.5rem;
	border: 1px solid black;
	border-radius: 25px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 22px;
	font-size: 18px;
}

/* MEDIA QUERIES */
@media screen and (max-width: 550px) {
	.logo {
		width: 110px;
	}
}

#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none; /* Initially hidden */
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.spinner {
	width: 60px;
	height: 60px;
	border: 6px solid #f3f3f3;
	border-top: 6px solid var(--bg-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}