/* Mobile Menu Pro - Frontend base styles
   Dynamic values are injected as CSS variables via PHP (see frontend_vars_css). */

#d5m-overlay,
#d5m-panel{
  display: none;
}

@media (max-width: 980px){
  /* Hide Divi default dropdown menu when our panel is enabled */
  body.d5m-enabled .et_mobile_menu{ display:none !important; }
  body.d5m-enabled .mobile_nav.opened ul.et_mobile_menu,
  body.d5m-enabled .et_mobile_nav_menu .et_mobile_menu{
    display:none !important;
  }

  /* Optional: adjust Divi header container width (mobile) */
  body.d5m-enabled .container.clearfix.et_menu_container{
    width: var(--d5m-header-width, 93%) !important;
  }

  /* Ensure our markup is visible only on mobile */
  #d5m-overlay,
  #d5m-panel{
    display: block;
  }

  /* Overlay */
  #d5m-overlay{
    position: fixed;
    inset: 0;
    background: var(--d5m-overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d5m-anim) ease;
    z-index: 99998;
  }
  body.d5m-open #d5m-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* When enabled: keep header visible, panel starts below header */
  body.d5m-under-header #d5m-overlay{
    top: var(--d5m-header-offset, 0px);
  }

  /* Keep the header above the panel (CSS-only glue approach).
     NOTE: In Divi 5 Global/Theme Builder headers, the header can be `position: static`.
     `z-index` has no effect on static elements, so we set `position: relative` here.
     We use `:where()` to keep selector specificity low so Divi's fixed/sticky rules win. */
  :where(body.d5m-under-header) :where(#main-header, .et-l--header, header#main-header){
    position: relative;
    z-index: 100000 !important;
  }

  /* Panel */
  #d5m-panel{
    position: fixed;
    top: 0;
    right: 0;
    /* Fallback first, then dynamic viewport height where supported */
    height: 100vh;
    height: 100dvh;
    width: var(--d5m-panel-width);
    max-width: 100%;
    background-color: var(--d5m-panel-bg-color, var(--d5m-panel-bg));
    background-image: var(--d5m-panel-bg-layer, none), var(--d5m-panel-bg-image, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--d5m-panel-text);
    transform: translateX(104%);
    opacity: 1;
    pointer-events: none;
    transition: transform var(--d5m-anim) cubic-bezier(.2,.9,.2,1), opacity var(--d5m-anim) ease;
    z-index: 99999;
    box-shadow: -12px 10px 30px rgba(0, 0, 0, .28);
    display:flex;
    flex-direction: column;
  }
  body.rtl #d5m-panel{
    right: auto;
    left: 0;
    transform: translateX(-104%);
    box-shadow: 24px 0 60px rgba(0,0,0,.32);
  }

  /* Optional: force panel to slide in from the left (LTR sites) */
  body.d5m-from-left #d5m-panel,
  body.d5m-effect-left #d5m-panel{
    right: auto;
    left: 0;
    transform: translateX(-104%);
    box-shadow: 24px 0 60px rgba(0,0,0,.32);
  }
  body.d5m-open #d5m-panel{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Slide-in from top */
  body.d5m-effect-top #d5m-panel{
    right: auto;
    left: 50%;
    top: 0;
    bottom: auto;
    transform: translate(-50%, -104%);
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
  }
  body.d5m-effect-top.d5m-open #d5m-panel{
    transform: translate(-50%, 0);
  }

  /* Slide-in from bottom */
  body.d5m-effect-bottom #d5m-panel{
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 104%);
    box-shadow: 0 -24px 60px rgba(0,0,0,.32);
  }
  body.d5m-effect-bottom.d5m-open #d5m-panel{
    transform: translate(-50%, 0);
  }

  /* Fade in (no slide) */
  body.d5m-effect-fade #d5m-panel{
    transform: translateX(0);
    opacity: 0;
  }
  body.d5m-effect-fade.d5m-open #d5m-panel{
    opacity: 1;
  }

  /* Zoom in (no slide) */
  body.d5m-effect-zoom #d5m-panel{
    transform: scale(0.94);
    transform-origin: right top;
    opacity: 0;
  }
  body.rtl.d5m-effect-zoom #d5m-panel{
    transform-origin: left top;
  }
  body.d5m-effect-zoom.d5m-open #d5m-panel{
    transform: scale(1);
    opacity: 1;
  }

  body.d5m-under-header #d5m-panel{
    /* Glue fix: avoid dynamic top/height updates during scroll.
       Let the header layer naturally above the panel via z-index. */
    top: 0;
    height: 100vh;
    height: 100dvh;
  }

  #d5m-panel .d5m-panel-inner{
    padding: var(--d5m-pad);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* When the panel lives "under" the header, push the inner content down
     so header doesn't cover the first menu items. */
  body.d5m-under-header #d5m-panel .d5m-panel-inner{
    padding-top: calc(var(--d5m-pad) + var(--d5m-header-offset, 0px));
  }

  /* Social media icons */
  .d5m-social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 0;
    margin: 0;

  }
  .d5m-footer{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .d5m-footer.d5m-footer-pos-bottom{
    margin-top: auto;
    padding-bottom: 50px;
  }
  .d5m-footer.d5m-footer-pos-middle{
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 20px;
  }
  .d5m-footer.d5m-footer-pos-top{
    margin-top: 18px;
    padding-bottom: 10px;
  }

  /* Positioning is handled by .d5m-footer; keep legacy classes harmless. */
  .d5m-footer .d5m-social.d5m-social-pos-bottom,
  .d5m-footer .d5m-social.d5m-social-pos-middle,
  .d5m-footer .d5m-social.d5m-social-pos-top{
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .d5m-contact{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .d5m-contact-item{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--d5m-panel-text);
    font-size: 14px;
    line-height: 1.2;
  }
  .d5m-contact-link{
    color: inherit;
    text-decoration: none;
  }
  .d5m-contact-link:hover{
    text-decoration: underline;
  }
  .d5m-contact-icon svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
    opacity: 0.9;
  }

.d5m-social a{
    color: var(--d5m-social-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
  }
  .d5m-social svg{
    width: 22px;
    height: 22px;
    fill: currentColor;
    display:block;
  }
  .d5m-social a:hover{ opacity: .86; }
  .d5m-social a:focus{
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Close button click animation */
  #d5m-close.d5m-close-anim{
    animation: d5mClosePop 220ms ease-out both;
  }
  @keyframes d5mClosePop{
    0%{ transform: scale(1) rotate(0deg); }
    55%{ transform: scale(1.12) rotate(18deg); }
    100%{ transform: scale(0.92) rotate(-10deg); }
  }

  /* Close button */
  #d5m-close{
    position: absolute;
    top: var(--d5m-close-top);
    right: var(--d5m-close-right);
    bottom: auto;
    left: auto;
    width: 42px;
    height: 42px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: var(--d5m-panel-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform 140ms ease, background 140ms ease;
  }

  /* Under-header mode: keep the close button visible below the header */
  body.d5m-under-header:not(.d5m-close-bottom) #d5m-close{
    top: calc(var(--d5m-close-top) + var(--d5m-header-offset, 0px));
  }
  /* Slide-in-from-left: close button should use left inset instead of right */
  body.d5m-from-left #d5m-close,
  body.d5m-effect-left #d5m-close{ right:auto; left: var(--d5m-close-left, var(--d5m-close-right)); }

  /* Optional: if top margin is set to 0 and bottom margin is set, anchor close button at bottom */
  body.d5m-close-bottom #d5m-close{ top: auto; bottom: var(--d5m-close-bottom); }

  /* RTL: keep previous behavior but prefer the dedicated left variable when available */
  body.rtl #d5m-close{ right:auto; left: var(--d5m-close-left, var(--d5m-close-right)); }
  #d5m-close:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
  #d5m-close:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(96,165,250,.25), 0 12px 24px rgba(0,0,0,.25); }

  /* Menu list */
  #d5m-menu{
    margin-top: var(--d5m-menu-top, 54px);
    font-family: var(--d5m-menu-font, inherit);
  }
  #d5m-menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #d5m-menu li{
    margin: 0;
    border-bottom: 1px solid var(--d5m-divider);
  }
  body.d5m-enabled.d5m-hide-dividers #d5m-menu li{
    border-bottom: none !important;
  }

  #d5m-menu a{
    display:flex;
    align-items:center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 10px;
    /* Split total gap evenly above/below each link */
    margin-top: calc(var(--d5m-link-gap, 0px) / 2);
    margin-bottom: calc(var(--d5m-link-gap, 0px) / 2);
    color: var(--d5m-panel-text);
    text-decoration: none;
    font-size: var(--d5m-link-size);
    font-weight: var(--d5m-link-weight);
    text-transform: var(--d5m-text-transform);
    line-height: 1.35;
    border-radius: var(--d5m-link-radius);
    /* Optional: subtle per-item background (set via "Menu item background") */
    background: var(--d5m-menu-item-bg, transparent);
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  }

  #d5m-menu a .d5m-linktext{
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }

  /* Menu items alignment */
  body.d5m-menu-align-center #d5m-menu a .d5m-linktext{ text-align: center; }
  body.d5m-menu-align-right  #d5m-menu a .d5m-linktext{ text-align: right; }

  /* Hover behaviors */
  #d5m-menu a:hover,
  #d5m-menu a:focus-visible,
  #d5m-menu li.d5m-current > a,
  #d5m-menu li.current-menu-item > a,
  #d5m-menu li.current_page_item > a,
  #d5m-menu a[aria-current="page"]{
    outline: none;
  }

  body.d5m-enabled.d5m-hover-bg #d5m-menu a:hover,
  body.d5m-enabled.d5m-hover-bg #d5m-menu a:focus-visible,
  body.d5m-enabled.d5m-hover-bg #d5m-menu li.d5m-current > a,
  body.d5m-enabled.d5m-hover-bg #d5m-menu li.current-menu-item > a,
  body.d5m-enabled.d5m-hover-bg #d5m-menu li.current_page_item > a,
  body.d5m-enabled.d5m-hover-bg #d5m-menu a[aria-current="page"]{
    color: var(--d5m-hover-text);
    background: var(--d5m-hover-bg);
  }

  body.d5m-enabled.d5m-hover-underline #d5m-menu a:hover,
  body.d5m-enabled.d5m-hover-underline #d5m-menu a:focus-visible,
  body.d5m-enabled.d5m-hover-underline #d5m-menu li.d5m-current > a,
  body.d5m-enabled.d5m-hover-underline #d5m-menu li.current-menu-item > a,
  body.d5m-enabled.d5m-hover-underline #d5m-menu li.current_page_item > a,
  body.d5m-enabled.d5m-hover-underline #d5m-menu a[aria-current="page"]{
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--d5m-hover-text);
    background: rgba(255,255,255,0.03);
  }

  body.d5m-enabled.d5m-hover-color #d5m-menu a:hover,
  body.d5m-enabled.d5m-hover-color #d5m-menu a:focus-visible,
  body.d5m-enabled.d5m-hover-color #d5m-menu li.d5m-current > a,
  body.d5m-enabled.d5m-hover-color #d5m-menu li.current-menu-item > a,
  body.d5m-enabled.d5m-hover-color #d5m-menu li.current_page_item > a,
  body.d5m-enabled.d5m-hover-color #d5m-menu a[aria-current="page"]{
    color: var(--d5m-hover-text);
    background: rgba(255,255,255,0.03);
  }

  /* WooCommerce cart row (optional) */
  .d5m-cart-row{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--d5m-divider);
  }
  body.d5m-enabled.d5m-hide-dividers .d5m-cart-row{
    border-top: none !important;
  }
  .d5m-cart-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 10px;
    border-radius: var(--d5m-link-radius);
    color: var(--d5m-panel-text);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform 140ms ease, background 140ms ease, opacity 140ms ease;
  }
  .d5m-cart-link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
  .d5m-cart-link:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(96,165,250,.25), inset 0 1px 0 rgba(255,255,255,.08); }
  .d5m-cart-icon svg{
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
    opacity: .95;
  }
  .d5m-cart-text{ flex: 1 1 auto; min-width: 0; }
  .d5m-cart-badge{
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: var(--d5m-panel-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
  }
  .d5m-cart-subtotal{
    flex: 0 0 auto;
    font-size: 13px;
    opacity: .92;
    white-space: nowrap;
  }

  /* Submenu */
  #d5m-menu li ul{
    margin: 4px 0 10px 0;
    padding-left: 10px;
    display:block;
  }
  body.rtl #d5m-menu li ul{ padding-left: 0; padding-right: 10px; }

  /* Optional: collapse sub-menus and show arrow toggles on parents */
  body.d5m-submenu-collapsed #d5m-menu li.d5m-has-sub > ul{
    display:none;
  }
  body.d5m-submenu-collapsed #d5m-menu li.d5m-subopen > ul{
    display:block;
  }

  body.d5m-submenu-collapsed #d5m-menu li{
    position: relative;
  }
  body.d5m-submenu-collapsed #d5m-menu li.d5m-has-sub > a{
    padding-right: 54px;
  }
  body.rtl.d5m-submenu-collapsed #d5m-menu li.d5m-has-sub > a{
    padding-right: 10px;
    padding-left: 54px;
  }

  /* Always show submenus when collapse mode is OFF */


  /* Position the arrow toggle beside the parent link (collapsed mode) */
  body.d5m-submenu-collapsed .d5m-subtoggle{
    position: absolute;
    top: 6px;
    right: 6px;
    transform: none;
  }
  body.rtl.d5m-submenu-collapsed .d5m-subtoggle{
    right: auto;
    left: 10px;
  }

  /* Right-aligned menu (LTR): place submenu toggle on the LEFT so link text can align cleanly to the right. */
  body:not(.rtl).d5m-menu-align-right.d5m-submenu-collapsed .d5m-subtoggle{
    right: auto;
    left: 10px;
  }
  body:not(.rtl).d5m-menu-align-right.d5m-submenu-collapsed #d5m-menu li.d5m-has-sub > a{
    padding-right: 10px;
    padding-left: 54px;
  }

  /* Center-aligned menu: keep parent items with submenu truly centered.
     The submenu toggle button reserves space via padding; for centered text we reserve the same space on BOTH sides. */
  body.d5m-menu-align-center.d5m-submenu-collapsed #d5m-menu li.d5m-has-sub > a{
    padding-left: 54px;
    padding-right: 54px;
  }
  body.rtl.d5m-menu-align-center.d5m-submenu-collapsed #d5m-menu li.d5m-has-sub > a{
    padding-left: 54px;
    padding-right: 54px;
  }

  .d5m-subtoggle {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: var(--d5m-link-radius);
        border: 1px solid rgb(255 255 255 / 7%);
        background: rgba(255, 255, 255, .06);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        transition: transform 140ms ease, background 140ms ease;
        color: var(--d5m-caret-color, var(--d5m-panel-text));
    }
  .d5m-subtoggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
  .d5m-subtoggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(96,165,250,.25), inset 0 1px 0 rgba(255,255,255,.08); }

  .d5m-caret{
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .9;
  }
li.d5m-subopen > .d5m-subtoggle .d5m-caret{ transform: rotate(-135deg); }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce){
    #d5m-overlay, #d5m-panel{ transition: none !important; }
  }
}