/* Global body styles */
    body {
      background-color: #42a5f5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      font-family: 'Lato', sans-serif; /* Apply Lato font globally */
      border-radius: 10px; /* Standardized border-radius */
      position: relative; /* Needed for z-index context if content has z-index */
      overflow: visible; /* Ensure content is not hidden */
    }

    /* New: Animated Background Container */
    .animated-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(-45deg, #42a5f5, #64b5f6, #90caf9, #bbdefb);
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
      z-index: 2; /* Ensure it's behind all content */
      overflow: hidden; /* Hide overflowing shapes within this container */
      opacity: 0;
    }

    /* Side Navigation (Sidenav) styles */
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1050;
      top: 0;
      right: 0;
      background-color: #42a5f5; /* Blue background */
      overflow-x: hidden;
      transition: 0.3s; /* Smooth transition for opening/closing */
      padding-top: 40px; /* Reduced padding */
    }

    .sidenav__link {
      display: block;
      font-size: 22px;
      color: white;
      padding: 10px 0;
      text-align: center;
      font-weight: bold;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Lighter border */
      text-decoration: none;
      margin: 5px 30px;
      width: 88%;
      margin: 5px auto;
      border-radius: 15px;
    }

    .sidenav__link:hover {
      color: black;
      background-color: rgba(255, 255, 255, 0.2); /* Subtle hover effect */
    }

    .sidenav__link .fa-filter {
        margin-right: 8px; /* Space between icon and text */
    }

    /* Style for the filter icon at the top left of the sidenav */
    .sidenav__filter-icon {
      position: absolute;
      top: 20px; /* Adjust to align with close button or preference */
      left: 25px; /* Adjust for desired left padding */
      font-size: 24px; /* Match navbar icon size or adjust */
      color: white;
      cursor: pointer;
      transition: transform 0.2s ease-in-out;
    }
    .sidenav__filter-icon:hover {
      transform: scale(1.1);
    }
    .sidenav__close-button {
      position: absolute;
      top: 5px;
      right: 20px;
      font-size: 40px;
      border: none;
      background: none;
      color: white;
      cursor: pointer;
    }

    .sidenav__sticker {
      position: absolute;
      opacity: 0.4;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 30px;
      width: 100%;
      text-align: center;
    }

    .sidenav__sticker-image {
      width: 150px;
    }

    /* Navbar styles */
    .navbar {
      background-color: #42A5F5; /* Blue background */
      padding: 10px 0px;
      /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */ /* Subtle shadow */
    }

    .navbar__container {
      display: flex;
      flex-direction: row; /* Arranged in a row */
      align-items: center; /* Center items vertically */
      justify-content: space-between; /* Distribute items with space between them */
      gap: 10px; /* Space between items */
      width: 100%; /* Ensure container takes full width */
      padding: 0 5px; /* Add some horizontal padding */
    }

    .navbar__logo {
        /* No specific width needed, content will dictate size */
        text-align: left; /* Align logo to the left */
    }

    .navbar__logo .fas { /* Style for Font Awesome logo icon */
      font-size: 40px; /* Reverted size */
      color: white;
      transition: transform 0.2s;
    }
    .navbar__logo-image {
        width: 40px;
    }

    .navbar__logo .fas:hover {
        transform: scale(1.1);
    }

    .search-box {
      flex-grow: 1; /* Allow search box to take available space */
      position: relative; /* For dropdown positioning */
      /* max-width: 90%; /* Consider removing or adjusting for flex layout */
      margin-left: 0px; /* Optional: space from logo */
      margin-right: 5px; /* Optional: space from menu icon */
    }

    .search-box .input-group {
      background-color: #42a5f5; /* Blue background for the whole group */
      border: 2px solid white;   /* White border for the group */
      border-radius: 10px;       /* Rounded corners for the group */
      overflow: hidden;          /* To make sure children conform to border-radius */
    }

    .search-box .input-group-text.search-icon-span {
      background-color: transparent; /* Make icon span transparent */
      border: none;                  /* Remove default border from icon span */
      color: white;                  /* Icon color */
      padding-left: 12px;          /* Adjust padding as needed */
      padding-right: 8px;
      border-right: 2px solid white
    }

    .search-box .form-control {
      /* width: 100%; */ /* Allow Bootstrap's default flex behavior to manage width */
      border: none;                /* Remove default border from input */
      background: transparent;     /* Make input background transparent */
      color: white;                /* Text color */
      padding: 10px 5px;
      font-size: 1rem;           /* Adjust font size as needed */
      line-height: 1;
    }

    .search-box .form-control::placeholder { /* Style for placeholder text */
      color: white;
      opacity: 0.8; /* Optional: make placeholder slightly less prominent */
    }

    /* Styles for navbar action icons (filter, menu) */
    .navbar__action-icon {
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      /* padding: 0 5px; /* Adjust if more space around icon is needed, gap on parent might be enough */
    }

    .navbar__action-icon .fas {
      font-size: 28px; /* Consistent icon size, adjust as needed */
      transition: transform 0.2s ease-in-out;
    }

    .navbar__action-icon:hover .fas {
      transform: scale(1.1);
    }

    .random-box {
        /* No specific width needed, content will dictate size */
        /* text-align: right; /* May not be needed if using flex and gap */
    }

    /* Original .random-box .fas styles can be removed or commented out if covered by .navbar-action-icon */

    /* Quiz Page Layout */
    .quiz-page {
      text-align: center;
      flex-grow: 1; /* Allows quiz content to take available space */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* padding: 15px 0; */ /* Reduced padding */
      background: #42a5f5ed;
      z-index: 3;
    }

    .quiz-page__title-wrapper {
      margin: 12px auto; /* Reduced margin */
      font-size: 24px; /* Larger title */
      width: 100%;
      max-width: 945px; /* Increased max-width to match quiz container */
      margin-top: 5px;
    }

    .quiz-page__title {
      margin: 0 12px; /* Adjusted margin */
      box-shadow: 2px 2px 4px gray; /* Softer shadow */
      padding: 10px; /* Reduced padding */
      border-radius: 10px; /* Standardized border-radius */
      background: white;
      font-weight: 600; /* Slightly bolder */
      color: #42a5f5;
      text-shadow: 1px 1px 1px gray; /* Subtle text shadow */
    }

    .quiz-page .container {
      max-width: 945px; /* Set max-width to match title box */
    }

    .quiz-page__question-section {
      width: 100%;
      display: flex;
      flex-direction: column; /* Always stack question and options vertically */
      align-items: center;
      padding: 0px 15px;
    }

    .quiz-page__image-box {
      margin-bottom: 15px; /* Reduced margin */
      max-width: 400px; /* Ensure it takes full width */
      padding: 0; /* Remove image-specific padding */
      display: flex; /* Use flexbox for centering content */
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      background: white;
      border-radius: 10px;
      margin-bottom: 10px;
      box-shadow: 2px 2px 4px #555555;
      position: relative; /* Added for absolute positioning of club logo */
    }

    .quiz-page__league-logo {
      position: absolute;
      top: 5px;
      left: 5px;
      width: 60px; /* Adjust size as needed */
      height: 60px; /* Adjust size as needed */
      border-radius: 0; /* Make it circular */
      /* background-color: white; */ /* White background for visibility */
      padding: 5px; /* Some padding around the logo */
       /* Subtle shadow */
      opacity: 0; /* Start with opacity 0 */
      transition: opacity 0.4s ease-in-out; /* Transition for fade */
      object-fit: contain;
    }

    .quiz-page__club-logo {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 60px; /* Adjust size as needed */
      height: 60px; /* Adjust size as needed */
      /* border-radius: 50%; */ /* Make it circular */
      /* background-color: white; */ /* White background for visibility */
      padding: 5px; /* Some padding around the logo */
      /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */ /* Subtle shadow */
      opacity: 0; /* Start with opacity 0 */
      transition: opacity 0.4s ease-in-out; /* Transition for fade */
      object-fit: contain;
    }

    .quiz-page__image {
      max-width: 100%;
      height: auto; /* Maintain aspect ratio */
      border-radius: 10px; /* Standardized border-radius */
      aspect-ratio: 1/1;
      object-fit: cover;
      padding: 10px;
      padding-bottom: 0px;
      opacity: 0; /* Start with opacity 0 */
      transition: opacity 0.4s ease-in-out; /* Combined transition for both fade-in and fade-out */
    }

    .quiz-page__image.is-visible {
      opacity: 1; /* State for fade-in */
    }

    /* Question text style */
    .quiz-page__question-text {
      font-size: 32px; /* Increased font size for desktop */
      font-weight: 500;
      margin-top: 0; /* Adjusted margin */
      margin-bottom: 10px; /* Reduced margin */
      text-align: center;
      color: #333;
    }

    /* Options container */
    .quiz-page__options {
      text-align: center; /* Center options on all screens */
      width: 100%;
      display: flex;
      flex-direction: column; /* Always stack options vertically */
      align-items: center; /* Center individual options horizontally */
      align-content: center;
      display: block;
    }

    /* Individual option button style */
    .quiz-page__option {
      display: block !important; /* Do not grow or shrink, base on content */
      width: 100%; /* Take full width of its parent (which is limited by max-width) */
      max-width: 450px; /* Consistent max width for all options */
      box-shadow: 2px 2px 4px #555555; /* Softer shadow */
      border-radius: 10px; /* Standardized border-radius */
      padding: 15px 15px; /* Reduced padding */
      cursor: pointer;
      transition: all 0.3s ease; /* Smooth transition for all properties */
      margin-bottom: 10px; /* Reduced margin */
      font-size: 20px; /* Adjusted font size */
      font-weight: bold;
      border: 2px solid transparent; /* Default transparent border */
      display: flex; /* Use flexbox for centering text */
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 105px;
      align-content: center;
    }

    .quiz-page__option:last-child {
        margin-bottom: 0; /* No margin after the last option */
    }

    .quiz-page__option:hover {
      transform: translateY(-3px); /* Slight lift effect */
      box-shadow: 2px 5px 10px rgba(0,0,0,0.2); /* Enhanced shadow on hover */
    }

    /* Specific blue shades for the first four options - Default background and text */
    .quiz-page__option:nth-child(1) {
      background-color: #E3F2FD; /* Very light blue */
      color: black; /* Black text */
    }
    .quiz-page__option:nth-child(2) {
      background-color: #BBDEFB; /* Little bit more blue */
      color: black; /* Black text */
    }
    .quiz-page__option:nth-child(3) {
      background-color: #90CAF9; /* Medium blue */
      color: black; /* Black text */
    }
    .quiz-page__option:nth-child(4) {
      background-color: #64B5F6; /* Darker blue */
      color: black; /* Black text */
    }

    /* Hover for blue options - background-color changes removed */
    .quiz-page__option:nth-child(1):hover { /* background-color: #D1ECF1; */ }
    .quiz-page__option:nth-child(2):hover { /* background-color: #A7D9F7; */ }
    .quiz-page__option:nth-child(3):hover { /* background-color: #7BBFF5; */ }
    .quiz-page__option:nth-child(4):hover { /* background-color: #5AA8F2; */ }

    /* Correct answer style */
    .quiz-page__option--correct {
      background-color: #28a745 !important; /* Solid green background */
      color: white !important; /* White text for correct */
      border-color: #28a745; /* Green border */
      animation: pulse-correct 0.5s ease-in-out;
    }

    /* Incorrect answer style */
    .quiz-page__option--incorrect {
      background-color: #dc3545 !important; /* Solid red background */
      color: white !important; /* White text for incorrect */
      border-color: #dc3545; /* Red border */
      animation: shake-incorrect 0.5s ease-in-out;
    }
    /* Style for the club name displayed under the correct answer */
    .quiz-page__option-club-name {
      display: block; /* Ensure it takes its own line */
      font-size: 0.8em; /* Smaller than the option text */
      margin-top: 5px;
      font-weight: normal; /* Player name is bold, make this normal */
      color: inherit; /* Inherit color from parent, or set specifically e.g., white */
      width: 100%;
    }

    /* Keyframe animations for feedback */
    @keyframes pulse-correct {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    @keyframes shake-incorrect {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }

    /* Score box styles */
    .quiz-page__score-box {
      font-size: 22px;
      color: #ffffff;
      font-weight: bold;
      margin-top: 15px; /* Reduced margin */
    }

    /* Results container styles */
    .results-section {
      padding: 30px; /* Increased padding */
      text-align: center;
      background-color: white;
      border-radius: 15px; /* Slightly more rounded corners */
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); /* More pronounced shadow */
      max-width: 700px; /* Increased max-width for desktop */
      width: 95%;
      margin: 20px auto; /* Adjusted margin */
      transform: scale(1); /* Initial state for animation */
      transition: transform 0.3s ease-out; /* Smooth transition for scaling */
    }

    .results-section.show {
      transform: scale(1.05); /* Slightly larger when shown */
    }

    .results-section__icon {
      font-size: 6rem; /* Even larger icon */
      margin-bottom: 10px; /* Increased margin */
      color: #42a5f5; /* Blue color for the icon */
    }

    .results-section__heading {
      font-size: 2.5rem; /* Larger heading */
      color: #333;
      margin-bottom: 20px; /* Adjusted margin */
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle text shadow */
    }

    .results-section__score {
      font-size: 2.2rem; /* Larger score text */
      font-weight: bold;
      color: #42a5f5;
      margin-bottom: 30px; /* Increased margin */
      letter-spacing: 1px; /* Added letter spacing for emphasis */
    }

    .results-section__button {
      background-color: #42a5f5;
      border: 2px solid #42a5f5; /* Solid border */
      color: white;
      padding: 12px 25px; /* Increased padding */
      font-size: 1.2rem; /* Larger font size */
      border-radius: 10px;
      transition: all 0.3s ease;
      cursor: pointer;
      margin: 0 10px; /* Space between buttons */
      width: 50%;
    }

    .results-section__button:hover {
      background-color: #3388dd;
      border-color: #3388dd;
      transform: translateY(-3px); /* More pronounced lift effect */
      box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Enhanced shadow on hover */
    }
    @media (max-width: 767px) {
      .results-section {
        padding: 20px;
        margin: 15px auto;
        min-height: 60vh;
        align-content: center;
      }
      .results-section__icon {
        font-size: 182px;
      }
      .results-section__heading {
        font-size: 2rem;
      }
      .results-section__score {
        font-size: 4.6rem;
      }
      .results-section__button {
        padding: 10px 20px;
        font-size: 1rem;
        margin: 5px; /* Adjust margin for smaller screens */
      }
      .quiz-page__image {
        width: 85%;
        padding: 2px;
        padding-bottom: 0px;
      }
      .quiz-page {
      display: block;
      }
      .club-thumbnail img {
    height: 145px !important;
}

    }

    .results-section__button:hover {
      background-color: #3388dd;
      border-color: #3388dd;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Footer styles */
    .footer {
      width: 100%;
      margin-top: auto; /* Pushes footer to the bottom */
      z-index: 2;
    }

    .footer__box {
      background-color: #47a7f5e8;
      height: auto;
      padding: 20px; /* Reduced padding */
      color: white;
      text-align: center;
    }

    .footer__link-box {
      text-align: center;
    }

    .footer__link-list {
      text-align: center;
      padding: 0;
      list-style: none; /* Remove bullet points */
    }

    .footer__link-item {
      margin-bottom: 5px;
    }

    .footer__link {
      color: white;
      font-weight: bold;
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer__link:hover {
      color: #eee;
    }

    /* Search suggestions dropdown styles */
    .suggestions-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #ddd;
      border-radius: 10px; /* Standardized border-radius */
      max-height: 360px;
      overflow-y: auto;
      z-index: 1000;
      display: none;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      margin-top: 5px;
      scrollbar-width: none; /* For Firefox */
      -ms-overflow-style: none;  /* For Internet Explorer and Edge */
    }

    /* For Webkit browsers (Chrome, Safari) */
    .suggestions-dropdown::-webkit-scrollbar {
      display: none;
    }
    .suggestion-item {
      padding: 10px 15px;
      cursor: pointer;
      transition: background-color 0.2s;
      font-size: 16px;
    }
    .suggestion-item:hover {
      background-color: #42a5f5;
      color: white;
    }
    .suggestions-dropdown__item:first-child {
      font-weight: bold;
      border-bottom: 1px solid #eee;
    }

    /* Continue button style */
    .quiz-page__continue-button {
        display: none; /* Hidden by default */
        margin-top: 15px; /* Reduced margin */
        background-color: #007bff; /* Bootstrap primary blue */
        color: white;
        padding: 8px 15px; /* Reduced padding */
        border: none;
        border-radius: 10px; /* Standardized border-radius */
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.3s ease;
    }

    .quiz-page__continue-button:hover {
        background-color: #0056b3;
    }

    /* Styles for the new multi-team filter popup */
    .filter-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #42a5f5; /* Semi-transparent overlay */
      display: none; /* Hidden by default */
      justify-content: center;
      align-items: center;
      z-index: 1060; /* Ensure it's above sidenav and other content */
    }

    .filter-popup__content {
      background-color: #42a5f5;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      min-width: 320px; /* Minimum width */
      max-width: 500px; /* Maximum width */
      width: 90%;      /* Responsive width */
      max-height: 80vh; /* Max height to prevent overflow on small screens */
      display: flex;
      flex-direction: column; /* Stack content vertically */
      position: relative; /* For positioning the close button */
      color: white;
    }

    .filter-popup__close-button {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      color: white;
      cursor: pointer;
      line-height: 1; /* Ensure consistent vertical alignment */
    }
    .filter-popup__close-button:hover {
      color: #333; /* Darken on hover */
    }

    .filter-popup__content h4 {
      margin-top: 0;
      margin-bottom: 20px;
      text-align: center;
      color: white;
    }

    .filter-popup__checkbox-container {
      margin-bottom: 10px;
      max-height: 45vh; /* Allow checkbox area to scroll if many teams */
      overflow-y: auto;
      border: 1px solid #eee;
      padding: 10px;
      border-radius: 10px;
      scrollbar-width: none; /* For Firefox */
      -ms-overflow-style: none;  /* For Internet Explorer and Edge */
    }

    /* For Webkit browsers (Chrome, Safari) */
    .filter-popup__checkbox-container::-webkit-scrollbar {
      display: none;
    }

    .filter-popup__checkbox-item { display: block; margin-bottom: 8px; }
    .filter-popup__checkbox-label { margin-left: 8px; cursor: pointer; font-size: 16px; user-select: none;}
    .filter-popup__checkbox-input {cursor: pointer;vertical-align: middle;border-radius: 10px;outline: none;}

    .filter-popup__actions {/* display: flex; */justify-content: flex-end;gap: 10px;margin-top: auto;padding-top: 10px;/* border-top: 1px solid #eee; */text-align: center;}
    .filter-popup__action-button { padding: 8px 15px; font-size: 0.9rem;}

    /* Responsive Enhancements */
    @media (max-width: 767px) {
      .navbar__container {
        flex-wrap: wrap;
        justify-content: center;
      }
      .navbar__search {
         /* Move search below logo and menu */
         max-width: 76%;
      }
      .quiz-page__options {
        flex-direction: column; /* Stack options vertically on small screens */
      }
      .quiz-page__option {
        flex: 1 1 100%; /* Full width for options */
        max-width: 100%;
        height: unset;
        padding: 14px;
      }
      .quiz-page__image-box {
        margin-bottom: 10px;
        max-width: 100%;
      }
      .quiz-page__container {
        padding: 0px;
      }
      .quiz-page__title {
        font-size: 20px;
        padding: 8px;
        margin: 0 15px;
      }
      .quiz-page__score-box {
        font-size: 20px;
        text-shadow: 1px 1px 1px gray;
      }
    }



