/* Theme Name: IPTVLIVEPLUS IPTV Theme URI: https://iptvliveplus.com Author: IPTVLivePlus Author URI: https://iptvliveplus.com Description: IPTVLIVEPLUS is a high-performance, dark-mode 4K IPTV WordPress theme featuring video hero backgrounds, infinite carousel sliders, interactive pricing tables, full channel directories, and WhatsApp customer support integration. Version: 1.0.22 Tested up to: 6.7 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: iptvliveplus-iptv Tags: entertainment, dark-mode, custom-background, full-width-template, landing-page, one-column, grid-layout */ /* ========================================================================== Microsoft Edge & Chromium Cross-Browser Parity Normalization ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; width: 100%; max-width: 100%; margin: 0; padding: 0; } body { width: 100%; max-width: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; z-index: 99999 !important; overflow: visible !important; transform: translateZ(0); -webkit-transform: translateZ(0); } /* Root Header Clearance Variables */ :root { --site-header-height: 148px; } @media (max-width: 1023px) { :root { --site-header-height: 112px; } } /* Mobile Full-Width Viewport & Natural Root Scrolling */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height, 148px) + 24px); width: 100%; max-width: 100%; margin: 0; padding: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', sans-serif; background-color: #050505; color: white; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Anchor scroll margins to guarantee zero header overlap when navigating */ [id], section[id], div[id], .page-section { scroll-margin-top: calc(var(--site-header-height, 148px) + 24px) !important; } #app-content { width: 100% !important; max-width: 100% !important; margin: 0; overflow-x: clip !important; } .page-section { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; } /* ========================================================================== Uniform Desktop Top Spacing for Inner Pages (min-width: 768px) Universally identical to Channels page layout: eliminates excessive lower drop Breadcrumbs & titles sit cleanly ~20px below fixed sticky header (~108px) Strictly scoped to inner pages: zero side effects on homepage (.home, .front-page) ========================================================================== */ @media (min-width: 768px) { /* 1. Header clearance on all inner page main containers (Chrome & Edge 100% parity) - Strictly excluded from Homepage in all languages */ body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) #app-content:not(:has(#home)), body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main, body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main:not(#home-main):not(:has(#home)), body.page-template:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) #app-content:not(:has(#home)), body.page-template:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main, body.page:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) #app-content:not(:has(#home)), body.single:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main, body.archive:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main, body.error404 main, body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main.flex-grow:not(:has(#home)), body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding-top: calc(var(--site-header-height, 108px)) !important; } /* 2. Universal top padding for first inner section (eliminates excessive drop) Tightened to 0.5rem (8px) before breadcrumbs ("Home / ...") & titles */ body:not(.home):not(.front-page) #app-content > section:first-of-type, body:not(.home):not(.front-page) #app-content > div:first-of-type, body:not(.home):not(.front-page) .internal-page-main > section:first-of-type, body:not(.home):not(.front-page) .internal-page-main > div:first-of-type, body:not(.home):not(.front-page) main:not(#home-main) > section:first-of-type, body:not(.home):not(.front-page) main:not(#home-main) > div:first-of-type, body:not(.home):not(.front-page):not(:has(#home)) main.flex-grow > section:first-of-type, body:not(.home):not(.front-page):not(:has(#home)) main.flex-grow > div:first-of-type, body:not(.home):not(.front-page) .border-b.py-10, body:not(.home):not(.front-page) section.py-10, body:not(.home):not(.front-page) section.sm\:py-14, body:not(.home):not(.front-page) section.lg\:py-16, body:not(.home):not(.front-page) #blog-feed-view > section:first-of-type, body:not(.home):not(.front-page) .elementor-custom-content, body:not(.home):not(.front-page) .page-editor-content { box-sizing: border-box !important; padding-top: 0.5rem !important; margin-top: 0 !important; } } @media (max-width: 767px) { body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) #app-content:not(:has(#home)), body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main, body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main:not(#home-main):not(:has(#home)) { padding-top: calc(var(--site-header-height, 112px) + 16px) !important; } } /* ========================================================================== Mobile Performance & Instant Header/Video Acceleration (max-width: 768px only) - Eliminates spacing/gap/strip between fixed header and hero video - Instantaneous first-paint of header and video background via preloaded poster - Fully isolated: Desktop view (min-width: 769px) is strictly 100% unchanged ========================================================================== */ @media (max-width: 768px) { #site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; z-index: 99999 !important; background-color: transparent !important; box-sizing: border-box !important; transform: translateZ(0); -webkit-transform: translateZ(0); } #promo-banner { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; padding: 0.5rem 0.625rem !important; box-sizing: border-box !important; background: linear-gradient(90deg, #031505 0%, #08220c 50%, #031505 100%) !important; border-bottom: 1px solid rgba(57, 255, 20, 0.25) !important; } #navbar { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; padding: 0.75rem 0.875rem !important; box-sizing: border-box !important; background-color: rgba(0, 0, 0, 0.88) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } #navbar > div { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } body.home, body.front-page, body:has(#home), html:has(#home) body { background-color: #050505 !important; } body.home #app-content, body.front-page #app-content, body:has(#home) #app-content, #app-content:has(#home), main#app-content, #home, #home.page-section { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; position: relative !important; } #home > section:first-of-type, #home > section#hero-section { position: relative !important; margin-top: 0 !important; border-top: none !important; min-height: 85vh !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background-color: #050505 !important; background-image: url('assets/hero-poster.webp') !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; padding-top: calc(var(--site-header-height, 105px) + 1.25rem) !important; padding-bottom: 2.5rem !important; } /* RTL Hero padding unified with standard hero padding */ #home > section:first-of-type video, #home video.hero-bg-video, video#hero-video { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; z-index: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; pointer-events: none !important; } } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } ::selection { background-color: #39FF14; color: black; } /* Desktop Custom Scrollbar (Width: 8px on screens > 768px only; never on mobile) */ @media (min-width: 769px) { ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar:horizontal { display: none !important; height: 0px !important; width: 0px !important; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #39FF14; } } /* Mobile Responsive Overrides: Edge-to-Edge Expansion & Elimination of Inner Scrollbar Gutter */ @media (max-width: 768px) { /* 1. Eliminate inner scroll container and ugly vertical scrollbar strip */ ::-webkit-scrollbar { display: none !important; width: 0px !important; height: 0px !important; } html, body, #app-content, .page-section { scrollbar-width: none !important; -ms-overflow-style: none !important; overflow-x: clip !important; } /* 2. Full-Width Mobile Containers: Remove max-width bounds on mobile with minimal side padding */ .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl { width: 100% !important; max-width: 100% !important; } /* 3. Eliminate excessive side margins & dead zones */ .px-6:not(#checkout-modal *):not(#live-chat-modal *) { padding-left: 0.875rem !important; /* ~14px */ padding-right: 0.875rem !important; /* ~14px */ } /* Sections & backgrounds stretch 100% seamlessly */ #home > section, .page-section > section, footer { width: 100% !important; max-width: 100% !important; } /* Edge-to-Edge Cards without cramped padding */ #pricing-container { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } #pricing-container > div { width: 100% !important; max-width: 100% !important; padding-left: 1.125rem !important; padding-right: 1.125rem !important; } #global-latency-ticker { width: 100% !important; max-width: 100% !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; } } /* Persistent Active Navbar State */ .nav-link.active { color: #39FF14 !important; font-weight: 700 !important; background-color: rgba(57, 255, 20, 0.1) !important; border-color: rgba(57, 255, 20, 0.3) !important; box-shadow: 0 0 14px rgba(57, 255, 20, 0.28) !important; text-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important; } .nav-link i, .nav-link svg, .nav-link::before, .nav-link::after { display: none !important; content: none !important; } .mobile-nav-link.active { color: #39FF14 !important; font-weight: 700 !important; background-color: rgba(57, 255, 20, 0.1) !important; border-color: rgba(57, 255, 20, 0.25) !important; box-shadow: 0 0 12px rgba(57, 255, 20, 0.2) !important; } .mobile-nav-link.active i, .mobile-nav-link.active svg { color: #39FF14 !important; filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.6)) !important; } /* Persistent Active Footer State */ .footer-nav-link, .footer-link { display: inline-flex; align-items: center; transition: color 0.2s ease, text-shadow 0.2s ease; } .footer-nav-link.active, .footer-link.active { color: #39FF14 !important; font-weight: 700 !important; text-shadow: 0 0 12px rgba(57, 255, 20, 0.65), 0 0 24px rgba(57, 255, 20, 0.3) !important; } .footer-nav-link.active [data-i18n], .footer-nav-link.active span:first-child, .footer-link.active [data-i18n], .footer-link.active span:first-child { color: #39FF14 !important; } .footer-nav-link.active::before, .footer-link.active::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background-color: #39FF14; box-shadow: 0 0 8px #39FF14, 0 0 14px rgba(57, 255, 20, 0.8); margin-right: 8px; flex-shrink: 0; animation: footerDotGlow 2.5s infinite ease-in-out; } html[dir="rtl"] .footer-nav-link.active::before, [dir="rtl"] .footer-nav-link.active::before, html[dir="rtl"] .footer-link.active::before, [dir="rtl"] .footer-link.active::before { margin-right: 0; margin-left: 8px; } @keyframes footerDotGlow { 0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 4px #39FF14); } 50% { opacity: 0.7; transform: scale(0.85); filter: drop-shadow(0 0 2px #39FF14); } } /* Slider & Marquee Keyframes */ /* Smooth LTR Infinite Scrolling for All Locales (English, Arabic, and International) */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Backward-compatible keyframe aliases (Strictly identical LTR to prevent blank gaps & reverse jumps in Arabic) */ @keyframes marquee-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-rtl-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Backward-compatible keyframe aliases */ @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .marquee-track, .slider-track { display: flex; width: max-content; flex-shrink: 0; will-change: transform; animation: marquee 40s linear infinite; direction: ltr !important; } .marquee-track-reverse, .slider-track-reverse { display: flex; width: max-content; flex-shrink: 0; will-change: transform; animation: marquee-reverse 40s linear infinite; direction: ltr !important; } .marquee-track:hover, .slider-track:hover, .marquee-track-reverse:hover, .slider-track-reverse:hover { animation-play-state: paused; } /* Fixed LTR Slider Direction & Alignment for Arabic: Prevents reverse movement and empty blank gaps */ [dir="rtl"] .marquee-track, [dir="rtl"] .slider-track, html[dir="rtl"] .marquee-track, html[dir="rtl"] .slider-track, html[dir="rtl"] #movies-container, html[dir="rtl"] #partners-container, html[dir="rtl"] #testimonials-container { animation-name: marquee !important; direction: ltr !important; } [dir="rtl"] .marquee-track-reverse, [dir="rtl"] .slider-track-reverse, html[dir="rtl"] .marquee-track-reverse, html[dir="rtl"] .slider-track-reverse, html[dir="rtl"] #sports-posters-container { animation-name: marquee-reverse !important; direction: ltr !important; } /* Custom Dark Scrollbar for Dropdown Menu */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(57, 255, 20, 0.3) rgba(0, 0, 0, 0.4); overflow-x: hidden !important; } .custom-scrollbar::-webkit-scrollbar { width: 5px; } .custom-scrollbar::-webkit-scrollbar:horizontal { display: none !important; height: 0px !important; width: 0px !important; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); border-radius: 9999px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(57, 255, 20, 0.35); border-radius: 9999px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #39FF14; } /* Free Trial Modal - Clean viewport & zero bottom indicator/bar artifacts */ #free-trial-modal, #free-trial-modal-container { overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } #free-trial-modal::-webkit-scrollbar, #free-trial-modal-container::-webkit-scrollbar { display: none !important; width: 0px !important; height: 0px !important; } /* Arabic (RTL) Document & Content Direction */ html[dir="rtl"] { font-family: 'Cairo', 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif; direction: rtl; } html[dir="rtl"] body { direction: rtl; } html[dir="rtl"] main, html[dir="rtl"] section, html[dir="rtl"] #hero-title, html[dir="rtl"] #hero-subtitle, html[dir="rtl"] #hero-badge-container, html[dir="rtl"] #device-toggle-hint, html[dir="rtl"] #pricing-bonus-badge, html[dir="rtl"] #pricing, html[dir="rtl"] #channels, html[dir="rtl"] #faq-section, html[dir="rtl"] .elementor { direction: rtl !important; unicode-bidi: normal !important; } /* Fixed Header LTR Structure: Top header, navigation bar, logo, selectors, action buttons strictly maintain stable LTR placement */ #site-header, #site-header nav, #navbar, #top-utility-bar, #promo-banner, #mobile-menu, #currency-dropdown-menu, #lang-dropdown-menu, #mobile-currency-dropdown-menu, #mobile-lang-dropdown-menu { direction: ltr !important; } #site-header [data-lucide="arrow-right"], #mobile-menu [data-lucide="arrow-right"] { transform: none !important; } /* Smooth Section Scrolling Offset */ html { scroll-behavior: smooth; } section, [id] { scroll-margin-top: 130px; } /* Multi-Tier Header, Dropdown Stacking, Overflow & Positioning Engine */ #site-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; overflow: visible !important; margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform; } @media (max-width: 768px) { #site-header.header-hidden-mobile:not(.drawer-active):not(:has(#mobile-menu.drawer-open)):not(:has(#mobile-menu.translate-x-0)) { transform: translateY(-100%) !important; } } @media (min-width: 769px) { #site-header, #site-header.header-hidden-mobile { transform: none !important; } } /* Firmly lock top header in place when mobile drawer is open: ZERO shifting, ZERO clipping */ body.mobile-drawer-active #site-header, #site-header.drawer-active, #site-header:has(#mobile-menu.drawer-open), #site-header:has(#mobile-menu.translate-x-0), #site-header:has(#mobile-menu:not(.translate-x-full):not(.hidden)) { transform: none !important; top: 0 !important; position: fixed !important; margin-top: 0 !important; will-change: auto !important; } /* Universal Top Announcement Bar (#promo-banner) Container Safety & Flexible Wrapping across ALL Languages */ #promo-banner { position: relative !important; top: 0 !important; margin-top: 0 !important; z-index: 99999 !important; display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #promo-banner > div { height: auto !important; min-height: auto !important; max-height: none !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } #promo-banner .flex, #promo-banner .flex-wrap { height: auto !important; min-height: auto !important; max-height: none !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; overflow: visible !important; box-sizing: border-box !important; } /* Flexible multi-language text wrapping for all languages */ #promo-banner [data-i18n="nav_banner_discount"], #promo-banner [data-i18n="promo_text"], #promo-banner [data-i18n="nav_banner_discount"] *, #promo-banner [data-i18n="promo_text"] * { white-space: normal !important; word-break: break-word !important; line-height: 1.35 !important; display: inline !important; } #promo-banner [data-i18n="nav_banner_timer"], #promo-banner [data-i18n="flash_deal_label"], #promo-banner span:has([data-i18n="nav_banner_timer"]), #promo-banner .whitespace-nowrap:has([data-i18n="nav_banner_timer"]), #promo-banner [data-i18n="nav_banner_timer"].whitespace-nowrap { white-space: normal !important; word-break: break-word !important; display: inline-flex !important; align-items: center !important; } #promo-banner .countdown-timer-container { display: inline-flex !important; flex-shrink: 0 !important; white-space: nowrap !important; direction: ltr !important; } #promo-banner .promo-code-badge { white-space: nowrap !important; display: inline-block !important; } #promo-banner a { flex-shrink: 0 !important; } @media (max-width: 768px) { #promo-banner { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } #promo-banner .flex-wrap { gap: 0.375rem !important; justify-content: center !important; } } #top-utility-bar { position: relative !important; overflow: visible !important; z-index: 99999 !important; } /* Exclusively for mobile view: Hide top phone number and email address bar located at the very top of mobile header */ @media (max-width: 1023px) { #top-utility-bar { display: none !important; } } #navbar { position: relative !important; z-index: 40 !important; overflow: visible !important; } #navbar > div { position: relative !important; overflow: visible !important; } #lang-dropdown-wrapper, #currency-dropdown-wrapper, #mobile-lang-wrapper, #mobile-currency-wrapper, #mobile-lang-dropdown-wrapper, #mobile-currency-dropdown-wrapper { position: relative !important; z-index: 99999 !important; overflow: visible !important; } #lang-dropdown-wrapper:hover, #lang-dropdown-wrapper:focus-within, #currency-dropdown-wrapper:hover, #currency-dropdown-wrapper:focus-within { z-index: 100000 !important; } #lang-dropdown-menu, #mobile-lang-dropdown-menu, #currency-dropdown-menu, #mobile-currency-dropdown-menu { position: absolute !important; top: calc(100% + 6px) !important; bottom: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; z-index: 999999 !important; max-height: 420px !important; overflow-y: auto !important; overflow-x: hidden !important; background-color: #ffffff !important; color: #1f2937 !important; border: 1px solid #f3f4f6 !important; border-radius: 1rem !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08) !important; pointer-events: auto !important; } #lang-dropdown-menu, #currency-dropdown-menu { right: 0 !important; left: auto !important; transform-origin: top right !important; } #mobile-currency-dropdown-menu { left: 0 !important; right: auto !important; transform-origin: top left !important; max-height: 320px !important; } #mobile-lang-dropdown-menu { right: 0 !important; left: auto !important; transform-origin: top right !important; max-height: 320px !important; } html[dir="rtl"] #lang-dropdown-menu, html[dir="rtl"] #currency-dropdown-menu { right: 0 !important; left: auto !important; transform-origin: top right !important; } html[dir="rtl"] #mobile-currency-dropdown-menu { left: 0 !important; right: auto !important; transform-origin: top left !important; } html[dir="rtl"] #mobile-lang-dropdown-menu { right: 0 !important; left: auto !important; transform-origin: top right !important; } #lang-dropdown-menu::-webkit-scrollbar, #currency-dropdown-menu::-webkit-scrollbar, #mobile-lang-dropdown-menu::-webkit-scrollbar, #mobile-currency-dropdown-menu::-webkit-scrollbar { width: 5px; } #lang-dropdown-menu::-webkit-scrollbar-thumb, #currency-dropdown-menu::-webkit-scrollbar-thumb, #mobile-lang-dropdown-menu::-webkit-scrollbar-thumb, #mobile-currency-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 9999px; } /* Mobile Off-Canvas Side Drawer */ #mobile-menu { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; width: 330px !important; max-width: 85vw !important; z-index: 99999 !important; background-color: #0b0b0e !important; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: -14px 0 45px rgba(0, 0, 0, 0.9) !important; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-in-out; will-change: transform; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #mobile-menu.drawer-open, #mobile-menu.translate-x-0 { transform: translateX(0) !important; } html[dir="rtl"] #mobile-menu { right: 0 !important; left: auto !important; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; border-right: none !important; box-shadow: -14px 0 45px rgba(0, 0, 0, 0.9) !important; transform: translateX(100%); } html[dir="rtl"] #mobile-menu.drawer-open, html[dir="rtl"] #mobile-menu.translate-x-0 { transform: translateX(0) !important; } #mobile-menu-backdrop { position: fixed !important; inset: 0 !important; background-color: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; z-index: 99998 !important; transition: opacity 0.3s ease-in-out; } /* Apply RTL alignment ONLY to text content, headings, paragraphs, and forms */ html[dir="rtl"] h1:not(.text-center):not([class*="text-center"]), html[dir="rtl"] h2:not(.text-center):not([class*="text-center"]), html[dir="rtl"] h3:not(.text-center):not([class*="text-center"]), html[dir="rtl"] h4:not(.text-center):not([class*="text-center"]), html[dir="rtl"] h5:not(.text-center):not([class*="text-center"]), html[dir="rtl"] h6:not(.text-center):not([class*="text-center"]), html[dir="rtl"] p:not(.text-center):not([class*="text-center"]), html[dir="rtl"] li:not(#site-header li):not(#mobile-menu li):not(.text-center), html[dir="rtl"] form:not(.text-center), html[dir="rtl"] form label:not(.text-center), html[dir="rtl"] form input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not(.text-center), html[dir="rtl"] form textarea:not(.text-center), html[dir="rtl"] form select:not(.text-center), html[dir="rtl"] .prose, html[dir="rtl"] .text-content, html[dir="rtl"] .article-body, html[dir="rtl"] .text-left:not(#site-header *):not(#mobile-menu *) { text-align: right; direction: rtl; } html[dir="rtl"] .rtl\:rotate-180 { transform: rotate(180deg); } /* Mirror forward-facing directional icons in RTL */ html[dir="rtl"] [data-lucide="arrow-right"], html[dir="rtl"] [data-lucide="chevron-right"] { transform: scaleX(-1); } html[dir="rtl"] [data-lucide="arrow-left"], html[dir="rtl"] [data-lucide="chevron-left"] { transform: scaleX(-1); } /* Preserve dropdown downward and upward chevrons */ html[dir="rtl"] #lang-chevron, html[dir="rtl"] #mobile-lang-chevron, html[dir="rtl"] [data-lucide="chevron-down"], html[dir="rtl"] [data-lucide="chevron-up"] { transform: none; } html[dir="rtl"] #lang-chevron.rotate-180, html[dir="rtl"] #mobile-lang-chevron.rotate-180 { transform: rotate(180deg); } /* WhatsApp Pulse */ @keyframes whatsapp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .animate-whatsapp-pulse { animation: whatsapp-pulse 2.5s infinite; } /* Fade In Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeIn 0.8s ease-out forwards; } /* TV Showcase Minimalist Neon Progress Indicator */ @keyframes tvProgressBar { 0% { width: 0%; } 100% { width: 100%; } } .tv-progress-bar { width: 0%; animation: tvProgressBar 5s linear forwards; } .tv-progress-paused .tv-progress-bar { animation-play-state: paused !important; } /* Floating Action Buttons - Stacked Cleanly in Bottom-Right Corner (WhatsApp + Blue Live Chat) */ #floating-whatsapp-container { position: fixed !important; bottom: 90px !important; right: 20px !important; z-index: 9999 !important; display: flex !important; width: 60px !important; height: 60px !important; align-items: center !important; justify-content: center !important; will-change: transform; } #floating-whatsapp-btn { width: 60px !important; height: 60px !important; border-radius: 50% !important; background: #25D366 !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important; cursor: pointer !important; border: none !important; outline: none !important; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important; } #floating-whatsapp-btn:hover { transform: scale(1.05) !important; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6) !important; } #floating-whatsapp-btn:active { transform: scale(0.95) !important; } #floating-chat-container { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 9999 !important; display: flex !important; width: 60px !important; height: 60px !important; align-items: center !important; justify-content: center !important; will-change: transform; transition: opacity 0.2s ease !important; } #floating-chat-btn { width: 60px !important; height: 60px !important; border-radius: 50% !important; background: #1972F5 !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(25, 114, 245, 0.4) !important; cursor: pointer !important; border: none !important; outline: none !important; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important; } #floating-chat-btn:hover { transform: scale(1.05) !important; box-shadow: 0 6px 20px rgba(25, 114, 245, 0.6) !important; } #floating-chat-btn:active { transform: scale(0.95) !important; } @media (max-width: 640px) { #floating-whatsapp-container { right: 16px !important; bottom: 90px !important; } #floating-chat-container { right: 16px !important; bottom: 20px !important; } } html[dir="rtl"] #floating-whatsapp-container, html[dir="rtl"] #floating-chat-container { right: 20px !important; left: auto !important; } @media (max-width: 640px) { html[dir="rtl"] #floating-whatsapp-container, html[dir="rtl"] #floating-chat-container { right: 16px !important; left: auto !important; } } /* Standardized Plan CTA Buttons Across All Locales */ .plan-cta-btn { min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 0.875rem !important; font-weight: 700 !important; line-height: 1.25rem !important; padding: 0.875rem 1.5rem !important; box-sizing: border-box !important; } @media (min-width: 640px) { .plan-cta-btn { font-size: 1rem !important; line-height: 1.5rem !important; padding: 1rem 1.5rem !important; } } html[dir="rtl"] .plan-cta-btn, [dir="rtl"] .plan-cta-btn { min-height: 52px !important; font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: normal !important; } @media (min-width: 640px) { html[dir="rtl"] .plan-cta-btn, [dir="rtl"] .plan-cta-btn { font-size: 1.05rem !important; line-height: 1.5rem !important; } } /* Global Server Latency Marquee */ @keyframes latencyMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .latency-marquee-track { display: flex; width: max-content; animation: latencyMarquee 32s linear infinite; } .latency-marquee-container:hover .latency-marquee-track, .latency-marquee-container:active .latency-marquee-track, .latency-marquee-track:hover, .latency-marquee-track:active { animation-play-state: paused !important; } /* Hero Badge ("IPTV UK PROVIDER") Spacing & Positioning */ #hero-badge-container { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } @media (min-width: 1024px) { #hero-badge-container { margin-top: 1.75rem !important; margin-bottom: 1.25rem !important; } } /* Arabic (RTL) Hero & Pricing Text Direction */ html[dir="rtl"] #hero-title, [dir="rtl"] #hero-title, html[dir="rtl"] #hero-badge-container, [dir="rtl"] #hero-badge-container, html[dir="rtl"] #hero-subtitle, [dir="rtl"] #hero-subtitle { direction: rtl !important; text-align: center !important; } html[dir="rtl"] #pricing-bonus-badge, [dir="rtl"] #pricing-bonus-badge { direction: rtl !important; text-align: center !important; } html[dir="rtl"] #device-toggle-hint, [dir="rtl"] #device-toggle-hint { direction: rtl !important; text-align: center !important; } /* Mobile Hero Section Alignment, Badge Visibility & Arabic (RTL) Typography Tuning */ @media (max-width: 768px) { #home > section:first-of-type { min-height: auto !important; align-items: flex-start !important; padding-top: 10.5rem !important; /* Ensures badge clears sticky header on mobile */ padding-bottom: 3rem !important; } /* Mobile RTL Hero padding unified with standard mobile hero padding */ /* Mobile Header CTA & Hamburger Menu Protection across all languages */ @media (max-width: 1023px) { #mobile-hamburger-btn:not(#mobile-menu *), #navbar #mobile-hamburger-btn { flex-shrink: 0 !important; min-width: 38px !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 0 !important; } #navbar .mobile-action-container { flex-shrink: 0 !important; display: flex !important; align-items: center !important; gap: 0.375rem !important; } #navbar .mobile-cta-btn, #navbar .mobile-action-container button:not(#mobile-hamburger-btn), #navbar .mobile-action-container a { flex-shrink: 0 !important; white-space: nowrap !important; max-width: 125px !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 11px !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; line-height: 1.25 !important; } #navbar .mobile-cta-btn span, #navbar .mobile-action-container button span, #navbar .mobile-action-container a span { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media (min-width: 640px) and (max-width: 1023px) { #navbar .mobile-cta-btn, #navbar .mobile-action-container button:not(#mobile-hamburger-btn), #navbar .mobile-action-container a { max-width: 155px !important; font-size: 12px !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } @media (min-width: 1024px) { #navbar button:has([data-i18n="nav_freetrial"]), #navbar a:has([data-i18n="nav_freetrial"]) { max-width: none !important; } } /* Arabic (RTL) Mobile Free Trial ("تجربة مجانية") Button Balance */ html[lang="ar"] #navbar .mobile-cta-btn, html[lang="ar"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn), html[lang="ar"] #navbar .mobile-action-container a.mobile-cta-btn, html[lang="ar"] .free-trial-btn, [dir="rtl"] #navbar .mobile-cta-btn, [dir="rtl"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn), [dir="rtl"] #navbar .mobile-action-container a.mobile-cta-btn, [dir="rtl"] .free-trial-btn { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.35 !important; padding-left: 0.875rem !important; /* px-3.5 */ padding-right: 0.875rem !important; /* px-3.5 */ padding-top: 0.375rem !important; /* py-1.5 */ padding-bottom: 0.375rem !important; /* py-1.5 */ min-height: 34px !important; max-width: 140px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; letter-spacing: normal !important; } html[lang="ar"] #navbar .mobile-cta-btn span, html[lang="ar"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn) span, html[lang="ar"] #navbar .mobile-action-container a.mobile-cta-btn span, html[lang="ar"] .free-trial-btn span, [dir="rtl"] #navbar .mobile-cta-btn span, [dir="rtl"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn) span, [dir="rtl"] #navbar .mobile-action-container a.mobile-cta-btn span, [dir="rtl"] .free-trial-btn span { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: normal !important; text-transform: none !important; } @media (min-width: 640px) and (max-width: 1023px) { html[lang="ar"] #navbar .mobile-cta-btn, html[lang="ar"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn), html[lang="ar"] #navbar .mobile-action-container a.mobile-cta-btn, html[lang="ar"] .free-trial-btn, [dir="rtl"] #navbar .mobile-cta-btn, [dir="rtl"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn), [dir="rtl"] #navbar .mobile-action-container a.mobile-cta-btn, [dir="rtl"] .free-trial-btn { font-size: 14px !important; font-weight: 700 !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; max-width: 165px !important; min-height: 36px !important; } html[lang="ar"] #navbar .mobile-cta-btn span, html[lang="ar"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn) span, html[lang="ar"] #navbar .mobile-action-container a.mobile-cta-btn span, html[lang="ar"] .free-trial-btn span, [dir="rtl"] #navbar .mobile-cta-btn span, [dir="rtl"] #navbar .mobile-action-container button:not(#mobile-hamburger-btn) span, [dir="rtl"] #navbar .mobile-action-container a.mobile-cta-btn span, [dir="rtl"] .free-trial-btn span { font-size: 14px !important; font-weight: 700 !important; } } /* Mobile Menu Drawer CTA Button: Unconditional 100% full-width styling across all screen sizes */ #mobile-menu .mobile-drawer-cta-btn, #mobile-menu #mobile-drawer-cta-btn, #mobile-menu .drawer-cta-btn, #mobile-menu button:has([data-i18n="nav_freetrial"]), #mobile-menu a:has([data-i18n="nav_freetrial"]) { width: 100% !important; max-width: 100% !important; min-width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.875rem 1.25rem !important; /* py-3.5 px-5 */ border-radius: 0.75rem !important; flex-shrink: 0 !important; box-sizing: border-box !important; height: auto !important; min-height: 48px !important; white-space: nowrap !important; font-size: 1rem !important; /* text-base / 16px */ font-weight: 800 !important; /* font-extrabold */ text-align: center !important; box-shadow: 0 0 20px rgba(57, 255, 20, 0.4) !important; } #mobile-menu .mobile-drawer-cta-btn svg, #mobile-menu .mobile-drawer-cta-btn i, #mobile-menu #mobile-drawer-cta-btn svg, #mobile-menu #mobile-drawer-cta-btn i { display: none !important; } #mobile-menu .mobile-drawer-cta-btn span, #mobile-menu #mobile-drawer-cta-btn span, #mobile-menu .drawer-cta-btn span, #mobile-menu button:has([data-i18n="nav_freetrial"]) span, #mobile-menu a:has([data-i18n="nav_freetrial"]) span { display: inline-block !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; font-size: 1rem !important; /* text-base / 16px */ font-weight: 800 !important; /* font-extrabold */ text-align: center !important; line-height: 1.3 !important; } #hero-badge-container { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0.5rem !important; margin-bottom: 1.25rem !important; position: relative !important; z-index: 20 !important; max-width: 92% !important; } #hero-title, html[dir="rtl"] #hero-title, [dir="rtl"] #hero-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; font-size: clamp(1.85rem, 8vw, 2.35rem) !important; line-height: 1.16 !important; } #hero-title span, html[dir="rtl"] #hero-title span, [dir="rtl"] #hero-title span { white-space: normal !important; } #hero-subtitle, html[dir="rtl"] #hero-subtitle, [dir="rtl"] #hero-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } /* Arabic Specific Mobile Typography Normalization */ html[dir="rtl"] #hero-title, [dir="rtl"] #hero-title { font-size: clamp(1.5rem, 6.5vw, 1.95rem) !important; /* Normalized to match English visual weight */ line-height: 1.38 !important; /* Prevents character clipping and cramped letters */ letter-spacing: normal !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } html[dir="rtl"] #hero-subtitle, [dir="rtl"] #hero-subtitle { font-size: 0.95rem !important; line-height: 1.75 !important; /* leading-relaxed for Arabic readability */ max-width: 28rem !important; /* max-w-md mx-auto */ margin-left: auto !important; margin-right: auto !important; padding-left: 1rem !important; /* px-4 padding prevents edge overflowing */ padding-right: 1rem !important; word-break: normal !important; overflow-wrap: break-word !important; } } /* Mobile Spacing Optimization Strictly for Allowed Subsequent Sections Only (Excluding Hero & Header) */ @media (max-width: 768px) { /* 1. Streaming brand logos banner */ #streaming-brand-logos, #home > section:has(#partners-container) { padding-top: 2rem !important; /* py-8 */ padding-bottom: 2rem !important; } /* 2. Pricing plans cards */ #pricing { padding-top: 2rem !important; /* py-8 */ padding-bottom: 2rem !important; } /* 3. Movies & series (VOD) slider */ #movies-slider-section, #home > section:has(#movies-container) { padding-top: 2rem !important; /* py-8 */ padding-bottom: 2rem !important; } /* 4. Sports streaming banner */ #sports-streaming-banner, #home > section:has(#sports-posters-container), #uk-sports-authority { padding-top: 2rem !important; /* py-8 */ padding-bottom: 2rem !important; } /* 5. Devices and channels showcase */ #device-compatibility { padding-top: 2rem !important; /* py-8 */ padding-bottom: 2rem !important; } /* 6. FAQ accordion section */ #faq-section { padding-top: 2rem !important; /* py-8 */ padding-bottom: 2rem !important; } } /* Device Compatibility Icons: Exclusively Mobile Auto-Scroll Marquee with Pause on Touch & Hover */ @keyframes device-marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @keyframes device-marquee-rtl { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @media (max-width: 767px) { #device-icons-wrapper { position: relative !important; width: 100% !important; max-width: 100vw !important; overflow: hidden !important; touch-action: pan-y !important; user-select: none !important; -webkit-user-select: none !important; direction: ltr !important; } #device-icons-track { display: flex !important; flex-direction: row !important; align-items: center !important; width: max-content !important; animation: device-marquee 18s linear infinite !important; will-change: transform !important; cursor: grab !important; direction: ltr !important; } #device-icons-track:hover, #device-icons-track:active, #device-icons-track.is-paused { animation-play-state: paused !important; } .device-icons-set, .device-icons-set-duplicate { display: flex !important; flex-direction: row !important; align-items: center !important; flex-shrink: 0 !important; gap: 1.5rem !important; padding-right: 1.5rem !important; direction: ltr !important; } html[dir="rtl"] #device-icons-track { animation-name: device-marquee !important; direction: ltr !important; } html[dir="rtl"] .device-icons-set, html[dir="rtl"] .device-icons-set-duplicate { padding-right: 1.5rem !important; padding-left: 0 !important; direction: ltr !important; } } @media (min-width: 768px) { #device-icons-wrapper { overflow: visible !important; width: 100% !important; } #device-icons-track { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: 100% !important; transform: none !important; animation: none !important; } .device-icons-set { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 !important; } .device-icons-set-duplicate { display: none !important; } } /* Mobile "LIMITED TIME BONUS" Badge Overflow & Padding Fix (Exclusively for Mobile View) */ @media (max-width: 768px) { #pricing-bonus-badge { padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; font-size: 0.725rem !important; line-height: 1.35 !important; border-radius: 1rem !important; max-width: 100% !important; box-sizing: border-box !important; display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 0.35rem 0.5rem !important; } #pricing-bonus-badge [data-i18n="pricing_bonus_pill_badge"] { font-size: 0.675rem !important; letter-spacing: 0.025em !important; } #pricing-bonus-badge [data-i18n-html="pricing_bonus_pill_text"] { font-size: 0.725rem !important; line-height: 1.35 !important; overflow-wrap: break-word !important; word-break: normal !important; } #pricing-bonus-badge .whitespace-nowrap { white-space: normal !important; } } @media (max-width: 420px) { #pricing-bonus-badge { padding-left: 0.625rem !important; padding-right: 0.625rem !important; padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; font-size: 0.6875rem !important; line-height: 1.3 !important; border-radius: 0.875rem !important; gap: 0.25rem 0.4rem !important; } #pricing-bonus-badge [data-i18n="pricing_bonus_pill_badge"] { font-size: 0.65rem !important; } #pricing-bonus-badge [data-i18n-html="pricing_bonus_pill_text"] { font-size: 0.6875rem !important; line-height: 1.3 !important; } } /* Mobile Checkout Modal Clearance & Layering (Overlay above sticky navbar) */ @media (max-width: 639px) { #checkout-modal { z-index: 1000000 !important; padding-top: 1rem !important; } #checkout-modal-container { z-index: 1000000 !important; } } /* Checkout Modal Brand Protection & Cross-Language Parity */ .checkout-brand-token, [data-brand-token], #checkout-pay-tab-paypal div, #checkout-pay-tab-googlepay div, #checkout-pay-tab-applepay div, #checkout-panel-paypal [dir="ltr"], #checkout-panel-googlepay [dir="ltr"], #checkout-panel-applepay [dir="ltr"] { direction: ltr !important; unicode-bidi: isolate !important; } #checkout-submit-btn { min-height: 56px; line-height: 1.25; } #checkout-submit-btn #checkout-submit-text { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; white-space: nowrap; } @media (max-width: 480px) { #checkout-submit-btn { padding-left: 0.75rem !important; padding-right: 0.75rem !important; font-size: 0.8125rem !important; } #checkout-submit-btn #checkout-submit-text { white-space: normal; text-align: center; } } /* Checkout Modal Top Badge Responsive Overflow Protection */ #checkout-top-badge { max-width: fit-content !important; white-space: nowrap !important; font-size: clamp(10px, 2.5vw, 12px) !important; line-height: 1.25 !important; } @media (min-width: 640px) { #checkout-top-badge { font-size: 11px !important; } } #checkout-close-btn-wrap { flex-shrink: 0 !important; margin-inline-start: 0.5rem !important; } @media (min-width: 640px) { #checkout-close-btn-wrap { margin-inline-start: 0 !important; } } /* Strict fallback: Never render dots/circles container beneath footer Trustpilot */ #footer-trustpilot-badge + .flex.gap-4, #footer-trustpilot-badge ~ .flex.gap-4 { display: none !important; } /* ========================================================================== Cross-Browser Standardized Inner Page Spacing (Chrome & Edge 100% Parity) All inner pages match the Channels/Contact page benchmark: Breadcrumbs & titles sit cleanly below fixed sticky header. ========================================================================== */ @media (min-width: 768px) { html.is-edge-browser body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) #app-content:not(:has(#home)), html.is-edge-browser body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main, html.is-edge-browser body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main:not(#home-main):not(:has(#home)), html.is-edge-browser .internal-page-main { box-sizing: border-box !important; padding-top: calc(var(--site-header-height, 108px)) !important; width: 100% !important; max-width: 100% !important; } html.is-edge-browser body:not(.home):not(.front-page) #app-content > section:first-of-type, html.is-edge-browser body:not(.home):not(.front-page) #app-content > div:first-of-type, html.is-edge-browser body:not(.home):not(.front-page) .internal-page-main > section:first-of-type, html.is-edge-browser body:not(.home):not(.front-page) .internal-page-main > div:first-of-type, html.is-edge-browser .internal-page-main > section:first-of-type, html.is-edge-browser .internal-page-main > div:first-of-type { box-sizing: border-box !important; padding-top: 0.5rem !important; margin-top: 0 !important; } } /* Guaranteed Overflow & Dropdown Elevation on Installation Guide Page */ .page-template-installation-guide #site-header, .page-template-template-installation #site-header, body.installation-guide #site-header { overflow: visible !important; z-index: 99999 !important; } .page-template-installation-guide #top-utility-bar, .page-template-template-installation #top-utility-bar, body.installation-guide #top-utility-bar { overflow: visible !important; z-index: 99999 !important; } .page-template-installation-guide #currency-dropdown-wrapper, .page-template-installation-guide #lang-dropdown-wrapper, .page-template-template-installation #currency-dropdown-wrapper, .page-template-template-installation #lang-dropdown-wrapper { overflow: visible !important; z-index: 999999 !important; } .page-template-installation-guide #currency-dropdown-menu, .page-template-installation-guide #lang-dropdown-menu, .page-template-template-installation #currency-dropdown-menu, .page-template-template-installation #lang-dropdown-menu { z-index: 1000000 !important; } .page-template-installation-guide #app-content, .page-template-template-installation #app-content, .page-template-installation-guide main, .page-template-template-installation main { overflow: visible !important; } /* ========================================================================== Inner Page Header Clearance & Breadcrumb Gap Zeroing Rules ========================================================================== */ /* 1. ضبط علو الهيدر الثابت للصفحات الداخلية فقط مع استثناء الصفحة الرئيسية بجميع اللغات */ body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main#app-content:not(:has(#home)) { padding-top: var(--site-header-height, 150px) !important; } /* 2. إلغاء الفراغ الأسود الزائد فوق Breadcrumbs فجميع الصفحات الداخلية */ body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main#app-content:not(:has(#home)) > section:first-child, body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main#app-content:not(:has(#home)) > div:first-child, body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main > div:first-child { padding-top: 8px !important; margin-top: 0 !important; } /* 3. إلغاء أي فراغ موروث من كلاسات Tailwind في الصفحات الداخلية */ body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .py-10:not(#home *), body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .pt-10:not(#home *), body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .pt-12:not(#home *) { padding-top: 8px !important; } /* 4. Global CSS Failsafe for Inner Page Breadcrumb Container */ body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) .internal-page-main > div:first-child, body:not(.home):not(.front-page):not(.is-front-page):not(.polylang-front-page):not(:has(#home)) main#app-content:not(:has(#home)) > div:first-child { padding-top: 12px !important; margin-top: 0 !important; } /* 5. Universal Front Page (All 8 Languages & Polylang): Guaranteed 0px Top Spacer on #app-content and #home */ body.home #app-content, body.front-page #app-content, body.is-front-page #app-content, body.polylang-front-page #app-content, body:has(#home) #app-content, #app-content:has(#home), main#app-content:has(#home), #home, #home.page-section { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; position: relative !important; } /* 5. Channels Section Header Clearance - 100% Chrome & Microsoft Edge Parity with Installation Guide & Contact Us */ @media (min-width: 768px) { #channel-list { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding-top: 108px !important; margin-top: 0 !important; overflow: visible !important; } } @media (max-width: 767px) { #channel-list { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding-top: calc(var(--site-header-height, 112px) + 12px) !important; margin-top: 0 !important; overflow: visible !important; } } #channel-list nav[aria-label="Breadcrumb"], #channel-list a[onclick*="home"], #channel-list button[onclick*="home"], #channel-list [data-i18n="back_to_home"], #channel-list button[aria-label="Back to Home"] { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 40 !important; cursor: pointer !important; } #channel-list a[onclick*="home"] svg, #channel-list button[onclick*="home"] svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } /* ========================================================================== Elementor Template Clean Styles & Header Offset Protection Guarantees zero inline