/* ==========================================================================
   NEXUS PRIORITY FIXES (nexus-priority-fixes.css)
   Overrides mobile-responsive.css !important declarations for shared
   classes to ensure the Nexus Design System takes precedence on pages
   where nexus-design.css is loaded.
   ========================================================================== */

/* ── 1. Mobile Bottom Navigation & Glassmorphism ─────────────────────────── */
.nx-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35) !important;
}

.nx-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    border-radius: var(--nx-radius-md, 12px) !important;
    text-decoration: none !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
}

.nx-nav-item.active {
    color: #38bdf8 !important;
}

.nx-nav-item.active i,
.nx-nav-item.active .material-symbols-outlined {
    color: #38bdf8 !important;
    transform: scale(1.08) !important;
}

.nx-nav-item.active span,
.nx-nav-item.active .nx-nav-label {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

.nx-nav-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
}

@media(min-width: 769px) {
    .nx-bottom-nav {
        display: none !important;
    }
}

/* ── 2. Brand Logo Utility ───────────────────────────────────────────────── */
.nx-header-logo,
.bz-header-logo {
    width: var(--bz-public-header-logo-width, 100px) !important;
    height: var(--bz-public-header-logo-height, 54px) !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

/* ── 3. Messenger Widget Positioning ─────────────────────────────────────── */
.messenger-widget {
    position: fixed !important;
    bottom: 85px !important;
    right: 20px !important;
    z-index: 9997 !important;
}

@media (max-width: 768px) {
    .messenger-widget {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }
}

/* ── 4. Scrollbar Suppression ────────────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none !important; }
.hide-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* ── 5. Mobile Viewport Safe Padding (Prevents Bottom Nav from Overlapping Content) ── */
@media (max-width: 768px) {
    body,
    main,
    .bz-page-container,
    .bz-form-container,
    .bz-details-container,
    .bz-dashboard-container,
    .bz-main-layout {
        padding-bottom: calc(85px + env(safe-area-inset-bottom, 12px)) !important;
    }
}

/* ── 6. Card Polish & Micro-Interactions ─────────────────────────────────── */
.bz-card-modern,
.nx-card {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.bz-card-modern:hover,
.nx-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05) !important;
}

/* ── 7. Universal Accessible Focus States ─────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16) !important;
}

/* ── 8. Table Responsive Safe Wrapper ────────────────────────────────────── */
.table-responsive,
.bz-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── 9. Interactive Button Micro-Interactions ─────────────────────────────── */
.btn, .nav-btn, .bz-btn, .nx-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn:hover, .nav-btn:hover, .bz-btn:hover, .nx-btn:hover {
    transform: translateY(-1px) !important;
}
.btn:active, .nav-btn:active, .bz-btn:active, .nx-btn:active {
    transform: translateY(0) !important;
}

/* ── 10. Explore Services by Need Mobile Icon Enhancements ───────────────── */
@media (max-width: 768px) {
    .nx-svc-icons,
    .service-icons {
        gap: 14px !important;
        padding: 6px 2px !important;
    }

    .nx-svc-item,
    .service-item {
        min-width: 76px !important;
        min-height: 86px !important;
        padding: 6px 4px !important;
    }

    .nx-svc-item img,
    .nx-svc-item .jd-thumb,
    .service-item .jd-thumb,
    .jd-thumb {
        width: 54px !important;
        height: 54px !important;
        padding: 7px !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
        margin-bottom: 6px !important;
    }

    .nx-svc-item span,
    .service-item span {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        max-width: 80px !important;
        line-height: 1.25 !important;
    }
}