:root {
  --background-colour: #222;
  --tab-boarder-colour: #848484; /* Not directly used for new button bars, but kept */
  --tab-background-colour: #111; /* Dark background for selector bars */
  --tab-text-colour: #f70; /* Used for the main selectors and headings */

  --selector-btn-background: #333; /* Darker background for buttons */
  --selector-btn-text: #f70; /* Orange text for buttons */
  --selector-btn-border: #f70; /* Orange border for buttons */
  --selector-btn-hover-background: #f70; /* Orange background on hover */
  --selector-btn-hover-text: #111; /* Dark text on hover */
  --selector-btn-active-background: #f70; /* Orange background for active button */
  --selector-btn-active-text: #111; /* Dark text for active button */

  --team-title-colour: #f70; /* Orange for team section title */
  --team-card-background-colour: #9c4900; /* Orange-brown for card background */
  --team-card-background-shadow: #ffffff1a;
  --team-card-text-colour: #fff;
  --team-card-title-colour: #fff;
  --team-card-image-text-colour: #fff;

  --top-background-colour: #f70;
  --top-text-colour: white;
  --top-hover-background-colour: #f70;
  --top-text-hover-colour: black;
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px; /* Adjusted to account for navbar and sticky tabs */
}

body {
  font-family: quicksand;
  margin: 0;
  background: var(--background-colour);
}

.tabs {
  /* This container now solely manages the vertical spacing and sticky behavior for the selector bars */
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
  gap: 1rem; /* Space between the age group and league selector bars */
  margin-top: 2rem; /* Space below navbar */
  margin-left: 2rem;
  margin-right: 2rem;
  top: 60px; /* Below the navbar */
  z-index: 10;
  box-shadow: none; /* No shadow for this wrapper */
  border-radius: 0; /* No border-radius for this wrapper */
  background: transparent; /* Ensure no background on the wrapper itself */
}

.loadingSquads {
  text-align: center;
  color: var(--tab-text-colour);
  padding: 1rem;
  font-size: 1.5rem;
  background-color: var(--tab-background-colour); /* Apply background to loading text itself */
  margin: 0; /* Remove margin as parent .tabs handles side margins */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  display: none; /* Hide loading text by default as per image */
}

.selector-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* Space between buttons */
  padding: 0.75rem 1rem; /* Padding inside each selector bar */
  background-color: var(--tab-background-colour); /* Dark background for each distinct bar */
  border-radius: 8px; /* Rounded corners for the bars */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for each bar */
  align-items: center; /* Vertically align buttons within the bar */
  min-height: 50px; /* Ensure a minimum height for the bar */
}

/* Style for individual selector buttons */
.selector-btn {
  background-color: var(--selector-btn-background);
  color: var(--selector-btn-text);
  border: 2px solid var(--selector-btn-border);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  flex-grow: 0; /* Changed to 0 to prevent stretching, let content dictate width */
  text-align: center;
  min-width: 100px; /* Minimum width for buttons */
}

.selector-btn:hover {
  background-color: var(--selector-btn-hover-background);
  color: var(--selector-btn-hover-text);
  border-color: var(--selector-btn-hover-background); /* Border matches background on hover */
}

.selector-btn.active {
  background-color: var(--selector-btn-active-background);
  color: var(--selector-btn-active-text);
  border-color: var(--selector-btn-active-background);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); /* Inner shadow for active state */
}

.tab-content {
  padding: 0 2rem 2rem; /* Adjusted padding: no top padding, but side and bottom padding */
}

.squads-section-title {
  color: var(--team-title-colour);
  font-size: 2rem;
  margin-top: 2rem; /* Space above the title */
  margin-bottom: 1.5rem;
  text-align: left; /* Align left as per image */
  margin-left: 0; /* Remove left margin here, handled by parent .tab-content padding */
}

.team-grid {
  display: grid;
  gap: 2rem; /* Increased gap for better spacing */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Wider cards */
  justify-content: start; /* Align to the start of the grid */
  padding: 0; /* Remove padding here, handled by parent .tab-content padding */
}

.team-card {
  background: var(--team-card-background-colour);
  padding: 1.25rem; /* Slightly more padding */
  border-radius: 10px; /* More rounded corners */
  box-shadow: 0 4px 12px var(--team-card-background-shadow); /* Stronger shadow */
  text-align: center;
  text-decoration: none;
  width: 100%;
  margin: 0; /* Remove auto margin to align left in grid cell */
  display: flex; /* Use flexbox for internal layout */
  flex-direction: column;
  align-items: center;
}

