/* embed base */
/* force light */
:root, body.tz-embed {
  color-scheme: light;
}

body.tz-embed {
  margin: 0;
  background: transparent;
}

/* top row */
.tz-embed-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bs-body-bg);
  padding: 6px 0;
}

.tz-embed-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.05);
}

.tz-embed-select {
  max-width: 190px;
}

/* sakrij sve što ne želiš u embed-u */
.hero-head { display: none !important; }
#btnRegister { display: none !important; }   /* nema prijava */
#embedHiddenTabs { display: none !important; } /* original tabs hidden */
#sponsorsSection { display: none !important; } /* ako ga slučajno ima */

/* ako želiš da content bude “tight” */
#page { padding-top: 0 !important; }


.hero-head.card.mb-4 {
  display: none !important;
}


#embedHiddenTabs {
    display: none !important;
}

#poSubTabs {
    display: none !important;
}

.tz-embed-footer{
  border-top: 1px solid rgba(0,0,0,.08);
}

.tz-embed-footer-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 2px;
  text-decoration: none;
  color: inherit;
}

.tz-embed-footer-link:hover{
  text-decoration: none;
  opacity: .9;
}


.tz-embed-footer-text{
  font-size: 13px;
  line-height: 1.2;
  color: rgba(0,0,0,.65);
}
html, body {
  overflow-x: hidden !important;
  background-color: white !important;
}

/* Mobile: zoom out whole widget */
@media (max-width: 480px) {
  body.tz-embed {
    overflow-x: hidden;
  }

  /* scale whole page down */
  /* tighten spacing a bit */
  .container { padding-left: .5rem; padding-right: .5rem; }
  .hero-head { margin-bottom: .5rem; }
}

/* Mobile tighten layout */
@media (max-width: 480px) {

  /* overall container padding */
  #page.container {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    padding-top: .5rem !important;
  }

  /* top bar spacing */
  .tz-embed-top {
    margin-bottom: .5rem !important;
    gap: .5rem !important;
  }

  /* icon smaller */
  .tz-embed-icon {
    width: 34px !important;
    height: 34px !important;
  }

  /* hero: reduce vertical space */
  .hero-head.card {
    margin-bottom: .5rem !important;
  }

  /* make hero image shorter */
  .hero-head .ratio {
    --bs-aspect-ratio: 35% !important; /* was 21x9; smaller height */
  }

  /* tighter hero body padding */
  .hero-head .card-body {
    padding: .5rem !important;
    gap: .5rem !important;
  }

  /* H1 smaller + tighter */
  #tName {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    margin-bottom: .15rem !important;
  }

  #tMeta {
    font-size: .78rem !important;
  }

  /* buttons smaller so they don’t eat space */
  #btnRegister, #btnShareEmbed, #fbBtn {
    padding: .25rem .5rem !important;
    font-size: .8rem !important;
  }

  /* reduce spacing before playoff card */
  #playoff .card.mt-2 {
    margin-top: .5rem !important;
  }
  #strijelci .card.mt-2,
  #skupine .mt-1 {
    margin-top: .5rem !important;
  }

  /* tighten card padding inside sections */
  #playoff .card-body,
  #strijelci .card-body {
    padding: .6rem !important;
  }
}

/* EMBED: remove Bootstrap container gutters so content touches iframe edges */
body.tz-embed #page.container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Optional: remove body default margin just in case */
html, body.tz-embed {
  margin: 0 !important;
  padding: 0 !important;
}


/* FULL-BLEED in iframe (desktop + mobile) */
html, body.tz-embed {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

body.tz-embed #page.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bootstrap gutters: kill them for the embed */
body.tz-embed .row {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: .75rem; /* keep vertical spacing if you want */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.tz-embed .row > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* iOS safe-area (notch) can add “white space” – neutralize it */
@supports (padding: env(safe-area-inset-left)) {
  html, body.tz-embed {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Mobile: force full-bleed (no white sides) */
@media (max-width: 600px) {

  html, body.tz-embed {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* kill Bootstrap container gutters */
  body.tz-embed #page.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* kill row gutters + column padding (Bootstrap adds 12px each side) */
  body.tz-embed .row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.tz-embed .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* iOS notch safe-area sometimes creates side padding */
  @supports (padding: env(safe-area-inset-left)) {
    html, body.tz-embed {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}


/* FINAL OVERRIDE: #page is container-fluid, so target #page directly */
@media (max-width: 600px) {
  html, body, body.tz-embed {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body.tz-embed #page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* IMPORTANT: your scale creates side whitespace illusion on mobile */
    transform: none !important;
  }

  /* Remove Bootstrap gutters completely */
  body.tz-embed .row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.tz-embed .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 480px) {
  #bracketWrap, #lbBracketWrap {
    transform: scale(0.8);
    transform-origin: top left;
    width: calc(100% / 0.8);
  }
}
/* Modal tabs: horizontal scroll + nice spacing */
#matchActionsModal #matchTabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

#matchActionsModal #matchTabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

#matchActionsModal #matchTabs .nav-link {
  flex: 0 0 auto; /* don’t shrink */
}

/* Mobile ONLY: hide losing-bracket connector lines (SVG overlay) */
@media (max-width: 480px) {
  #lbBracketWrap svg,
  #poLosingPane svg,
  #koLosingBracket + svg {
    display: none !important;
  }
}