{
margin: 0;
padding: 0;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: hsl(0, 0%, 96%);
color: hsl(20, 14.3%, 4.1%);
}

.cwc-wrapper {
width: 100%;
padding: 0;
margin: 0;
}

.refresh-indicator {
position: fixed;
top: 10px;
right: 10px;
background: hsl(207, 90%, 54%);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
cursor: pointer;
}

.refresh-indicator.refreshing {
background: hsl(120, 49%, 42%);
animation: pulse 1s ease-in-out;
}

.refresh-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
animation: pulse 2s ease-in-out infinite;
}

.cwc-date-picker-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
gap: 15px;
background: hsl(0, 0%, 100%);
border-bottom: 1px solid hsl(0, 0%, 88%);
}

.cwc-calendar {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}

.cwc-calendar input[type="date"] {
padding: 8px 12px;
border: 2px solid hsl(0, 0%, 87%);
border-radius: 8px;
font-size: 14px;
background: hsl(0, 0%, 100%);
cursor: pointer;
}

.cwc-league-selector {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}

.cwc-league-selector select {
background: hsl(0, 0%, 100%);
color: hsl(20, 14.3%, 4.1%);
border: 1px solid #333;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
}

.cwc-navigation-controls {
display: flex;
align-items: center;
gap: 10px;
}

.nav-button {
padding: 8px 12px;
background: hsl(207, 90%, 54%);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
min-width: 40px;
}

.nav-button:hover {
background: hsl(207, 90%, 44%);
}

.cwc-date-strip {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
background: hsla(0, 0%, 100%, 0.95);
border-bottom: 1px solid hsl(0, 0%, 88%);
}

.cwc-date-button {
flex: 1;
padding: 10px 0;
border-radius: 8px;
background: hsl(0, 0%, 100%);
color: hsl(0, 0%, 20%);
font-size: 12px;
cursor: pointer;
font-weight: 500;
text-align: center;
border: 2px solid hsl(0, 0%, 88%);
transition: all 0.2s ease;
}

.cwc-date-button:hover {
border-color: hsl(207, 90%, 54%);
transform: translateY(-1px);
}

.cwc-date-button.active {
background: hsl(207, 90%, 54%);
color: hsl(0, 0%, 100%);
border-color: hsl(207, 90%, 54%);
}

.cwc-group {
background: hsl(0, 0%, 100%);
border-radius: 12px;
margin: 1em;
overflow: hidden;
box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.08);
border: 1px solid hsl(0, 0%, 94%);
}

.cwc-group h3 {
margin: 0;
padding: 16px;
background: hsl(210, 9%, 97%);
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid hsl(210, 11%, 93%);
text-align: center;
color: hsl(210, 9%, 31%);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.match-line {
display: grid;
grid-template-columns: 1fr auto auto auto 1fr;
align-items: center;
padding: 6px 8px;
border-bottom: 1px solid hsl(210, 9%, 97%);
font-size: 8px;
background: hsl(0, 0%, 100%);
gap: 0px;
cursor: pointer;
transition: all 0.2s ease;
}

.match-line:hover {
background: hsl(210, 9%, 98%);
transform: translateY(-1px);
box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.1);
}

.match-line:last-child {
border-bottom: none;
}

.match-details {
display: none;
padding: 20px;
background: hsl(210, 9%, 98%);
border-top: 1px solid hsl(210, 11%, 93%);
grid-column: 1 / -1;
}

.match-details.expanded {
display: block;
animation: slideDown 0.3s ease-out;
}

.stats-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
margin-bottom: 20px;
}

.team-stats, .match-stats {
text-align: center;
}

.team-stats h4, .match-stats h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
color: hsl(210, 9%, 31%);
}

.stat-item {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 12px;
border-bottom: 1px solid hsl(210, 11%, 90%);
}

.stat-item:last-child {
border-bottom: none;
}

.stat-bar-container {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
font-size: 11px;
}

.stat-bar {
flex: 1;
height: 6px;
background: hsl(210, 11%, 93%);
border-radius: 3px;
overflow: hidden;
}

.stat-bar-fill {
height: 100%;
background: hsl(207, 90%, 54%);
transition: width 0.3s ease;
}

.scorers-section {
margin-top: 20px;
}

.scorers-section h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
color: hsl(210, 9%, 31%);
text-align: center;
}

.scorer-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
margin: 4px 0;
background: hsl(0, 0%, 100%);
border-radius: 6px;
font-size: 12px;
}

.scorer-time {
background: hsl(120, 49%, 42%);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
min-width: 30px;
text-align: center;
}

.scorer-name {
font-weight: 500;
}

.close-details {
text-align: center;
margin-top: 15px;
}

.close-details button {
padding: 6px 12px;
background: hsl(210, 9%, 46%);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}

.close-details button:hover {
background: hsl(210, 9%, 36%);
}

@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
max-height: 500px;
transform: translateY(0);
}
}

.match-line.live {
background: linear-gradient(90deg, hsla(0, 73%, 54%, 0.05) 0%, hsl(0, 0%, 100%) 50%, hsla(0, 73%, 54%, 0.05) 100%);
border-left: 4px solid hsl(0, 73%, 54%);
}

.team-name {
font-size: 8px;
font-weight: 900;
}

.team-name.home {
text-align: right;
justify-self: end;
}

.team-name.away {
text-align: left;
justify-self: start;
}

.team-name.winning {
color: hsl(120, 49%, 42%);
font-weight: 600;
}

