/* Buzzrparty Dual V3.6
   Targeted fixes:
   1) LIVE calendar navigation buttons actually scroll.
   2) Mobile header/replay nav no longer overlaps the REPLAYS/LIVE switch.
   3) Morocco 2025 / other containers: V3.3 is patched separately to skip empty playlists.
*/

/* ---------- LIVE calendar: guaranteed clickable arrows ---------- */

#bpMatchTimelineV1 .bp-v36-calendar-wrap{
  position:relative !important;
}

#bpMatchTimelineV1 .bp-v36-cal-nav{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:40 !important;

  width:30px !important;
  height:42px !important;
  min-width:30px !important;
  min-height:42px !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px !important;
  background:rgba(5,5,5,.94) !important;
  color:#fff !important;

  font-size:17px !important;
  font-weight:900 !important;
  line-height:1 !important;

  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  box-shadow:0 8px 20px rgba(0,0,0,.28) !important;
}

#bpMatchTimelineV1 .bp-v36-cal-prev{
  left:-3px !important;
}

#bpMatchTimelineV1 .bp-v36-cal-next{
  right:-3px !important;
}

#bpMatchTimelineV1 .bp-v36-calendar-wrap .bp-mc-timeline{
  padding-left:34px !important;
  padding-right:34px !important;
}

/* ---------- REPLAYS mobile: reserve a real row for the mode switch ---------- */

@media (max-width:720px){
  /* V3.5 centers the switch below the brand. The replay navigation was using
     the same vertical band; push only the replay nav/content below it. */
  #bpDualReplays{
    padding-top:54px !important;
  }

  #bpDualReplays .bp-v27-replay-nav{
    margin-top:0 !important;
    position:relative !important;
    z-index:4 !important;
  }

  .bp-dual-rail{
    top:72px !important;
    width:166px !important;
    grid-template-columns:1fr 1fr !important;
  }

  .bp-dual-rail button{
    height:32px !important;
    min-height:32px !important;
    padding:0 7px !important;
  }

  /* Keep brand genuinely centered and leave the action icons on the right. */
  .topbar .brand{
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    max-width:46vw !important;
  }

  .topbar .brand-title{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media (max-width:390px){
  #bpDualReplays{
    padding-top:50px !important;
  }

  .bp-dual-rail{
    top:70px !important;
    width:158px !important;
  }
}