/* --- Question Transition Styles --- */
/* Apply a smooth transition to the elements that change between questions */
/* The option buttons themselves remain static, only the text inside fades. */
#question-img, #question, .quiz-page__option span {
  transition: opacity 0.25s ease-in-out;
}

/* A generic class to trigger the fade-out effect on the elements above */
.fade-out {
  opacity: 0;
}

@media (min-width: 768px) { /* For desktop and larger screens */
  .quiz-content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Add some space between image and options */
  }

  .quiz-page__image-box {
    flex: 0 0 400px; /* Fixed width for image box */
    max-width: 450px; /* Ensure it's doesn't grow beyond this */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .quiz-page__image {
    width: 450px; /* Make image fill its container */
    height: auto;
  }

  .quiz-page__options {
    flex: 1; /* Allow options to take remaining space */
    max-width: 450px; /* Limit max width of options container */
    width: 450px;
  }

  

  .quiz-page__question-text {
    font-size: 32px; /* Increase font size for question text */
  }

  .quiz-page__question-section {padding: 0px;}

}

/* New: Animated Background Keyframes */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* New: Animated Shapes */
.shape {
    position: absolute;
    background: rgb(12 51 83); /* Revert opacity */
    border-radius: 50%; /* Revert to circle */
    animation: moveShape 10s linear infinite, fadeInOut 10s ease-in-out infinite;
}

