/* ============================================
   MyBooking.ai - Professional Mobile CSS
   Modern Mobile-First Design System 2024/2025
   COMPLETE VERSION with User Menu styles
   FIXED: search pointer-events, language forms, search results
   ============================================ */

/* CSS Custom Properties - Mobile Design Tokens */
:root {
    /* Colors - Modern Palette */
    --mb-primary: #0ea5e9;
    --mb-primary-dark: #0284c7;
    --mb-primary-light: #38bdf8;
    --mb-secondary: #6366f1;
    --mb-accent: #f59e0b;
    --mb-success: #10b981;
    --mb-warning: #f59e0b;
    --mb-danger: #ef4444;
    --mb-danger-light: #fef2f2;
    
    /* Neutrals */
    --mb-gray-50: #f8fafc;
    --mb-gray-100: #f1f5f9;
    --mb-gray-200: #e2e8f0;
    --mb-gray-300: #cbd5e1;
    --mb-gray-400: #94a3b8;
    --mb-gray-500: #64748b;
    --mb-gray-600: #475569;
    --mb-gray-700: #334155;
    --mb-gray-800: #1e293b;
    --mb-gray-900: #0f172a;
    
    /* Backgrounds */
    --mb-bg-surface: #ffffff;
    
    /* Glassmorphism */
    --mb-glass-bg: rgba(255, 255, 255, 0.85);
    --mb-glass-border: rgba(255, 255, 255, 0.3);
    --mb-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --mb-blur: blur(20px);
    
    /* Spacing - 8pt grid */
    --mb-space-xs: 4px;
    --mb-space-sm: 8px;
    --mb-space-md: 16px;
    --mb-space-lg: 24px;
    --mb-space-xl: 32px;
    --mb-space-2xl: 48px;
    --mb-space-3xl: 64px;
    
    /* Typography */
    --mb-font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mb-font-size-xs: 0.75rem;
    --mb-font-size-sm: 0.875rem;
    --mb-font-size-base: 1rem;
    --mb-font-size-lg: 1.125rem;
    --mb-font-size-xl: 1.25rem;
    --mb-font-size-2xl: 1.5rem;
    --mb-font-size-3xl: 1.875rem;
    
    /* Border Radius */
    --mb-radius-sm: 8px;
    --mb-radius-md: 12px;
    --mb-radius-lg: 16px;
    --mb-radius-xl: 24px;
    --mb-radius-full: 9999px;
    
    /* Transitions */
    --mb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --mb-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --mb-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --mb-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Safe Areas */
    --mb-safe-top: env(safe-area-inset-top, 0px);
    --mb-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mb-safe-left: env(safe-area-inset-left, 0px);
    --mb-safe-right: env(safe-area-inset-right, 0px);
    
    /* Layout */
    --mb-header-height: 60px;
    --mb-bottom-nav-height: 70px;
    --mb-drawer-width: 85vw;
    --mb-max-drawer-width: 320px;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
    :root {
        --mb-glass-bg: rgba(30, 41, 59, 0.9);
        --mb-glass-border: rgba(255, 255, 255, 0.1);
        --mb-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        --mb-bg-surface: #1e293b;
    }
}

/* ============================================
   Base Mobile Styles
   ============================================ */

