/* Reset & Base */
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI",sans-serif; background:#fff; color:#333; display: flex; flex-direction: column; min-height: 100vh; }

/* Background Ad & Tint */
.bg-ad-placeholder { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; overflow: hidden; }
.bg-ad-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.bg-tint { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgba(255, 255, 255, 0.7); display: none; pointer-events: none; }
body.has-ad .bg-tint { display: block; }
body.has-ad { background: transparent; }

/* Side Ads Styling */
.side-ad {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 600px;
  z-index: 100; /* Above main content, below modals */
  overflow: hidden;
  display: none; /* Hidden by default */
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.side-ad img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Specific positioning for side ads */
.left-ad {
  right: calc(50% + 600px); /* Anchors the ad 10px to the left of the content container */
}
.right-ad {
  left: calc(50% + 600px); /* Anchors the ad 10px to the right of the content container */
}
/* Show side ads when body has the class */
body.has-side-ads .side-ad {
  display: block;
}
/* Media query to hide side ads on smaller screens */
@media (max-width: 1360px) { /* Adjust breakpoint as needed based on container width + ad width */
  body.has-side-ads .side-ad {
    display: none;
  }
}

/* Container */
.container { max-width:1000px; margin:30px auto; padding:20px; background:#fff; border-radius:12px; flex: 1 0 auto; }

/* Headings */
h1 { text-align:center; font-size:1.8rem; margin-top:-40px; margin-bottom:25px; color:#165a9e; position:relative; z-index:2; }
strong{background:#fff; color:#165a9e; border-radius:30%; padding:0 4px}

/* Modal */
.modal { display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.5); }
.modal-content { background:#fff; margin:5% auto; padding:20px; border-radius:12px; max-width:95%; max-height:85%; overflow:auto; position:relative; }

@media (max-width: 768px) {
    .modal-content {
        margin: 120px auto 20px auto;
        top: 0;
        transform: none;
        max-height: calc(100% - 140px);
    }
}

.modal-close-btn { position:sticky; top:10px; float:right; right:15px; margin-bottom:-45px; z-index:1100; background:#165a9e; color:#fff; border:none; border-radius:8px; padding: 8px 16px 12px 16px; font-size:0.9rem; font-weight: bold; cursor:pointer; transition: background 0.2s; }
.modal-close-btn:hover { background: #0f4275; }

/* Table */
#results { overflow-x:auto; }
#results table { width:100%; border-collapse:collapse; margin-top:15px; min-width:600px; }
#results th, #results td { border:1px solid #ddd; padding:10px; text-align:left; font-size:0.9rem; white-space: nowrap; }
#results th { background:#165a9e; color:#fff; text-transform:capitalize; }
#results tr:nth-child(even) { background:#f3f7fb; }
#results tr:hover { background:#eaf2fb; }

.generic-indicator { position: relative; overflow: hidden; }
.generic-indicator::before {
    content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0;
    border-style: solid; border-width: 15px 15px 0 0;
    border-color: #165a9e transparent transparent transparent; z-index: 10;
}

/* General Image Styling */
img { max-width:100%; height:auto; display:block; margin:15px auto 20px auto; }
.main-banner-ad {
  object-fit: contain;
  max-width: 100%;
  margin: 15px auto 20px auto;
}

/* Footer */
.footer { background:#165a9e; color:#fff; text-align:center; padding:20px 15px; margin-top: auto; font-size:14px; position: relative; }
.footer a { color:#fff; text-decoration:none; font-weight:500; }
.footer a:hover { text-decoration:underline; }
.footer .footer-links { margin-bottom:10px; }
.footer .footer-links a { margin:0 10px; }

@media (max-width: 768px) {
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-arena-logo {
    position: static !important;
    transform: none !important;
    margin: 20px auto 0 auto !important;
    display: block;
  }
}