/* Aristo Mega Menu v4.0 — no all:unset, explicit hard reset */ /* ── TRIGGER ── */ .amm-trigger-wrap { display: inline-block; } .amm-trigger { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; cursor: pointer !important; white-space: nowrap !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } .amm-caret { display: inline-block !important; width: 0 !important; height: 0 !important; border-top: 5px solid currentColor !important; border-right: 4px solid transparent !important; border-left: 4px solid transparent !important; border-bottom: none !important; margin-left: 3px !important; transition: transform 0.2s ease !important; } /* ══════════════════════════════════════════════════════ PANEL WRAPPER — explicit reset, NO all:unset Position:fixed only works when the element is a direct child of . JS enforces this at runtime. ══════════════════════════════════════════════════════ */ #amm-panel { /* Layout */ display: block !important; position: fixed !important; top: 80px !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; /* Stacking */ z-index: 2147483647 !important; /* max int, beats everything */ /* Box model */ margin: 0 !important; padding: 0 !important; border: none !important; border-top: 3px solid #1e2d4d !important; border-radius: 0 !important; box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important; box-sizing: border-box !important; /* Typography — inherit from body, not from Elementor nav */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #1e2d4d !important; /* Background */ background: #ffffff !important; /* Overflow */ overflow: visible !important; /* Transforms — none, so position:fixed isn't broken */ transform: translateY(-10px) !important; /* Visibility — hidden by default */ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s !important; /* Flex/grid — panel itself is not flex */ float: none !important; } #amm-panel.amm-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s !important; } /* ── INNER ROW — the three-column flex container ── */ #amm-panel .amm-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-height: 320px !important; max-height: 560px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; background: #ffffff !important; float: none !important; position: static !important; } /* ── COLUMN 1: Countries sidebar ── */ #amm-panel .amm-sidebar { display: block !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; flex: 0 0 220px !important; margin: 0 !important; padding: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; box-sizing: border-box !important; position: static !important; float: none !important; } #amm-panel .amm-sidebar::-webkit-scrollbar { display: none !important; } #amm-panel .amm-tabs { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } #amm-panel .amm-tab { display: block !important; width: 100% !important; padding: 16px 22px !important; margin: 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; cursor: pointer !important; list-style: none !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; border-left: 3px solid transparent !important; box-sizing: border-box !important; transition: background 0.15s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; float: none !important; position: static !important; } #amm-panel .amm-tab:hover, #amm-panel .amm-tab.amm-active { background: #162240 !important; font-weight: 600 !important; border-left-color: #ffffff !important; } /* ── COLUMN 2: Regions ── */ #amm-panel .amm-regions-wrap { display: block !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; flex: 0 0 190px !important; margin: 0 !important; padding: 0 !important; background: #f5f6f8 !important; border-right: 1px solid #e5e7eb !important; border-left: none !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; position: static !important; float: none !important; } #amm-panel .amm-regions { display: none !important; list-style: none !important; margin: 0 !important; padding: 12px 0 !important; width: 100% !important; } #amm-panel .amm-regions.amm-active { display: block !important; } #amm-panel .amm-region { display: block !important; width: 100% !important; padding: 12px 18px !important; margin: 0 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; cursor: pointer !important; list-style: none !important; border: none !important; border-left: 3px solid transparent !important; box-sizing: border-box !important; transition: background 0.12s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; float: none !important; position: static !important; background: transparent !important; } #amm-panel .amm-region:hover, #amm-panel .amm-region.amm-active { background: #ffffff !important; font-weight: 600 !important; border-left-color: #1e2d4d !important; } /* ── COLUMN 3: Cities — 6-column grid ── */ #amm-panel .amm-cities-wrap { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; padding: 24px 28px !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; background: #ffffff !important; position: static !important; float: none !important; } #amm-panel .amm-cities { display: none !important; } #amm-panel .amm-cities.amm-active { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 0 16px !important; margin: 0 !important; padding: 0 !important; animation: ammFade 0.18s ease !important; } @keyframes ammFade { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } } #amm-panel .amm-city-col { display: block !important; flex: 1 1 0 !important; min-width: 80px !important; max-width: none !important; list-style: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } #amm-panel .amm-city-col li { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } #amm-panel .amm-city-col a { display: block !important; padding: 4px 0 !important; margin: 0 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; transition: color 0.12s ease, padding-left 0.12s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #amm-panel .amm-city-col a:hover { padding-left: 5px !important; } /* ── Elementor nav: suppress its own submenu on trigger item ── */ li.aristo-mm-trigger, li.aristo-mm-trigger > a { position: static !important; } li.aristo-mm-trigger { overflow: visible !important; } li.aristo-mm-trigger > ul, li.aristo-mm-trigger > .sub-menu, li.aristo-mm-trigger .elementor-nav-menu--dropdown { display: none !important; } /* ── MOBILE (<= 1024px) ── */ @media (max-width: 1024px) { #amm-panel { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; overflow-y: auto !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; pointer-events: none !important; border-top: none !important; } #amm-panel.amm-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #amm-panel .amm-inner { flex-direction: column !important; max-height: none !important; min-height: 100vh !important; overflow: visible !important; } #amm-panel .amm-sidebar, #amm-panel .amm-regions-wrap { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } #amm-panel .amm-regions-wrap { border-right: none !important; border-top: 1px solid #e5e7eb !important; } #amm-panel .amm-cities-wrap { padding: 16px !important; } #amm-panel .amm-cities.amm-active { flex-wrap: wrap !important; gap: 0 12px !important; } }