/* PHASE-REDESIGN v3 (2026-07-22): BOTTOM TAB BAR v3 — PILL FLOATING, CULORI BOOSTED
   Pe mobil (max-width 768px): pill rotunjit, floating.
   Pe desktop: ascuns.

   5 taburi în ordinea cerută:
     1. Home         - GOLDEN  (case icon, poziția 1 - stânga)
     2. Marketing    - CYAN    (gear icon)
     3. Chat         - VERDE   (chat bubble icon)
     4. Media        - MOV     (video icon)
     5. Hercules     - ROȘU    (muscle/dumbbell icon)

   Culorile sunt OVERRIDE-uite local (nu folosim --c-* din tokens), ca sa nu
   depindem de tokens existenti. Fiecare tab are culoarea lui proprie.

   Iconite: outline stroke 1.75px, simple, ca IG (vezi referinta Drive).
*/

:root {
  /* Override culori per tab */
  --btb-home: #fbbf24;        /* golden */
  --btb-marketing: #06b6d4;   /* cyan */
  --btb-chat: #22c55e;        /* verde */
  --btb-media: #a855f7;       /* mov */
  --btb-hercules: #ef4444;    /* rosu */
}

/* === Container === */
.bottom-tab-bar {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: var(--z-modal, 100);

  /* Liquid glass */
  background: rgba(15, 15, 17, 0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  display: none;
  justify-content: space-around;
  align-items: center;
  height: 56px;
  padding: 0 8px;
}

@media (max-width: 768px) {
  .bottom-tab-bar {
    display: flex;
  }
}

/* === Single tab item === */
.btb-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  transition:
    background 220ms var(--ease, ease),
    transform 180ms var(--ease, ease);
}

.btb-item:active {
  transform: scale(0.92);
}

/* Iconita — stroke subtire (IG-style), default muted */
.btb-icon {
  width: 24px;
  height: 24px;
  display: block;
  color: rgba(255, 255, 255, 0.45);
  transition:
    transform 250ms var(--ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
    color 220ms var(--ease, ease);
}

.btb-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.75; /* IG-style */
}

/* === ACTIVE === */
.btb-item.active {
  background: rgba(255, 255, 255, 0.10);
}

.btb-item.active .btb-icon {
  color: var(--tab-color, #ffffff);
  transform: scale(1.10);
  filter: drop-shadow(0 0 6px var(--tab-color, rgba(255, 255, 255, 0.6)));
}

/* Badge */
.btb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: #ff5a1f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(15, 15, 17, 0.95);
  pointer-events: none;
}

/* === Ascunde hamburger vechi === */
@media (max-width: 768px) {
  .mobile-nav-trigger {
    display: none !important;
  }
}

/* === Body offset pt continut === */
@media (max-width: 768px) {
  body.has-bottom-tab-bar {
    padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  }
}

/* === Culori per tab === */
.btb-item[data-tab-id="home"]      { --tab-color: var(--btb-home); }
.btb-item[data-tab-id="marketing"] { --tab-color: var(--btb-marketing); }
.btb-item[data-tab-id="chat"]      { --tab-color: var(--btb-chat); }
.btb-item[data-tab-id="media"]     { --tab-color: var(--btb-media); }
.btb-item[data-tab-id="hercules"]  { --tab-color: var(--btb-hercules); }