@charset "UTF-8";
/**
 * Rakmyat Mega Menu Styles
 *
 * CRITICAL: This file contains ONLY structural/layout CSS.
 * It does NOT apply any colors, fonts, or styling to Elementor elements.
 * All Elementor button colors, typography, and styles are PRESERVED.
 *
 * Layout features:
 * - Full Width (100% viewport)
 * - Container Width (site container)
 * - Custom Width (user defined)
 * - Content Width (auto-fit)
 *
 * Technical features:
 * - Centered viewport positioning
 * - Fade animations with customizable speed
 * - Fully responsive (desktop, tablet, mobile)
 * - RTL support
 * - Keyboard accessibility
 * - Reduced motion support
 *
 * @package Rakmyat_Core
 * @version 2.3.3
 * @since 2.0.0
 */
.has-mega-menu {
  position: static;
}

.rmt-mega-menu-wrapper {
  position: fixed !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity var(--mega-fade-speed, 400ms) ease !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 1200px !important;
  max-width: calc(100vw - 40px) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 !important;
  overflow: visible;
}

.has-mega-menu:hover > .rmt-mega-menu-wrapper,
.rmt-mega-menu-wrapper.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rmt-mega-menu-wrapper {
  width: 1200px !important;
}

.rmt-mega-menu-wrapper[data-width-type=full] {
  width: 100vw !important;
  max-width: 100vw !important;
  position: fixed !important;
  left: 0 !important;
  transform: none !important;
}

.rmt-mega-menu-wrapper[data-width-type=container] {
  width: 1200px !important;
  max-width: calc(100vw - 40px) !important;
}

.rmt-mega-menu-wrapper[data-width-type=custom] {
  max-width: calc(100vw - 40px) !important;
}

.rmt-mega-menu-wrapper[data-width-type=content] {
  width: auto !important;
  max-width: calc(100vw - 40px) !important;
}

.rmt-mega-menu-content {
  position: relative;
  width: 100%;
  height: auto;
}
.rmt-mega-menu-content .elementor {
  max-width: 100% !important;
}
.rmt-mega-menu-content .elementor-section,
.rmt-mega-menu-content .elementor-container {
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  .rmt-mega-menu-wrapper {
    max-width: calc(100vw - 20px) !important;
    width: 90vw !important;
  }
  .rmt-mega-menu-wrapper[data-width-type=full] {
    width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    position: fixed !important;
  }
}
@media (max-width: 768px) {
  .rmt-mega-menu-wrapper {
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 20px) !important;
  }
  .rmt-mega-menu-wrapper[data-width-type=container],
  .rmt-mega-menu-wrapper[data-width-type=custom] {
    width: 90vw !important;
  }
}
@media (max-width: 480px) {
  .rmt-mega-menu-wrapper {
    max-width: calc(100vw - 20px) !important;
  }
  .rmt-mega-menu-wrapper[data-width-type=container],
  .rmt-mega-menu-wrapper[data-width-type=custom],
  .rmt-mega-menu-wrapper[data-width-type=content] {
    width: 95vw !important;
  }
}
.has-mega-menu:focus-within > .rmt-mega-menu-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .rmt-mega-menu-wrapper {
    transition: none !important;
  }
}
[dir=rtl] .rmt-mega-menu-wrapper {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

[dir=rtl] .rmt-mega-menu-wrapper[data-width-type=full] {
  left: 0 !important;
  transform: none !important;
}

@media print {
  .rmt-mega-menu-wrapper {
    display: none !important;
  }
}
/*
CRITICAL: DO NOT add color, font, or styling properties to:
- .rmt-mega-menu-wrapper
- .rmt-mega-menu-content
- Any Elementor elements inside

These conflict with Elementor's styling system.

ONLY structural properties allowed:
✓ position, top, left, width, height
✓ padding, margin (wrapper only)
✓ z-index, display (structural)
✓ transform, overflow (layout)
✓ opacity, visibility (animation)

DO NOT add:
✗ color
✗ background-color (except wrapper background)
✗ font-family, font-size, font-weight
✗ text-decoration
✗ border
✗ box-shadow (except wrapper shadow)
*/

/*# sourceMappingURL=mega-menu.css.map */