/*
 * navbar.css — Sportify Bottom Navbar
 * Navbar selalu position:absolute (menempel ke .phone, bukan browser viewport).
 * Ukuran, posisi, dan jarak diambil dari tokens.css.
 */

/* ─────────────────────────────────────────
   Wrapper navbar
───────────────────────────────────────── */
.sportify-navbar {
  position:      absolute;        /* relative ke .phone — TIDAK pernah fixed ke viewport */
  bottom:        var(--navbar-bottom);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       100;
  width:         calc(100% - 40px);   /* 20px margin kiri + kanan dari tepi phone */
  max-width:     360px;
  border-radius: var(--radius-2xl);
}

/* ─────────────────────────────────────────
   Bar navbar
───────────────────────────────────────── */
.sportify-nav {
  list-style:      none;
  margin:          0;
  padding:         0 var(--space-1);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      #1e4990;
  border-radius:   var(--radius-2xl);
  height:          var(--navbar-h);
  position:        relative;
  overflow:        hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ─────────────────────────────────────────
   Glow blob (diinjeksi JS)
───────────────────────────────────────── */
.nav-glow {
  position:       absolute;
  width:          100px;
  height:         100px;
  border-radius:  50%;
  background: conic-gradient(
    from -30deg,
    #00804c  0%   25%,
    #dbe64c  25%  50%,
    #74c465  50%  75%,
    #00804c  75%  100%
  );
  opacity:        0.9;
  filter:         blur(14px);
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  transition:     left 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:    left;
  z-index:        0;
}

/* ─────────────────────────────────────────
   Nav item
───────────────────────────────────────── */
.nav-item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  cursor:          pointer;
  position:        relative;
  z-index:         1;
  height:          100%;
  padding:         8px 0 6px;
  transition:      transform 0.2s ease;
  -webkit-user-select: none;
  user-select:     none;
}

.nav-item:active {
  transform: scale(0.88);
}

/* ─────────────────────────────────────────
   Icon
───────────────────────────────────────── */
.nav-item .icon {
  width:           28px;
  height:          28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.nav-item .icon i {
  font-size:  22px;
  color:      rgba(255, 255, 255, 0.35);
  transition:
    color     0.25s ease,
    transform 0.25s ease,
    filter    0.25s ease;
}

/* Custom image icons (swipe, ai trainer, dashboard, socials) */
.nav-item[data-tab="swipe"] .icon img,
.nav-item[data-tab="ai"] .icon img,
.nav-item[data-tab="dashboard"] .icon img,
.nav-item[data-tab="socials"] .icon img {
  display:    block;
  width:      22px;
  height:     22px;
  max-width:  none;
  max-height: none;
  object-fit: contain;
  opacity:    0.25;
  transition: opacity 0.25s ease;
}

.nav-item[data-tab="dashboard"] .icon img {
  width:  26px;   /* dashboard deact */
  height: 26px;
}

.nav-item[data-tab="dashboard"].active .icon img {
  width:  26px;   /* dashboard act */
  height: 26px;
}

.nav-item[data-tab="socials"] .icon img {
  width:      33px;   /* socials deact */
  height:     33px;
  margin-top: 6px;    /* ← turunin icon deact, naikin angka = makin turun */
}

.nav-item[data-tab="socials"].active .icon img {
  width:  23px;   /* socials act */
  height: 23px;
  margin-top: 3px;
}

.nav-item[data-tab="swipe"].active .icon img,
.nav-item[data-tab="ai"].active .icon img,
.nav-item[data-tab="dashboard"].active .icon img,
.nav-item[data-tab="socials"].active .icon img {
  opacity: 1;
}

/* Profile — foto bulat (fallback kalau ada foto) */
.nav-item[data-tab="profile"] .icon {
  width:         32px;
  height:        32px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  border:        2px solid transparent;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease;
}

.nav-item[data-tab="profile"] .icon img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: var(--radius-full);
}

/* ─────────────────────────────────────────
   Label
───────────────────────────────────────── */
.nav-item .label {
  font-family:  var(--font);
  font-size:    10.5px;
  font-weight:  700;
  color:        rgba(255, 255, 255, 0.35);
  white-space:  nowrap;
  line-height:  1;
  opacity:      1;
  transform:    translateY(0);
  pointer-events: none;
  transition:   color 0.25s ease;
}

/* ─────────────────────────────────────────
   State: aktif
───────────────────────────────────────── */
.nav-item.active .label {
  color:     var(--color-text);
  opacity:   1;
  transform: translateY(0);
}

.nav-item.active .icon i {
  color:  #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

.nav-item[data-tab="profile"].active .icon {
  border-color: #ffffff;
  box-shadow:   0 0 0 2px rgba(255, 255, 255, 0.35);
}

.nav-item[data-tab="profile"].active .icon i {
  color:  #dbe64c;
  filter: drop-shadow(0 0 6px rgba(219, 230, 76, 0.55));
}

/* ─────────────────────────────────────────
   iOS home indicator
───────────────────────────────────────── */
.sportify-navbar::after {
  content:       "";
  display:       block;
  width:         120px;
  height:        4px;
  background:    rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  margin:        8px auto 0;
}