@media (max-width: 992px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
    
    body {
        font-family: var(--mb-font-family);
        padding-top: calc(var(--mb-header-height) + var(--mb-safe-top));
        padding-bottom: calc(var(--mb-bottom-nav-height) + var(--mb-safe-bottom));
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Touch optimization */
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Better text selection on mobile */
    ::selection {
        background: var(--mb-primary-light);
        color: white;
    }
}

/* ============================================
   Mobile Header - Glassmorphism Style
   ============================================ */

@media (max-width: 992px) {
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--mb-header-height) + var(--mb-safe-top));
        padding-top: var(--mb-safe-top);
        background: var(--mb-glass-bg);
        backdrop-filter: var(--mb-blur);
        -webkit-backdrop-filter: var(--mb-blur);
        border-bottom: 1px solid var(--mb-glass-border);
        box-shadow: var(--mb-glass-shadow);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: var(--mb-space-md);
        padding-right: var(--mb-space-md);
    }
    
    .mobile-header__logo {
        display: flex;
        align-items: center;
        gap: var(--mb-space-sm);
        font-weight: 700;
        font-size: var(--mb-font-size-lg);
        color: var(--mb-gray-900);
        text-decoration: none;
    }
    
    .mobile-header__logo-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
        border-radius: var(--mb-radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: var(--mb-font-size-lg);
    }
    
    .mobile-header__actions {
        display: flex;
        align-items: center;
        gap: var(--mb-space-sm);
    }
    
    .mobile-header__btn {
        width: 44px;
        height: 44px;
        border-radius: var(--mb-radius-full);
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mb-gray-600);
        font-size: var(--mb-font-size-xl);
        cursor: pointer;
        transition: all var(--mb-transition-fast);
        position: relative;
    }
    
    .mobile-header__btn:hover,
    .mobile-header__btn:active {
        background: var(--mb-gray-100);
        color: var(--mb-primary);
    }
    
    .mobile-header__btn--primary {
        background: var(--mb-primary);
        color: white;
    }
    
    .mobile-header__btn--primary:hover,
    .mobile-header__btn--primary:active {
        background: var(--mb-primary-dark);
        color: white;
    }
    
    /* User Avatar in Header */
    .mobile-header__user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-weight: 600;
    }
    
    .mobile-header__user-btn--guest {
        color: var(--mb-gray-600);
    }
    
    /* Notification badge */
    .mobile-header__badge {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 18px;
        height: 18px;
        background: var(--mb-danger);
        color: white;
        font-size: 10px;
        font-weight: 700;
        border-radius: var(--mb-radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        animation: pulse-badge 2s infinite;
    }
    
    /* Hide default header on mobile */
    header:not(.mobile-header) {
        display: none !important;
    }
}

/* ============================================
   Hamburger Menu Button - Animated
   ============================================ */

