/* ============================================================
   FunLida NAV + HEADER - single authoritative stylesheet.
   Loaded LAST so it wins over scattered rules and MMM defaults.
   ============================================================ */

/* ---- HEADER BAR LAYOUT (all widths) ---- */
.elementor-156 .e-con.e-parent > .e-con-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.elementor-156 .elementor-widget-xpro-site-logo img { width: 150px; height: auto; }

/* ---- HORIZONTAL MENU (desktop) ---- */
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: row; align-items: center; gap: 4px;
  background: transparent;
}
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item { background: transparent; position: relative; }
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
  display: block; padding: 10px 16px; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: #2B2B2B; background: transparent; border-radius: 8px; line-height: 1.3;
  cursor: pointer;
}
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-current-menu-item > a.mega-menu-link {
  background: #FCE4EC; color: #E4487A;
}

/* ---- FLYOUT DROPDOWN (More) ---- */
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item ul.mega-sub-menu {
  list-style: none; background: #fff; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(228,72,122,.15); padding: 10px; min-width: 230px;
}
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  display: block; padding: 12px 16px; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px;
  color: #4A4A4A; background: transparent; border-radius: 10px;
}
#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
  background: #FCE4EC; color: #E4487A;
}

/* ---- DESKTOP: hide hamburger, show menu ---- */
@media (min-width: 769px) {
  #mega-menu-wrap-menu-1 .mega-menu-toggle { display: none !important; }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 { display: flex !important; }
  /* dropdown hidden by default, positioned under its parent */
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu {
    display: none !important; position: absolute !important; top: 100% !important;
    left: auto !important; right: 0 !important; margin-top: 8px !important; z-index: 9999 !important;
    opacity: 1 !important; visibility: visible !important; height: auto !important;
    min-width: 230px !important;
  }
  /* reveal on hover of the parent li (works for flyout + has-children) */
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item:hover > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-flyout:hover > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-toggle-on > ul.mega-sub-menu {
    display: block !important;
  }
}

/* ---- MOBILE (<=768px): logo + hamburger far right ---- */
@media (max-width: 768px) {
  /* header bar: logo left, menu column pushed full right; becomes the positioning anchor */
  .elementor-156 .e-con.e-parent > .e-con-inner { position: relative; }
  .elementor-156 .elementor-widget-xpro-button { display: none !important; }
  /* the container holding the menu takes remaining space, hamburger sits at its right edge */
  .elementor-156 .elementor-widget-shortcode { flex: 1 1 auto !important; display: flex !important; justify-content: flex-end !important; }
  .elementor-156 .elementor-shortcode { width: 100%; display: flex; justify-content: flex-end; }
  #mega-menu-wrap-menu-1 { position: static !important; display: flex; justify-content: flex-end; width: 100%; }

  /* hamburger: far right, pink */
  #mega-menu-wrap-menu-1 .mega-menu-toggle {
    display: flex !important; justify-content: flex-end !important; align-items: center !important;
    width: auto !important; height: 46px !important; margin-left: auto !important;
    background: transparent !important; cursor: pointer; padding: 0 !important;
  }
  #mega-menu-wrap-menu-1 .mega-toggle-blocks-left,
  #mega-menu-wrap-menu-1 .mega-toggle-blocks-center { display: none !important; }
  #mega-menu-wrap-menu-1 .mega-toggle-blocks-right { margin-left: auto !important; display: block !important; }
  #mega-menu-wrap-menu-1 .mega-toggle-block { display: block !important; }
  #mega-menu-wrap-menu-1 .mega-toggle-animated { display: block !important; padding: 8px 0 !important; background: transparent !important; border: 0; width: 34px; }
  #mega-menu-wrap-menu-1 .mega-toggle-animated-box { display: block !important; width: 28px !important; height: 22px !important; position: relative; margin-left: auto; }
  #mega-menu-wrap-menu-1 .mega-toggle-animated-inner,
  #mega-menu-wrap-menu-1 .mega-toggle-animated-inner::before,
  #mega-menu-wrap-menu-1 .mega-toggle-animated-inner::after {
    display: block !important; position: absolute; left: 0; width: 28px !important; height: 3px !important;
    background-color: #E4487A !important; border-radius: 2px; content: '';
  }
  #mega-menu-wrap-menu-1 .mega-toggle-animated-inner { top: 50%; margin-top: -1.5px; }
  #mega-menu-wrap-menu-1 .mega-toggle-animated-inner::before { top: -9px; }
  #mega-menu-wrap-menu-1 .mega-toggle-animated-inner::after { top: 9px; }

  /* menu hidden until JS adds .mega-menu-open; panel anchors to the HEADER BAR (full width) */
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 { display: none !important; }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    margin-left: calc(-1 * var(--fl-bar-pad, 16px));
    background: #fff !important; padding: 8px 16px 16px !important;
    box-shadow: 0 12px 30px rgba(228,72,122,.18); z-index: 99999;
  }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open > li.mega-menu-item { width: 100% !important; }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open > li.mega-menu-item > a.mega-menu-link {
    display: block !important; padding: 16px 4px !important; font-size: 16px !important;
    color: #2B2B2B !important; background: transparent !important; border-bottom: 1px solid #F7E3EA;
    text-align: left !important;
  }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open > li.mega-menu-item > a.mega-menu-link:hover {
    background: transparent !important; color: #E4487A !important;
  }
  /* mobile submenu: static, indented, shown when li has .mega-submenu-open */
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open ul.mega-sub-menu {
    position: static !important; box-shadow: none !important; background: #FDF1F4 !important;
    border-radius: 8px; margin: 4px 0 8px !important; padding: 4px !important; display: none !important;
  }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open li.mega-submenu-open > ul.mega-sub-menu { display: block !important; }
  #mega-menu-wrap-menu-1 ul#mega-menu-menu-1.mega-menu-open ul.mega-sub-menu > li > a.mega-menu-link {
    padding: 12px 16px !important; border: 0 !important; font-size: 15px !important;
  }
}
.fl-header-account .elementor-icon { color: #2B2B2B; transition: color .2s ease; }
.fl-header-account .elementor-icon:hover { color: #E4487A; }

.fl-header-cart .elementor-icon { color: #2B2B2B; transition: color .2s ease; }
.fl-header-cart .elementor-icon:hover { color: #E4487A; }

/* Guest vs member header state - swap Get Started <-> avatar, matching source design. */
.fl-member-only { display: none; }
body.logged-in .fl-guest-only { display: none !important; }
body.logged-in .fl-member-only { display: flex !important; }
.fl-header-avatar.elementor-widget-icon-box .elementor-icon-box-wrapper { flex-direction: row; }
.fl-header-avatar .elementor-icon-box-icon {
  margin: 0 !important;
  padding: 0 !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.fl-header-avatar .elementor-icon-box-icon .elementor-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  transition: background .2s ease;
  font-size: 17px !important;
}
.fl-header-avatar .elementor-icon-box-icon .elementor-icon:hover { background-color: #B05078 !important; }
.fl-header-avatar .elementor-icon-box-content { display: none; }