/* * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
} */

.slider-container {
	box-sizing: border-box;
	margin: 40px auto 0;
	
	& * {
		font-family: inherit;
	}
}

/* Event Slider */
.event-slider {
	/*max-width: min(90vw, 1280px);*/
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.event-slide {
	display: none;
	animation: fadeIn 0.5s ease-in-out;
}

.event-slide.active {
	display: flex;
    min-width: 100% !important;
    flex-direction: row;
    justify-content: space-between;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.event-image {
	max-width: 4rem;
	object-fit: contain;
	display: inline-block;
}

.slide-content {
	/*width: calc(100% - 160px);*/
	padding: 0;
    width: 100%;
    overflow: auto;
}

.slide-content-top {
	display: flex;
    justify-self: baseline;
    gap: 2em;
    margin-block: var(--wp--preset--spacing--xxs);
}

/* Match Slider */
.match-slider-wrapper {
	margin-top: 0;
	padding: 0.25em;
	min-height: 7.5em;
}

.match-slider {
	display: flex;
	gap: 1em;
	overflow: scroll;
	overflow: -moz-scrollbar-none;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-behavior: smooth;
	margin-inline;
}
.match-slider::webkit-scrollbar {
	display:none;
	width: 0px;
	background: transparent;
}

.match-slider::-webkit-scrollbar {
	height: 0.5em;
}

.match-slider::-webkit-scrollbar-track {
	background: #e0e0e0;
	border-radius: 10px;
}

.match-slider::-webkit-scrollbar-thumb {
	background: #999;
	border-radius: 10px;
}

.match-slider::-webkit-scrollbar-thumb:hover {
	background: #666;
}

.match-slide-item {
	flex: 1 0 25ch;
	min-height: 20px;
	background: #ffffff10;
	/*color: #00c7bd;*/
	color: hsl(from var(--wp--preset--color--accent-1) h 40% 90% / 1 );
	border-radius: 6px;
	padding: 1em;
	border: 2px solid transparent;
	transition: border-color 0.3s;
	display:flex;
	flex-direction: column;
	text-align: center;
	transition: var(--transition-base);
	text-decoration: none!important;
}

.match-slide-item.current-match,
.match-slide-item:hover {
	border-color: #00c7bd;
}

.match-slide-item > * {
	display: block;
	margin: 0 auto!important;
}
/*.match-slide-item > h4 {
	padding-left: 1.9ch;
}*/
.match-slide-item > p {
	min-width: 10ch;
	text-align: center;

}

.match-slide-item img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 10px;
}

.match-slide-item h4 {
	font-size: 14px;
	margin-bottom: 8px;
	/*color: #00c7bd;*/
	color: hsl(from var(--wp--preset--color--accent-1) h 40% 90% / 1 );
}

.match-slide-item h5 {
	color: hsl(from var(--wp--preset--color--accent-1) h 40% 90% / 1 );
}

.match-slide-item p {
	font-size: 12px;
	/*color: #00c7bd;*/
	color: hsl(from var(--wp--preset--color--accent-1) h 40% 90% / 1 );
	line-height: 1.4;
}
.tournament-name {
/*	text-align: center; */
	margin:auto;
	/* margin-top: 1em; */ 
	color: var(--wp--preset--color--contrast);
	transition: var(--transition-base);
	&:hover {
		color: var(--wp--preset--color--accent-1);
	}
}
a:has(.tournament-name) {
	text-decoration: none!important;
}
/* Progress Indicator */
.progress-bar {
	height: 4px;
	background: #FFFFFF20;
	margin-top: 0px;
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #00c7bd20, #00c7bd);
	width: 0%;
	transition: width 0.3s ease;
}

/* Controls */
.controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.5em;
	background: transparent;
}

.event-nav-button {
	/* background: #00c7bd;*/
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border: none;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
	/* border-radius: 4px; */
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	transition: background 0.3s;

	&:first-of-type {
		border-bottom-left-radius: var(--wp--preset--border-radius--3-xl);
	}
	&:last-of-type {
		border-bottom-right-radius: var(--wp--preset--border-radius--3-xl);
	}
}

.event-nav-button:hover:not(:disabled) {
	/* background: #0052a3; */
	background: hsl(from var(--wp--preset--color--accent-1) h s 120 / 1);
}

.event-nav-button:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.slide-counter {
	/* color: var(--wp--preset--color--contrast); */
	color: hsl(from var(--wp--preset--color--contrast) h s 80 / 1);
	font-weight: bold;
	font-size: 14px;
	text-wrap: nowrap;
}

.match-nav-button {
	background-color: transparent;
	color: #00c7bd02;
	color: white;
	border: none;
	padding: 4px;
	border-radius: 0px;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--m);
	transition: background 0.3s;
	z-index: 999;
}

.match-nav-button:hover {
	color: #00c7bd;
	opacity: 1;
}

.status-text {
	font-size: 12px;
	color: #999;
	margin-top: 10px;
	text-align: center;
}

.status-text.warning {
	color: #ff6b6b;
	opacity: 1;
	font-weight: bold;
}

.sm-screen-label {
	display: none;
}

/* Swap order in mobile | 2026-08-19 | Arttu Teronen, Sarmantti Oy */
@media(max-width: 500px) {
	.event-slide.active {
		/*display: flex;*/
		/*flex-wrap: wrap;
		flex-direction: column;*/
		display: grid;
		grid-template-columns: 1fr 1fr;
    	grid-template-rows: auto;
	}
	.event-slide img {
		flex: 0 0 100%;
		width: 100%;
		margin: 0 auto;
	}
	.slide-content {
		width: 100%;
		order: 1;
		grid-row: 1 / -2;
        grid-column: 1 / -1;
	}
	.event-slide > button, .event-slide > div {
		flex: 1;
	}
	button {
		max-width: fit-content;
	}
	.match-nav-button:first-of-type {
    	margin: 0 auto 0 0;
	}
	.match-nav-button:last-of-type {
    	margin: 0 0 auto auto;
	}

	/* Changing buttons' text for mobile */ 
	.lg-screen-label {
		display: none;
	}
	.sm-screen-label {
		display: block;
	}
	
}

@keyframes moveNoise {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -115.31px;
  }
}

.match-completed {
	backdrop-filter: saturate(0.6);
/*	color: #c0c0c0;*/
}
.match-completed .score {
	color: #c0c0c0;
}

.match-ongoing {
  background: linear-gradient(#00c7bd10, 
	                            #00c7bd20 20%, 
															#00c7bd10 20%, 
															#00c7bd22 40%, 
															#00c7bd10 40%, 
															#00c7bd18 60%, 
															#00c7bd10 60%, 
															#00c7bd25 80%, 
															#00c7bd10 81%, 
															#00c7bd20 99%);/*, url('https://iff-kehitys.floorball.sport/wp-content/uploads/2026/06/IFF_pallo_white.png'); */
	background-size: 25px;
  animation: moveNoise 8s linear infinite;
}

.match-ongoing .score {
	color: white;
}