/* style/sports.css */

/* Custom Colors */
:root {
  --page-sports-bg: #08160F;
  --page-sports-card-bg: #11271B;
  --page-sports-text-main: #F2FFF6;
  --page-sports-text-secondary: #A7D9B8;
  --page-sports-border: #2E7A4E;
  --page-sports-btn-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --page-sports-glow: #57E38D;
  --page-sports-gold: #F2C14E;
  --page-sports-divider: #1E3A2A;
  --page-sports-deep-green: #0A4B2C;
}

.page-sports {
  background-color: var(--page-sports-bg); /* Dark background */
  color: var(--page-sports-text-main); /* Light text for dark background */
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.page-sports__dark-bg {
  background-color: var(--page-sports-bg);
  color: var(--page-sports-text-main);
}

.page-sports__light-bg {
  background-color: var(--page-sports-text-main);
  color: #333333; /* Deep dark text for light background */
}

.page-sports__card-bg {
  background-color: var(--page-sports-card-bg);
  color: var(--page-sports-text-main);
  border: 1px solid var(--page-sports-border);
}

.page-sports__section-title {
  font-size: 2.5em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  color: var(--page-sports-text-main);
  text-shadow: 0 0 10px rgba(87, 227, 141, 0.5);
}

.page-sports__description-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
  font-size: 1.1em;
  color: var(--page-sports-text-secondary);
}

.page-sports__btn-primary,
.page-sports__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-sports__btn-primary {
  background: var(--page-sports-btn-gradient);
  color: #ffffff; /* Always white text on primary button */
  border: none;
  box-shadow: 0 4px 15px rgba(42, 209, 111, 0.4);
}

.page-sports__btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 209, 111, 0.6);
}

.page-sports__btn-secondary {
  background: transparent;
  color: var(--page-sports-glow);
  border: 2px solid var(--page-sports-glow);
  box-shadow: 0 2px 8px rgba(87, 227, 141, 0.2);
}

.page-sports__btn-secondary:hover {
  background-color: rgba(87, 227, 141, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(87, 227, 141, 0.4);
}

/* Hero Section */
.page-sports__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px; /* Small top padding, body handles header offset */
  padding-bottom: 60px;
  overflow: hidden;
}

.page-sports__hero-image-wrapper {
  width: 100%;
  position: relative;
  z-index: 0;
}

.page-sports__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.6);
}

.page-sports__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  text-align: center;
  padding: 40px 20px;
  margin-top: -150px; /* Pull content up over the image bottom */
  background: rgba(8, 22, 15, 0.85); /* Semi-transparent dark background */
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.page-sports__main-title {
  font-size: clamp(2em, 4vw, 3.2em); /* Responsive font size for H1 */
  color: var(--page-sports-gold);
  margin-bottom: 20px;
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 0 15px rgba(242, 193, 78, 0.6);
}

.page-sports__description {
  font-size: 1.2em;
  color: var(--page-sports-text-main);
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.page-sports__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Video Section */
.page-sports__video-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  padding-top: 10px; /* Small top padding */
}

.page-sports__video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px; /* Max width for video container */
  margin: 0 auto 30px auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.page-sports__video {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

.page-sports__video-description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px auto;
  color: var(--page-sports-text-secondary);
}

.page-sports__video-cta {
  margin-top: 20px;
}

/* Sports Categories */
.page-sports__sport-categories {
  padding: 80px 20px;
}

.page-sports__grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-sports__card {
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  padding: 25px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-sports__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.page-sports__card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.page-sports__card-title {
  font-size: 1.6em;
  color: var(--page-sports-gold);
  margin-bottom: 15px;
  font-weight: 700;
}

.page-sports__card-text {
  font-size: 1em;
  color: var(--page-sports-text-secondary);
}

/* Promotions Section */
.page-sports__promotions-section {
  padding: 80px 20px;
}

.page-sports__promotions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-sports__promo-card {
  border-radius: 15px;
  overflow: hidden;
  padding: 30px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-sports__promo-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.page-sports__promo-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 25px;
}

.page-sports__promo-title {
  font-size: 1.8em;
  color: var(--page-sports-gold);
  margin-bottom: 15px;
  font-weight: 700;
}

.page-sports__promo-text {
  font-size: 1em;
  color: var(--page-sports-text-secondary);
  margin-bottom: 25px;
}

/* Why Choose Us Section */
.page-sports__why-choose-us {
  padding: 80px 20px;
}

.page-sports__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-sports__feature-item {
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-sports__feature-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.page-sports__feature-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 20px;
}

.page-sports__feature-title {
  font-size: 1.6em;
  color: var(--page-sports-glow);
  margin-bottom: 15px;
  font-weight: 700;
}

.page-sports__feature-text {
  font-size: 1em;
  color: var(--page-sports-text-secondary);
  margin-bottom: 20px;
}

/* How To Start Section */
.page-sports__how-to-start {
  padding: 80px 20px;
}

.page-sports__steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-sports__step-card {
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  padding-top: 60px; /* Space for step number */
}

.page-sports__step-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.page-sports__step-number {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--page-sports-glow);
  color: var(--page-sports-bg);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8em;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(87, 227, 141, 0.6);
  border: 3px solid var(--page-sports-deep-green);
}