.shape:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 5%;
    animation-duration: 12s;
    animation-delay: 0s;
}

.shape:nth-child(2) {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 80%;
    animation-duration: 15s;
    animation-delay: 2s;
}

.shape:nth-child(3) {
    width: 150px;
    height: 150px;
    top: 80%;
    left: 20%;
    animation-duration: 10s;
    animation-delay: 4s;
}

.shape:nth-child(4) {
    width: 200px;
    height: 200px;
    top: 20%;
    left: 90%;
    animation-duration: 13s;
    animation-delay: 6s;
}

.shape:nth-child(5) {
    width: 250px;
    height: 70px;
    top: 70%;
    left: 40%;
    animation-duration: 11s;
    animation-delay: 8s;
    height: 250px;
}

@keyframes moveShape {
    0% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, -50px) scale(1.1);
    }
    50% {
        transform: translate(100px, 0) scale(1);
    }
    75% {
        transform: translate(50px, 50px) scale(0.9);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    20%, 80% {
        opacity: 1;
    }
}

/* Club Selection Page Styles */
.club-selection-page {
    /* padding: 20px; */
    background-color: #42a5f5;
    min-height: 100vh;
    color: white;
    position: relative; /* Needed for z-index to work */
    z-index: 5; /* Ensure it's above the animated background */
}

