:root{
  --green:#16a34a;
  --green-soft:#dcfce7;
}

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; }

/* ensure dropdown overlays sticky bars */
.dropdown-menu{ z-index: 2000; }   /* > .sticky-top (1020) */

/* sport chips */
.sports-scroll { scrollbar-width: thin; }
.sport-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border-radius:999px;
  text-decoration:none; border:1px solid #eaeaea; color:#111; white-space:nowrap;
}
.sport-chip img{ width:20px; height:20px; object-fit:contain; }
.sport-chip.active{ background:var(--green-soft); border-color:var(--green); }
.sport-chip:hover{ border-color:var(--green); }

/* event rows & spacing */
.event-media-col { min-width: 56px; }
.event-row .thumb{ width:48px; height:48px; object-fit:cover; border-radius:.5rem; border:1px solid #eee; display:block; margin:auto; }
.event-row .team-badge{ width:34px; height:34px; object-fit:contain; }
.event-row .vs{ color:var(--green); line-height:1; }
.channel-logo{ max-height:20px; max-width:80px; object-fit:contain; }

/* calendar day highlight for dates with events */
.flatpickr-day.has-events::after{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--green); position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
}

/* event page */
.event-hero{
  border:1px solid #eee; border-radius:1rem; overflow:hidden;
  background:#fafafa;
}
.event-hero .hero-img{ width:100%; max-height:280px; object-fit:cover; display:block; }
.event-hero .badges .team-badge{ width:56px; height:56px; }
.tv-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .55rem; border-radius:.6rem;
  background:var(--green-soft); color:#065f46;
}
.tv-pill img{ height:18px; object-fit:contain; }
.tv-flag{ height:16px; width:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }

/* scroll-to-top button */
.scroll-top{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:44px; height:44px;
  border:none; border-radius:50%;
  background:var(--green);
  color:#fff; font-size:20px; line-height:44px; text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:2100;
}
.scroll-top:focus{ outline:2px solid #0ea5e9; outline-offset:2px; }
.scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
