/* ===== MOBILE & TABLET RESPONSIVE STYLES ===== */
/* Comprehensive responsive design for entire website */

/* ===== HEADER RESPONSIVE ===== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .header-grid {
        padding: 0.5rem 1rem;
    }

    .header-center {
        gap: 0.75rem;
    }

    .nav-btn {
        font-size: 13px;
        padding: 5px 6px;
    }

    .nav-item-grid {
        min-width: 350px;
        padding: 12px;
    }

    .mega-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 12px;
    }
}

/* ===== CRITICAL MOBILE FIXES ===== */
@media (max-width: 1024px) {

    /* Force header to fit screen */
    #mainHeader {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Hide side UFO panels and covers on tablets and mobile - Avoid "stray cats" */
    #ufoControlPanel,
    .ufo-control-panel,
    #ufoControlPanelLeft,
    .ufo-left-control-panel,
    .ufo-panel-cover,
    /* .ufo-cover-screen, */
    /* DISABLED - Allow mobile strip */
    .ufo-left-cover,
    .ufo-right-cover,
    #ufoCover,
    #ufoCoverLeft,
    .ufo-3d-bar,
    .ufo-pin-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
        height: 0 !important;
        width: 0 !important;
    }

    /* NUCLEAR RULE: Absolutely remove UFO panel on mobile to prevent blocking overlays */
    #ufoControlPanel:not(.mobile-summoned),
    div#ufoControlPanel:not(.mobile-summoned),
    .ufo-control-panel:not(.mobile-summoned) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: -999999 !important;
    }

    /* Ensure all children are also hidden */
    #ufoControlPanel:not(.mobile-summoned) *,
    div#ufoControlPanel:not(.mobile-summoned) * {
        display: none !important;
        pointer-events: none !important;
    }

    /* ABSOLUTE NUCLEAR: Hide ALL UFO panel covers on mobile */
    #ufoControlPanelLeft,
    div#ufoControlPanelLeft,
    .ufo-left-control-panel,
    #ufoCoverLeft,
    div#ufoCoverLeft,
    .ufo-left-cover,
    #ufoCover,
    div#ufoCover,
    .ufo-right-cover,
    .ufo-panel-cover {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: fixed !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: -999999 !important;
    }

    /* Hide all children too */
    #ufoControlPanelLeft *,
    #ufoCoverLeft *,
    #ufoCover *,
    .ufo-left-cover *,
    .ufo-right-cover * {
        display: none !important;
        pointer-events: none !important;
    }


    /* Ensure main header has enough height for both rows on mobile */
    #mainHeader {
        height: auto !important;
        min-height: 100px !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {

    /* ===== COMPACT MOBILE LAYOUT ===== */
    /* Reduce all spacing to fit more content */

    /* Global spacing reduction */
    * {
        letter-spacing: -0.01em;
    }

    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4 {
        font-size: 1rem;
    }

    p {
        font-size: 0.9rem;
        line-height: 1.4;
    }



    /* ===== MOBILE HEADER - Simple Vertical Layout ===== */

    /* NUCLEAR OPTION (DISABLED): Unhided standard header elements for restored header.php */
    /* SAFE FIX: Ensure header content is visible when menu is open */
    body.ccc-no-scroll #mainHeader,
    body:has(.mobile-summoned) #mainHeader {
        overflow: visible !important;
        /* Allow content to be seen if pushed */
        z-index: 900000 !important;
    }

    body.ccc-no-scroll #mainHeader>*,
    body:has(.mobile-summoned) #mainHeader>* {
        visibility: visible !important;
        opacity: 1 !important;
        /* Do NOT touch display property to avoid layout breakage */
    }


    /* Header container as column - STRICT WIDTH LIMITS */
    #mainHeader {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 5px !important;
        margin: 0 !important;
        min-height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }

    /* Mobile search bar - first row - FIT VIEWPORT */
    #mobileHeaderSearch {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }

    /* Ensure search row content is visible */
    #mobileHeaderSearch .mobile-search-row,
    #mobileHeaderSearch .mobile-search-box,
    #mobileHeaderSearch input,
    #mobileHeaderSearch select,
    #mobileHeaderSearch button {
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
    }

    /* Navigator - second row - FIT VIEWPORT */
    #navigator-container {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 5px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        padding: 0 5px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure nav buttons are visible */
    #navigator-container .nav-item,
    #navigator-container .nav-btn {
        visibility: visible !important;
        opacity: 1 !important;
        display: inline-flex !important;
    }






    /* DISABLED: Unhiding specific header components for restored header.php */
    /* .ufo-middle-cover,
    .header-grid,
    .header-row1,
    .header-row2,
    .header-second-row,
    .header-left,
    .header-right,
    .header-center,
    .header-middle-panel,
    #headerMiddlePanel,
    .search-filter-container,
    .row1-right-icons {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        z-index: -1 !important;
        pointer-events: none !important;
    } */




    /* Shrink Desktop Search Row on Mobile (24px-28px) */
    .header-row1 {
        padding: 4px 8px !important;
        min-height: 28px !important;
        margin-top: 4px !important;
        gap: 8px !important;
    }

    .header-row1 .search-box {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        border-radius: 14px !important;
    }

    .header-row1 #oldSearchInput {
        height: 100% !important;
        line-height: normal !important;
        font-size: 12px !important;
    }

    .header-row1 #searchCategory {
        height: 100% !important;
        font-size: 11px !important;
        padding: 0 4px !important;
    }

    .header-row1 .filter-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }

    /* Reduce spacing for header utility icons (Profile, Mail, etc) */
    .row1-right-icons {
        gap: 4px !important;
    }

    .row1-right-icons a,
    .row1-right-icons div,
    .row1-right-icons button {
        padding: 2px !important;
        margin: 0 !important;
    }

    .row1-right-icons i {
        font-size: 14px !important;
    }

    /* Shrink Desktop Navigator Row on Mobile */
    .header-second-row {
        height: 32px !important;
        min-height: 32px !important;
        padding: 2px 8px !important;
        margin-top: 2px !important;
    }

    /* Icon-Only Navigator Buttons */
    .header-center .nav-btn {
        padding: 0 6px !important;
        font-size: 16px !important;
        /* Emphasize icon size */
    }

    /* Hide text inside navigation buttons on mobile */
    .header-center .nav-btn span,
    .header-center .nav-btn .btn-text,
    .header-center .nav-btn b {
        display: none !important;
    }


    /* Keep icons visible */
    .header-center .nav-btn i {
        margin: 0 !important;
        display: inline-block !important;
    }

    /* Icon-only navigator - hide ALL text inside nav buttons */
    #navigator-container .nav-btn {
        font-size: 0 !important;
        /* Hide text */
    }

    #navigator-container .nav-btn i {
        font-size: 18px !important;
        /* Restore icon size */
        margin: 0 !important;
    }


    /* Compact spacing */
    .header-center {
        gap: 8px !important;
    }

    /* Navigation row - Inside header, below search */
    .header-second-row,
    #navigator-container {
        order: 4 !important;
        /* Force to bottom of flex column if needed */
        width: 100% !important;
        flex: 1 1 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        margin-top: 2px !important;
        padding: 2px 4px !important;
        display: flex !important;
        justify-content: center !important;
    }

    #navigator-container::-webkit-scrollbar {
        display: none;
    }

    /* Navigation - More compact */
    .nav-btn {
        font-size: 8px !important;
        padding: 2px 3px !important;
        line-height: 1.2 !important;
        border-radius: 4px !important;
    }

    /* Icon-only navigation buttons on mobile */
    .nav-btn,
    .header-center .nav-btn,
    .nav-item a,
    .nav-item button {
        font-size: 0 !important;
        /* Hide text */
        padding: 4px 5px !important;
        min-width: 28px !important;
        height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 1px !important;
    }

    /* Show icons at readable size */
    .nav-btn i,
    .nav-btn .fa,
    .nav-btn .fas {
        font-size: 16px !important;
        margin: 0 !important;
        color: inherit !important;
    }

    .nav-item {
        margin: 0 !important;
        display: inline-flex !important;
    }

    .nav-item-grid {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        min-width: 100%;
        max-width: 100%;
        margin-top: 0;
        border-radius: 0;
        max-height: 70vh;
        overflow-y: auto;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Search - COMPACT */
    #searchWrapper {
        width: 100%;
        max-width: 100%;
    }

    /* Make search input much smaller */
    #oldSearchInput,
    #searchInput,
    input[type="search"],
    .search-input {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
        line-height: 1.2 !important;
        flex: 1 1 70% !important;
        /* Give search input MORE space */
        max-width: 70% !important;
    }

    /* Search category dropdown - SMALLER */
    #searchCategory,
    .search-category {
        height: 28px !important;
        font-size: 11px !important;
        padding: 4px 6px !important;
        flex: 0 0 25% !important;
        /* Give category LESS space */
        max-width: 25% !important;
    }

    /* Search button */
    .search-btn,
    button[type="submit"] {
        height: 28px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    #searchResults {
        width: 100%;
        left: 0;
        right: 0;
        max-width: 100%;
    }

    /* Consolidated UFO Panel Hiding on Mobile */
    #ufoControlPanel,
    .ufo-control-panel,
    #ufoControlPanelLeft,
    .ufo-left-control-panel,
    #universalRemote {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Navigation Container - Prevent overflow */
    #navigator-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #navigator-container::-webkit-scrollbar {
        display: none;
    }

    /* Make nav items wrap or scroll horizontally */
    .nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Logo/branding - Smaller */
    .header-logo img {
        max-height: 32px;
    }

    .glrcf-logo {
        font-size: 0.9rem !important;
        padding: 2px 6px !important;
    }

    /* Ultra-compact site title in header only (not mobile nav drawers) */
    .header-logo,
    .logo-text,
    .glrcf-title,
    .site-title,
    .brand-logo-link,
    .logo-wrapper > a[href*="index.php"],
    #expandedBrandLockup a[href*="index.php"] {
        font-size: 9px !important;
        max-width: 60px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    body.muslimancestry-site .header-top-bar .top-bar-brand-mobile {
        font-size: 11px !important;
        max-width: none !important;
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* Mobile nav drawers — same font size, left-aligned links */
    #leftNavDrawer > div:last-child,
    #rightNavDrawer > div:last-child {
        align-items: stretch !important;
    }

    #leftNavDrawer a,
    #rightNavDrawer a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        word-break: normal !important;
        text-align: left !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
        color: #333 !important;
        text-decoration: none !important;
    }

    #leftNavDrawer a i,
    #rightNavDrawer a i {
        font-size: 16px !important;
        width: 20px !important;
        min-width: 20px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* If logo is an image + text combo */
    .header-logo img+span,
    .header-logo img+div {
        font-size: 9px !important;
        max-width: 50px !important;
    }


    /* Horizontal + bottom padding only. Top inset = adjustHeaderSpacer() — do not stack 210px. */
    body,
    body.mobile-view {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 90px !important;
        overflow-x: hidden !important;
    }
    .main-content,
    main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 90px !important;
        overflow-x: hidden !important;
    }

    /* Reduce section spacing */
    section {
        padding: 15px 10px !important;
        margin-bottom: 15px !important;
    }

    /* Compact buttons */
    button,
    .btn,
    a.btn {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    /* Compact cards across site */
    .card {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Icons */
    .header-icon-btn {
        padding: 6px;
        font-size: 16px;
    }

    .holo-btn {
        min-width: 55px !important;
        /* Width can vary */
        max-width: none !important;
        /* Allow flexible width */
        height: 50px !important;
        /* Fixed height for uniformity */
        padding: 6px 9px !important;
        /* Reduced by half: was 12px 18px */
        font-size: 9px !important;
        /* Reduced: was 13px */
    }

    .holo-btn-icon {
        font-size: 10px !important;
        /* Reduced by half: was 20px */
    }

    /* Pagination - COMPACT, ONE ROW ONLY */
    .pagination {
        padding: 3px 6px !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        /* Don't wrap */
        overflow-x: auto !important;
        /* Scroll if needed */
        margin: 15px auto !important;
        max-width: 100% !important;
    }

    .pagination button,
    .pagination a,
    .pagination span {
        min-width: auto !important;
        height: auto !important;
        font-size: 12px !important;
        padding: 3px 6px !important;
        /* Compact padding */
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
        border-radius: 12px !important;
        /* Rounded shape */
    }

    /* Show page jump but make it compact */
    .pagination .page-jump {
        display: flex !important;
        gap: 4px !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        border-radius: 16px !important;
        /* Rounded container */
    }

    .pagination .page-jump input {
        width: 40px !important;
        height: 24px !important;
        padding: 3px 6px !important;
        font-size: 11px !important;
        border-radius: 12px !important;
        /* Rounded input */
    }

    .pagination .page-jump button {
        height: 24px !important;
        padding: 3px 10px !important;
        font-size: 10px !important;
        border-radius: 12px !important;
        /* Rounded Go button */
    }

    /* Shop/Sales buttons - compact */
    .add-to-cart-btn,
    .bid-btn,
    .buy-now-btn {
        font-size: 9px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
    }

    .add-to-cart-btn i,
    .bid-btn i,
    .buy-now-btn i {
        font-size: 8px !important;
        margin-right: 2px !important;
    }

}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .header-grid {
        padding: 0.4rem;
    }

    .nav-btn {
        font-size: 11px;
        padding: 3px 4px;
    }

    .header-icon-btn {
        padding: 5px;
        font-size: 14px;
    }

    .nav-item-grid {
        padding: 10px;
    }

    .mega-menu-category {
        font-size: 11px;
    }

    .nav-item-grid a {
        font-size: 13px;
        padding: 6px 8px;
    }
}