.club-selection-page .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.club-selection-page .logo {
    font-size: 24px;
    font-weight: bold;
}

.club-selection-page .search-bar input {
    width: 200px;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
}

.club-selection-page .menu-icon {
    font-size: 24px;
}

.club-selection-page .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    background-color: white;
    color: #42a5f5;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px #666666;
}



.club-thumbnail {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative; /* Added for absolute positioning of league logo */
    box-shadow: 2px 2px 4px #555;
}

.club-thumbnail:hover {
    box-shadow: none;
    transition: .1s;
    border: none;
    scale: .99;
}

.club-thumbnail img {
    max-width: 100%;
    margin-bottom: 10px;
    width: auto;
    object-fit: cover;
    max-height: 170px;
    height: 170px;
}

.club-thumbnail__league-logo {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    object-fit: contain;
    opacity: 0;
}

.club-thumbnail .club-name {
    font-weight: bold;
    background-color: #42a5f5;
    color: white;
    padding: 5px 21px;
    border-radius: 10px;
    font-size: 19px;
    height: 55px;
    align-content: center;
    line-height: 1;
    box-shadow: 2px 2px 3px #888888;
}

/* Loading Screen Styles */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #42a5f5; /* Match your site's primary blue */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

.loading-screen__logo {
    width: 150px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 50px; /* Increased space between logo and title */
}

