/* ==========================================================================
 *  NATIVE TABBAR — Phase 1 (v1.57.0)
 *  App-like bottom navigation: pill indicator πίσω από το ενεργό εικονίδιο
 *  + press feedback. Scoped ΜΟΝΟ σε .tabbar / .tab — καμία αλλαγή σε
 *  logic / routes / DB.
 *
 *  ⚠️ Φορτώνεται ΤΕΛΕΥΤΑΙΟ στο index.html (μετά τα styles.css & race-mobile.css)
 *     ώστε να υπερισχύει στο cascade.
 * ========================================================================== */

.tabbar {
  gap: 2px;
}

.tab {
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}

/* Το εικονίδιο γίνεται pill-container: το SVG (22px) μένει κεντραρισμένο μέσα */
.tab__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 30px;
  border-radius: 99px;
  transform: none; /* ακυρώνει το παλιό translateY από τα προηγούμενα strata */
  transition: background .22s cubic-bezier(.16, 1, .3, 1),
              transform .16s ease,
              color .2s ease;
}

/* Ενεργή καρτέλα — απαλό pill στο χρώμα του brand */
.tab--active {
  color: var(--primary);
}
.tab--active .tab__icon {
  background: var(--primary-soft);
  color: var(--primary);
  transform: none;
}
.tab--active .tab__label {
  font-weight: 750;
}

/* Press feedback — μικρό «βύθισμα» στο άγγιγμα */
.tab:active .tab__icon {
  transform: scale(.86);
}

/* Σεβασμός σε reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tab__icon,
  .tab:active .tab__icon {
    transition: none !important;
    transform: none !important;
  }
}