/* ═══════════════════════════════════════════════════
   SHARED NAV — Mobile Responsive Overrides
   Included by every page that uses header.php
   ═══════════════════════════════════════════════════ */

/* Ensure the header never causes horizontal scroll */
.nav {
  overflow-x: clip;
}

/* Correct logo flex behaviour */
.nav-logo {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.nav-logo img {
  width: 40px;
  height: 40px;
  min-width: 34px;
  flex-shrink: 0;
  border-radius: 10px;
}

.nav-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.nav-brand-sub {
  white-space: nowrap;
}

/* Actions stay compact */
.nav-actions {
  flex-shrink: 0;
  min-width: 0;
}

.nav-account-btn,
.nav-cta {
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-account-btn i,
.nav-cta i {
  flex-shrink: 0;
}

/* ── Tablet / Small Desktop ≤ 1080px ── */
@media (max-width: 1080px) {
  .nav-links        { display: none !important; }
  .nav-cta--desktop { display: none !important; }
  .nav-brand-sub    { display: none; }
  /* Hide ALL top-bar actions on mobile — bottom nav handles everything */
  .nav-actions      { display: none !important; }
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .nav-mobile-btn { display: flex; flex-shrink: 0; }
  .nav-brand      { font-size: 19px; }
  .nav-account-btn{ padding: 7px 10px; }
  .nav-account-label { display: none; }
}

/* ── Large Mobile ≤ 768px ── */
@media (max-width: 768px) {
  .nav-inner {
    margin-top: 10px;
    padding: 0 16px;
    height: 60px;
    border-radius: var(--radius-md);
  }
  .nav-inner.scrolled {
    margin-top: 6px;
    height: 54px;
  }
  .nav-logo img  { width: 36px; height: 36px; min-width: 30px; }
  .nav-brand     { font-size: 18px; letter-spacing: 0.06em; }
  .nav-actions   { gap: 8px; }
  .currency-btn  { padding: 6px 10px 6px 12px; font-size: 11px; }
  .nav-account-btn { padding: 7px 10px; }
}

/* ── Small Mobile ≤ 480px ── */
@media (max-width: 480px) {
  .nav-inner {
    margin-top: 8px;
    padding: 0 12px;
    height: 56px;
    border-radius: var(--radius-sm, 10px);
  }
  .nav-inner.scrolled {
    margin-top: 5px;
    height: 50px;
  }
  .nav-logo        { gap: 6px; }
  .nav-logo img    { width: 32px; height: 32px; min-width: 26px; }
  .nav-brand       { font-size: 15px; letter-spacing: 0.04em; }
  .nav-actions     { gap: 6px; }
  .currency-btn    { padding: 5px 8px 5px 10px; gap: 3px; font-size: 11px; }
  .currency-btn i  { width: 11px; height: 11px; }
  .nav-account-btn { padding: 6px 9px; gap: 0; }
  .nav-mobile-btn  { width: 38px; height: 38px; }
  .hamburger-line  { width: 17px; }
}

/* ── XS Mobile ≤ 360px ── */
@media (max-width: 360px) {
  .nav-inner      { padding: 0 10px; height: 52px; }
  .nav-logo img   { width: 28px; height: 28px; min-width: 22px; }
  .nav-brand      { font-size: 13px; letter-spacing: 0.02em; }
  .nav-actions    { gap: 5px; }
  .currency-btn   { padding: 6px 8px; gap: 0; }
  #currency-label { display: none; }
  .currency-btn i { width: 12px; height: 12px; opacity: 0.7; }
  .nav-account-btn{ padding: 6px 8px; }
  .nav-mobile-btn { width: 34px; height: 34px; }
  .hamburger-line { width: 15px; }
}

/* ── Landscape phone safety (short viewport) ── */
@media (max-height: 500px) and (max-width: 900px) {
  .nav-inner { margin-top: 6px; height: 52px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Ultra-sleek dark glass floating pill matching Yankolanka design system.
   Only active on ≤ 1080px. Desktop (> 1080px) → display:none.
   ═══════════════════════════════════════════════════════════════ */

.mobile-bottom-nav { display: none; }

@media (max-width: 1080px) {

  /* Kill hamburger + old drawer — bottom pill replaces them */
  .nav-mobile-btn        { display: none !important; }
  .mobile-drawer         { display: none !important; }
  .mobile-drawer-overlay { display: none !important; }

  /* Pad body so content doesn't hide behind bar */
  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* Fixed wrapper */
  .mobile-bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }

  /* ── Ultra-Sleek Dark Glass Pill ── */
  .mbn-pill {
    display: flex;
    align-items: center;
    background: rgba(10, 15, 13, 0.92);       /* --bg-dark frosted glass */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);/* Crisp hairline border */
    border-radius: 100px;
    padding: 6px 8px;
    gap: 3px;
    overflow: hidden;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.45),
      0 4px  12px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);  /* Top edge light reflection */
    pointer-events: all;
  }

  /* ── Each tab item ── */
  .mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 10px;
    border-radius: 50px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);          /* Muted clean white */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition:
      color      0.25s ease,
      background 0.25s ease,
      padding    0.25s ease,
      flex       0.25s ease,
      box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mbn-item:active { opacity: 0.8; }

  /* Icon */
  .mbn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      color     0.25s ease;
  }

  .mbn-icon svg,
  .mbn-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
  }

  /* Label — hidden by default, slides in on active */
  .mbn-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.25s ease,
      opacity    0.2s  ease,
      margin-top 0.25s ease;
    margin-top: 0;
    line-height: 1;
  }

  /* ── Active State: High-contrast crisp white capsule with brand teal icon ── */
  .mbn-item.mbn-active {
    background: rgba(255, 255, 255, 0.96);     /* Pure crisp white pill */
    color: #0a1a14;                            /* --text-primary */
    padding: 8px 18px;
    flex: 1.6;
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.25),
      0 1px 4px  rgba(0, 0, 0, 0.15);
  }

  .mbn-item.mbn-active .mbn-icon {
    color: #0fa090;                            /* --accent (Teal) */
    transform: scale(1.08);
  }

  .mbn-item.mbn-active .mbn-label {
    max-height: 16px;
    opacity: 1;
    margin-top: 3px;
    color: #0a1a14;                            /* --text-primary */
  }

} /* end @media ≤ 1080px */


/* ── Very small phones ≤ 380px ── */
@media (max-width: 380px) {
  .mobile-bottom-nav   { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mbn-pill            { padding: 5px 6px; }
  .mbn-item            { padding: 7px 8px; }
  .mbn-item.mbn-active { padding: 7px 14px; }
  .mbn-icon svg,
  .mbn-icon i          { width: 18px; height: 18px; }
  .mbn-label           { font-size: 10px; }
}

/* ── Landscape phones ── */
@media (max-height: 500px) and (max-width: 900px) {
  body                 { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .mbn-pill            { padding: 4px 6px; }
  .mbn-item            { padding: 6px 8px; }
  .mbn-item.mbn-active { padding: 6px 13px; }
}