/* path: core/static/ui/css/layout/bottom_bar.css */

/* =============================================================================
   BottomBar — CLEAN / FLAT
   ============================================================================= */

.BottomBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:var(--surface);
  border-top:1px solid var(--divider-2);
  z-index:80;
  transform:translateY(0);
  opacity:1;
  transition:transform .2s ease, opacity .2s ease;
  will-change:transform, opacity;
}

.BottomBar--hidden{
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
}

.BottomBar__row{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  align-items:stretch;
}

.BottomBar__item{
  display:grid;
  grid-template-rows:24px auto;
  align-items:center;
  justify-items:center;
  gap:4px;
  color:var(--text-2);
  padding:8px 6px;
  min-height:54px;
  text-align:center;
  border-radius:var(--r-s);
  transition:background .15s ease, color .15s ease, transform .08s ease;
}

.BottomBar__icon{
  width:24px;
  height:24px;
  display:block;
  color:currentColor;
}

.BottomBar__label{
  font-size:12px;
  line-height:1.1;
  font-weight:500;
}

.BottomBar__item.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* Главная CTA */
.BottomBar__item--main{
  background:var(--accent);
  color:#fff;
  border-radius:var(--r-m);
  font-weight:600;
  padding:10px 6px;
}

.BottomBar__item--main .BottomBar__icon{
  width:24px;
  height:24px;
}

.BottomBar__item--main .BottomBar__label{
  font-weight:600;
}

@media (hover:hover){
  .BottomBar__item:hover{
    background:rgba(255,255,255,.03);
    color:var(--text);
  }

  .BottomBar__item--main:hover{
    background:var(--accent-strong);
    color:#fff;
  }
}

.BottomBar__item:active{
  transform:translateY(1px);
}

/* скрыть BottomBar на экранах больше мобильных */
@media (min-width:768px){
  .BottomBar{
    display:none;
  }
}