/* ==========================================================================
   Base
   ========================================================================== */

.wc26-page * {
	box-sizing: border-box;
}

.wc26-container{
	max-width:900px;
	margin:0 auto;
	padding:24px;
}

.wc26-page {
	padding: 20px 0;
}

/* ==========================================================================
   Match Card
   ========================================================================== */

.wc26-match-card,
.wc26-watch-card,
.wc26-schedule-card,
.wc26-card{
	margin: 20px;
	text-align: center;

	background:#fff;

	border:1px solid #edf0f4;

	border-radius:20px;

	padding:32px;

	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 10px 30px rgba(0,0,0,.05);
}
.wc26-schedule-card{

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}

.wc26-schedule-card:hover{

	transform:translateY(-2px);

	box-shadow:
		0 12px 30px rgba(0,0,0,.08);
}

.wc26-match-header {
	text-align: center;
	margin-bottom: 20px;
}

.wc26-match-title{

	font-size:42px;

	font-weight:800;

	letter-spacing:-.03em;

	line-height:1.2;
}

.wc26-local-time {
	margin-top: 12px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	color: #6b7280;
}

.wc26-match-stage {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
}

.wc26-stadium {
	margin-top: 12px;
	font-size: 15px;
	color: #4b5563;
}

/* ==========================================================================
   Status
   ========================================================================== */

.wc26-status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	margin-top: 16px;
}

.wc26-status-upcoming {
	background: #daf9ea;
	color: #198754;
	border: 1px solid #7edaaf;
}

.wc26-status-live {
	background: #fee2e2;
	color: #dc2626;
}

.wc26-status-halftime {
	background: #fff7ed;
	color: #ea580c;
}

.wc26-status-finished {
	background: #f8d7da;
	color: #dc3545;
	border: 1px solid #f5c2c7;
}

/* ==========================================================================
   Group Row
   ========================================================================== */

.wc26-group-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.wc26-group-row a {
	text-decoration: none;
	font-weight: 600;
}

/* ==========================================================================
   Streaming Area
   ========================================================================== */

.wc26-streaming-area{

	position:relative;

	margin-top:30px;

	min-height:320px;

	border-radius:20px;

	overflow:hidden;

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	text-align:center;

	color:#fff;

	background:
		linear-gradient(
			rgba(0,0,0,.45),
			rgba(0,0,0,.65)
		),

		url("../images/stadium3.jpg")
		center center / cover no-repeat;
}

.wc26-streaming-area::before{

	content:"";

	position:absolute;

	inset:0;

	background:

	linear-gradient(
		to bottom,
		rgba(0,0,0,.15),
		rgba(0,0,0,.75)
	);
}

.wc26-streaming-area > *{

	position:relative;

	z-index:5;
}

.wc26-streaming-state {
	font-size: 26px;
	font-weight: 700;
}

.finished-red {
	color: #f40000; 
}

.wc26-countdown {
	margin-top: 15px;
	font-size: 20px;
	font-weight: 600;
}

.wc26-status-live .wc26-streaming-state,
 