/* ===== MAIN CONTENT RESPONSIVE ===== */

@media (max-width: 768px) {
    main {
        padding: 1rem 0.5rem;
    }

    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Cards */
    .card,
    .product-card,
    .auction-card {
        margin-bottom: 1rem;
    }

    /* Grids */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .row>* {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 600px;
        font-size: 0.9rem;
    }

    /* Forms */
    .form-group {
        margin-bottom: 1rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        width: 100%;
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    /* Buttons */
    .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ===== MODALS RESPONSIVE ===== */

@media (max-width: 768px) {
    .modal {
        padding: 0.5rem;
    }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 0.5rem;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }
}

/* ===== FOOTER RESPONSIVE ===== */

@media (max-width: 768px) {
    footer {
        padding: 1.5rem 0.75rem;
        text-align: center;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-section {
        width: 100%;
    }

    /* Social icons - compact and in one row */
    .social-icons,
    .footer-social,
    .social-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        /* Further reduced gap */
        justify-content: center !important;
        padding: 0 4px !important;
    }

    .social-icons a,
    .footer-social a,
    .social-links a {
        width: 21px !important;
        /* Even smaller to fit 8+ icons */
        height: 21px !important;
        font-size: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* ===== UTILITY CLASSES ===== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Full width on mobile */
@media (max-width: 768px) {
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Stack on mobile */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-stack>* {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
}

/* ===== TOUCH FRIENDLY ===== */

@media (max-width: 768px) {

    /* Larger touch targets */
    a,
    button,
    .btn,
    .nav-btn,
    .header-icon-btn {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Prevent text selection on buttons */
    button,
    .btn {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* ===== IMAGES RESPONSIVE ===== */

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    img {
        width: 100%;
        height: auto;
    }
}

/* ===== TEXT RESPONSIVE ===== */

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* ===== SCROLLING ===== */

@media (max-width: 768px) {

    /* Smooth scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    * {
        max-width: 100%;
    }
}


/* ===== NEW MOBILE STRUCTURE FIXES (Restored Header) - V2 ===== */
@media (max-width: 1024px) {

    /* 1. Hide Skip to Content Link */
    a.skip-link,
    a[href="#main-content"],
    .skip-to-content,
    .skip-link {
        display: none !important;
    }

    /* 2. Container Width & Clean Layout */
    #mainHeader {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* Remove "below two layers" / overlays / debris */
    .ufo-middle-cover,
    .ufo-panel-cover,
    #headerMiddlePanel::before,
    #headerMiddlePanel::after,
    .ufo-3d-bar

    /* ,
    .ufo-cover-screen */
    /* DISABLED - Allow mobile strip */
        {
        display: none !important;
    }

    /* 3. Top Panel (Icons) - "Our Panel" - 11 ICONS VISIBLE */
    /* ORDER: 1 */
    .ufo-mode-bar,
    /* 3. TOP ROW: 11 ICONS (UFO MODE BAR) */
    /* Target via ID and Class for max specificity */
    #mainHeader .ufo-mode-bar,
    .ufo-mode-bar,
    .header-mode-icons {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(11, 1fr) !important;
        /* STRICT 11 COLS */
        gap: 0px !important;
        padding: 2px 0px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 25px !important;
        margin: 0 !important;
        justify-content: space-between !important;
    }

    .ufo-mode-btn {
        min-width: 0 !important;
        padding: 0 !important;
        /* ZERO PADDING */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .ufo-mode-btn i {
        font-size: 13px !important;
        /* SMALLER ICONS requested */
        margin: 0 !important;
    }

    .ufo-mode-btn span {
        display: block !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    /* 4. Second Row (Search) - VISIBLE - BETWEEN ICONS AND NAV */
    /* ORDER: 2 */
    .header-row1 {
        order: 2 !important;
        display: flex !important;
        width: 100% !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        justify-content: center !important;
    }

    /* Ensure search box itself is visible */
    .header-row1 .search-box,
    .search-filter-container {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. Third Row (Navigators) - SMALLER & CLOSER */
    /* ORDER: 3 */
    /* 5. BOTTOM ROW: NAVIGATION BUTTONS (The difficult one) */
    #mainHeader .header-second-row,
    .header-second-row {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding: 2px !important;
        gap: 0px !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }

    /* Hide ALL text nodes inside nav buttons */
    .nav-btn span,
    .nav-btn b,
    .nav-btn strong,
    .nav-btn .btn-text,
    .nav-btn:not(:has(i)) {
        /* Text-only nodes? */
        display: none !important;
    }

    /* Ensure flex container doesn't show text nodes */
    /* CRITICAL: Override inline styles for Nav Buttons */
    /* Use ID selector #mainHeader for supreme specificity */
    #mainHeader .header-center .nav-btn,
    .header-center .nav-btn,
    .nav-btn {
        font-size: 0 !important;
        /* NUCLEAR TEXT HIDING */
        padding: 6px 4px !important;
        /* Reduce padding */
        gap: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        width: auto !important;
    }

    /* Icon size */
    #mainHeader .header-center .nav-btn i,
    .nav-btn i {
        font-size: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Specially hide "Home" text if it persists */
    #mainHeader .header-center .nav-btn:first-child,
    .nav-btn[href*="index"] {
        font-size: 0 !important;
        color: transparent !important;
        /* Extra backup */
    }

    .nav-btn i {
        font-size: 16px !important;
        /* Specific icon size */
        margin: 0 !important;
        display: block !important;
    }

    .nav-btn {
        padding: 4px 6px !important;
        /* Smaller buttons */
        flex-shrink: 0 !important;
        min-width: 30px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 6. REMOVE HIGHLIGHTER (Hamburger & Rocket) */
    .nav-btn:has(.fa-bars),
    .nav-btn:has(.fa-rocket),
    #sidebarToggle,
    #sidebarToggleBtn,
    .rocket-btn,
    #appLauncherBtn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 7. Hide Home Text specifically if persistent */
    .nav-btn[href*="index.php"] span {
        display: none !important;
    }

    /* 8. FORCE VISIBILITY & CLICKS for Hamburger/Rocket */
    #sidebarToggleBtn,
    #appLauncherBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 999999 !important;
    }

    /* 9. LAYOUT CHANGE: Search on Top */
    /* Hide 11 Icons (UFO Mode Bar) */
    .ufo-mode-bar,
    .header-mode-icons {
        display: none !important;
    }

    /* Search Bar - TOP ROW (Order 1) */
    #mainHeader .header-row1,
    .header-row1 {
        order: 1 !important;
        margin-top: 0 !important;
        padding-top: 4px !important;
    }

    /* Navigation - BOTTOM ROW (Order 2) */
    #mainHeader .header-second-row,
    .header-second-row {
        order: 2 !important;
    }

    /* 10. SIDEBAR POSITIONING */
    /* Ensure Sidebar opens BELOW the header */
    #ufoControlPanelLeft {
        top: 120px !important;
        height: calc(100vh - 120px) !important;
        z-index: 9999 !important;
        position: fixed !important;
    }

    /* CRITICAL: Allow Panels to show when Active (Overriding Consolidated Hiding) */
    #ufoControlPanel.active,
    #ufoControlPanelLeft.active,
    #appLauncherDraggable.active,
    #smartphoneLauncherWrapper.active,
    .mobile-summoned {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 900000 !important;
    }

    /* Footer Social Icons - Single Row Fix */
    .layer-social>div {
        gap: 8px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        padding: 0 10px !important;
    }

    .social-bubble {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
}