.page-sports__step-title {
  font-size: 1.6em;
  color: var(--page-sports-gold);
  margin-bottom: 15px;
  font-weight: 700;
}

.page-sports__step-text {
  font-size: 1em;
  color: var(--page-sports-text-secondary);
  margin-bottom: 25px;
}

/* FAQ Section */
.page-sports__faq-section {
  padding: 80px 20px;
}

.page-sports__faq-list {
  max-width: 900px;
  margin: 0 auto 40px auto;
}

.page-sports__faq-item {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.page-sports__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--page-sports-gold);
  cursor: pointer;
  background-color: var(--page-sports-card-bg);
  border-bottom: 1px solid var(--page-sports-divider);
  transition: background-color 0.3s ease;
  list-style: none; /* For details/summary */
}

.page-sports__faq-question::-webkit-details-marker {
  display: none; /* For details/summary */
}

.page-sports__faq-question:hover {
  background-color: var(--page-sports-deep-green);
}

.page-sports__faq-toggle {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--page-sports-glow);
  transition: transform 0.3s ease;
}

.page-sports__faq-item[open] .page-sports__faq-toggle {
  transform: rotate(45deg);
}

.page-sports__faq-answer {
  padding: 20px 25px;
  font-size: 1em;
  color: var(--page-sports-text-secondary);
  background-color: rgba(17, 39, 27, 0.8); /* Slightly lighter than card bg */
  border-top: 1px solid var(--page-sports-divider);
}

.page-sports__faq-answer p {
  margin: 0;
  color: var(--page-sports-text-secondary);
}

.page-sports__faq-answer a {
  color: var(--page-sports-glow);
  text-decoration: underline;
}

.page-sports__faq-more-btn {
  display: block;
  margin: 40px auto 0 auto;
  width: fit-content;
}

/* CTA Bottom Section */
.page-sports__cta-bottom {
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-sports__cta-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
  z-index: 0;
}

.page-sports__cta-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(8, 22, 15, 0.85); /* Semi-transparent dark background */
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.page-sports__cta-content .page-sports__section-title {
  color: var(--page-sports-gold);
  margin-bottom: 25px;
}

.page-sports__cta-content .page-sports__description-text {
  color: var(--page-sports-text-main);
  margin-bottom: 40px;
}

/* Global Image/Video/Button Responsive */
.page-sports img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-sports video {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.page-sports__section,
.page-sports__container,
.page-sports__card,
.page-sports__promo-card,
.page-sports__feature-item,
.page-sports__step-card,
.page-sports__video-wrapper,
.page-sports__cta-buttons,
.page-sports__button-group,
.page-sports__btn-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .page-sports__section-title {
    font-size: 2em;
  }

  .page-sports__description-text {
    font-size: 1em;
    margin-bottom: 30px;
  }

  .page-sports__hero-content {
    margin-top: -80px;
    padding: 30px 15px;
  }

  .page-sports__main-title {
    font-size: clamp(1.8em, 7vw, 2.5em);
  }

  .page-sports__description {
    font-size: 1em;
  }

  .page-sports__cta-buttons {
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
  }

  .page-sports__btn-primary,
  .page-sports__btn-secondary,
  .page-sports a[class*="button"],
  .page-sports a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-sports__video-section {
    padding-top: 10px !important;
    padding: 40px 15px;
  }

  .page-sports__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0;
  }
  
  .page-sports video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-sports__grid-container,
  .page-sports__promotions-grid,
  .page-sports__features-grid,
  .page-sports__steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-sports__card-image {
    height: 180px;
  }

  .page-sports__promo-image {
    width: 120px;
    height: 120px;
  }

  .page-sports__feature-icon {
    width: 80px;
    height: 80px;
  }

  .page-sports__faq-list {
    padding: 0 15px;
  }

  .page-sports__faq-question {
    font-size: 1.1em;
    padding: 15px 20px;
  }

  .page-sports__faq-answer {
    padding: 15px 20px;
  }

  .page-sports__cta-bottom {
    padding: 40px 15px;
  }

  .page-sports__cta-content {
    padding: 30px 15px;
  }

  .page-sports__section,
  .page-sports__card,
  .page-sports__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure all content images are at least 200px wide/tall in desktop */
.page-sports__card-image, 
.page-sports__promo-image, 
.page-sports__feature-icon, 
.page-sports__hero-image, 
.page-sports__cta-image {
  min-width: 200px;
  min-height: 200px;
}

.page-sports__feature-icon {
  width: 100px; /* Specific size for icons, still >200px requirement */
  height: 100px;
  min-width: 100px; /* Ensure these are not shrunk below 200px by accident */
  min-height: 100px;
}

/* Override min-width/height for icons if they are decorative and smaller than 200px, 
   but the prompt explicitly forbids images smaller than 200px. 
   So, I'll ensure they are at least 200x200 or larger where appropriate. 
   The feature icons are set to 100x100, which conflicts with the min 200x200 rule. 
   I must adjust them to meet the 200x200 minimum. */

.page-sports__feature-icon {
  width: 200px; /* Adjusted to meet minimum 200px */
  height: 200px; /* Adjusted to meet minimum 200px */
  object-fit: contain;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.page-sports__promo-image {
  width: 200px; /* Adjusted to meet minimum 200px */
  height: 200px; /* Adjusted to meet minimum 200px */
  object-fit: contain;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
}