/**
 * Mobile Menu Drawer CSS
 * Save this file to: /your-theme-folder/assets/css/navd-mobile-menu.css
 */
 
:root{ 
  --navd-fs-400: 18px;
  --navd-fs-btn: 14px;
  --navd-color-text: #000000;
  --navd-trans-500: all 350ms ease-in-out;
  --navd-trans: all 250ms ease-in-out;
  --navd-padding-container-inline: 10px;
  --navd-padding-container-block: 50px;
  --navd-gap-100: 4px;
  --navd-gap-300: 12px;
  --navd-ls-200: 1.2px;
  --navd-height-header: 10px;
}

.ast-header-html.inner-link-style- {
    width: -webkit-fill-available;
}

/***************************/
/***** BUTTON **************/
/***************************/
a.navd_btn,
.navd_btn{
  position: relative;
  padding: var(--navd-padding-button, 20px 32px);
  display: inline-flex;
  justify-content: center;
  align-items: center; 
  font-size: var(--navd-fs-btn, 14px);
  line-height: var(--navd-lh-200, 1.25);
  border: 1px solid currentColor;
  text-transform: uppercase;
  letter-spacing: var(--navd-ls-200, 1.2px);
  transition: var(--navd-trans);
  z-index: 1;
}

.navd_btn .navd_btn__icon,
.navd_btn .navd_btn__label{
  pointer-events: none;
}

/***************************/
/***** Mobile Menu *********/
/***************************/
.navd_hidden{
  display: none !important;
}

/* Menu Container */
aside.navd_mega-menu{}

aside.navd_mega-menu .navd_mega__container{
  width: 100%;
  height: 100vh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  padding-top: var(--navd-height-header, 10px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: white;
}

aside.navd_mega-menu .navd_mega__container[data-active-depth="1"] button#navd_menu-back{
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* Header Section */
aside.navd_mega-menu .navd_mega__header{
  height: 60px;
  padding-inline: var(--navd-padding-container-inline, 20px);
  background-color: white;
}

aside.navd_mega-menu .navd_mega__header .navd_mega__controls{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

aside.navd_mega-menu .navd_mega__header .navd_mega__controls button{
  font-family: var(--navd-ff-sans);
  font-size: var(--navd-fs-btn);
  text-transform: uppercase;
  letter-spacing: var(--navd-ls-200);
  display: flex;
  align-items: center;
  gap: var(--navd-gap-100, 4px);
  transition: var(--navd-trans);

}

aside.navd_mega-menu .navd_mega__header .navd_mega__controls button .navd_btn__icon,
aside.navd_mega-menu .navd_mega__header .navd_mega__controls button .navd_btn__label{
  display: flex;
  pointer-events: none;
}

/* Menu Body */
aside.navd_mega-menu .navd_mega__body{
  width: 100%;
  height: 100%;
  position: relative;
}

/* Menu Screens */
aside.navd_mega-menu .navd_mega__screen{
  padding-block: var(--navd-padding-container-block, 50px);
  padding-inline: var(--navd-padding-container-inline, 20px);
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
  inset: 0;
  background-color: white;
  transition: var(--navd-trans-500);
}

aside.navd_mega-menu .navd_mega__screen[data-active-menu="false"]{
  transform: translateX(100%);
}

aside.navd_mega-menu .navd_mega__screen[data-active-menu="false"].navd_stacked,
aside.navd_mega-menu .navd_mega__screen[data-active-menu="true"]{
  transform: translateX(0%);
}

/* Navigation Items */
aside.navd_mega-menu nav.navd_navigation{
  display: flex;
  flex-direction: column;
  gap: var(--navd-gap-300, 12px);
}

aside.navd_mega-menu nav.navd_navigation a.navd_btn{
  --navd-item-height: 24px;
  --navd-icon-size: 12px;
  width: 100%;
  height: var(--navd-item-height);
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--navd-color-text);
  justify-content: space-between;
  gap: var(--navd-gap);
}

aside.navd_mega-menu nav.navd_navigation a.navd_btn .navd_btn__label{
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

aside.navd_mega-menu nav.navd_navigation a.navd_btn .navd_btn__icon:empty{
  display: none;
  pointer-events: none;
}

aside.navd_mega-menu nav.navd_navigation a.navd_btn .navd_btn__icon{
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: all;
}

aside.navd_mega-menu nav.navd_navigation a.navd_btn .navd_btn__icon svg{
  width: var(--navd-icon-size);
  height: var(--navd-icon-size);
  pointer-events: none;
}

/* tablet and mobile */
@media (max-width:770px){
  #navd_mega-menu--mobile > div > div.navd_mega__header >div.navd_mega__controls{
  justify-content: start !important;
  }
  /* Navigation Items */
aside.navd_mega-menu nav.navd_navigation a:not(.tw-mm-b-link) {
    border-bottom: 0 !important; 
}
aside.navd_mega-menu nav.navd_navigation a {
    font-weight: 700; 
    height: 48px !important;
}
aside.navd_mega-menu nav.navd_navigation a > span {
  padding-bottom: 15px;
  padding-top: 5px;
}
aside.navd_mega-menu .navd_mega__screen{
  padding-top:10px;
  padding-bottom: 50px;;
}
.ast-mobile-popup-header{
  padding-bottom: 50px;
  background: #f0eceb !important;
}
.navd_btn__icon{
  padding: 10px;
}
#navd_menu-back{
  background: none !important;
  border:2px solid #000 !important;
  border-radius: 5px !important;
}
#navd_menu-back:active{
   border:2px solid #f0eceb !important;
}
#ast-mobile-popup-wrapper button#menu-toggle-close{
  border:2px solid #000 !important;
}
}