/* ==========================
   RESET
========================== */
:root {
	--accent: #a0ac36;
	--accent3: #a0ac86;
	--dark: #0a0a03;
	--dark2: #1a1a23;
	--mbg: #f0fcf6;
	--grey: #cacac8;
}




*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{
	scroll-behavior:smooth;
}
body{
	background:var(--dark2);
	color:var(--mbg);
	font-family:Inter,Arial,sans-serif;
	font-size:1em;
	overflow-x:hidden;
}
a{
	color:inherit;
	text-decoration:none;
}
img{
	max-width:100%;
}
/* ==========================
   APP
========================== */
.app{
	max-width:430px;
	margin:auto;
	min-height:100vh;
	background:var(--dark);
	padding-bottom:95px;
}
/* ==========================
   BUTTONS
========================== */
.btn{
	height:40px;
	border-radius:14px;
	font-weight:700;
}
.btn-login{
	background:var(--accent);
	color:var(--mbg);
	border:1px solid #2c2c2c;
}
.btn-login:hover{
	background:var(--accent3);
	color:var(--mbg);
}
.btn-register{
	background:var(--accent3);
	color:var(--mbg);
}
.btn-register:hover{
	background:var(--accent);
	color:var(--mbg);
}
/* ==========================
   SPORTS SWITCH
========================== */
.switcher{
	background:#18191c;
	border-radius:18px;
	padding:8px;
	display:flex;
	gap:8px;
}
.switch-btn{
	flex:1;
	border:none;
	height:40px;
	border-radius:14px;
	background:transparent;
	color:#8d9097;
	font-weight:700;
	transition:.25s;
}
.switch-btn.active{
	background:var(--accent3);
	color:#111;
}
/* ==========================
   CATEGORIES
========================== */
.categories{
	display:flex;
	gap:12px;
	overflow:auto;
	padding:0 16px;
	scrollbar-width:none;
}
.categories::-webkit-scrollbar{
	display:none;
}
.cat{
	flex:0 0 68px;
	text-align:center;
}
.cat i{
	width:68px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:var(--dark);
	border:1px solid #303236;
	font-size:22px;
	margin-bottom:8px;
	transition:.2s;
}
.cat{
	width:19vw;
	height:22vw;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:var(--dark);
	border:1px solid var(--accent);
	font-size:22px;
	margin:1vw;
}
.cat.active{
	border-color:var(--accent3);
	background:var(--dark2);
}
.catt{
	display:block;
	font-size:14px;
	width:20vw;
}
.flex-fill{
	width:48vw;
}
/* ==========================
   DIVIDER
========================== */
.divider{
	border-color:#555;
	opacity:.4;
}
/* ==========================
   BANNER
========================== */
.banner{
	overflow:hidden;
	border-radius:18px;
}
.banner img{
	display:block;
	width:100%;
}
/* ==========================
   CARD
========================== */
.info-card{
	background:var(--dark2);
	border:1px solid var(--accent);
	border-radius:22px;
	padding:20px;
	text-align:justify;
}
.info-card h1{
	color:var(--accent3);
	line-height:1.3;
	margin-bottom:25px;
	font-weight:800;
	font-size:1.4em;
	text-align:center;
}
.info-card h2{
	line-height:1.3;
	margin-bottom:25px;
	font-weight:800;
	font-size:1.2em;
	text-align:center;
}
/* ==========================
   TABLE
========================== */
.table{
	margin:0;
	margin-bottom:25px;
	font-size:0.8em;
}
.table thead{
	background:var(--dark2);
}
.table thead th{
	color:var(--accent3);
	border:none;
	padding:8px;
	text-align:center;
}
.table td{
	border-top:1px solid (--accent3);
	padding:8px;
	color:var(--mbg);	
}

/* ==========================
   BOTTOM NAV
========================== */

.foot{
	margin-bottom:75px;
	color: var(--grey);
	text-align:justify;
	font-size:0.8em;
}









.bottom-nav{
	position:fixed;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:100%;
	max-width:430px;
	background:var(--dark2);
	display:flex;
	justify-content:space-around;
	padding:10px 0;
	border-top:1px solid var(--dark);
	z-index:1000;
}
.bottom-nav a{
	width:54px;
	height:54px;
	border-radius:16px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--grey);
	font-size:22px;
	transition:.25s;
}
.bottom-nav a.active{
	background:var(--accent3);
	color:var(--mbg);
}
.bottom-nav a:hover{
	background:var(--dark2);
	color:var(--mbg);
}
/* ==========================
   MOBILE
========================== */
@media (max-width:420px){
	.info-card{
		padding:18px;
	}
	.info-card h1{
		font-size:18px;
	}
	.cat{
		flex:0 0 64px;
	}
	.cat i{
		width:64px;
		height:54px;
	}
	.cat img{
		width:54px;
		height:54px;
	}
}

/* Sticky Header */
header{
	position:sticky;
	top:0;
	z-index:999;
	background:var(--dark);
	transition:.3s;
}
/* Shadow on Scroll */
header.scrolled{
	box-shadow:0 8px 25px rgba(0,0,0,.45);
}
/* Active Category */
.cat{
	cursor:pointer;
	transition:.25s;
}
.cat:hover{
	transform:translateY(-3px);
}
.cat.active span{
	color:var(--mbg);
	font-weight:700;
}
.cat.active i{
	box-shadow:0 0 20px rgba(124,74,255,.35);
}
.cat.active img{
	box-shadow:0 0 20px rgba(124,74,255,.35);
}
/* Switch Buttons */
.switch-btn{
	cursor:pointer;
}
.switch-btn:hover{
	opacity:.9;
}
/* Navigation Animation */
.bottom-nav a{
	transition:
		background .25s,
		transform .25s,
		color .25s;
}
.bottom-nav a:hover{
	transform:translateY(-4px);
}
.bottom-nav a.active{
	transform:translateY(-4px);
}
/* Horizontal Scroll */
.categories{
	scroll-snap-type:x mandatory;
}
.cat{
	scroll-snap-align:center;
}
/* Smooth Card Animation */
.info-card{
	animation:fadeUp .5s ease;
}
@keyframes fadeUp{
	from{
		opacity:0;
		transform:translateY(20px);
	}
	to{
		opacity:1;
		transform:none;
	}
}
.icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	vertical-align: middle;
}