/* extracted from header.php @ 4277 */ @media (max-width: 980px) { html body.ilearnfree-page #mainHeader .hamburger-search-wrapper { margin-left: 35px !important; padding-left: 0 !important; padding-right: 8px !important; width: calc(100% - 35px) !important; max-width: calc(100% - 35px) !important; flex: 1 1 auto !important; box-sizing: border-box !important; } html body.ilearnfree-page #mainHeader .search-filter-container, html body.ilearnfree-page #mainHeader #searchWrapper, html body.ilearnfree-page #mainHeader #searchForm, html body.ilearnfree-page #mainHeader .search-box { min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } html body.ilearnfree-page #mainHeader { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-height: 120px !important; height: auto !important; } html body.ilearnfree-page #mainHeader, html body.ilearnfree-page #headerMiddlePanel, html body.ilearnfree-page #headerSecondRow, html body.ilearnfree-page #navigator-container { display: flex !important; visibility: visible !important; opacity: 1 !important; } html body.ilearnfree-page #mainHeader .hamburger-search-wrapper { padding-left: 0 !important; padding-right: 8px !important; justify-content: flex-start !important; } html body.ilearnfree-page #mainHeader .hamburger-search-wrapper { margin-left: 35px !important; width: calc(100% - 35px) !important; max-width: calc(100% - 35px) !important; flex: 1 1 auto !important; } html body.ilearnfree-page #mainHeader .search-filter-container, html body.ilearnfree-page #mainHeader #searchWrapper, html body.ilearnfree-page #mainHeader .search-box { min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } html body.ilearnfree-page #mainHeader #headerMiddlePanel .logo-wrapper { pointer-events: none !important; } html body.ilearnfree-page #mainHeader #headerMiddlePanel { margin: 0 4px !important; padding: 0 4px 4px !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 88px !important; max-height: none !important; box-sizing: border-box !important; } html body.ilearnfree-page #mainHeader #headerSecondRow { margin: 0 !important; padding: 0 8px !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; } html body.ilearnfree-page #mainHeader #navigator-container { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } html body.ilearnfree-page #mainHeader #headerSecondRow .header-center { width: auto !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; gap: 4px !important; padding: 0 !important; margin: 0 auto !important; } html body.ilearnfree-page #mainHeader #navigator-container .nav-item { flex: 0 0 auto !important; min-width: 0 !important; display: inline-flex !important; align-items: stretch !important; } html body.ilearnfree-page #mainHeader #navigator-container .nav-btn, html body.ilearnfree-page #mainHeader #navigator-container .nav-item { pointer-events: auto !important; position: relative !important; z-index: 10040 !important; } html body.ilearnfree-page #mainHeader #navigator-container .nav-btn { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 28px !important; height: auto !important; max-height: none !important; padding: 2px 4px !important; font-size: 9px !important; line-height: 1.1 !important; white-space: nowrap !important; text-align: center !important; gap: 3px !important; } html body.ilearnfree-page #mainHeader #navigator-container .nav-btn > i:not(.fa-caret-down) { display: inline-block !important; font-size: 11px !important; margin: 0 !important; order: 0 !important; flex-shrink: 0 !important; } html body.ilearnfree-page #mainHeader #navigator-container .academy-caret-btn { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } } /* extracted from header.php @ 12079 */ html { margin: 0 !important; padding: 0 !important; perspective: none !important; transform: none !important; filter: none !important; overflow-x: hidden !important; /* Prevent horizontal scroll */ } body { margin: 0 !important; /* Never use padding shorthand on body — it overrides adjustHeaderSpacer() padding-top !important in some engines */ padding-left: 0 !important; padding-right: 0 !important; perspective: none !important; transform: none !important; filter: none !important; overflow-x: hidden !important; } /* deenulislam: globally hide the red crisis banner on all viewports */ #redCrisisBanner, #scrollingBanner { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } #mainHeader { position: fixed !important; top: 0px !important; left: 10px !important; right: 10px !important; width: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 18px !important; box-shadow: 0 10px 35px rgba(0,0,0,0.3) !important; z-index: 900000 !important; height: auto !important; /* Allow top bar and row 1 to fit */ min-height: 80px !important; max-height: 140px !important; overflow: visible !important; background: transparent !important; } /* CRITICAL MOBILE OVERRIDES (Anti-FOUC) */ @media (max-width: 980px) { #mainHeader { /* Let header grow to fit all three compact rows on mobile, without pushing row 1 off-screen */ height: auto !important; min-height: 100px !important; max-height: none !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 !important; } /* Hide overlays below header on mobile */ .nav-overlay { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* 3. GLRelief lockup on mobile (match MuslimAncestry): compact logo in .logo-wrapper; hide stacked titles + duplicate lockup */ .logo-expanded-title { display: none !important; } #expandedBrandLockup { display: none !important; } .logo-wrapper { display: flex !important; align-items: center !important; position: relative !important; left: 0 !important; bottom: auto !important; margin: 4px 0 !important; } .logo-wrapper img { height: 28px !important; } /* Hide extra mobile toggle buttons */ #SmartHamburger, #sidebarToggleBtn, .mobile-header-btn-inline { display: none !important; } /* Center elements and fix widths (skip ilearnfree compact header) */ body:not(.ilearnfree-page) .hamburger-search-wrapper, body:not(.ilearnfree-page) .search-filter-container, body:not(.ilearnfree-page) .header-second-row { padding-left: 0 !important; padding-right: 0 !important; left: 0 !important; width: 100% !important; min-width: 0 !important; margin-left: 0 !important; } body:not(.ilearnfree-page) .hamburger-search-wrapper { justify-content: flex-start !important; padding: 0 10px !important; } body:not(.ilearnfree-page) .search-filter-container { max-width: 100% !important; flex: 1 !important; } body:not(.ilearnfree-page) #searchWrapper { min-width: 0 !important; flex: 1 !important; } body:not(.ilearnfree-page) .search-box { min-width: 0 !important; width: 100% !important; height: 32px !important; } body:not(.ilearnfree-page) #oldSearchInput { height: 32px !important; font-size: 13px !important; } /* Navigator Row Spacing (skip ilearnfree compact header) */ body:not(.ilearnfree-page) .header-second-row { margin-top: 4px !important; height: 34px !important; min-height: 34px !important; } body:not(.ilearnfree-page) .nav-btn { font-size: 10px !important; padding: 4px 6px !important; } body:not(.ilearnfree-page) .nav-btn i { display: inline-block !important; font-size: 14px !important; margin-right: 3px !important; } } /* Ensure navigation text is always visible and mobile buttons are hidden */ .nav-text { display: inline !important; } #headerHamburgerRow2, #mobileToolsBtnContainer, #mobileToolsBtn { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* extracted from header.php @ 24525 */ /* Unified header backdrop: - Background/border should "end" with the same rounded shape as the UFO cover panels. - We draw a rounded backdrop behind the whole header area (between left/right margins), and keep all header content above it. - IMPORTANT: Header does NOT extend beyond the panel covers on both sides. - Header sits BENEATH the panel covers as their base layer. */ #mainHeader { background: transparent !important; color: var(--glrcf-header-fg, inherit) !important; left: 10px !important; right: 10px !important; width: auto !important; margin: 0 !important; padding: 0 0 4px 0 !important; /* bottom padding: visual gap above rounded edge */ box-sizing: border-box !important; overflow: visible !important; position: fixed !important; top: 0px !important; z-index: 9999 !important; border-radius: 18px !important; /* Same size and shape as middle panel */ height: 76px !important; min-height: 76px !important; max-height: 76px !important; overflow: visible !important; /* ALLOW DROPDOWNS TO BE VISIBLE */ box-shadow: none !important; } @media (max-width: 980px) { #mainHeader { height: auto !important; min-height: 120px !important; max-height: none !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 !important; overflow: visible !important; } #headerMiddlePanel { height: auto !important; min-height: 96px !important; max-height: none !important; overflow: visible !important; } #headerSecondRow, #headerSecondRow .header-center, #navigator-container { visibility: visible !important; opacity: 1 !important; max-height: none !important; overflow: visible !important; overflow-x: auto !important; pointer-events: auto !important; } } #mainHeader::before { content: "" !important; position: absolute !important; inset: 0 !important; /* Header background = same size and shape as middle panel */ background: transparent !important; border: none !important; border-radius: 18px !important; pointer-events: none !important; z-index: -1 !important; /* Flat by default; only bulge on hover */ box-shadow: none !important; transition: transform 160ms ease, box-shadow 160ms ease !important; } #mainHeader:hover::before { /* Placeholder to avoid empty ruleset warning */ content: ""; } #mainHeader > * { position: relative !important; z-index: 1 !important; } #mainHeader .header-container { background: transparent !important; /* Ensure container doesn't extend beyond header bounds */ max-width: 100% !important; box-sizing: border-box !important; /* Padding removed - controlled by TIGHTER HEADER section below */ gap: 6px !important; } /* ===== TIGHTER HEADER: Reduce spacing between rows (keep 2-row structure) ===== */ #mainHeader .header-container, .header-container { padding: 1px 0px 0px 0px !important; /* Zero horizontal padding to ensure margin 325px = 335px absolute */ } .header-row1 { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; } /* GLRelief lockup: bottom-left inside #headerMiddlePanel (same as MuslimAncestry reference) */ #mainHeader .logo-wrapper, .logo-wrapper { position: absolute !important; left: 10px !important; bottom: 4px !important; top: auto !important; transform: none !important; display: flex !important; align-items: center !important; gap: 6px !important; z-index: 10001 !important; pointer-events: auto !important; } .logo-wrapper img { height: 38px !important; width: auto !important; transition: transform 0.18s ease-in-out !important; } /* Hover: gently enlarge logo when mouse points at it (desktop) */ .logo-wrapper img:hover, #expandedBrandLockup img:hover { transform: scale(3.0) !important; /* user-requested strong zoom on hover */ } /* Search wrapper: centered in row 2, padding to avoid overlap with absolute logo (desktop only) */ @media (min-width: 981px) { .hamburger-search-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; padding-left: 220px !important; padding-right: 220px !important; } .search-filter-container { display: flex !important; align-items: center !important; justify-content: center !important; max-width: 1320px !important; } } /* Three-line title: black, smaller font, tight line spacing */ .logo-expanded-title, .logo-expanded-title span { color: #111827 !important; } @media (max-width: 980px) { .logo-wrapper { position: absolute !important; left: 10px !important; bottom: 4px !important; top: auto !important; transform: none !important; } .logo-wrapper img { height: 28px !important; } } /* Make logo visible */ .ufo-left-logo, #ufoControlPanelLeft .ufo-left-logo { min-height: 45px !important; max-height: 45px !important; } .ufo-left-logo img, #ufoControlPanelLeft .ufo-left-logo img { max-height: 45px !important; display: block !important; /* Make visible */ } /* Only pull the main middle panel up slightly on desktop; on mobile, let it sit lower so row 1 is fully visible */ .header-middle-panel { margin-top: -16px !important; /* Desktop tweak; mobile is overridden below */ margin-bottom: 2px !important; /* header-main.css flex layout handles bottom spacing */ padding: 0 !important; } @media (max-width: 980px) { .header-middle-panel { margin-top: 4px !important; margin-bottom: 4px !important; } } /* No strip - third row is just individual links, no bar/strip background */ #headerMiddlePanel .header-second-row { background: transparent !important; border: none !important; box-shadow: none !important; } #headerMiddlePanel .header-second-row .header-center, #headerMiddlePanel #navigator-container { background: transparent !important; border: none !important; box-shadow: none !important; } /* Third row: allow a comfortable button height on all screens */ #headerMiddlePanel .header-second-row { min-height: 28px !important; max-height: 42px !important; } #oldSearchInput, #searchCategory { height: 22px !important; padding: 1px 6px !important; } .nav-btn { padding: 3px 8px !important; /* Tighter vertical padding */ line-height: 1.2 !important; } .header-separator, hr { margin: 0 !important; /* Remove separator spacing */ } /* FORCE UFO PANELS TO MATCH HEADER HEIGHT - OVERRIDE ALL CONFLICTS */ #ufoControlPanelLeft, .ufo-left-control-panel, #ufoControlPanelLeft .ufo-panel-cover-top, #ufoControlPanelLeft .cover-top { height: var(--ufo-header-height, 60px) !important; max-height: var(--ufo-header-height, 60px) !important; min-height: var(--ufo-header-height, 60px) !important; } /* UFO panel: hidden until user clicks one of the 7 middle-panel icons; then opens below header only. */ @media (min-width: 981px) { body:not(.ufo-panel-visible) #ufoControlPanel { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.ufo-panel-visible #ufoControlPanel { top: 86px !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } #ufoControlPanel, .ufo-right-control-panel { height: var(--ufo-header-height, 60px) !important; max-height: var(--ufo-header-height, 60px) !important; min-height: var(--ufo-header-height, 60px) !important; } #ufoControlPanel .ufo-panel-cover-top, #ufoControlPanel .cover-top { height: var(--ufo-header-height, 60px) !important; max-height: var(--ufo-header-height, 60px) !important; min-height: var(--ufo-header-height, 60px) !important; } /* extracted from header.php @ 32680 */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { /* Content must remain visible; allow vertical scrolling */ overflow-x: hidden !important; overflow-y: auto !important; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* transform: translateZ(0); REMOVED - breaks position: fixed for child elements */ } html { overflow-x: hidden !important; overflow-y: auto !important; } /* AGGRESSIVE CHAT HIDING */ /* Hide ANY fixed element in the bottom right that is NOT the UFO panel or its children */ /* Target known chat widget IDs and Classes specifically */ #floatingChatToggle, #floatingChatWidget, .floating-chat-toggle, .floating-chat-widget, [id*="chat-widget"], [class*="chat-widget"], [id*="messenger"], [class*="messenger"], *[style*="position: fixed"][style*="bottom"][style*="right"]:not(#ufoControlPanel):not(#glrcf_assist_beacon):not(.glrcf-assist-beacon):not(#trackerDoxx99):not(#quranTooltip):not(#quranPaginationArea), *[style*="position:fixed"][style*="bottom"][style*="right"]:not(#ufoControlPanel):not(#glrcf_assist_beacon):not(.glrcf-assist-beacon):not(#trackerDoxx99):not(#quranTooltip):not(#quranPaginationArea), *[style*="position: sticky"][style*="bottom"][style*="right"]:not(#ufoControlPanel):not(#glrcf_assist_beacon):not(.glrcf-assist-beacon):not(#trackerDoxx99):not(#quranTooltip):not(#quranPaginationArea), *[style*="position: absolute"][style*="bottom"][style*="right"]:not(#ufoControlPanel):not(#glrcf_assist_beacon):not(.glrcf-assist-beacon):not(#trackerDoxx99):not(#quranTooltip):not(#quranPaginationArea), #darkModeToggle, .dark-mode-toggle, [onclick*="toggleDarkMode"], button:has(.fa-sun), button:has(.fa-moon) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: -99999 !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; background: none !important; border: none !important; box-shadow: none !important; } /* extracted from header.php @ 59104 */ /* NUCLEAR FORCE: Override everything for NikahFinder Pink */ /* 1. Root Variables Lock */ :root { --glrcf-header-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; --glrcf-middle-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; --glrcf-footer-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; --ufo-panel-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; --glrcf-header-fg: #ffffff !important; --glrcf-top-bar-bg: rgba(255, 255, 255, 0.15) !important; } /* 2. Main Outer Header: Plain White */ #mainHeader, #mainHeader::before, header#mainHeader, header#mainHeader::before { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; } /* 3. Middle Header Panel: Forced Pink */ #headerMiddlePanel, #ufoHeaderContent, .header-container, .header-row1, .mobile-header-row1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* 4. Text & Icon Colors: White on Pink, Black on White */ #mainHeader .header-top-bar a, #mainHeader .header-top-bar i { color: #000000 !important; } #headerMiddlePanel a, #headerMiddlePanel .nav-btn, #headerMiddlePanel #headerMiddlePanel .logo-expanded-title, #headerMiddlePanel i, #headerMiddlePanel .nav-text, #ufoHeaderContent a, #ufoHeaderContent i { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; } /* 5. Top Bar: Glassmorphism */ #mainHeader .header-top-bar { background: rgba(255, 255, 255, 0.1) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; } /* 6. Fix for any transparent overrides */ #headerMiddlePanel .header-second-row, #headerMiddlePanel #navigator-container { background: transparent !important; } /* 7. NikahFinder footer bar: matched */ .layer-copyright { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; color: #fef2f2 !important; border-top-color: transparent !important; } /* 8. Navigator Icons Hover Effect: Blue */ #headerMiddlePanel a:hover, #headerMiddlePanel a:hover i, #headerMiddlePanel a:hover .nav-text, #headerMiddlePanel .nav-btn:hover, #headerMiddlePanel .nav-btn:hover i, #headerMiddlePanel #appLauncherBtn:hover, #headerMiddlePanel #appLauncherBtn:hover i, #headerMiddlePanel #sidebarToggleBtn:hover, #headerMiddlePanel #sidebarToggleBtn:hover i, #headerMiddlePanel .grid-item:hover, #headerMiddlePanel .grid-item:hover i, #headerMiddlePanel .grid-item:hover div, #ufoHeaderContent a:hover, #ufoHeaderContent a:hover i { color: #00d4ff !important; /* Vibrant Cyan/Blue for visibility on pink */ text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important; transition: all 0.2s ease !important; } /* extracted from header.php @ 66168 */ /* FORCE-APPLIED: White panel + brand accent */ /* ===================================================== AERIS FORCED BRAND THEME: White panels, #667eea accents Outer header shell unpainted; only middle panel is a card. ===================================================== */ header#mainHeader, #mainHeader { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } #mainHeader::before { background: transparent !important; border: none !important; box-shadow: none !important; } #headerTopBar, #mainHeader .header-top-bar, .header-top-bar { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #1e293b !important; } #mainHeader .header-top-bar a, #mainHeader .header-top-bar i, #mainHeader .header-top-bar span { color: #1e293b !important; } #headerMiddlePanel, .header-middle-panel { background: #ffffff !important; background-image: none !important; border: 2px solid #667eea !important; border-radius: 18px !important; color: #667eea !important; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.18) !important; } #headerMiddlePanel *, .header-middle-panel * { color: #667eea !important; } /* But keep search input text readable black */ #mainHeader input, #mainHeader input::placeholder, #mainHeader select { color: #333333 !important; border-color: #667eea88 !important; background: #f9f9f9 !important; } /* --- FOOTER --- */ footer, #mainFooter, .main-footer, .site-footer, .glrcf-footer { background: #ffffff !important; background-image: none !important; border-top: 3px solid #667eea !important; color: #667eea !important; } footer *, #mainFooter * { color: #667eea !important; } /* --- UFO PANELS (side covers) --- */ #ufoControlPanel, #ufoControlPanelLeft, .ufo-panel-cover-top, .cover-top, .ufo-cover { background: #ffffff !important; background-image: none !important; border-color: #667eea !important; } /* extracted from header.php @ 111047 */ /* New Inline Mobile Toggles - Reinstated per User Request */ .mobile-header-btn-inline { display: none; } /* HARD REMOVE ROCKET FROM DESKTOP (User Request: "Remove it, don't just hide it") */ /* We use display:none to remove it from the visual tree on desktop */ #headerRocketRow2_Secure, #appLauncherBtn { display: none !important; } @media (max-width: 980px) { .mobile-header-btn-inline { display: flex !important; background:transparent; border:none; padding:8px; font-size:24px; color:#333; cursor:pointer; min-width:40px; justify-content:center; align-items:center; z-index: 10005; } .header-row1 { justify-content: space-between !important; gap: 8px !important; padding: 0 8px !important; flex-wrap: nowrap !important; } /* Mobile search row: prevent horizontal overflow on small screens */ .hamburger-search-wrapper { padding-left: 0px !important; padding-right: 0px !important; flex: 1 1 auto !important; min-width: 0 !important; } .search-filter-container { min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; } #searchWrapper { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; } #searchWrapper .search-box { min-width: 0 !important; width: 100% !important; max-width: calc(100vw - 66px) !important; /* keep room for mobile controls */ border-radius: 12px !important; padding: 1px 6px !important; } #oldSearchInput { font-size: 11px !important; line-height: 20px !important; height: 20px !important; min-width: 0 !important; padding: 0 2px !important; } #searchCategory { font-size: 10px !important; height: 20px !important; max-width: 82px !important; padding: 0 2px !important; } /* Mobile: icon on top, label text below */ #headerSecondRow .header-center .nav-btn { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 2px !important; font-size: 8px !important; line-height: 1.1 !important; padding: 2px 2px !important; white-space: normal !important; text-align: center !important; } #headerSecondRow .header-center .nav-btn > i:not(.fa-caret-down) { font-size: 11px !important; margin-right: 0 !important; order: -1 !important; } #headerSecondRow .header-center .nav-text, #headerSecondRow .header-center .storefront-nav-label { display: block !important; font-size: 8px !important; line-height: 1.1 !important; width: 100% !important; text-align: center !important; white-space: normal !important; } /* Move Rocket Button to Bottom Right Corner AND FORCE VISIBLE ON MOBILE */ #headerRocketRow2_Secure { /* DISABLED: User reported this is "out in the content area". We use #mobileToolsBtn in the flex container instead. */ display: none !important; position: absolute !important; bottom: 0 !important; right: 8px !important; top: auto !important; z-index: 10006 !important; visibility: hidden !important; opacity: 0 !important; } /* HARD HIDE: Crypto-Lock the panel on mobile so it cannot flash or double-open */ body:not(.ilearnfree-page) #ufoControlPanel:not(.mobile-summoned), body:not(.ilearnfree-page) .ufo-right-control-panel:not(.mobile-summoned), body:not(.ilearnfree-page) #ufoControlPanel:not(.mobile-summoned) .ufo-cover-screen, body:not(.ilearnfree-page) .ufo-right-control-panel:not(.mobile-summoned) .ufo-cover-screen, body.ilearnfree-page #ufoControlPanel:not(.aeris-mobile-float-strip), body.ilearnfree-page #ufoControlPanel:not(.aeris-mobile-float-strip) .ufo-cover-screen, /* ADDED: Explicitly hide the right cover elements */ #ufoRightCover, .ufo-right-cover, .ufo-panel-cover-right, .right-panel-cover { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } /* Ensure the new mobile rocket button is visible */ #mobileToolsBtn, #mobileToolsBtnContainer { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } } /* DESKTOP SAFETY: hide mobile-only UI; force horizontal text-only navigator on first paint */ @media (min-width: 981px) { #headerHamburgerRow2, #mobileToolsBtnContainer, #mobileToolsBtn { display: none !important; } #headerSecondRow #navigator-container .nav-item, #headerSecondRow .header-center .nav-item { display: inline-flex !important; flex-direction: row !important; flex: 0 0 auto !important; align-items: center !important; align-self: auto !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; background: transparent !important; contain: none !important; } #headerSecondRow #navigator-container .nav-btn, #headerSecondRow .header-center .nav-btn { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; padding: 2px 6px !important; font-size: 12px !important; line-height: 1.1 !important; white-space: nowrap !important; text-align: center !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } body:not(.ilearnfree-page) #headerSecondRow #navigator-container .nav-btn > i:not(.fa-caret-down), body:not(.ilearnfree-page) #headerSecondRow .header-center .nav-btn > i:not(.fa-caret-down) { display: none !important; margin: 0 !important; order: 0 !important; } body.ilearnfree-page #headerSecondRow #navigator-container .nav-btn > i:not(.fa-caret-down), body.ilearnfree-page #headerSecondRow .header-center .nav-btn > i:not(.fa-caret-down) { display: inline-block !important; margin-right: 6px !important; font-size: 13px !important; line-height: 1 !important; flex-shrink: 0 !important; order: 0 !important; } #headerSecondRow .storefront-nav-label { display: none !important; } #headerSecondRow #navigator-container .academy-caret-btn { display: inline-flex !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; visibility: visible !important; pointer-events: auto !important; } } /* extracted from header.php @ 125938 */ @media (max-width: 980px) { #headerMiddlePanel .logo-wrapper { position: relative !important; left: 0 !important; bottom: auto !important; top: 0 !important; margin: 4px 0 !important; } #headerMiddlePanel .logo-wrapper img { height: 28px !important; } #expandedBrandLockup { display: none !important; } #headerMiddlePanel .header-row1 { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; } #headerMiddlePanel .search-filter-container, #headerMiddlePanel #searchWrapper { display: flex !important; flex: 1 1 auto !important; align-items: center !important; } #headerMiddlePanel #filterLink { display: flex !important; } #headerSecondRow .header-center { justify-content: center !important; flex-wrap: wrap !important; gap: 4px !important; padding-left: 4px !important; padding-right: 4px !important; } #headerMiddlePanel .search-filter-container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; flex: 1 1 auto !important; align-items: center !important; } #headerMiddlePanel #searchWrapper { display: flex !important; flex: 1 1 0 !important; align-items: center !important; width: auto !important; } } @media (max-width: 980px) { #headerMiddlePanel { height: auto !important; min-height: 76px !important; max-height: none !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 0 !important; } } /* extracted from header.php @ 130674 */ /* Ensure all navigator buttons are in a SINGLE ROW - no wrapping */ .header-center { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; /* Centered and aligned with search bar */ gap: 12px !important; width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; z-index: 10001 !important; position: relative !important; isolation: auto !important; /* Don't create new stacking context */ } /* Override any responsive CSS that might cause wrapping */ @media (min-width: 981px) { #SmartHamburger, #sidebarToggleBtn, #FreshHamburger, #sidebarPageToggle, .mobile-header-btn-inline, .mobile-toggle-btn, button[title="Command Center"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } } @media (max-width: 1200px) { .header-center { flex-wrap: nowrap !important; } .header-center .nav-item { display: inline-flex !important; flex-wrap: nowrap !important; } } .header-center .nav-item { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; height: auto !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; flex-grow: 0 !important; vertical-align: middle !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; position: relative !important; /* Ensure nav-item can contain absolute positioned dropdown */ } /* Islamic \"More\" dropdown - list style */ .more-nav-item .islamic-more-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; margin-top: 4px !important; min-width: 180px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 8px 0 !important; z-index: 999999 !important; } .more-nav-item:hover .islamic-more-dropdown, .more-nav-item.islamic-more-open .islamic-more-dropdown { display: block !important; } .more-nav-item .islamic-more-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .more-nav-item .islamic-more-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .more-nav-item .islamic-more-dropdown i { width: 16px; text-align: center; } /* Islamic \"Prayer\" dropdown */ .prayer-nav-item .islamic-prayer-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 200px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 8px 0 !important; z-index: 999999 !important; } .prayer-nav-item:hover .islamic-prayer-dropdown, .prayer-nav-item.islamic-prayer-open .islamic-prayer-dropdown { display: block !important; } .prayer-nav-item .islamic-prayer-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .prayer-nav-item .islamic-prayer-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .prayer-nav-item .islamic-prayer-dropdown i { width: 16px; text-align: center; } /* Islamic "Learning" dropdown - one column, click-to-expand groups */ .learning-nav-item .islamic-learning-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 190px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 4px 0 !important; z-index: 999999 !important; } .learning-nav-item:hover .islamic-learning-dropdown, .learning-nav-item.islamic-learning-open .islamic-learning-dropdown { display: block !important; } .learning-nav-item .islamic-learning-dropdown a { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 6px 12px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .learning-nav-item .islamic-learning-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .learning-nav-item .islamic-learning-dropdown i { width: 16px; text-align: center; } .learning-nav-item .learning-group { border-bottom: 1px solid #e5e7eb !important; padding: 2px 0 4px 0 !important; } .learning-nav-item .learning-group:last-child { border-bottom: none !important; } .learning-nav-item .learning-group-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 600 !important; color: #0f172a !important; } .learning-nav-item .learning-group-header i { width: 16px !important; text-align: center !important; color: #0ea5e9 !important; } .learning-nav-item .learning-submenu { display: none !important; padding: 2px 0 4px 24px !important; } .learning-nav-item .learning-group.open .learning-submenu { display: block !important; } /* iLearnFree Academy dropdown (top nav only) */ .aeris-academy-nav .aeris-academy-dropdown { /* Do NOT use !important here; JS/portal uses inline styles. */ display: none; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 220px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 10px !important; box-shadow: 0 10px 28px rgba(0,0,0,0.16) !important; padding: 8px 0 !important; z-index: 999999 !important; pointer-events: auto !important; } .aeris-academy-nav:hover .aeris-academy-dropdown, .aeris-academy-nav.aeris-academy-open .aeris-academy-dropdown, .aeris-academy-nav.aeris-dropdown-hover-open .aeris-academy-dropdown { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .aeris-academy-nav .aeris-academy-dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; } .aeris-academy-nav .aeris-academy-dropdown a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .aeris-academy-nav .aeris-academy-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .aeris-academy-nav .aeris-academy-dropdown i { width: 16px; text-align: center; } /* Islamic "Fasting" dropdown */ .fasting-nav-item .islamic-fasting-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 210px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; z-index: 999999 !important; } .fasting-nav-item:hover .islamic-fasting-dropdown, .fasting-nav-item.islamic-fasting-open .islamic-fasting-dropdown { display: block !important; } .fasting-nav-item .islamic-fasting-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .fasting-nav-item .islamic-fasting-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .fasting-nav-item .islamic-fasting-dropdown i { width: 16px; text-align: center; } /* Islamic "Masjid" dropdown */ .masjid-nav-item .islamic-masjid-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 210px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; z-index: 999999 !important; } .masjid-nav-item:hover .islamic-masjid-dropdown, .masjid-nav-item.islamic-masjid-open .islamic-masjid-dropdown { display: block !important; } .masjid-nav-item .islamic-masjid-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .masjid-nav-item .islamic-masjid-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .masjid-nav-item .islamic-masjid-dropdown i { width: 16px; text-align: center; } /* Islamic "Hajj" dropdown */ .hajj-nav-item .islamic-hajj-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 210px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; z-index: 999999 !important; } .hajj-nav-item:hover .islamic-hajj-dropdown, .hajj-nav-item.islamic-hajj-open .islamic-hajj-dropdown { display: block !important; } .hajj-nav-item .islamic-hajj-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .hajj-nav-item .islamic-hajj-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .hajj-nav-item .islamic-hajj-dropdown i { width: 16px; text-align: center; } /* Islamic "Zakka" dropdown */ .zakka-nav-item .islamic-zakka-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 220px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; z-index: 999999 !important; } .zakka-nav-item:hover .islamic-zakka-dropdown, .zakka-nav-item.islamic-zakka-open .islamic-zakka-dropdown { display: block !important; } .zakka-nav-item .islamic-zakka-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .zakka-nav-item .islamic-zakka-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .zakka-nav-item .islamic-zakka-dropdown i { width: 16px; text-align: center; } /* Islamic "Halal Food" dropdown */ .halal-nav-item .islamic-halal-dropdown { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 240px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; z-index: 999999 !important; } .halal-nav-item:hover .islamic-halal-dropdown, .halal-nav-item.islamic-halal-open .islamic-halal-dropdown { display: block !important; } .halal-nav-item .islamic-halal-dropdown a { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; font-size: 13px !important; color: #0f172a !important; text-decoration: none !important; white-space: nowrap !important; } .halal-nav-item .islamic-halal-dropdown a:hover { background: #f1f5f9 !important; color: #0ea5e9 !important; } .halal-nav-item .islamic-halal-dropdown i { width: 16px; text-align: center; } /* Ensure dropdowns are visible on hover and above everything */ /* Exclude Impact and Regions from the position:fixed rule to avoid misalignment */ .header-center .nav-item:not(.impact-dropdown-container):not(.regions-dropdown-container):hover .nav-item-grid { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 999999 !important; position: fixed !important; /* Fixed to escape containers for Profile/Guest */ } /* Force dropdown to appear above all other elements */ .header-center .nav-item:last-child { z-index: 999999 !important; position: relative !important; } /* Ensure navigation text is always visible and mobile buttons are hidden */ .nav-text { display: inline !important; } #headerHamburgerRow2, #mobileToolsBtnContainer, #mobileToolsBtn { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .header-center .nav-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; line-height: 1.1 !important; height: auto !important; padding: 2px 6px !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; color: #0F1111 !important; text-decoration: none !important; font-size: 12px !important; font-weight: 500 !important; white-space: nowrap !important; /* Reserve underline space so only one tab doesn’t jump vertically */ border-bottom: 2px solid transparent !important; box-sizing: border-box !important; } .header-center .nav-btn.nav-btn--active { font-weight: 700 !important; border-bottom-color: #2563eb !important; } .header-center .nav-btn:hover { color: #007bff !important; } /* Ensure navigation stays on a single horizontal line */ .header-center { flex-wrap: nowrap !important; overflow-x: auto !important; /* Allow horizontal scroll if needed */ scrollbar-width: none !important; -ms-overflow-style: none !important; background: transparent !important; border: none !important; } .header-center::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .header-center .nav-item, .header-center .nav-btn { flex: 0 0 auto !important; white-space: nowrap !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Additional fixes to keep navigation on a single row */ .header-second-row .header-center { width: 100% !important; flex-shrink: 0 !important; } .header-second-row { scrollbar-width: none !important; -ms-overflow-style: none !important; } .header-second-row::-webkit-scrollbar { display: none !important; } /* Remove unwanted pseudo-elements and borders */ #navigator-container > *::before, #navigator-container > *::after { content: none !important; display: none !important; } #smartphoneLauncherWrapper { border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } #sidebarToggleBtn { border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; /* Allow margin-left to be set separately */ } /* Navigator strip: centered; avoid negative margins (breaks on different page widths) */ #navigator-container { gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; } /* Smartphone wrapper stays, but header hamburger is removed (sidebar is opened from LEFT UFO hamburger) */ #smartphoneLauncherWrapper { margin-right: 0 !important; padding-right: 0 !important; } /* Hide the "close phone" button when smartphone launcher is in header navigation */ #navigator-container #homeBtnContainer, #navigator-container #homeBtn, #smartphoneLauncherWrapper #homeBtnContainer, #smartphoneLauncherWrapper #homeBtn { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Ensure smartphone icon button is properly sized and doesn't cause overflow */ #smartphoneLauncherWrapper { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; min-height: auto !important; max-height: none !important; } /* Remove scrollbars from navigator container */ #navigator-container { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } /* Hide scrollbars if they appear */ #navigator-container::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } #navigator-container { -ms-overflow-style: none !important; scrollbar-width: none !important; } /* App launcher button removed from header */ /* MOBILE HEADER RESTRUCTURE (Hamburger - Navigator - Rocket) */ @media (max-width: 980px) { .header-second-row { justify-content: center !important; /* Center the container */ padding: 0 4px !important; } /* NAVIGATOR CONTAINER: Relative parent for anchors */ #navigator-container { margin: 0 auto !important; flex-grow: 1 !important; justify-content: center !important; position: relative !important; /* Anchor point */ padding: 0 40px !important; /* WINGS: Reserve space for absolute buttons */ width: 100% !important; } /* LEFT ANCHOR: Hamburger */ #headerHamburgerRow2 { position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; z-index: 10010 !important; order: unset !important; /* CSS order irrelevant now */ } /* Ensure Buttons are on edges (Legacy override) */ .mobile-header-btn-inline { position: absolute !important; /* Enforce absolute */ } } /* FORCE HOVER FOR IMPACT & REGIONS DROPDOWNS */ .impact-dropdown-container:hover .impact-dropdown, .regions-dropdown-container:hover .regions-dropdown { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; display: flex !important; z-index: 9999999 !important; pointer-events: auto !important; position: absolute !important; } .impact-dropdown { top: 100% !important; } .regions-dropdown { top: 100% !important; } /* extracted from header.php @ 356927 */ /* Ensure Google Translate elements are always above other widgets */ .goog-te-gadget, .goog-te-gadget-simple, .goog-te-menu-frame, .goog-te-combo, iframe[src*="translate.google.com"], iframe[src*="translate.googleapis.com"], #google_translate_element, .skiptranslate { z-index: 10001 !important; position: relative !important; pointer-events: auto !important; } /* Google Translate menu iframe (appears when clicking language selector) */ body > iframe[src*="translate.google"] { z-index: 10002 !important; pointer-events: auto !important; } /* Ensure translate popup is above unified remote AND UFO control panel */ #translatePopup { z-index: 100000 !important; /* Higher than UFO panel (99999) */ pointer-events: auto !important; } /* Unified remote should be below translate popup */ .unified-remote { z-index: 999 !important; pointer-events: auto !important; } /* ===== Universal Remote - Apply to ALL pages (exact copy from gallery.php) ===== */ /* This makes all pages have identical remote styling */ /* Base CSS from gallery.php */ .floating-remote.unified-remote { position: relative !important; /* Will be positioned by UFO panel */ left: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-height: 400px !important; background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%) !important; backdrop-filter: blur(15px) !important; border-radius: 8px !important; padding: 6px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; z-index: 1 !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* display, visibility, opacity controlled by inline style + JS toggle */ flex-direction: column !important; pointer-events: auto !important; transform: none !important; -webkit-transform: none !important; margin: 0 !important; } .floating-remote.unified-remote.expanded { width: 100% !important; padding: 6px !important; max-height: 400px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Gallery-specific overrides (exact copy from gallery.php lines 1537-1639) */ .floating-remote.unified-remote { padding: 4px !important; max-height: 300px !important; min-width: auto !important; } .floating-remote.unified-remote .remote-content { padding: 4px !important; } .floating-remote.unified-remote .remote-label { display: none !important; } .floating-remote.unified-remote .remote-header { display: none !important; } .floating-remote.unified-remote .remote-section { margin-bottom: 4px !important; } .floating-remote.unified-remote .power-btn { padding: 4px !important; font-size: 10px !important; min-height: auto !important; } .floating-remote.unified-remote .icon-btn { padding: 4px !important; font-size: 9px !important; min-height: auto !important; } .floating-remote.unified-remote .service-btn { font-size: 10px !important; min-height: auto !important; min-width: auto !important; } .floating-remote.unified-remote .volume-btn, .floating-remote.unified-remote .channel-btn-remote { padding: 3px !important; font-size: 8px !important; min-height: auto !important; } .floating-remote.unified-remote .mute-btn { width: 22px !important; height: 22px !important; font-size: 10px !important; } .floating-remote.unified-remote .nav-pad-btn { font-size: 9px !important; min-height: auto !important; min-width: auto !important; } .floating-remote.unified-remote .menu-btn { padding: 4px !important; font-size: 9px !important; min-height: auto !important; } .floating-remote.unified-remote .playback-btn { padding: 4px !important; font-size: 10px !important; min-height: auto !important; min-width: auto !important; } .floating-remote.unified-remote .num-btn { padding: 4px !important; font-size: 8px !important; min-height: auto !important; min-width: auto !important; } .floating-remote.unified-remote .feature-btn { padding: 4px !important; font-size: 7px !important; min-height: auto !important; } .floating-remote.unified-remote .feature-btn i { font-size: 10px !important; } .floating-remote.unified-remote .feature-btn span { font-size: 6px !important; } .floating-remote.unified-remote .control-label { font-size: 6px !important; } .floating-remote.unified-remote .remote-header { margin-bottom: 4px !important; padding-bottom: 2px !important; } /* When translate popup is open, ensure unified remote doesn't interfere */ body:has(#translatePopup[style*="display: block"]) .unified-remote { pointer-events: none !important; } /* Fallback for browsers that don't support :has() */ #translatePopup[style*="display: block"] ~ * .unified-remote, .translate-popup-open .unified-remote { pointer-events: none !important; } /* When translate popup is open, ensure UFO control panel doesn't interfere */ body:has(#translatePopup[style*="display: block"]) .ufo-control-panel, body:has(#translatePopup[style*="display: block"]) #ufoControlPanel { pointer-events: none !important; /* Keep UFO z-index unchanged so it never goes behind the header */ } /* Fallback for browsers that don't support :has() */ #translatePopup[style*="display: block"] ~ * .ufo-control-panel, #translatePopup[style*="display: block"] ~ * #ufoControlPanel, .translate-popup-open .ufo-control-panel, .translate-popup-open #ufoControlPanel { pointer-events: none !important; /* Keep UFO z-index unchanged so it never goes behind the header */ } /* Floating Dock Styles */ .dock-icon-btn { color: #111 !important; } .dock-icon-btn:hover { background:#f0f0f0 !important; transform:scale(1.1); color: #007bff !important; } .dock-icon-btn i { transition:all 0.3s; } .dock-icon-btn:hover i { color:#007bff !important; } /* Animate dock on page load */ .floating-dock { animation:slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideInFromRight { from { transform: translateX(20px) translateZ(0); opacity: 0; } to { transform: translateX(0) translateZ(0); opacity: 1; } } /* Responsive - hide on small screens */ @media (max-width: 768px) { .floating-dock { display:none; } } /* Sound button toggle */ #soundBtn .fa-volume-high { color: #28a745; } #soundBtn .fa-volume-xmark { color: #dc3545; } /* Responsive Layout */ @media (max-width: 1024px) { .header-second-row { padding: 5px 10px !important; } .header-center { gap: 10px !important; } .nav-btn { font-size: 14px !important; padding: 8px 12px !important; } .floating-dock { right: 10px !important; top: 120px !important; } } @media (max-width: 768px) { /* Stack Row 2 on mobile */ .header-second-row { flex-wrap: wrap !important; justify-content: center !important; } .header-left { order: 1; width: 100%; justify-content: center !important; margin-bottom: 10px; } .header-center { order: 2; width: 100%; justify-content: center !important; flex-wrap: nowrap !important; /* Force single row */ gap: 8px !important; overflow-x: auto; /* Allow horizontal scroll if needed on very small screens */ } .header-right { order: 3; width: 100%; justify-content: center !important; margin-top: 10px; } /* Hide floating dock on mobile (use header icons instead) */ .floating-dock { display: none !important; } /* Show smaller icons on mobile */ .row1-right-icons { gap: 10px !important; } .header-icon-btn { width: 36px !important; height: 36px !important; } .nav-btn { font-size: 13px !important; padding: 6px 10px !important; } /* Top bar link styling */ .header-top-bar a { text-decoration: none !important; color: inherit !important; transition: all 0.22s ease !important; } .header-top-bar a:hover { color: #007bff !important; transform: translateY(-1px); } .orders-trigger:hover { cursor: pointer !important; } } @media (max-width: 480px) { /* Very small screens */ .header-center { gap: 5px !important; } .nav-btn { font-size: 12px !important; padding: 5px 8px !important; } .row1-right-icons { gap: 8px !important; } } /* extracted from header.php @ 369027 */ /* ====== NUCLEAR OPTION: REMOVE ALL OVERLAYS EVERYWHERE ====== */ /* Kill ALL modal backdrops */ .modal-backdrop, .overlay, [class*="overlay"], [class*="backdrop"], [id*="overlay"], [id*="backdrop"] { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Ensure our modals have NO background */ #signupModal, #loginModal, #forgotPasswordPopup, #wishlistModal { background: transparent !important; background-color: transparent !important; } /* Remove background from ALL children except inner containers */ #signupModal *:not(.signup-container):not(.signup-container *), #loginModal *:not(.login-container):not(.login-container *), #forgotPasswordPopup *:not(> div:first-child):not(> div:first-child *), #wishlistModal *:not(.modal-content):not(.modal-content *) { background-color: transparent !important; } /* WHITE background ONLY on content boxes and form elements */ #signupModal .signup-container, #signupModal .signup-container .form-control, #signupModal .signup-container input, #signupModal .signup-container select, #signupModal .signup-container textarea, #signupModal .signup-container button, #loginModal .login-container, #loginModal .login-container .form-control, #loginModal .login-container input, #loginModal .login-container button, #forgotPasswordPopup > div:first-child, #forgotPasswordPopup input, #forgotPasswordPopup button, #wishlistModal .modal-content { background-color: #fff !important; } /* Remove duplicate close button and title from signup */ #signupModal .signup-container .close-btn, #signupModal .signup-container > h2:first-of-type, #signupModal .signup-container span.close-btn, #signupModal span[id="closeSignup"]:not(#closeSignup:first-of-type) { display: none !important; pointer-events: none !important; visibility: hidden !important; } /* Ensure action buttons - no purple; use neutral blue */ #signupModal button[type="button"]:not(.close-btn), #signupModal button[type="submit"] { background: #007bff !important; color: white !important; } #forgotPasswordPopup button:not([id*="close"]) { background: #007bff !important; color: white !important; } #loginModal button[type="submit"] { background: #007bff !important; color: white !important; } /* Ensure body is never locked */ body { overflow: auto !important; padding-right: 0 !important; } body.modal-open { overflow: auto !important; padding-right: 0 !important; } /* Compact Hamburger Menu Button - Similar to Smartphone Launcher */ #sidebarToggleBtn { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; background: transparent !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; color: #0F1111 !important; padding: 4px !important; flex-shrink: 0 !important; } /* Conflicting sidebarToggleBtn styles removed to allow Command Center script to handle rotation */ /* extracted from header.php @ 378993 */ /* ===== Clean Floating Popup Styles (NO OVERLAY) ===== */ .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent !important; /* NO background on wrapper */ border-radius: 0; padding: 0; box-shadow: none; z-index: 10001; max-width: 420px; width: 90%; border: none; pointer-events: auto; } .popup > div { background: #fff !important; /* White background ONLY on inner box */ border-radius: 15px; padding: 35px; box-shadow: 0 15px 50px rgba(0,0,0,0.3); border: 2px solid #e0e0e0; } .popup.show { display: block; animation: popupFadeIn 0.3s ease; } /* Keep login popup fully visible below fixed header. */ #loginModal.popup { top: 96px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483647 !important; max-height: calc(100vh - 108px) !important; } #loginModal.popup .login-container { max-height: calc(100vh - 128px) !important; overflow-y: auto !important; } #loginModal.popup.show { animation: loginDropIn 0.22s ease-out !important; } /* Keep login popup fully visible below fixed header. */ #loginModal.popup { top: 96px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483647 !important; max-height: calc(100vh - 108px) !important; } #loginModal.popup .login-container { max-height: calc(100vh - 128px) !important; overflow-y: auto !important; background: #fff !important; padding: 24px !important; border-radius: 12px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; } #loginModal.popup.show { animation: loginDropIn 0.22s ease-out !important; } /* Remove purple/bright focus highlight in login popup */ #loginModal input:focus, #loginModal button:focus, #loginModal a:focus, #loginModal .form-control:focus { outline: none !important; box-shadow: none !important; } #loginModal .form-control:focus { border-color: #d1d5db !important; } @keyframes popupFadeIn { from { opacity: 0; transform: scale(0.95) translateZ(0); } to { opacity: 1; transform: scale(1) translateZ(0); } } @keyframes loginIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes loginDropIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } } @keyframes loginDropIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } } /* extracted from header.php @ 653861 */ /* Mobile header compatibility patch: preserve desktop-like content on mobile only */ @media (max-width: 980px) { #headerMiddlePanel, .header-row1, .header-row2, .header-row3 { max-width: 100vw !important; overflow-x: hidden !important; } #headerMiddlePanel .header-row1, #headerMiddlePanel .header-row2, #headerMiddlePanel .header-row3 { gap: 4px !important; row-gap: 3px !important; padding-top: 2px !important; padding-bottom: 2px !important; } .hamburger-search-wrapper, .search-filter-container, #searchWrapper, #searchForm, .search-box { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; box-sizing: border-box !important; } .hamburger-search-wrapper { padding-left: 0 !important; padding-right: 0 !important; } .search-box { border-radius: 10px !important; padding: 0 5px !important; } #oldSearchInput { min-width: 0 !important; width: 100% !important; font-size: 10.5px !important; line-height: 18px !important; height: 18px !important; padding: 0 2px !important; } #searchCategory { flex: 0 0 auto !important; max-width: 76px !important; font-size: 10px !important; height: 18px !important; padding: 0 2px !important; } #headerSecondRow .header-center { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 3px !important; min-width: 0 !important; } #headerSecondRow .header-center .nav-btn { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 2px !important; font-size: 8px !important; line-height: 1.1 !important; padding: 2px 2px !important; white-space: normal !important; text-align: center !important; } #headerSecondRow .header-center .nav-btn > i:not(.fa-caret-down) { display: inline-block !important; margin-right: 0 !important; font-size: 11px !important; order: -1 !important; } #headerSecondRow .header-center .nav-text, #headerSecondRow .header-center .storefront-nav-label { display: block !important; font-size: 8px !important; line-height: 1.1 !important; width: 100% !important; text-align: center !important; white-space: normal !important; } } /* extracted from header.php @ 656325 */ @media (min-width: 981px) { #headerSecondRow #navigator-container .nav-item, #headerSecondRow .header-center .nav-item { flex-direction: row !important; flex: 0 0 auto !important; align-items: center !important; width: auto !important; background: transparent !important; } #headerSecondRow #navigator-container .nav-btn, #headerSecondRow .header-center .nav-btn { flex-direction: row !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; line-height: 1.1 !important; padding: 2px 6px !important; white-space: nowrap !important; width: auto !important; min-height: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } body:not(.ilearnfree-page) #headerSecondRow #navigator-container .nav-btn > i:not(.fa-caret-down), body:not(.ilearnfree-page) #headerSecondRow .header-center .nav-btn > i:not(.fa-caret-down) { display: none !important; } body.ilearnfree-page #headerSecondRow #navigator-container .nav-btn > i:not(.fa-caret-down), body.ilearnfree-page #headerSecondRow .header-center .nav-btn > i:not(.fa-caret-down) { display: inline-block !important; margin-right: 6px !important; font-size: 13px !important; line-height: 1 !important; flex-shrink: 0 !important; } #headerSecondRow .header-center .storefront-nav-label, #headerSecondRow #navigator-container .storefront-nav-label { display: none !important; } } /* extracted from header.php @ 665479 */ #leftNavDrawer, #rightNavDrawer { position: fixed !important; top: var(--aeris-header-bottom, 80px) !important; height: calc(100vh - var(--aeris-header-bottom, 80px)) !important; max-height: calc(100vh - var(--aeris-header-bottom, 80px)) !important; z-index: 2147483647 !important; } #leftNavBackdrop, #rightNavBackdrop { display: none !important; visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; z-index: -1 !important; } #leftNavBackdrop[data-glrcf-open="1"], #rightNavBackdrop[data-glrcf-open="1"], #leftNavBackdrop.active, #rightNavBackdrop.active { display: block !important; visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; position: fixed !important; top: var(--aeris-header-bottom, 80px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: auto !important; z-index: 2147483646 !important; } #leftNavDrawer:not([data-glrcf-open="1"]):not(.active), #rightNavDrawer:not([data-glrcf-open="1"]):not(.active) { pointer-events: none !important; } @media (min-width: 981px) { #leftNavDrawer, #rightNavDrawer { top: var(--aeris-header-bottom, 80px) !important; height: calc(100vh - var(--aeris-header-bottom, 80px)) !important; max-height: calc(100vh - var(--aeris-header-bottom, 80px)) !important; } #leftNavBackdrop[data-glrcf-open="1"], #rightNavBackdrop[data-glrcf-open="1"] { top: var(--aeris-header-bottom, 80px) !important; } #ufoControlPanel:not(.undocked), #ufoControlPanelLeft:not(.undocked) { top: var(--aeris-header-bottom, 80px) !important; max-height: calc(100vh - var(--aeris-header-bottom, 80px) - 12px) !important; } } @media (max-width: 980px) { #leftNavDrawer, #rightNavDrawer { top: var(--aeris-header-bottom, 120px) !important; height: calc(100vh - var(--aeris-header-bottom, 120px)) !important; max-height: calc(100vh - var(--aeris-header-bottom, 120px)) !important; } #leftNavBackdrop[data-glrcf-open="1"], #rightNavBackdrop[data-glrcf-open="1"] { top: var(--aeris-header-bottom, 120px) !important; } } /* extracted from header.php @ 671505 */ /* ============================================================= AERIS BRAND THEME — White panels + #667eea accent RULE: Border ONLY on #headerMiddlePanel (visible panel) NOT on #mainHeader (full-width transparent wrapper) ============================================================= */ /* The visible white panel - gets the brand border */ #headerMiddlePanel, .header-middle-panel { background: #ffffff !important; background-image: none !important; background-color: #ffffff !important; border: 2px solid #667eea !important; border-radius: 16px !important; box-shadow: 0 4px 20px rgba(102,126,234,0.18) !important; color: #667eea !important; } /* The full-width transparent wrapper - NO border, NO background */ #mainHeader { background: transparent !important; background-image: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* UFO side covers: white, NO border/color bleeding */ #ufoControlPanel, #ufoControlPanelLeft { background: #ffffff !important; background-image: none !important; background-color: #ffffff !important; border: none !important; box-shadow: none !important; } /* All nav links/icons get brand color */ #mainHeader a, #mainHeader button:not(.search-btn):not([type="submit"]), #mainHeader i, #mainHeader .nav-btn, #mainHeader .nav-text, #mainHeader .top-bar-link, #headerMiddlePanel a, #headerMiddlePanel i, #headerMiddlePanel .nav-btn { color: #667eea !important; } /* Keep search input text black on white bg */ #mainHeader input[type="text"], #mainHeader input[type="search"], #mainHeader select { color: #1a1a1a !important; background: #f5f5f5 !important; border: 1px solid #667eea66 !important; } /* Footer: white with brand top border */ footer, #mainFooter, .main-footer, .site-footer { background: #ffffff !important; background-image: none !important; background-color: #ffffff !important; border-top: 3px solid #667eea !important; border-left: none !important; border-right: none !important; border-bottom: none !important; } footer *, #mainFooter * { color: #667eea !important; }