/*
 * Selected KPI boxes slider
 * Shortcode: [wskaźniki_bkosy] (aliases: [wskazniki_bkosy], [wskazniki_boksy])
 */

.sod-indicator-slider{position:relative;max-width:100%;}

.sod-indicator-slider__track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 2px;
}

.sod-indicator-slider__track::-webkit-scrollbar{display:none;}

.sod-indicator-box{
  flex:0 0 calc((100% - 48px)/4);
  scroll-snap-align:start;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:18px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.sod-indicator-box__icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.sod-indicator-box__icon svg{width:44px;height:44px;}

.sod-indicator-box__value{
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.02em;
}

.sod-indicator-box__unit{font-size:13px;opacity:.8;margin-left:6px;font-weight:600;}

.sod-indicator-box__label{margin-top:8px;font-size:14px;font-weight:700;}

.sod-indicator-box__hint{margin-top:6px;font-size:12px;opacity:.85;}

.sod-indicator-box--nodata .sod-indicator-box__value{font-size:18px;font-weight:700;}

/* Arrows: visible on all viewports (desktop + mobile) */
.sod-indicator-slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
}
.sod-indicator-slider__arrow:focus{outline:2px solid rgba(11,95,255,.5);outline-offset:2px;}
.sod-indicator-slider__arrow--left{left:6px;}
.sod-indicator-slider__arrow--right{right:6px;}

/* Mobile layout */
@media (max-width: 782px){
  /* One card per view on mobile, full width (no "peek" of next card) */
  .sod-indicator-slider__track{gap:0;padding:8px 0;}
  .sod-indicator-box{flex:0 0 100%;}
}