@media (max-width: 992px) {
    .hamburger {
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: var(--mb-radius-md);
        transition: background var(--mb-transition-fast);
    }
    
    .hamburger:hover,
    .hamburger:active {
        background: var(--mb-gray-100);
    }
    
    .hamburger__line {
        width: 22px;
        height: 2px;
        background: var(--mb-gray-700);
        border-radius: 2px;
        transition: all var(--mb-transition-base);
        transform-origin: center;
    }
    
    /* Animated X state */
    .hamburger.is-active .hamburger__line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .hamburger.is-active .hamburger__line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    
    .hamburger.is-active .hamburger__line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ============================================
   User Menu Overlay & Dropdown - NEW
   ============================================ */

@media (max-width: 992px) {
    /* User Menu Overlay */
    .mobile-user-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        transition: all var(--mb-transition-base);
    }
    
    .mobile-user-menu-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }
    
    /* User Dropdown */
    .mobile-user-dropdown {
        position: fixed;
        top: calc(var(--mb-header-height) + var(--mb-safe-top));
        right: 0;
        width: 320px;
        max-width: 85vw;
        max-height: calc(100vh - var(--mb-header-height) - var(--mb-safe-top) - 20px);
        background: var(--mb-bg-surface);
        border-radius: var(--mb-radius-lg) 0 0 var(--mb-radius-lg);
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.2);
        z-index: 1051;
        transform: translateX(100%);
        transition: transform var(--mb-transition-slow);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-user-dropdown.is-active {
        transform: translateX(0);
    }
    
    /* User Dropdown Header */
    .mobile-user-dropdown__header {
        display: flex;
        align-items: center;
        gap: var(--mb-space-md);
        padding: var(--mb-space-lg);
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
        color: white;
    }
    
    .mobile-user-dropdown__header--guest {
        background: var(--mb-gray-100);
        color: var(--mb-gray-900);
    }
    
    .mobile-user-dropdown__avatar {
        width: 56px;
        height: 56px;
        border-radius: var(--mb-radius-full);
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        font-weight: 700;
        flex-shrink: 0;
    }
    
    .mobile-user-dropdown__avatar--guest {
        background: white;
        color: var(--mb-gray-400);
        font-size: 28px;
    }
    
    .mobile-user-dropdown__info {
        flex: 1;
        min-width: 0;
    }
    
    .mobile-user-dropdown__name {
        font-size: var(--mb-font-size-lg);
        font-weight: 600;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-user-dropdown__email {
        font-size: var(--mb-font-size-sm);
        opacity: 0.9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-user-dropdown__role {
        display: inline-block;
        margin-top: 6px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: var(--mb-radius-full);
        font-size: var(--mb-font-size-xs);
        font-weight: 500;
    }
    
    /* User Dropdown Items */
    .mobile-user-dropdown__item {
        display: flex;
        align-items: center;
        gap: var(--mb-space-md);
        padding: var(--mb-space-md) var(--mb-space-lg);
        color: var(--mb-gray-700);
        text-decoration: none;
        font-size: var(--mb-font-size-base);
        transition: all var(--mb-transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }
    
    .mobile-user-dropdown__item:hover,
    .mobile-user-dropdown__item:active {
        background: var(--mb-gray-100);
    }
    
    .mobile-user-dropdown__item--primary {
        background: var(--mb-primary);
        color: white;
        margin: var(--mb-space-sm) var(--mb-space-md);
        border-radius: var(--mb-radius-md);
        width: calc(100% - var(--mb-space-md) * 2);
        justify-content: center;
    }
    
    .mobile-user-dropdown__item--primary:hover,
    .mobile-user-dropdown__item--primary:active {
        background: var(--mb-primary-dark);
        color: white;
    }
    
    .mobile-user-dropdown__item--danger {
        color: var(--mb-danger);
    }
    
    .mobile-user-dropdown__item--danger:hover,
    .mobile-user-dropdown__item--danger:active {
        background: var(--mb-danger-light);
        color: var(--mb-danger);
    }
    
    .mobile-user-dropdown__item i {
        width: 24px;
        text-align: center;
        font-size: 20px;
        flex-shrink: 0;
    }
    
    .mobile-user-dropdown__divider {
        height: 1px;
        background: var(--mb-gray-200);
        margin: var(--mb-space-sm) 0;
    }
    
    .mobile-user-dropdown__logout-form {
        margin: 0;
    }
    
    /* Language Selector in User Menu */
    .mobile-user-dropdown__language {
        padding: var(--mb-space-md) var(--mb-space-lg);
    }
    
    .mobile-user-dropdown__language .form-select {
        font-size: var(--mb-font-size-sm);
    }
}

/* ============================================
   Mobile Navigation Drawer
   ============================================ */

@media (max-width: 992px) {
    /* Overlay */
    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: all var(--mb-transition-base);
    }
    
    .mobile-drawer-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Drawer */
    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--mb-drawer-width);
        max-width: var(--mb-max-drawer-width);
        height: 100vh;
        height: 100dvh;
        background: var(--mb-glass-bg);
        backdrop-filter: var(--mb-blur);
        -webkit-backdrop-filter: var(--mb-blur);
        z-index: 1002;
        transform: translateX(-100%);
        transition: transform var(--mb-transition-slow);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-top: var(--mb-safe-top);
        padding-bottom: var(--mb-safe-bottom);
    }
    
    .mobile-drawer.is-active {
        transform: translateX(0);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2);
    }
    
    /* Drawer Header */
    .mobile-drawer__header {
        padding: var(--mb-space-lg) var(--mb-space-md);
        border-bottom: 1px solid var(--mb-gray-200);
        display: flex;
        align-items: center;
        gap: var(--mb-space-md);
    }
    
    .mobile-drawer__avatar {
        width: 48px;
        height: 48px;
        border-radius: var(--mb-radius-full);
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: var(--mb-font-size-xl);
        font-weight: 700;
        flex-shrink: 0;
    }
    
    .mobile-drawer__user-info {
        flex: 1;
        min-width: 0;
    }
    
    .mobile-drawer__user-name {
        font-weight: 600;
        font-size: var(--mb-font-size-base);
        color: var(--mb-gray-900);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-drawer__user-email {
        font-size: var(--mb-font-size-sm);
        color: var(--mb-gray-500);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-drawer__user-role {
        display: inline-block;
        margin-top: var(--mb-space-xs);
        padding: 2px 8px;
        background: var(--mb-primary-light);
        color: white;
        font-size: var(--mb-font-size-xs);
        border-radius: var(--mb-radius-full);
        font-weight: 500;
    }
    
    /* Drawer Navigation */
    .mobile-drawer__nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: var(--mb-space-sm) 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Custom scrollbar */
    .mobile-drawer__nav::-webkit-scrollbar {
        width: 4px;
    }
    
    .mobile-drawer__nav::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .mobile-drawer__nav::-webkit-scrollbar-thumb {
        background: var(--mb-gray-300);
        border-radius: 4px;
    }
    
    /* Navigation Groups */
    .mobile-nav-group {
        margin-bottom: var(--mb-space-sm);
    }
    
    .mobile-nav-group__title {
        padding: var(--mb-space-sm) var(--mb-space-md);
        font-size: var(--mb-font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--mb-gray-400);
    }
    
    /* Navigation Items */
    .mobile-nav-item {
        display: flex;
        align-items: center;
        padding: var(--mb-space-md);
        margin: 0 var(--mb-space-sm);
        border-radius: var(--mb-radius-md);
        color: var(--mb-gray-700);
        text-decoration: none;
        font-size: var(--mb-font-size-base);
        font-weight: 500;
        transition: all var(--mb-transition-fast);
        gap: var(--mb-space-md);
        min-height: 48px;
    }
    
    .mobile-nav-item:hover,
    .mobile-nav-item:active {
        background: var(--mb-gray-100);
        color: var(--mb-primary);
    }
    
    .mobile-nav-item.is-active {
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-primary-dark));
        color: white;
    }
    
    .mobile-nav-item__icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--mb-font-size-lg);
        flex-shrink: 0;
    }
    
    .mobile-nav-item__text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-nav-item__badge {
        padding: 2px 8px;
        background: var(--mb-danger);
        color: white;
        font-size: var(--mb-font-size-xs);
        font-weight: 600;
        border-radius: var(--mb-radius-full);
    }
    
    .mobile-nav-item__badge--new {
        background: var(--mb-success);
    }
    
    .mobile-nav-item__badge--warning {
        background: var(--mb-warning);
        color: var(--mb-gray-900);
    }
    
    .mobile-nav-item__badge--danger {
        background: var(--mb-danger);
    }
    
    .mobile-nav-item__arrow {
        color: var(--mb-gray-400);
        transition: transform var(--mb-transition-fast);
    }
    
    .mobile-nav-item.is-expanded .mobile-nav-item__arrow {
        transform: rotate(180deg);
    }
    
    /* Submenu */
    .mobile-nav-submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--mb-transition-base);
        background: var(--mb-gray-50);
        margin: 0 var(--mb-space-sm);
        border-radius: var(--mb-radius-md);
    }

    .mobile-nav-submenu .mobile-nav-item {
        padding-left: var(--mb-space-xl);
        margin: 0;
        border-radius: 0;
        font-size: var(--mb-font-size-sm);
    }
    
    .mobile-nav-submenu .mobile-nav-item:first-child {
        border-radius: var(--mb-radius-md) var(--mb-radius-md) 0 0;
    }
    
    .mobile-nav-submenu .mobile-nav-item:last-child {
        border-radius: 0 0 var(--mb-radius-md) var(--mb-radius-md);
    }
    
    /* Nested submenu indentation */
    .mobile-nav-submenu .mobile-nav-submenu .mobile-nav-item {
        padding-left: 36px;
    }
    
    .mobile-nav-submenu .mobile-nav-submenu .mobile-nav-submenu .mobile-nav-item {
        padding-left: 48px;
    }
    
    /* Drawer Footer */
    .mobile-drawer__footer {
        padding: var(--mb-space-md);
        border-top: 1px solid var(--mb-gray-200);
    }
    
    .mobile-drawer__logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--mb-space-sm);
        width: 100%;
        padding: var(--mb-space-md);
        background: var(--mb-gray-100);
        border: none;
        border-radius: var(--mb-radius-md);
        color: var(--mb-danger);
        font-size: var(--mb-font-size-base);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--mb-transition-fast);
    }
    
    .mobile-drawer__logout:hover,
    .mobile-drawer__logout:active {
        background: var(--mb-danger);
        color: white;
    }
    
    /* Hide default nav on mobile - FIXED */
    nav.desktop-nav,
    nav.desktop-nav ul.nav,
    nav:not(.mobile-drawer__nav):not(.bottom-nav) {
        display: none !important;
    }
}