@keyframes wc26Blink {

	0% {
		opacity: 1;
	}

	50% {
		opacity: .4;
	}

	100% {
		opacity: 1;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wc26-action-buttons { 
	margin-top: 20px; 
}

.wc26-btn,
.wc26-modal-btn,
.wc26-calendar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	padding: 14px 22px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	transition: .2s ease;
}

.wc26-btn-primary {
	background: #2563eb;
	color: #fff;
}

.wc26-btn-primary:hover {
	opacity: .9;
	color: #fff;
}

.wc26-btn-secondary {
	margin-top:14px;
	background: #111827;
	color: #fff;
}

.wc26-btn-secondary:hover {
	opacity: .9;
	color: #fff;
}

.wc26-btn-calendar {
	background: #10b981;
	color: #fff;
}

.wc26-btn-calendar:hover {
	opacity: .9;
	background: #0b8f64;
	color: #fff;
}

/* ==========================================================================
   Notify
   ========================================================================== */

.wc26-notify-section {
	margin-top: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.wc26-notify-label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 14px;
	color: #6b7280;
}

.notify-me {
	padding: 15px;
	border-radius: 5px;
	display: block; 
	background: #feefc3;
	border: 1px solid #fdd663; 
	color: var(--IXoxUe);
}

@media (min-width: 992px) {
  .notify-me {
		width: 450px;
		padding: 20px;
	}
}

/* ==========================================================================
   View Schedule
   ========================================================================== */

.wc26-view-schedule {
	text-align: center;
	margin-top: 24px;
}

.wc26-view-schedule a {
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.wc26-match-section {
	margin-top: 40px;
}

.wc26-match-section h2 {
	margin-bottom: 16px;
	font-size: 24px;
}

.wc26-match-grid {
	margin-top: 20px;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.wc26-mini-match {
	display: block;
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
}

.wc26-mini-match:hover {
	border-color: #2563eb;
}

/* ==========================================================================
   Schedule Page
   ========================================================================== */

.wc26-page-header {
	text-align: center;
	margin-bottom: 30px;
}

.wc26-stage-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	justify-content: center;
}

.wc26-stage-filters button {
	background: #CFE2FF;
	color: #183D73;
	border: 1px solid #9EC5FE;
}

.wc26-stage-filter {
	padding: 10px 16px;
	border: 1px solid #d1d5db;
	background: #fff;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
}

.wc26-stage-filter.active {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}

.wc26-schedule-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wc26-schedule-header {
	display: inline-block; 
	margin-bottom: 16px; 
}

.wc26-match-meta {
	margin-top: 12px;
	color: #6b7280;
	font-size: 14px;
}

.wc26-schedule-actions {
	margin-top: 20px;
}

/* ==========================================================================
   Watch Page
   ========================================================================== */

.wc26-broadcaster-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wc26-broadcaster-item {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

.wc26-broadcaster-logo img {
	width: 70px;
	height: auto;
	display: block;
}

.wc26-broadcaster-content h3 {
	margin: 0 0 10px;
	font-size: 18px;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.wc26-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.65);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.wc26-modal {
	background: #fff;
	border-radius: 16px;
	width: 100%;
	max-width: 600px;
	padding: 24px;
	position: relative;
	max-height: 85vh;
	overflow-y: auto;
}

.wc26-modal-actions {
	margin: 14px 14px 20px 14px;
	text-align: center !important;
}

.wc26-modal-close {
	position: absolute;
	right: 20px;
	top: 20px;
	border-radius: 100%;
	background: #646567; 
	cursor: pointer;
	padding: 5px;
	width: 40px;
	height: 40px;
}

.wc26-modal-section {
	margin-top: 20px;
}

.wc26-country-search {
	width: 100%;
	padding: 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	margin-bottom: 15px;
}

.wc26-country-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 350px;
	overflow-y: auto;
}

.wc26-country-item {
	display: block;
	padding: 12px;
	border-radius: 10px;
	text-decoration: none;
	background: #f9fafb;
	color: #111827;
	font-weight: 600;
}

.wc26-country-item:hover {
	background: #eef2ff;
}

/* ==========================================================================
   Empty
   ========================================================================== */

.wc26-empty,
.wc26-empty-state {
	text-align: center;
	padding: 30px;
	color: #6b7280;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {

	.wc26-match-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {

	.wc26-match-title {
		font-size: 28px;
	}

	.wc26-streaming-state {
		font-size: 22px;
	}

	.wc26-countdown {
		font-size: 18px;
	}

	.wc26-match-grid {
		grid-template-columns: 1fr;
	}

	.wc26-broadcaster-item {
		flex-direction: column;
		text-align: center;
	}

	.wc26-action-buttons {
		flex-direction: column;
	}

	.wc26-btn,
	.wc26-calendar-button {
		width: 100%;
	}
}

.wc26-breadcrumbs{

	margin-bottom:18px;

	font-size:16px;

	font-weight:500;

	color:#6b7280;
}

.wc26-breadcrumbs a{

	color:#6b7280;

	text-decoration:none;
}

.wc26-breadcrumbs a:hover{

	color:#2563eb;
}

.wc26-breadcrumb-separator{

	margin:0 8px;

	color:#9ca3af;
}

.wc26-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
}

.wc26-pagination a {
	text-decoration: none;
	font-weight: 600;
}

.wc26-page-current {
	font-weight: 700;
}

/* ==========================================================================
   Streaming Modal Enhancement
   ========================================================================== */

.wc26-modal-match {
	margin: 18px 0 24px;
	padding: 18px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.wc26-modal h2 {
	margin: 0;
	text-align: center;
	font-size: 26px;
	font-weight: 800;
}

.wc26-modal h3 {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
}

.wc26-modal-section:first-of-type {
	margin-top: 10px;
}

.wc26-modal-btn {
	width: 100%;
	margin-bottom: 12px;
	background: #111827;
	color: #fff;
	font-size: 15px;
	min-height: 52px;
}

.wc26-modal-btn:hover {
	opacity: .92;
	color: #fff;
}

.wc26-country-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	background: #fff;
	transition: .15s ease;
}

.wc26-country-item:hover {
	border-color: #2563eb;
	transform: translateY(-1px);
}

.wc26-country-item::after {
	content: "→";
	font-weight: 700;
	opacity: .6;
}

.wc26-country-list {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 10px;
	background: #fff;
}

.wc26-country-search {
	font-size: 15px;
	background: #fff;
}

.wc26-country-search:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}



@media (max-width: 767px) {

	.wc26-modal {
		padding: 20px;
		max-height: 90vh;
	}

	.wc26-modal h2 {
		font-size: 22px;
	}

	.wc26-modal-match {
		font-size: 16px;
	}
}

.wc26-broadcaster-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:80px;
	height:80px;
	font-size:32px;
	border-radius:12px;
	background:#f5f5f5;
}
/*
|--------------------------------------------------------------------------
| Watch Country Page
|--------------------------------------------------------------------------
*/

