/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR - RS ISLAM WONOSOBO
   Extracted from layout.php (Stage 3.4D.2)
   ========================================================================== */

.mobile-bar {
      z-index: 1040; 
      backdrop-filter: blur(16px); 
      -webkit-backdrop-filter: blur(16px);
      background-color: rgba(255, 255, 255, 0.96); 
      min-height: 56px; 
      padding-top: 4px; 
      padding-bottom: max(6px, env(safe-area-inset-bottom));
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
      border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    }
    .mobile-nav-item {
      flex: 1 1 0% !important;
      min-width: 0;
      max-width: 25%;
      position: relative;
      color: #64748B;
      text-decoration: none;
      text-align: center;
      transition: color 0.2s ease, transform 0.15s ease;
    }
    .mobile-nav-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 22px;
      height: 2.5px;
      background-color: #174C3C;
      border-radius: 2px 2px 0 0;
      transition: transform 0.2s ease, opacity 0.2s ease;
      opacity: 0;
    }
    .mobile-nav-item:active {
      transform: scale(0.94);
    }
    .mobile-nav-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      position: relative;
      background: transparent !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin-bottom: 2px;
    }
    .mobile-nav-icon {
      font-size: 1.15rem;
      color: #64748B;
      transition: color 0.2s ease;
    }
    .mobile-nav-label {
      font-size: 0.7rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: #64748B;
      transition: color 0.2s ease, font-weight 0.2s ease;
      white-space: nowrap;
    }
    
    /* Inactive State Hover/Focus */
    .mobile-nav-item:not(.is-active):not(.mobile-nav-igd):hover .mobile-nav-icon,
    .mobile-nav-item:not(.is-active):not(.mobile-nav-igd):hover .mobile-nav-label {
      color: #334155;
    }

    /* Active State (URL Matched - Color Transition + Bottom Indicator Line) */
    .mobile-nav-item.is-active {
      color: #174C3C !important;
    }
    .mobile-nav-item.is-active::after {
      transform: translateX(-50%) scaleX(1);
      opacity: 1;
    }
    .mobile-nav-item.is-active .mobile-nav-icon-wrap {
      background: transparent !important;
      background-color: transparent !important;
    }
    .mobile-nav-item.is-active .mobile-nav-icon {
      color: #174C3C !important;
    }
    .mobile-nav-item.is-active .mobile-nav-label {
      color: #174C3C !important;
      font-weight: 700;
    }

    /* IGD Emergency CTA */
    .mobile-nav-igd .igd-icon-bubble {
      transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .mobile-nav-igd:hover .igd-icon-bubble,
    .mobile-nav-igd:active .igd-icon-bubble {
      background: rgba(220, 38, 38, 0.22) !important;
      transform: scale(1.08);
    }
    @media (max-width: 767.98px) {
      body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
      }
    }