/* ============================================
   Bottom Navigation Bar
   ============================================ */

@media (max-width: 992px) {
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--mb-bottom-nav-height) + var(--mb-safe-bottom));
        padding-bottom: var(--mb-safe-bottom);
        background: var(--mb-glass-bg);
        backdrop-filter: var(--mb-blur);
        -webkit-backdrop-filter: var(--mb-blur);
        border-top: 1px solid var(--mb-glass-border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 999;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
    }
    
    .bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: var(--mb-space-sm) 0;
        color: var(--mb-gray-500);
        text-decoration: none;
        font-size: var(--mb-font-size-xs);
        font-weight: 500;
        transition: all var(--mb-transition-fast);
        position: relative;
        border: none;
        background: transparent;
        cursor: pointer;
    }
    
    .bottom-nav__item:hover,
    .bottom-nav__item:active {
        color: var(--mb-primary);
    }
    
    .bottom-nav__item.is-active {
        color: var(--mb-primary);
    }
    
    .bottom-nav__item.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 3px;
        background: var(--mb-primary);
        border-radius: 0 0 3px 3px;
    }
    
    .bottom-nav__icon {
        font-size: 22px;
        line-height: 1;
        transition: transform var(--mb-transition-bounce);
    }
    
    .bottom-nav__item:active .bottom-nav__icon {
        transform: scale(0.9);
    }
    
    .bottom-nav__item.is-active .bottom-nav__icon {
        transform: scale(1.1);
    }
    
    .bottom-nav__label {
        font-size: 10px;
        line-height: 1;
    }
    
    /* Center FAB Button */
    .bottom-nav__fab {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bottom-nav__fab-btn {
        position: absolute;
        top: -24px;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
        border-radius: var(--mb-radius-full);
        border: none;
        box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        cursor: pointer;
        transition: all var(--mb-transition-fast);
    }
    
    .bottom-nav__fab-btn:hover,
    .bottom-nav__fab-btn:active {
        transform: scale(1.05);
        box-shadow: 0 6px 24px rgba(14, 165, 233, 0.5);
    }
    
    .bottom-nav__fab-btn:active {
        transform: scale(0.95);
    }
    
    /* Badge on nav items */
    .bottom-nav__badge {
        position: absolute;
        top: 4px;
        right: 50%;
        transform: translateX(16px);
        min-width: 18px;
        height: 18px;
        background: var(--mb-danger);
        color: white;
        font-size: 10px;
        font-weight: 700;
        border-radius: var(--mb-radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }
}

/* ============================================
   Quick Actions FAB Menu
   ============================================ */

@media (max-width: 992px) {
    .fab-menu {
        position: fixed;
        bottom: calc(var(--mb-bottom-nav-height) + var(--mb-safe-bottom) + 20px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 998;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: var(--mb-space-md);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: all var(--mb-transition-base);
    }
    
    .fab-menu.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    .fab-menu__item {
        display: flex;
        align-items: center;
        gap: var(--mb-space-sm);
        padding: var(--mb-space-sm) var(--mb-space-md);
        background: white;
        border-radius: var(--mb-radius-full);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        text-decoration: none;
        color: var(--mb-gray-700);
        font-size: var(--mb-font-size-sm);
        font-weight: 500;
        transform: translateY(20px);
        opacity: 0;
        transition: all var(--mb-transition-base);
    }
    
    .fab-menu.is-active .fab-menu__item {
        transform: translateY(0);
        opacity: 1;
    }
    
    .fab-menu.is-active .fab-menu__item:nth-child(1) { transition-delay: 50ms; }
    .fab-menu.is-active .fab-menu__item:nth-child(2) { transition-delay: 100ms; }
    .fab-menu.is-active .fab-menu__item:nth-child(3) { transition-delay: 150ms; }
    .fab-menu.is-active .fab-menu__item:nth-child(4) { transition-delay: 200ms; }
    
    .fab-menu__item:hover,
    .fab-menu__item:active {
        background: var(--mb-gray-100);
        transform: scale(1.02);
    }
    
    .fab-menu__item-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--mb-radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--mb-font-size-lg);
    }
    
    .fab-menu__item-icon--booking {
        background: linear-gradient(135deg, var(--mb-primary), var(--mb-primary-dark));
        color: white;
    }
    
    .fab-menu__item-icon--task {
        background: linear-gradient(135deg, var(--mb-success), #059669);
        color: white;
    }
    
    .fab-menu__item-icon--message {
        background: linear-gradient(135deg, var(--mb-secondary), #4f46e5);
        color: white;
    }
    
    .fab-menu__item-icon--scan {
        background: linear-gradient(135deg, var(--mb-accent), #d97706);
        color: white;
    }
}

/* ============================================
   Mobile Cards & Content
   ============================================ */

@media (max-width: 992px) {
    .mobile-card {
        background: white;
        border-radius: var(--mb-radius-lg);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        padding: var(--mb-space-md);
        margin-bottom: var(--mb-space-md);
    }
    
    .mobile-card--glass {
        background: var(--mb-glass-bg);
        backdrop-filter: var(--mb-blur);
        -webkit-backdrop-filter: var(--mb-blur);
        border: 1px solid var(--mb-glass-border);
    }
    
    .mobile-section-title {
        font-size: var(--mb-font-size-sm);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--mb-gray-500);
        margin-bottom: var(--mb-space-md);
        padding: 0 var(--mb-space-xs);
    }
    
    /* Container adjustments */
    .container {
        padding-left: var(--mb-space-md);
        padding-right: var(--mb-space-md);
    }
    
    main.container {
        padding-top: var(--mb-space-md);
    }
}

/* ============================================
   Mobile Alerts & Messages
   ============================================ */

@media (max-width: 992px) {
    .alert {
        border-radius: var(--mb-radius-md);
        padding: var(--mb-space-md);
        font-size: var(--mb-font-size-sm);
        border: none;
        margin-bottom: var(--mb-space-md);
    }
    
    .alert-dismissible .btn-close {
        padding: var(--mb-space-md);
    }
}

/* ============================================
   Mobile Forms
   ============================================ */

@media (max-width: 992px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: var(--mb-space-md);
        border-radius: var(--mb-radius-md);
        min-height: 48px;
    }
    
    .form-label {
        font-size: var(--mb-font-size-sm);
        font-weight: 500;
        margin-bottom: var(--mb-space-xs);
    }
    
    .btn {
        min-height: 48px;
        border-radius: var(--mb-radius-md);
        font-weight: 500;
        padding: var(--mb-space-md) var(--mb-space-lg);
    }
    
    .btn-lg {
        min-height: 56px;
        font-size: var(--mb-font-size-lg);
    }
}

/* ============================================
   Mobile Tables
   ============================================ */

@media (max-width: 992px) {
    .table-responsive {
        border-radius: var(--mb-radius-md);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    
    .table {
        font-size: var(--mb-font-size-sm);
    }
    
    .table th,
    .table td {
        padding: var(--mb-space-sm) var(--mb-space-md);
        white-space: nowrap;
    }
}

/* ============================================
   Mobile Modal Adjustments
   ============================================ */

@media (max-width: 992px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
        min-height: 100dvh;
        border: none;
    }
    
    /* Bottom sheet style modal */
    .modal-dialog-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        max-width: 100%;
        min-height: auto;
        transform: translateY(100%);
        transition: transform var(--mb-transition-slow);
    }
    
    .modal.show .modal-dialog-bottom {
        transform: translateY(0);
    }
    
    .modal-dialog-bottom .modal-content {
        min-height: auto;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: var(--mb-radius-xl) var(--mb-radius-xl) 0 0;
        padding-bottom: var(--mb-safe-bottom);
    }
    
    .modal-dialog-bottom .modal-header {
        position: relative;
        padding-top: var(--mb-space-lg);
    }
    
    .modal-dialog-bottom .modal-header::before {
        content: '';
        position: absolute;
        top: var(--mb-space-sm);
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--mb-gray-300);
        border-radius: 4px;
    }
}

