/* ============================================
   MEDICS APP NAVIGATION - Pill Style
   v1.0.0
============================================ */

.man-header,
.man-tabbar {
  display: none;
}

@media (max-width: 991px) {
  
  .man-header *,
  .man-tabbar * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  /* ============================
     TOP HEADER (Fixed)
  ============================ */
  /* ============================
   TOP HEADER (Fixed)
============================ */
.man-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: calc(58px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  
  /* ⭐ NEW: Customizable background */
  background: var(--man-bg, rgba(255, 255, 255, 0.95));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  
  /* ⭐ NEW: Bottom corners rounded */
  border-radius: 0 0 var(--man-radius, 20px) var(--man-radius, 20px);
  
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.man-header.man-hidden {
  transform: translateY(-100%);
}
  
  /* === Logo === */
  .man-logo {
    text-decoration: none;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  .man-logo img {
    max-height: 34px;
    width: auto;
  }
  
  .man-logo-text { color: var(--man-primary, #0288D1); }
  .man-logo-accent { color: var(--man-accent, #4FC3F7); }
  .man-logo-dot {
    color: var(--man-primary, #0288D1);
    font-size: 11px;
    font-weight: 600;
    vertical-align: super;
    margin-left: 1px;
  }
  
  /* === Auth Buttons === */
  .man-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .man-btn-text {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    color: var(--man-primary, #0288D1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .man-btn-text svg { width: 16px; height: 16px; }
  
  .man-btn-text:active {
    background: rgba(2, 136, 209, 0.1);
    transform: scale(0.95);
  }
  
  .man-btn-primary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--man-accent, #4FC3F7), var(--man-primary, #0288D1));
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.3);
    transition: all 0.2s ease;
  }
  
  .man-btn-primary svg { width: 16px; height: 16px; }
  
  .man-btn-primary:active {
    transform: scale(0.95);
  }
  
  .man-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 136, 209, 0.08);
    border-radius: 50%;
    color: var(--man-primary, #0288D1);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .man-icon-btn svg { width: 20px; height: 20px; }
  
  .man-icon-btn.man-logout {
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
  }
  
  .man-icon-btn:active {
    transform: scale(0.88);
  }
  
  /* Small screens — icon only */
  @media (max-width: 360px) {
    .man-btn-text span,
    .man-btn-primary span {
      display: none;
    }
    .man-btn-text,
    .man-btn-primary {
      width: 38px;
      height: 38px;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }
  }
  
  /* ============================
   BOTTOM TAB BAR (Fixed)
============================ */
.man-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  
  /* ⭐ NEW: Customizable background */
  background: var(--man-bg, rgba(255, 255, 255, 0.95));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  
  /* ⭐ NEW: Top corners rounded */
  border-radius: var(--man-radius, 20px) var(--man-radius, 20px) 0 0;
  
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.man-tabbar.man-hidden {
  transform: translateY(100%);
}
  
  /* === Tab Item === */
  .man-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #8E8E93;
    font-size: 10px;
    font-weight: 500;
    padding: 8px 2px 6px;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
  }
  
  .man-tab-icon-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .man-tab-icon-wrap svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .man-tab-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  /* Touch */
  .man-tab:active .man-tab-icon-wrap svg {
    transform: scale(0.85);
  }
  
  /* ============================
     🎯 PILL ACTIVE STYLE
  ============================ */
  .man-tabbar.man-style-pill .man-tab.man-active {
    color: var(--man-primary, #0288D1);
  }
  
  .man-tabbar.man-style-pill .man-tab.man-active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 36px;
    background: linear-gradient(135deg, 
      rgba(79, 195, 247, 0.18), 
      rgba(2, 136, 209, 0.22));
    border-radius: 18px;
    z-index: -1;
    box-shadow: 
      0 2px 8px rgba(2, 136, 209, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: manPillIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .man-tabbar.man-style-pill .man-tab.man-active .man-tab-icon-wrap svg {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(2, 136, 209, 0.3));
    animation: manTabBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .man-tabbar.man-style-pill .man-tab.man-active .man-tab-label {
    font-weight: 700;
  }
  
  @keyframes manPillIn {
    0% { 
      width: 0; 
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
    100% { 
      width: 56px; 
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
  
  @keyframes manTabBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.25) translateY(-2px); }
    100% { transform: scale(1.15); }
  }
  
  /* ============================
     BODY ADJUSTMENTS
  ============================ */
  body {
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  
  /* Hide old menus */
  .elementor-location-header,
  .site-header,
  header.site-header,
  #masthead {
    display: none !important;
  }
}

/* Dark mode */
@media (max-width: 991px) and (prefers-color-scheme: dark) {
  /* Optional: User can override via admin panel */
  .man-header,
  .man-tabbar {
    border-color: rgba(255, 255, 255, 0.08);
  }
}