/*
 * Consolidated sports integration styles
 * Combines styles from:
 * - site-elements-fix.css
 * - global-digitain-fix.css
 * - digitain-fix.css
 */

/* ========== From site-elements-fix.css ========== */
/* body.sports-page se aplica durante la integración Digitain. No usar position:relative
   en el header del sitio: rompe position:fixed (header se mueve al hacer scroll). */
body.sports-page header.site-header,
.sports-page header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegurar que el contenido principal tenga un z-index adecuado */
main, .main, #__next > div {
  position: relative !important;
  z-index: 1 !important;
}

/* Estilos para asegurar que los elementos interactivos dentro del contenedor de deportes funcionen correctamente */
#sports-container button,
#sports-container a,
#sports-container input,
#sports-container select,
#sports-container textarea {
  position: relative !important;
  z-index: 2 !important;
}

/* ========== From global-digitain-fix.css ========== */
/* Hide only Digitain iframes created directly in the body */
body > iframe:not([id]):not([class]),
body > iframe[src*="digitain"],
body > iframe[src*="sport"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -999 !important;
  pointer-events: none !important;
}

/* Force only the sports iframe to be properly positioned */
/* Only applies to the specific sports iframe, not GTM or other iframes */
#sports-iframe,
#sports-container #sports-iframe {
  position: relative !important; /* Changed from absolute to relative */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 600px !important; /* Fixed height instead of 100% */
  border: none !important;
  z-index: 1 !important; /* Lower z-index to not overlap site elements */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure the sports container is visible and properly positioned */
#sports-container {
  position: relative !important;
  z-index: 1 !important; /* Lower z-index to not overlap site elements */
  height: 600px !important; /* Fixed height */
  width: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========== From digitain-fix.css (additional styles) ========== */
/* Force only Digitain-specific elements to be inside the container - More specific selectors */
[id^="digitain"],
[id^="sport-"],
[id^="bet-"],
[class^="digitain-"],
[class^="sport-"],
[class^="bet-"] {
  position: relative !important; /* Changed from absolute to relative */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important; /* Changed from 100% to auto */
  z-index: 1 !important;
}

/* Fix for the site layout */
body {
  overflow-x: hidden !important;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  #sports-container,
  #sports-iframe,
  #sports-container #sports-iframe {
    height: 500px !important;
  }
}

/* ========== Additional optimized styles ========== */
/* Overlay for click handling */
#digitain-click-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  background-color: transparent !important;
  pointer-events: none !important; /* Initially doesn't capture clicks */
}

/* Loading state for sports container */
.sports-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 600px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Error state for sports container */
.sports-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 600px;
  width: 100%;
  background-color: rgba(255, 0, 0, 0.05);
  color: #ff0000;
  text-align: center;
  padding: 20px;
}