.team-name.losing {
color: hsl(0, 73%, 54%);
font-weight: 600;
}

.team-logo {
width: 22px;
height: 22px;
object-fit: contain;
justify-self: center;
border-radius: 2px;
}

.match-time-score {
font-weight: 600;
font-size: 13px;
min-width: 80px;
text-align: center;
color: hsl(0, 0%, 20%);
justify-self: center;
padding: 6px 10px;
border-radius: 6px;
background: hsl(210, 9%, 97%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}

.live-score {
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
gap: 4px;
}

.live-score .score-separator {
color: hsl(210, 9%, 46%);
font-size: 14px;
}

.match-minute {
font-size: 10px;
color: hsl(0, 0%, 100%);
background: hsl(0, 73%, 54%);
padding: 2px 6px;
border-radius: 10px;
font-weight: 600;
animation: pulse 2s ease-in-out infinite;
}

.match-status {
font-size: 11px;
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}

.match-status.live {
color: hsl(0, 0%, 100%);
background: hsl(0, 73%, 54%);
animation: pulse 2s ease-in-out infinite;
}

.match-status.ft {
color: hsl(210, 9%, 46%);
background: hsl(210, 11%, 93%);
}

.match-status.upcoming {
color: hsl(207, 90%, 54%);
background: hsl(207, 90%, 97%);
}

.goal-flash {
animation: goalFlash 0.6s ease-in-out;
}

.loading-state, .error-state {
text-align: center;
padding: 2em;
color: hsl(210, 9%, 46%);
font-size: 14px;
}

.error-state {
color: hsl(0, 73%, 54%);
}

.retry-button {
margin-top: 1em;
padding: 8px 16px;
background: hsl(207, 90%, 54%);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

@keyframes goalFlash {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); background-color: hsl(120, 49%, 42%); }
}

@media screen and (max-width: 768px) {
.cwc-date-picker-section {
flex-direction: column;
gap: 12px;
padding: 1em 0.5em;
}

.cwc-navigation-controls {
width: 100%;
justify-content: center;
}

.match-line {
font-size: 12px;
padding: 12px 0px;
gap: 0px;
}

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

.match-time-score {
font-size: 12px;
min-width: 70px;
padding: 4px 8px;
}

.team-name {
font-size: 12px;
}

/* Remove side margins  border-radius on mobile for full width look */
.cwc-group {
margin-left: 0;
margin-right: 0;
border-radius: 0;
}

}


/* ==================== FILTER BUTTONS & SEARCH ==================== */
#filter-search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
#filter-buttons {
    display: flex;
    gap: 10px;
    flex: 1;
}
.filter-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: #eee;
    cursor: pointer;
}
.filter-btn.active {
    background: #007bff;
    color: white;
}

/* Search Button */
#search-btne {

    padding: 4px 8px;

    border: none;

    background: #e6e6e6;

    color: #f8f9fa; /* very bright, visible white */

    border-radius: 50%;

    cursor: pointer;

    text-shadow: 0 0 2px #000000; /* subtle dark shadow for contrast */

}
/* Search container */
#search-container {
    display: none;
    width: 100%;
    margin-bottom: 10px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}
#search-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}
#search-shortcuts {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.shortcut-btn {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: #f1f1f5;
    font-size: 12px;
    cursor: pointer;
}
.shortcut-btn:hover {
    background: #e0e0e0;
}

/* ==================== LEAGUE HEADER ==================== */
.league-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.league-logo-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.league-logo-wrapper img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.league-name {
    font-weight: bold;
    font-size: 12px;
}

/* ==================== TV CHANNELS UNDER MATCH ==================== */
  /* Fixture styling */
.fixture {
    margin-bottom: 16px; /* space between fixtures */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
}

/* TV Channel Cloud */
.tv-cloud-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px; /* space above cloud */
}

.tv-cloud {
    padding: 6px 12px;
    border-radius: 12px;
    background: #f1f1f5;
    color: #333;
    font-size: 12px;
    border: 1px solid #ddd;
    display: inline-block;
    cursor: default;
    transition: transform 0.2s;
}

.tv-cloud:hover {
    transform: scale(1.1);
    background: #e0e0e0;
}
 
/* ==================== TEAM / COMPETITION LIST ==================== */
.list-btn {
    padding: 8px 12px;
    margin: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    cursor: pointer;
}
.list-btn:hover {
    background: #e0e0e0;
}

/* Toggle Past/Upcoming */
.toggle-buttons {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}
.toggle-buttons button {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    cursor: pointer;
}
.toggle-buttons button.active {
    background: #007bff;
    color: white;
}
  
/* Make search button independent */
.search-btne {
    background: white;        /* Or whatever background you want */
    border: 1px solid #ccc;   /* Optional border */
    padding: 4px;              /* Small padding around icon */
    border-radius: 50%;        /* Circle button */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 30px;               /* Fixed size */
    height: 30px;
}

/* Style the img inside */
.search-btne img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}  
  
  /* Updated List Styling - Modern Version */

.team-item,
.competition-item {
  padding: 1rem; /* 16px - improved from 12px for better touch targets */
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.team-item:hover,
.competition-item:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.teams-list,
.competitions-list {
  margin-top: 0.625rem; /* 10px */
}

/* Enhanced with modern interactions */
.team-item:active,
.competition-item:active {
  background-color: hsl(var(--muted) / 0.7);
}

.team-item,
.competition-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}