/* ============================================================

   MENIU MOBIL – FULLSCREEN SLIDE + FADE – CURAT

   ============================================================ */

.mobile-meniu-top {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 20px;
}

.mobile-meniu-top .wpml-ls-legacy-list-horizontal {
  padding: 7px;
}

body.menu-mobil-open {
  overflow: hidden;
}

/* ==============================

   BUTON X — MATERIAL ICON

   ============================== */

button.mobile-menu-close {
  position: absolute;

  top: 15px;

  right: 15px;

  width: 42px;

  height: 42px;

  border-radius: 12px;

  border: 0px;

  background: transparent;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;
}

button.mobile-menu-close::before {
  content: "close";

  font-family: "Material Symbols Outlined";

  font-size: 30px;

  color: #fff;

  line-height: 1;
}

/* ==============================

   LIMBI

   ============================== */

.languages-mobile {
  display: flex;

  justify-content: center;

  gap: 14px;

  margin-bottom: 25px;
}

/* ==============================

   LISTA GENERALĂ (ANY MENU)

   ============================== */

.meniu-mobil-popup nav .navbar-nav {
  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.meniu-mobil-popup nav .navbar-nav nav .navbar-nav,
.meniu-mobil-popup nav .navbar-nav nav .navbar-nav nav .navbar-nav {
  background: transparent !important;
}

/* LI nivel 1 */

.meniu-mobil-popup nav .navbar-nav > li {
  border-radius: 5px;

  background: transparent !important;

  overflow: hidden;

  border: 1px solid #ffffff8f;
}

/* Link nivel 1 */

.meniu-mobil-popup nav .navbar-nav > li > a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 0 0 2.2rem;

  color: #fff;

  font-size: 1.7rem;

  font-weight: 500;

  text-decoration: none;

  background: transparent !important;

  border: 0px solid #fff;

  min-height: 45px;
}

.meniu-mobil-popup nav .navbar-nav nav .navbar-nav > li > a {
  min-height: auto;
}

.navbar-brand,
.navbar-nav > li > a {
  text-shadow: none;
}

/* ==============================

   ICONIȚA + / -

   ============================== */

.meniu-mobil-popup nav li.menu-item-has-children > a .icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  height: 50px;

  border-radius: 0px;

  position: relative;

  background: var(--color-secondary);

  margin-bottom: -3px;
}

.meniu-mobil-popup nav li.menu-item-has-children > a .icon span {
  position: absolute;

  width: 18px;

  height: 2px;

  border-radius: 2px;

  background: #fff;

  transition: 0.3s ease;
}

.meniu-mobil-popup nav li.menu-item-has-children > a .icon span:last-child {
  transform: rotate(90deg);
}

/* Când submenu e DESCHIS */

.meniu-mobil-popup nav li.menu-item-has-children.is-open > a .icon {
  background: var(--color-secondary);

  border-color: transparent;
}

.meniu-mobil-popup
  nav
  li.menu-item-has-children.is-open
  > a
  .icon
  span:last-child {
  opacity: 0;
}

/* ==============================

   LINK NIVEL 1 – stare deschisă

   ============================== */

.meniu-mobil-popup nav li.menu-item-has-children.is-open > a {
  color: var(--color-secondary) !important;

  background: transparent !important;
}

/* ==============================

   SUBMENIU — (NIVEL 2)

   ============================== */

.meniu-mobil-popup nav li.menu-item-has-children > nav.sub-menu {
  display: block !important;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  margin-top: 0.25rem;

  transition: max-height 0.25s ease, opacity 0.22s ease;

  background: transparent;
}

.meniu-mobil-popup nav nav.sub-menu > ul.nav > li > a:before {
  content: "keyboard_arrow_right";

  font-family: "Material Symbols Outlined";

  color: #fff;

  margin-right: 5px;
}

.meniu-mobil-popup nav li.menu-item-has-children > nav.sub-menu a .icon {
  display: none;
}

.meniu-mobil-popup nav li.menu-item-has-children > nav.sub-menu ul {
  gap: 5px;

  padding-left: 20px;

  padding-right: 20px;
}

.meniu-mobil-popup nav li.menu-item-has-children.is-open > nav.sub-menu {
  max-height: 900px;

  opacity: 1;
}

.meniu-mobil-popup nav .navbar-nav > li nav .navbar-nav > li {
  border: none;
}

.meniu-mobil-popup nav nav.sub-menu > ul.nav > li > a {
  display: block;

  padding: 0.8rem 1rem 0.8rem 1.3rem;

  font-size: 1.6rem;

  color: #e8f2ff;

  background: transparent;
}