.loading-screen__title {
    color: white;
    font-size: 2rem; /* Adjust font size as needed */
    font-weight: bold;
    text-transform: uppercase; /* Ensure uppercase */
    margin-bottom: 60px; /* Increased space between title and loader dots */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.dots-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dots-loader span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    animation: dot-pop 1.4s infinite ease-in-out;
}

.dots-loader span:nth-child(1) { animation-delay: 0s; }
.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
.dots-loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pop {
    0%, 80%, 100% { transform: scale(0); opacity: 0; }
    40% { transform: scale(1); opacity: 1; }
}

.club-selection-page .container {
    max-width: 945px;
    margin: 0 auto;
    padding: 15px;
    /* background-color: #ffffffbf; */
    border-radius: 10px;
}

/* --- Terms Page Styles --- */
.terms-page .card {
    background: #ffffff; /* White background */
    color: #1a2a4a; /* Dark blue text */
    border: 1px solid #dee2e6; /* Standard light grey border */
    border-radius: 15px;
    box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.1); /* Softer shadow */
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 3rem;
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
}

.terms-page .card-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a2a4a; /* Dark blue text */
    text-align: center;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: none; /* Remove text shadow for cleaner look on white */
}

.terms-page .card-text {
    font-size: 1.15rem;
    line-height: 1.9;
}