/* ============================================
   Swipe Gesture Area
   ============================================ */

@media (max-width: 992px) {
    .swipe-area {
        position: fixed;
        top: 0;
        left: 0;
        width: 20px;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
    }
}

/* ============================================
   Pull to Refresh Indicator
   ============================================ */

@media (max-width: 992px) {
    .ptr-indicator {
        position: fixed;
        top: calc(var(--mb-header-height) + var(--mb-safe-top));
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        width: 40px;
        height: 40px;
        background: white;
        border-radius: var(--mb-radius-full);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        transition: transform var(--mb-transition-base);
    }
    
    .ptr-indicator.is-visible {
        transform: translateX(-50%) translateY(10px);
    }
    
    .ptr-indicator__spinner {
        width: 24px;
        height: 24px;
        border: 3px solid var(--mb-gray-200);
        border-top-color: var(--mb-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
}

/* ============================================
   Skeleton Loading
   ============================================ */

@media (max-width: 992px) {
    .skeleton {
        background: linear-gradient(90deg, 
            var(--mb-gray-200) 25%, 
            var(--mb-gray-100) 50%, 
            var(--mb-gray-200) 75%
        );
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: var(--mb-radius-sm);
    }
    
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    .skeleton-text {
        height: 16px;
        margin-bottom: var(--mb-space-sm);
    }
    
    .skeleton-title {
        height: 24px;
        width: 60%;
        margin-bottom: var(--mb-space-md);
    }
    
    .skeleton-avatar {
        width: 48px;
        height: 48px;
        border-radius: var(--mb-radius-full);
    }
    
    .skeleton-card {
        height: 120px;
        border-radius: var(--mb-radius-lg);
    }
}

/* ============================================
   Animations
   ============================================ */

@keyframes pulse-badge {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.1); 
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

@media (max-width: 992px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
    
    .mobile-hidden { display: none !important; }
    
    .mobile-px { padding-left: var(--mb-space-md); padding-right: var(--mb-space-md); }
    .mobile-py { padding-top: var(--mb-space-md); padding-bottom: var(--mb-space-md); }
    
    .mobile-text-center { text-align: center; }
    .mobile-text-sm { font-size: var(--mb-font-size-sm); }
    
    .mobile-stack > * + * { margin-top: var(--mb-space-md); }
    
    .touch-feedback {
        transition: transform var(--mb-transition-fast), opacity var(--mb-transition-fast);
    }
    
    .touch-feedback:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

@media (min-width: 993px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
}

/* ============================================
   Language Selector Mobile
   ============================================ */

@media (max-width: 992px) {
    .mobile-language-selector {
        padding: var(--mb-space-md);
        background: var(--mb-gray-50);
        border-radius: var(--mb-radius-md);
        margin: var(--mb-space-sm) var(--mb-space-md);
    }
    
    .mobile-language-selector select {
        flex: 1;
    }
    
    .mobile-language-selector .btn {
        min-width: 80px;
    }
}

/* ============================================
   Search Bar Mobile - FIXED
   (removed broken nested CSS rules)
   ============================================ */

@media (max-width: 992px) {
    .mobile-search {
        position: fixed;
        top: calc(var(--mb-header-height) + var(--mb-safe-top));
        left: 0;
        right: 0;
        background: var(--mb-bg-surface);
        border-bottom: 1px solid var(--mb-glass-border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        z-index: 1100;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: all var(--mb-transition-base);
        max-height: calc(100vh - var(--mb-header-height) - var(--mb-safe-top));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-search.is-active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-search__input-wrapper {
        position: relative;
        padding: var(--mb-space-md);
    }
    
    .mobile-search__input {
        width: 100%;
        padding: var(--mb-space-md) var(--mb-space-lg);
        padding-left: 48px;
        background: var(--mb-gray-50);
        border: 2px solid var(--mb-gray-200);
        border-radius: var(--mb-radius-full);
        font-size: 16px;
        outline: none;
        transition: border-color var(--mb-transition-fast);
    }
    
    .mobile-search__input:focus {
        border-color: var(--mb-primary);
    }
    
    .mobile-search__icon {
        position: absolute;
        left: calc(var(--mb-space-md) + 16px);
        top: 50%;
        transform: translateY(-50%);
        color: var(--mb-gray-400);
        font-size: var(--mb-font-size-lg);
        pointer-events: none;
    }
    
    .mobile-search__close {
        position: absolute;
        right: calc(var(--mb-space-md) + 8px);
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        background: var(--mb-gray-100);
        border: none;
        border-radius: var(--mb-radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mb-gray-600);
        cursor: pointer;
    }

    /* Search Results */
    .mobile-search__results {
        padding: 0 var(--mb-space-sm) var(--mb-space-sm);
        max-height: 60vh;
        overflow-y: auto;
    }

    .mobile-search__empty {
        padding: var(--mb-space-xl) var(--mb-space-md);
        text-align: center;
        color: var(--mb-gray-400);
    }

    .mobile-search__empty i {
        font-size: 36px;
        display: block;
        margin-bottom: var(--mb-space-sm);
        opacity: 0.5;
    }

    .mobile-search__result-item {
        display: flex;
        align-items: center;
        gap: var(--mb-space-md);
        padding: var(--mb-space-md);
        margin: 0 var(--mb-space-xs);
        border-radius: var(--mb-radius-md);
        color: var(--mb-gray-700);
        text-decoration: none;
        transition: background var(--mb-transition-fast);
    }

    .mobile-search__result-item:hover,
    .mobile-search__result-item:active {
        background: var(--mb-gray-100);
    }

    .mobile-search__result-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--mb-radius-md);
        background: var(--mb-gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mb-gray-500);
        font-size: var(--mb-font-size-lg);
        flex-shrink: 0;
    }

    .mobile-search__result-item:active .mobile-search__result-icon {
        background: var(--mb-primary);
        color: white;
    }

    .mobile-search__result-title {
        font-size: var(--mb-font-size-base);
        font-weight: 500;
        color: var(--mb-gray-800);
    }

    .mobile-search__result-category {
        font-size: var(--mb-font-size-xs);
        color: var(--mb-gray-400);
        margin-top: 2px;
    }

    .mobile-search__group-title {
        padding: var(--mb-space-sm) var(--mb-space-md);
        font-size: var(--mb-font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--mb-gray-400);
        margin-top: var(--mb-space-sm);
    }
}

/* ============================================
   Toast Notifications
   ============================================ */

@media (max-width: 992px) {
    #toastContainer {
        position: fixed;
        bottom: calc(var(--mb-bottom-nav-height) + var(--mb-safe-bottom) + var(--mb-space-md));
        left: var(--mb-space-md);
        right: var(--mb-space-md);
        z-index: 2000;
        display: flex;
        flex-direction: column;
        gap: var(--mb-space-sm);
    }
    
    .mobile-toast {
        padding: var(--mb-space-md);
        background: var(--mb-gray-900);
        color: white;
        border-radius: var(--mb-radius-md);
        font-size: var(--mb-font-size-sm);
        display: flex;
        align-items: center;
        gap: var(--mb-space-md);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        transform: translateY(150%);
        opacity: 0;
        transition: all var(--mb-transition-base);
    }
    
    .mobile-toast.is-visible {
        transform: translateY(0);
        opacity: 1;
    }
    
    .mobile-toast--success {
        background: var(--mb-success);
    }
    
    .mobile-toast--error {
        background: var(--mb-danger);
    }
    
    .mobile-toast--warning {
        background: var(--mb-warning);
        color: var(--mb-gray-900);
    }
    
    .mobile-toast__icon {
        font-size: var(--mb-font-size-xl);
    }
    
    .mobile-toast__message {
        flex: 1;
    }
    
    .mobile-toast__close {
        background: transparent;
        border: none;
        color: currentColor;
        opacity: 0.7;
        font-size: var(--mb-font-size-lg);
        cursor: pointer;
        padding: var(--mb-space-xs);
    }
}

/* ============================================
   Icon sizing helper
   ============================================ */

@media (max-width: 992px) {
    /* Ensure all icons are properly sized */
    .mobile-nav-item__icon i,
    .mobile-user-dropdown__item i,
    .fab-menu__item-icon i,
    .bottom-nav__icon {
        font-size: inherit;
        line-height: 1;
    }
}