/* ==============================

   NIVEL 3+

   ============================== */

.meniu-mobil-popup nav nav.sub-menu nav.sub-menu {
  max-height: none !important;

  opacity: 1 !important;

  overflow: visible !important;

  margin-top: 0.15rem;

  background: transparent;
}

.meniu-mobil-popup nav .navbar-nav > li nav .navbar-nav > li .navbar-nav > li {
  border: none;
}

.meniu-mobil-popup nav nav.sub-menu nav.sub-menu > ul.nav > li > a {
  font-size: 1.5rem;

  color: #f3f7ff;

  padding: 0.4rem 1rem 0.4rem 1.3rem;
}

.meniu-mobil-popup nav nav.sub-menu nav.sub-menu > ul.nav > li > a:before {
  content: "keyboard_arrow_right";

  font-family: "Material Symbols Outlined";

  color: #fff;

  margin-right: 5px;
}

/* steaguri mobil meniu */

.mobile-meniu-top a.wpml-ls-link img {
  width: 24px;

  height: auto;
}

.meniu-mobil-popup .search-container .search-toggle::before {
  content: "search";

  font-family: "Material Symbols Outlined";

  font-size: 27px;

  color: #fff;

  display: grid;

  place-items: center;

  font-weight: 300;
}

.meniu-mobil-popup {
  position: fixed;

  inset: 0;

  z-index: 9998;

  background: radial-gradient(
    at bottom center,
    var(--color-secondary) 0%,
    #2f7ee0 50%
  );

  /* starea INCHIS (dar vizibil în DOM) */

  display: none; /* rămâne ascuns până primește .is-open */

  opacity: 0;

  transform: translateX(40px) translateY(10px);

  transition: opacity 0.35s ease, transform 0.35s ease;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  padding-top: 75px;

  padding-left: 20px;

  padding-right: 20px;
}

.meniu-mobil-popup.is-open {
  display: block; /* apare */

  opacity: 1;

  transform: translateX(0) translateY(0); /* slide + ușor “rise” */
}

/* buton toggle programari mobil popup */

button.programari-online-header-toggle.mobil {
  font-size: 1.9rem;

  padding: 10px 30px;

  background: var(--color-secondary);
}

.meniu-mobil-popup .buton-programari-online-header.mobil .label a:hover {
  background: var(--color-primary);
}

.meniu-mobil-popup .buton-programari-online-header.mobil .label a {
  background: var(--color-secondary);

  color: #fff;

  padding: 10px 15px;

  border-radius: 5px;

  font-size: 1.2rem;

  font-weight: 500;
}

.meniu-mobil-popup .buton-programari-online-header.mobil .label {
  padding: 0;
}

/* responsive */

@media screen and (max-width: 1200px) {
  @media screen and (max-width: 992px) {
    .nav .sub-menu {
      padding: 0;

      background: transparent;
    }
  }
}

@media (max-width: 520px) {
  .programari-online-header-toggle.mobil .label {
    display: block;
  }

  button.programari-online-header-toggle.mobil {
    padding: 10px 15px;
  }

  .meniu-mobil-popup .buton-programari-online-header.mobil .label a {
    padding: 8px 15px;

    font-size: 1.2rem;
  }
}

@media screen and (max-width: 490px) {
  .mobile-meniu-top {
    gap: 0px;
  }
}

@media screen and (max-width: 460px) {
  .meniu-mobil-popup nav .navbar-nav li.is-open {
    padding-bottom: 20px;
  }

  .meniu-mobil-popup nav nav.sub-menu > ul.nav > li > a {
    font-size: 1.4rem;

    padding: 0px;
  }

  .meniu-mobil-popup nav nav.sub-menu nav.sub-menu > ul.nav > li > a {
    font-size: 1.3rem;

    padding: 0px;
  }

  .mobile-meniu-top a.wpml-ls-link img {
    width: 18px;
  }

  button.programari-online-header-toggle.mobil {
    font-size: 1.6rem;
  }

  .meniu-mobil-popup .search-container .search-toggle::before {
    font-size: 24px;
  }

  .mobile-meniu-top a.wpml-ls-link {
    padding: 5px;
  }

  button.programari-online-header-toggle.mobil {
    padding: 7px 5px;
  }

  .mobile-meniu-top .wpml-ls-legacy-list-horizontal {
    padding: 4px;
  }
}

@media screen and (max-width: 360px) {
  .meniu-mobil-popup nav .navbar-nav > li > a {
    font-size: 1.5rem;
  }
}