/* Simply Blockchain v9.0.17
   Responsive carousel navigation alignment refinements. */

.sbx-carousel-footer{
  justify-content:center;
  pointer-events:none;
}

.sbx-carousel-dots{
  min-height:34px;
  padding:0 13px;
  gap:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(24,29,34,.82),rgba(5,8,10,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.20);
  pointer-events:auto;
}

.sbx-carousel-dot{
  width:8px;
  height:8px;
  min-width:8px;
}

.sbx-carousel-dot.is-active{width:26px}

/* Tablet: preserve the wide carousel and side arrows while keeping the
   pagination centred independently beneath the cards. */
@media (min-width:701px) and (max-width:1024px){
  .sbx-carousel-footer{left:64px;right:64px}
}

/* Phone: arrows remain balanced at the outer edges and the five indicators
   occupy the true horizontal centre. The swipe label is removed because it
   was forcing the controls left and the adjacent cards already communicate
   the swipe interaction visually. */
@media (max-width:700px){
  .sbx-tutorial-carousel{padding-bottom:52px}
  .sbx-carousel-footer{
    left:72px;
    right:72px;
    bottom:0;
    min-height:40px;
    justify-content:center;
  }
  .sbx-carousel-hint{display:none!important}
  .sbx-carousel-arrow--previous{left:17px}
  .sbx-carousel-arrow--next{right:17px}
}

@media (max-width:390px){
  .sbx-carousel-footer{left:64px;right:64px}
  .sbx-carousel-dots{padding-inline:10px;gap:7px}
  .sbx-carousel-dot.is-active{width:22px}
}

@media (prefers-reduced-motion:reduce){
  .sbx-carousel-dot{transition:none!important}
}