.team-card img {
  color: var(--team-card-image-text-colour);
  width: 100%;
  height: 300px; /* Fixed height for images to ensure consistency */
  object-fit: cover; /* Cover the area, cropping if necessary */
  border-radius: 8px; /* More rounded corners for images */
  margin-bottom: 1rem; /* More space below image */
}

.team-card:hover {
  transform: translateY(-5px) scale(1.02); /* Lift and slightly scale on hover */
  filter: brightness(95%); /* Slight brightness increase */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.team-card h3 {
  margin: 0.5rem 0 0.5rem; /* Adjusted margins */
  color: var(--team-card-title-colour);
  font-size: 1.5rem; /* Larger title */
}

.team-card p {
  font-size: 1rem; /* Slightly larger text */
  color: var(--team-card-text-colour);
  margin-bottom: 0.5rem;
}

.team-card .squad-meta {
  font-size: 0.85rem;
  opacity: 0.8; /* Slightly less prominent */
  margin-top: auto; /* Push to the bottom of the card */
}

/* Back to Top Button Styles */
#backToTop {
  position: fixed;
  bottom: 50px;
  right: 50px;
  border-radius: 50%; /* Makes the button circular */
  display: flex; /* Use flexbox for centering content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 60px; /* Set a fixed width */
  height: 60px; /* Set a fixed height, equal to width for a perfect circle */
  font-size: 0; /* Hide text, we'll use an icon or background for the arrow */
  overflow: hidden; /* Hide anything outside the circle */
  background-color: var(--top-background-colour);
  color: var(--top-text-colour);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1500;

  /* Initial hidden state for fade and slide */
  opacity: 0;
  transform: translateX(70px); /* Start off-screen to the right */
  pointer-events: none; /* Not clickable when invisible */

  /* Transitions for all animated properties */
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Class to show the button */
#backToTop.show-back-to-top {
    opacity: 1;
    /* transform is now controlled by JS for rotation, so we only need translateX(0) here */
    /* The rotation will be added by JS dynamically */
    pointer-events: auto; /* Make clickable when visible */
}

/* Add an arrow icon using a pseudo-element */
#backToTop::before {
    content: '↑'; /* Up arrow character */
    font-size: 2rem; /* Size of the arrow */
    color: var(--top-text-colour);
    display: block;
    line-height: 1;
    /* Transition for smooth rotation when JS updates transform */
    transition: color 0.3s ease, transform 0.05s linear;
}

#backToTop:hover {
  background-color: var(--top-hover-background-colour);
  color: var(--top-text-hover-colour); /* Change text color on hover */
  /* Remove transform here to avoid conflict with JS-controlled rotation */
}

#backToTop:hover::before {
    color: var(--top-text-hover-colour);
}

/* Remove the continuous spin animation */
/* #backToTop.rotate::before {
    animation: spin 0.5s linear infinite;
} */

/* @keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} */

/* Responsive adjustments */
@media (max-width: 768px) {
  .tabs {
    margin: 1rem 1rem;
    gap: 0.75rem; /* Smaller gap between selector bars */
  }

  .loadingSquads {
    margin: 0; /* No side margins here, parent .tabs handles it */
  }

  .selector-buttons {
    flex-direction: column; /* Stack buttons vertically on small screens */
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .selector-btn {
    min-width: unset; /* Remove min-width for stacked buttons */
    width: 100%; /* Make them full width */
  }

  .tab-content {
    padding: 0 1rem 1rem; /* Adjusted padding for smaller screens */
  }

  .squads-section-title {
    font-size: 1.75rem;
    margin-left: 0; /* Handled by parent padding */
  }

  .team-grid {
    padding: 0; /* Handled by parent padding */
    gap: 1rem;
  }

  .team-card {
    max-width: 100%; /* Allow cards to take full width on small screens */
  }

  #backToTop {
    bottom: 20px;
    right: 20px;
    width: 50px; /* Smaller size for mobile */
    height: 50px;
  }

  #backToTop::before {
    font-size: 1.5rem; /* Smaller arrow for mobile */
  }
}