.groups {display:none}

.w3-theme-l5 {color:#000 !important; background-color:#fff5f2 !important}
.w3-theme-l4 {color:#000 !important; background-color:#ffddd3 !important}
.w3-theme-l3 {color:#000 !important; background-color:#ffbca7 !important}
.w3-theme-l2 {color:#000 !important; background-color:#ff9a7b !important}
.w3-theme-l1 {color:#fff !important; background-color:#ff7850 !important}
.w3-theme-d1 {color:#fff !important; background-color:#ff4107 !important}
.w3-theme-d2 {color:#fff !important; background-color:#e93600 !important}
.w3-theme-d3 {color:#fff !important; background-color:#cb2f00 !important}
.w3-theme-d4 {color:#fff !important; background-color:#ae2900 !important}
.w3-theme-d5 {color:#fff !important; background-color:#912200 !important}
.w3-theme-light {color:#000 !important; background-color:#fff5f2 !important}
.w3-theme-dark {color:#fff !important; background-color:#912200 !important}
.w3-theme-action {color:#fff !important; background-color:#912200 !important}
.w3-theme {color:#fff !important; background-color:#ff5722 !important}
.w3-text-theme {color:#ff5722 !important}
.w3-border-theme {border-color:#ff5722 !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#ff5722 !important}
.w3-hover-text-theme:hover {color:#ff5722 !important}
.w3-hover-border-theme:hover {border-color:#ff5722 !important}

html, body {
	user-select: none; /* prevents text selection */
	-webkit-user-select: none;  /* Safari */
	-moz-user-select: none;     /* Firefox */
	-ms-user-select: none;      /* Internet Explorer/Edge */
}

div.scrollmenu {
	overflow: auto;
	white-space: nowrap;
	// margin: 0 7px 0 7px;
	padding: 0px 0 0px 0;
	scrollbar-color: #333 #333;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
div.scrollmenu::-webkit-scrollbar {
	display: none;
}
div.scrollmenu a {
	display: inline-block;
	// color: white;
	text-align: left;
	text-decoration: none;
}
div.scrollmenu a:hover {
	background-color: #777;
}

.own-blue {
	background-color: #ffe680;
}

.own-blue-1 {
	background-color: #efefef;
}

.own-black-border-bottom {
  border-bottom: 0.1rem solid #000000 !important;
}
.own-grey-border-bottom {
  border-bottom: 0.2rem solid #9e9e9e !important;
}
.own-black-border-top {
  border-top: 0.1rem solid #000000 !important;
}
.own-grey-border-top {
  border-top: 0.2rem solid #9e9e9e !important;
}

.ownCenter {
	width: 50vm;
	min-width: 300px;
	max-width: 700px;
	margin: auto;
}

.fa-chevron-right {
	transition: transform 0.2s ease-in-out;
}
.rotate-90 {
	transform: rotate(90deg);
}

.openGameBox {
	cursor: pointer;
}

.flag-tight {
  font-size: 2.1rem;
  line-height: 1;
}

/* Bright and pulsing for live matches */
.live-box {
	background-color: #e60000; /* vivid red */
	color: #fff;
	font-weight: bold;
	text-shadow: 0 0 8px rgba(255,255,255,0.9);
	animation: pulse 1.2s infinite alternate;
}
/* Muted and static for standby mode */
.live-box-off {
	background-color: #660000; /* darker red */
	color: #bbb;
	font-weight: bold;
	text-shadow: none;
	opacity: 0.7;
}
@keyframes pulse {
	from { opacity: 1; }
	to { opacity: 0.6; }
}
/* optional: ensure no other rule sets animation: none; with higher specificity */
h6.live-text {
	-webkit-animation: pulse 1.2s infinite alternate !important;
	animation: pulse 1.2s infinite alternate !important;
}

.live-badge {
   width: 71px;
   display: inline-flex;
   align-items: center;
   background-color: #e60000; /* strong red */
   color: #fff;
   font-weight: bold;
   border-radius: 8px;
   border: 1px solid #fff;
   padding: 2px 8px;
   text-shadow: 0 0 6px rgba(255,255,255,0.8);
   font-size: 0.9rem;
}
/* red live box */
.live-badge--wide {
	width: 81px;
   padding: 2px 0px 2px 10px;
}
.live-badge--wide-extend {
	width: 91px;
   padding: 2px 0px 2px 10px;
}
.live-blink {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #fff;
   margin-right: 6px;
   animation: blink 1s infinite alternate;
}
.live-noblink {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #e60000;
   margin-right: 6px;
}
.live-whitedot-noblink {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #fff;
   margin-right: 6px;
}
.live-blackdot-blink {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   /* background-color: #000; */
   background-color: #333;
   margin-right: 6px;
   animation: blink 1s infinite alternate;
}
.live-blackdot-noblink {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   /* background-color: #000; */
   background-color: #333;
   margin-right: 6px;
}
.live-nothing {
}
@keyframes blink {
   from { opacity: 1; }
   to { opacity: 0.2; }
}

/* standing styles */
.standing-box {
	margin: 0 0 1rem 0;
	padding: 0.2rem 0.1rem 0.5rem 0.1rem;
	border: 2px solid #ddd;
	border-radius: 10px;
}
.standing-advance {
	background: #d4edda; /* light green */
}
.standing-advance--lighter-green {
	background: #f1faf3; /* very light green */
}
.standing-advance-third {
	background: #fff9c4; /* light yellow */
	/* font-weight: bold; */
	animation: standing-pulseBg 2s infinite;
}
.standing-advance-line {
	height: 3px;
	background: #4caf50;
	margin: 4px 0 5px 0;
	border-radius: 3px;
	animation: standing-fadeIn 1s ease forwards;
}
/* 🟢 subtle glowing animation for 3rd-place advance line */
.standing-advance-line.glow {
	background: linear-gradient(90deg, #4caf50, #81c784, #4caf50);
	background-size: 200% 100%;
	animation: standing-glowMove 3s linear infinite, standing-fadeIn 1s ease forwards;
}
.standing-playoff-team {
	background: #fff9c4;   /* soft yellow */
}
.standing-playoff-team--lighter-yellow {		/* very light yellow */
	background: #fffdf0;
}
.standing-playoff-team--yellow {					/* light yellow */
	background-color: #fffde0;
}
.standing-team-row {
	padding: 0px 0px;
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid #ccc; /* tiny line */
}
.standing-team-row:last-child {
	border-bottom: none;
}
/* ✨ Animations */
@keyframes standing-fadeIn {
	from { opacity: 0; transform: scaleX(0.6); }
	to   { opacity: 1; transform: scaleX(1); }
}
@keyframes standing-glowMove {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@keyframes standing-pulseBg {
	0%, 100% { background-color: #fff9c4; }
	50% { background-color: #fff176; }
}

.flag-nations {
	width: 70px;
	height: 45px;
	border-radius: 7px;
	object-fit: cover;
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: 0 0 2px rgba(0,0,0,0.25);
	display: inline-block;
}

/* team form 87% */
.team-form-pill {
 display:inline-block;
 align-items:center;
 gap:4px;
 padding:.2rem .55rem;
 font-weight:000;
 border-radius:999px;
}
.team-form-good strong { color:#15803d; }
.team-form-mid strong { color:#d97706; }
.team-form-low strong { color:#dc2626; }

/* team form wwldl (circles) */
.team-form {
 display: inline-flex;
 gap: 4px;
 align-items: center;
 justify-content: center;
}
.team-form-badge {
 width: 13px;
 height: 13px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 8px;
 font-weight: 700;
 color: #fff;
 font-family: Arial, sans-serif;
 box-shadow: 0 2px 6px rgba(0,0,0,.15);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-form-badge-ajax {
 width: 14px;
 height: 14px;
 font-size: 9px;
}
.win { background: linear-gradient(135deg, #22c55e, #16a34a); }
.draw { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lose { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* menu system buttons */
/* shared base for all buttons */
.btn{
 display:inline-block;
 text-align:center;
 text-decoration:none;
 font-weight:600;
 color:#111;
 background:#fff;
 border:1px solid #d1d5db;
 cursor:pointer;
 transition:.2s ease;
 box-shadow:0 1px 3px rgba(0,0,0,.06);
 -webkit-tap-highlight-color: transparent;
}
/* Shared hover for all buttons */
.btn:hover{
 background:#1f2937;
 color:#facc15;
 transform:translateY(-1px);
}
/* Shared active state */
.btn.active{
 border-color:#dc2626;
 background:#fff5f5;
 color:#991b1b;
 box-shadow:0 2px 6px rgba(220,38,38,.12);
}
/* Shared mobile focus fix */
.btn:focus:not(:focus-visible){
 outline:none;
 background:#fff;
 color:#111;
 border-color:#d1d5db;
}
/* Main menu */ 
.menu-btn{
 min-width:5rem;
 padding:.45rem .9rem;
 font-size:14px;
 border-radius:12px;
 margin-right:6px;
}
/* Submenu */
.submenu-btn{
 min-width:4.4rem;
 padding:.35rem .75rem;
 font-size:13px;
 border-radius:10px;
 margin-right:5px;
}
/* Live menu */
.livemenu-btn{
 min-width:5.5rem;
 padding:.4rem .7rem;
 font-size:12px;
 border-radius:10px;
 margin:0 0 .6rem .5rem;
}
/* AJAX micro buttons */
.ajaxmenu-btn{
 min-width:3.0rem;
 padding:.2rem .5rem;
 font-size:11px;
 border-radius:8px;
 margin-right:1px;
}
/* Go back button */
.go-back-btn{
 min-width:4.5rem;
 padding:.35rem .75rem;
 font-size:13px;
 border-radius:10px;
 margin:0 0 1rem .5rem;
}

/* generic for AJAX */
.ajax_tpt_place_footer_text{
 padding:0 0.6rem 0 0;
 font-size:12px;
 font-style:italic;
 color:#555;
}

/* ------------------------
 * match results box
 */
.matchbox-small:hover{
 background:#f9fafb;
}

.matchbox{
 display:grid;
 align-items:center;
 gap:0.25rem;
 padding:0.45rem 0.6rem;
 border:1px solid #d1d5db;
 border-radius:10px;
 background:#fff;
 font-family:Inter, Arial, sans-serif;
 box-shadow:0 1px 3px rgba(0,0,0,.08);
 cursor:pointer;
 margin-left:0.3rem;
 margin-right:0.3rem;
 transition:all .15s ease;
}

.matchbox_dis:active,
.matchbox_dis:focus{
 border:1px solid #ff4fd8;
 box-shadow:0 0 0 2px rgba(255,79,216,.2);
 outline:none;
}

.matchbox-small{
 grid-template-columns:70px 24px 1fr 30px;
 font-size:13px;
 margin-bottom:0.2rem;
}

.matchbox-medium{
 grid-template-columns:80px 28px 1fr 34px;
 font-size:14px;
 padding:0.6rem 0.75rem;
 margin-bottom:0.5rem;
}

.matchbox-upcoming{
 grid-template-columns:80px 28px 1fr 34px;
 font-size:14px;
 border-color:#bfdbfe;
 background:#eff6ff;
}

.matchbox-upcoming:hover{
 background:#e0f2fe;
}

.matchbox-upcoming .kickoff-time{
 color:#2563eb;
 padding:0 6px;
}

.matchbox-finished .kickoff-time{
 padding:0 0px;
}

.matchbox-live{
 grid-template-columns:80px 28px 1fr 34px;
 font-size:14px;
 border-color:#fecaca;
 background:#fff7f7;
}
.matchbox-live:hover{
 background:#fff1f2;
 border-color:#fca5a5;
 box-shadow:0 2px 6px rgba(220,38,38,.12);
}

.matchbox-finished{
 grid-template-columns:80px 28px 1fr 34px;
 font-size:14px;
 background:#f9fafb;
}
.matchbox-finished:hover{
 background:#f3f4f6;
 border-color:#d1d5db;
 box-shadow:0 2px 4px rgba(0,0,0,.06);
}

.matchbox-small_dis:active,
.matchbox-small_dis:focus{
 border:1px solid #ff4fd8;
 box-shadow:0 0 0 2px rgba(255,79,216,.2);
 outline:none;
}

.match-col1{
 font-size:11px;
 color:#6b7280;
 line-height:1.35;
 min-width:65px;
}

.match-col2{
 display:flex;
 flex-direction:column;
 gap:0.25rem;
 align-items:center;
}

.team-logo{
 width:20px;
 height:20px;
 object-fit:contain;
}

.match-col3{
 display:flex;
 flex-direction:column;
 gap:0.3rem;
 min-width:0;
}

.team-row{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:0.35rem;
 min-width:0;
}

.team-main{
 display:flex;
 align-items:center;
 gap:5px;
}

.team-name{
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-size:13px;
 min-width:0;
}

.team-form-dis{
 display:flex;
 align-items:center;
 justify-content:flex-end;
 flex-shrink:0;
}

.red-card{
 display:flex;
 align-items:center;
 justify-content:center;
 min-width:12px;
 height:16px;
 padding:0 2px;
 background:#dc2626;
 border-radius:2px;
 color:#fff;
 font-size:9px;
 font-weight:700;
 line-height:1;
 box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

.match-col4{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:0.3rem;
 font-weight:700;
 min-width:30px;
 width:30px;
 flex-shrink:0;
}

.team-score{
 font-size:14px;
 line-height:1;
 min-height:14px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.score-empty{
 color:transparent;
 user-select:none;
}

.aet-score{
 font-size:12px;
 background:#fef3c7;
 color:#92400e;
 padding: 0 0.5rem;
 border-radius:.45rem;
}

.aet-ft-score{
 font-size:12px;
}

.pen-score{
 /* font-size:10px; */
 /* color:#6b7280; */
 font-size:12px;
 margin-top:2px;
 background:#fee2e2;
 color:#991b1b;
 border-radius:.45rem;
}

.winner{
 color:#15803d;
 font-weight:700;
}

/* Status badges */
.match-badge{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:1px 5px;
 border-radius:999px;
 font-size:10px;
 font-weight:700;
 line-height:1.2;
 box-sizing:border-box;
}

.aet{
 background:#fef3c7;
 color:#92400e;
 padding:1px 4px;
 font-size:9px;
}
.ft{
 background:#e5e7eb;
 color:#374151;
}
.group-label{
 color:#1d4ed8;           /* blue text */
 background:#dbeafe;      /* soft blue background */
 padding:2px 0px;
 border-radius:999px;
 font-size:10px;
 font-weight:700;
 display:inline-block;
}

.stage-label{
 display:block;
 margin-top:0px;
 font-size:10.5px;
 font-weight:800;
 color:#6b7280;
}
.pen{
 background:#fee2e2;
 color:#991b1b;
}
.live{
 background:#fee2e2;
 color:#dc2626;
 animation:pulseLive 1s infinite;
}
.match-live-noblink{
 background:#dc2626;
 color:white;
 font-weight:700;
 box-shadow:0 0 4px rgba(220,38,38,.25);
}
.kickoff-time{
 font-weight:700;
 font-size:.85rem;
 color:#fbbf24; /* yellow/gold for visibility */
}
.comment{
 background:#fee2e2;
 color:#991b1b;
}

/* Live pulse */
@keyframes pulseLive{
 0%{opacity:1;}
 50%{opacity:.45;}
 100%{opacity:1;}
}


/* Form mini circles */
.form-mini{
 display:flex;
 gap:2px;
}

.f{
 width:14px;
 height:14px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:9px;
 font-weight:700;
 color:white;
}

/*
.win{background:#16a34a;}
.loss{background:#dc2626;}
.draw{background:#f59e0b;}
*/


/* Mobile optimization */
@media (max-width:600px){
 .matchbox-small,
 .matchbox-medium,
 .matchbox-upcoming,
 .matchbox-live,
 .matchbox-finished{
  grid-template-columns:60px 22px 1fr 24px;
  font-size:12px;
 }


 .match-badge{
  min-width:26px;
  padding:1px 5px;
  font-size:9px;
 }

 .kickoff-time{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.2px;
 }

 .team-logo{
  width:18px;
  height:18px;
 }

 .team-score{
  font-size:13px;
 }

 .f{
  width:12px;
  height:12px;
  font-size:8px;
 }
}

.match-date-header{
 display:flex;
 justify-content:center;
 align-items:center;
 margin:.6rem 0 .4rem 0;
 padding:.5rem .9rem;
 font-size:.92rem;
 font-weight:700;
 letter-spacing:.2px;
 background:#111827;
 color:#fff;
 border-left:4px solid #dc2626;
 border-radius:.45rem;
 box-shadow:0 2px 6px rgba(0,0,0,.08);
}

@media (max-width:768px){
 .match-date-header{
   font-size:1rem;
   padding:.55rem .9rem;
 }
}

.load-more-btn{
 justify-content:center;
 text-align:center;
 cursor:pointer;
}

.load-more-content{
 width:100%;
 text-align:center;
 font-weight:700;
 font-size:14px;
 color:#374151;
 margin-top:0.7rem;
}
.header-content{
 width:100%;
 text-align:center;
 font-weight:700;
 font-size:17px;
 letter-spacing:0.3px;
 color:#111827;
}

.empty-state{
 margin:0.5rem 0.0rem;
 padding:1.1rem 1rem;
 border:1px dashed #d1d5db;
 border-radius:10px;
 background:#f9fafb;
 text-align:center;
 box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.empty-state-upcoming{
 border:1px dashed #bfdbfe;
 background:#eff6ff;
}
.empty-state-finished{
 border:1px dashed #bfdbfe;
 background:#f9fafb;
}

.empty-state-icon{
 font-size:1.4rem;
 line-height:1;
 margin-bottom:0.45rem;
}

.empty-state-title{
 font-size:15px;
 font-weight:700;
 color:#111827;
 margin-bottom:0.2rem;
}

.empty-state-text{
 font-size:13px;
 color:#6b7280;
 line-height:1.4;
}

/* info box about waiting for more data */
.season-nav-box{
 margin:0.5rem 0.3rem;
 border:1px solid #d1d5db;
 border-radius:10px;
 background:#fff;
 box-shadow:0 1px 3px rgba(0,0,0,.06);
 overflow:hidden;
}

.season-nav-text{
 padding:0.75rem 0.9rem;
 text-align:center;
 font-size:14px;
 font-weight:600;
 line-height:1.4;
 color:#374151;
}

.season-nav-links{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:0.75rem;
 padding:0.45rem 0.75rem;
 border-top:1px solid #e5e7eb;
 background:#f9fafb;
 font-size:12px;
}

.season-nav-link{
 flex:1;
}

.season-nav-link-prev{
 text-align:left;
}

.season-nav-link-next{
 text-align:right;
}

.season-nav-links a{
 color:#2563eb;
 text-decoration:none;
 font-weight:600;
}

.season-nav-links a:hover{
 text-decoration:underline;
}