.terms-page .card-text p {
    margin-bottom: 1.5rem;
}

.terms-page .terms-section-title {
    font-size: 21px;
    font-weight: 600;
    color: #1a2a4a; /* Dark blue text */
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
}

.terms-page .terms-section-content {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Quiz Title Text Fade/Slide Animation */
.quiz-title-text {
    display: inline-block; /* Needed for transform */
    /* Base state */
    opacity: 1;
    transform: translateY(0);
    transition: none; /* Managed by animation property */
}

.quiz-title-text.animate-out-bottom {
    animation: fadeOutToBottom 0.5s forwards; /* Use forwards to keep final state */
}

.quiz-title-text.animate-in-top {
    animation: fadeInFromTop 0.5s forwards; /* Use forwards to keep final state */
}

@keyframes fadeInFromTop {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOutToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Contact Form Specific Styles within .terms-page */
.terms-page .card-body .form-label {
    color: #1a2a4a; /* Dark blue text */
    font-weight: bold;
}

.terms-page .card-body .form-control {
    background-color: #f8f9fa; /* Very light grey background for inputs */
    color: #333333; /* Dark text color for input */
    border: 1px solid #ced4da; /* Standard grey border */
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.terms-page .card-body .form-control:focus {
    background-color: #ffffff; /* Solid white on focus */
    border-color: #42a5f5; /* Main site blue for highlight */
    box-shadow: 0 0 0 0.25rem rgba(66, 165, 245, 0.25); /* Glow effect on focus */
}

.terms-page .card-body .form-control::placeholder {
    color: #666666; /* Placeholder text color */
    opacity: 0.7;
}

.terms-page .card-body .btn-primary {
    background-color: #42a5f5; /* Main site blue for button */
    border-color: #42a5f5;
    color: #ffffff; /* White text for button */
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.terms-page .card-body .btn-primary:hover {
    background-color: #3388dd; /* Darker blue on hover */
    border-color: #3388dd;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* --- End of Terms Page Styles --- */

.club-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .club-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Info Page Title Box --- */
.info-page-title-container {
    max-width: 1000px;
    margin: 0 auto; /* Add margin to top and bottom */
    width: 100%;
    padding: 10px 0px;
}

.info-page-title {
    box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 10px;
    background: white;
    font-weight: bold;
    color: #42a5f5;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-weight: 600;
    color: #42a5f5;
    text-shadow: 1px 1px 1px gray;
}