.wc26-watch-page {

	padding: 24px 0 40px;
}

.wc26-watch-header {

	text-align: center;
	margin-bottom: 24px;
}

.wc26-watch-header h1 {

	margin: 0 0 10px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.wc26-watch-header p {

	margin: 0;
	color: #666;
	font-size: 15px;
	line-height: 1.6;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.wc26-watch-card {

	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	box-shadow:
		0 2px 8px rgba(0,0,0,.04);
}

.wc26-watch-card h2 {

	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Broadcaster List
|--------------------------------------------------------------------------
*/

.wc26-broadcaster-list {

	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(320px,1fr)
	);
	gap: 18px;
}

.wc26-broadcaster-item {

	display: flex;
	align-items: center;
	gap: 16px;

	padding: 18px;

	border: 1px solid #e5e7eb;
	border-radius: 14px;

	background: #fff;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}

.wc26-broadcaster-item:hover {

	transform: translateY(-2px);

	border-color: #d1d5db;

	box-shadow:
		0 8px 24px rgba(0,0,0,.08);
}

/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.wc26-broadcaster-logo {

	flex: 0 0 80px;

	width: 80px;
	height: 80px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.wc26-broadcaster-logo img {

	width: 100%;
	height: 100%;

	object-fit: contain;

	border-radius: 12px;

	background: #fff;
	border: 1px solid #f1f1f1;

	padding: 8px;
}

.wc26-broadcaster-placeholder {

	width: 80px;
	height: 80px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 34px;

	border-radius: 12px;

	background: #f5f5f5;
	border: 1px solid #e5e7eb;
}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.wc26-broadcaster-content {

	flex: 1;
	min-width: 0;
}

.wc26-broadcaster-content h3 {

	margin: 0 0 8px;

	font-size: 18px;
	font-weight: 700;

	line-height: 1.3;
}

.wc26-broadcaster-content p {

	margin: 0 0 14px;

	font-size: 14px;
	line-height: 1.5;

	color: #6b7280;
}

/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.wc26-broadcaster-content .wc26-btn {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 130px;
}

/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.wc26-empty {

	text-align: center;

	padding: 50px 20px;

	border: 1px dashed #d1d5db;
	border-radius: 16px;

	background: #fafafa;
}

.wc26-empty h3 {

	margin: 0 0 10px;

	font-size: 22px;
	font-weight: 700;
}

.wc26-empty p {

	margin: 0;

	color: #6b7280;
	line-height: 1.6;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

	.wc26-watch-card {

		padding: 18px;
	}

	.wc26-watch-header h1 {

		font-size: 26px;
	}

	.wc26-broadcaster-list {

		grid-template-columns: 1fr;
	}

	.wc26-broadcaster-item {

		flex-direction: column;
		text-align: center;
	}

	.wc26-broadcaster-logo {

		width: 90px;
		height: 90px;
	}

	.wc26-broadcaster-placeholder {

		width: 90px;
		height: 90px;
		font-size: 38px;
	}

	.wc26-broadcaster-content {

		width: 100%;
	}

	.wc26-broadcaster-content .wc26-btn {

		width: 100%;
	}
}
 
/* streaming now */
.wc26-streaming-now{
	display:flex;
	flex-direction:column;
	gap:8px;
	align-items:center;
}

.wc26-streaming-title{
	font-size:18px;
	font-weight:700;
	text-transform:uppercase;
}


.wc26-live-indicator{

	display:inline-flex;
	align-items:center;
	gap:10px;

	background:
		rgba(0,0,0,.35);

	padding:10px 18px;

	border-radius:999px;

	backdrop-filter:blur(8px);
}

.wc26-live-dot{
	width:18px;
	height:18px;
	border-radius:50%;
	background:#e10600;
	animation:wc26LiveBlink 1s infinite;
}

@keyframes wc26LiveBlink{

	0%{
		opacity:1;
	}

	50%{
		opacity:.2;
	}

	100%{
		opacity:1;
	}
}

.wc26-match-ended{

	font-size:26px;

	font-weight:800;

	text-shadow:
		0 2px 8px rgba(0,0,0,.4);
}
/* standings */
.wc26-standings-legend{
	margin:15px;
	font-size:13px;
	line-height:1.8;
	color:#666;
}
/* home */
.wc26-home-hero{
	text-align:center;
	padding:60px 20px;
	margin-bottom:30px;
}

.wc26-home-hero h1{
	margin:0 0 16px;
	font-size:56px;
	font-weight:800;
	letter-spacing:-.03em;
	line-height:1.1;
}

.wc26-home-hero p{
	max-width:700px;
	margin:0 auto;
	font-size:18px;
	color:#6b7280;
	line-height:1.7;
}
/* ==========================================================================
   Standings Table
   Bootstrap Accented + Striped
   ========================================================================== */

.wc26-table-wrap{
	width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	margin-top: 20px;
	margin-bottom:20px;
	border-radius:16px;
}

.wc26-table{

	width:100%;
	min-width:720px;

	border-collapse:separate;
	border-spacing:0;

	background:#fff;

	border:1px solid #e5e7eb;
	border-radius:16px;

	overflow:hidden;
}

.wc26-table thead th{

	padding:14px 12px;

	background:#f8f9fa;

	border-bottom:2px solid #e9ecef;

	font-size:12px;
	font-weight:700;

	text-transform:uppercase;
	letter-spacing:.06em;

	color:#6b7280;

	text-align:center;
}

.wc26-table thead th:nth-child(2){

	text-align:left;
}

.wc26-table tbody td{

	padding:14px 12px;

	border-bottom:1px solid #edf0f4;

	font-size:15px;

	text-align:center;

	vertical-align:middle;
}

/* striped rows */

.wc26-table tbody tr:nth-child(even){

	background:#f8fafc;
}

/* hover */

.wc26-table tbody tr:hover{

	background:#eef4ff;
}

/* accent row top 2 */

.wc26-table tbody tr:nth-child(1){

	border-left:4px solid #16a34a;
}

.wc26-table tbody tr:nth-child(2){

	border-left:4px solid #22c55e;
}

/* team column */

.wc26-table tbody td:nth-child(2){

	text-align:left;
	font-weight:600;
}

/* points */

.wc26-table tbody td:last-child{

	font-weight:700;
	font-size:16px;
}

/* remove old padding-left hack */

.wc26-table td{

	padding-left:12px !important;
}

/* group cell */
.wc26-team-cell{

	display:flex;

	align-items:center;

	gap:12px;

	min-width:180px;
}

.wc26-team-flag{

	font-size:22px;

	line-height:1;
}

.wc26-team-name{

	font-weight:600;

	white-space:nowrap;
}

/* group nav */
.wc26-group-nav{

	display:flex;

	flex-wrap:wrap;

	gap:10px;

	justify-content:center;

	margin-bottom:30px;
}

.wc26-group-nav a{

	padding:10px 14px;

	border-radius:999px;

	border:1px solid #e5e7eb;

	text-decoration:none;

	font-weight:600;

	color:#111827;

	background:#fff;
}

.wc26-group-nav a:hover{

	border-color:#2563eb;
}
/* watch country */
.wc26-watch-header h1{

	font-size:40px;

	font-weight:800;

	letter-spacing:-.02em;
}
/* broadcaster card */
.wc26-broadcaster-item{

	position:relative;

	overflow:hidden;
}

.wc26-broadcaster-content h3{

	font-size:20px;
}
/* next match card */
.wc26-next-match{
	padding:24px;
	min-height:auto;
}

/* ==========================================================================
   Mobile Standings
   ========================================================================== */

@media (max-width:767px){

	.wc26-table-wrap{

		margin-left:-18px;
		margin-right:-18px;

		padding-left:18px;
		padding-right:18px;
	}

	.wc26-table{

		min-width:640px;
	}

	.wc26-table thead th{

		font-size:11px;

		padding:12px 8px;
	}

	.wc26-table tbody td{

		font-size:14px;

		padding:12px 8px;
	}

	.wc26-team-cell{

		min-width:140px;

		gap:8px;
	}

	.wc26-team-name{

		font-size:14px;
	}

	.wc26-team-flag{

		font-size:18px;
	}
}
/* standing notes */
.standings-note {
	color: var(--textDefault,#03122b);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; 
	font-size: .75rem;
	gap: 1rem;
	grid-column: 1;
	margin-bottom: .3125rem;
	list-style: none;
}

/* team vs team */ 
/* ========================================================
   1. GAYA UNTUK MOBILE (Default: Berurutan Atas ke Bawah)
   ======================================================== */
.wc26-match-title {
  display: block;          /* Elemen utama menjadi block */
  text-align: center;      /* Semua teks otomatis di tengah */
  width: 100%;
  margin: 0 auto; 
}

/* Mengatur susunan elemen Tim & Skor di Mobile */
.wc26-match-title .team,
.wc26-match-title .match-score,
.wc26-match-title .match-vs {
  display: block;          /* Memaksa setiap elemen membuat baris baru */
  margin: 10px 0;          /* Jarak vertikal atas-bawah antar elemen */
  width: 100%;
}

/* Mengatur susunan internal [Bendera + Nama] agar tetap sejajar horizontal */
.wc26-match-title .team {
  display: inline-flex;    /* Menggunakan inline-flex agar pas dengan teks */
  justify-content: center; /* Bendera & nama tetap di tengah di mobile */
  align-items: center;
  gap: 8px;
}

/* Dekorasi Skor / VS di Mobile */
.wc26-match-title .match-score,
.wc26-match-title .match-vs {
  font-weight: bold; 
  color: #007bff; 
  font-size: 42px;  
}


/* ========================================================
   2. GAYA UNTUK DESKTOP (Layar Lebar: Sejajar Horizontal)
   ======================================================== */
@media (min-width: 768px) {
  .wc26-match-title {
    display: flex;         /* Aktifkan flexbox di desktop */
    align-items: center;
    justify-content: center;
    gap: 24px;    
    max-width: 700px;
  }

  /* Mengembalikan fungsi flex pembagi area untuk Tim kiri & kanan */
  .wc26-match-title .team {
    display: flex;
    flex: 1;               /* Area kiri dan kanan membagi ruang sama besar */
    margin: 0;             /* Hapus margin vertikal milik mobile */
  }

  /* Menghapus margin vertikal skor di desktop */
  .wc26-match-title .match-score,
  .wc26-match-title .match-vs {
    width: auto;
    margin: 0; 
  }
  .match-vs {
	font-size: 22px !important;
}

  /* Tim kiri: teks merapat ke kanan (mendekati skor) */
  .wc26-match-title .home-team {
    justify-content: flex-end;
    text-align: right;
  }

  /* Tim kanan: teks merapat ke kiri (menjauhi skor) */
  .wc26-match-title .away-team {
    justify-content: flex-start;
    text-align: left;
  }
}
/* label */
.group-label {
	font-size: 16px;
	color: #198754;
	font-weight: bold;
}
.group-label a {
	text-decoration: none;
}

/* badge matchday */
.wc26-stage-label{

	display:inline-flex;

	align-items:center;

	padding:8px 14px;

	border-radius:999px;

	background:#eff6ff;

	color:#1d4ed8;

	font-size:12px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:.05em;

	border:1px solid #bfdbfe;
}
/* btn schedule */
.wc26-schedule-actions a {
	min-width: 220px;
}
/* =====================================================
   Home Page
   ===================================================== */

.wc26-section-header{

	display:flex;
	align-items:center;
	justify-content:space-between;

	margin-bottom:20px;
}

.wc26-next-kickoff{

	font-size:24px;
	font-weight:700;
	color:#6b7280;
}

.wc26-next-match-card{

	background:#fff;

	border:1px solid #e5e7eb;

	border-radius:20px;

	padding:32px;

	text-align:center;
}

.wc26-next-scoreline{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:20px;

	font-size:28px;

	font-weight:700;

	flex-wrap:wrap;
}

.wc26-next-scoreline strong{

	font-size:34px;

	color:#111827;
}

.wc26-next-meta{

	margin-top:14px;

	font-size:15px;

	color:#6b7280;
}

/* upcoming */ 

.wc26-upcoming-time{

	margin-top:14px;

	display:flex;

	flex-direction:column;

	align-items:center;

	gap:2px;

	font-size:13px;

	font-weight:600;

	color:#6b7280;
}
@media (max-width:767px){

	.wc26-section-header{

		flex-direction:column;

		align-items:flex-start;

		gap:6px;
	}

	.wc26-next-scoreline{

		font-size:20px;

		gap:12px;
	}

	.wc26-next-scoreline strong{

		font-size:24px;
	}
}

/* card team */
.team.home-team {
	padding: 16px;
	border-radius: 18px;
	background-image: radial-gradient(circle at top left, #2977fc 0%, #f7fafc 100%);
	min-height: 130px;
}

.team.away-team {
	padding: 16px;
	border-radius: 18px;
	background-image: radial-gradient(circle at top right, #2977fc 0%, #f7fafc 100%);
	min-height: 130px;
}

/* live clock */
.wc26-live-clock{
	text-align:center;
	margin:20px 0 30px;
}

.wc26-live-clock-label{
	display:block;
	font-size:14px;
	opacity:.7;
	margin-bottom:8px;
}

#wc26-live-clock{
	font-size:24px;
	font-weight:700;
}

/* status nav  */
.wc26-status-nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:12px;
	margin:25px 0;
}

.wc26-status-nav a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius: 50px;
	padding:10px 18px; 
	font-weight:600;
	text-decoration:none;
	transition:all .2s ease;
}

.wc26-status-nav a:hover{
	transform:translateY(-1px);
	color:#444;
}

.wc26-status-nav a.active{
	background:#2563eb;
	border-color:#2563eb;
	color:#fff;
} 

/* schedule nav */

.wc26-schedule-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin:25px 0 15px;
	font-weight:600;
}

.wc26-schedule-nav select{
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;

	padding:8px 40px 8px 12px;

	border:1px solid #dbeafe;
	border-radius:8px;

	background-color:#fff;

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6' stroke='%232563eb' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:14px;

	cursor:pointer;
	min-width:120px;
}  

/* calendar nav */

.wc26-schedule-calendar{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	margin:25px 0;
}

.wc26-calendar-day{
	padding:8px 14px;
	border-radius:999px;
	background:#eef2ff;
	text-decoration:none;
	font-weight:600;
}

.wc26-date-anchor{
	text-align:center;
	margin:40px 0 20px;
}

.wc26-date-anchor h2{
	margin:0;
	font-size:24px;
	font-weight:700;
}

/* schedule nav */
.wc26-schedule-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin:20px 0;
}

.wc26-schedule-nav select{
	padding:8px 12px;
	border-radius:6px;
}

.wc26-day-nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin-bottom:25px;
}

.wc26-day-nav a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	text-decoration:none;
	font-weight:600;
	background:#f3f4f6;
}

.wc26-day-nav a:hover{
	transform:translateY(-1px);
}