@charset "UTF-8";
/* CSS Document */
/* Прогресс бар */
.progress-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
    width:460px;
}
  /* Контейнер для картинок */
  .side-image {
    width:45px;        /* ширина под картинку */
          /* высота под картинку */
    flex-shrink:0;
    background:0;   /* фон если картинки нет */
    border-radius:0px; /* легкое скругление */
    overflow:hidden;
  }

  .side-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

.progress-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
}

.side-image {
  width:45px;
  flex-shrink:0;
}

.side-image img {
  width:95%;
  display:block;
}

.progress-bar {
  width:400px;
  height:10px;
  background:#089ACC;
  border-radius:10px;
overflow:visible;
  position:relative;
}

/* === ПРОГРЕСС-ЗАЛИВКА === */
.progress-fill {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  border-radius:10px;
  z-index:1;
  transition:width 0.5s linear;
}

.ticks {
  position:absolute;
  inset:0;
  display:flex;
  z-index:2;
  pointer-events:none;
}

.tick {
  flex:1;
  position:relative;
}

.tick::after {
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:1.5px;
  height:100%;
  background:rgba(255,255,255,0.20);
  transform:translateZ(0);
}

.tick:last-child::after {
  display:none;
}

.tick.active::after {
  background:rgba(255,255,255,0.20);
}


/* === DAYS INDICATOR === */
.days-indicator {
  position:absolute;
  top:-36px;
  left:50%;
  transform:translateX(-50%);
  background:#089ACC;
opacity: 100%;
  padding:2px 6px;
  border-radius:15px;
  white-space:nowrap;
  pointer-events:none;


  /* цвета и шрифты */
  --work-color:#E8E9EE;
  --calendar-color:#161F6D;
  --work-size:21px;
  --calendar-size:18px;
  --work-font:'Boogaloo';
  --calendar-font:'Boogaloo';
          /* сглаживание шрифта */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#daysWork {
  color:var(--work-color);
  font-size:var(--work-size);
  font-family:var(--work-font);
      /* сглаживание шрифта */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#daysCalendar {
  color:var(--calendar-color);
  font-size:var(--calendar-size);
  font-family:var(--calendar-font);
      /* сглаживание шрифта */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.money-emoji {
  font-size: 25px; /* или 12px, 0.7em и т.п. */
  line-height: 1;
}