/*-----------------------------------------------------------------------------------
    Author: Harias Martyno
    Email: hariyazt16@gmail.com
    Version: 2.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	01. Default
	
-----------------------------------------------------------------------------------*/

:root {
	--bs-primary: #004100;
	--bs-primary-rgb: 0, 65, 0;
	--emerald-900: #064e3b;
	--emerald-800: #065f46;
	--emerald-700: #047857;
	--emerald-100: #d1fae5;
	--emerald-50: #ecfdf5;
	--slate-600: #475569;
	--slate-400: #94a3b8;
	--surface: #f7f9ff;
	--tertiary: #00327d;
}

body { 
	font-family: 'Inter', sans-serif; 
	background-color: var(--surface); 
	color: #181c20; 
}
img {
    max-width: 100%;
    height: auto;
}

/*.page-ready {*/
/*    opacity:0;*/
/*    filter: blur(3px);*/
/*    transition: all .3s ease;*/
/*}*/

/*.page-ready.loaded {*/
/*    opacity:1;*/
/*    filter: blur(0);*/
/*}*/

img[loading="lazy"] {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}
.font-inter { font-family: 'Inter', sans-serif; }

/* Custom aesthetics for Stadia Pro */
.navbar-brand { 
	font-weight: 900; 
	font-style: italic; 
	letter-spacing: -0.025em; 
	color: var(--emerald-900) !important; 
}

.nav-link.active {
	color: var(--emerald-700) !important;
	border-bottom: 2px solid var(--emerald-700);
	font-weight: 700;
}

.glass-header { 
	backdrop-filter: blur(12px); 
	-webkit-backdrop-filter: blur(12px); 
	background-color: rgba(255, 255, 255, 0.8);
	position: sticky;
	top: 0;
	z-index: 1020;
}

.bento-card {
	border-radius: 1rem;
	overflow: hidden;
	position: relative;
	background: #fff;
	height: 100%;
}

.bento-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 78, 59, 0.9), rgba(6, 78, 59, 0.4), transparent);
}

.btn-primary-stadia {
	background: linear-gradient(to right, #004100, #015b01);
	border: none;
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 0.75rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-primary-stadia:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	color: white;
}

/* sidebar league navigation */
.league-nav-item {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	transition: all 0.2s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--slate-600);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
}

.league-nav-item:hover {
	background-color: #e2e8f0;
	transform: translateX(4px);
	color: var(--emerald-900);
}

.league-nav-item.active {
	background-color: var(--emerald-100);
	color: var(--emerald-900);
}

.league-group-header {
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: #1a1a1a;
	font-size: 0.875rem;
}

.flag-icon {
	width: 18px;
	height: 12px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.league-sub-item {
	padding: 0.5rem 1rem 0.5rem 2.75rem;
	display: block;
	text-decoration: none;
	color: var(--slate-600);
	font-size: 0.8125rem;
	font-weight: 500;
	transition: all 0.2s ease;
	border-radius: 0.5rem;
	margin: 0 0.5rem;
}

.league-sub-item:hover {
	background-color: var(--emerald-50);
	color: var(--emerald-900);
}

.league-sub-item.active {
	background-color: var(--emerald-100);
	color: var(--emerald-900);
	font-weight: 600;
}

.league-divider {
	height: 1px;
	background-color: #e2e8f0;
	margin: 0.75rem 1rem;
}
/* end sidebar league navigation */

.match-row {
	border-radius: 0.75rem;
	transition: background-color 0.2s;
	/* cursor: pointer; */
}

.match-row:hover {
	background-color: #f1f5f9;
}

.date-tab {
	/* padding: 0.5rem 1rem; */
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--slate-400);
	border: none;
	background: transparent;
}

.date-tab.active {
	background-color: var(--bs-primary);
	color: white;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.badge-live {
	background-color: #ecfdf5;
	color: #10b981;
	font-size: 12px;
	font-weight: 800;
	padding: 0.25rem 0.5rem;
	border-radius: 50rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.dot-live {
	width: 6px;
	height: 6px;
	background-color: #10b981;
	border-radius: 50%;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { transform: scale(0.95); opacity: 1; }
	70% { transform: scale(1.1); opacity: 0.7; }
	100% { transform: scale(0.95); opacity: 1; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.material-symbols-outlined { 
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
}

/* custom hover */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.group:hover .group-hover-scale {
    transform: scale(1.1);
}

.group-hover-scale {
    transition: transform 0.3s ease;
}

.hover-shadow,
.hover-shadow-lg {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.hover-shadow-lg:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.hover-translate-up {
    transition: transform 0.3s ease;
}

.hover-translate-up:hover {
    transform: translateY(-0.5rem);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* end custom hover */

/* custom table */
.standings-table thead th {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 900;
	color: #0047ab;
	border-bottom: none;
}
.standings-table tbody td {
	vertical-align: middle;
	font-size: 0.875rem;
	/* padding: 1rem 0.5rem; */
}
/* end custom table */

/* pagination */
.page-link {
	color: var(--bs-primary);
	padding: 5px 10px;
	/* font-size: 13px; */
}
.page-item.active .page-link {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}
/* end pagination */

/* breadcrumbs */
.breadcrumb {
	padding: 0 10px 5px 10px;
	list-style: none;
	background-color: unset;
	border-radius: 0;
	border-bottom: 1px solid #ddd;
	opacity: 75%;
}
.breadcrumb a {
	font-size: 12px;
	text-decoration: none;
	color: var(--bs-primary);
}
.breadcrumb > li {
	display: inline-block;
	font-size: 12px;
}
.breadcrumb > .active {
    color: #777777;
}
.breadcrumb > li + li::before {
    padding: 0 5px;
    color:#ccc;
    content: "/\00a0";
}
/* End breadcrumbs */