/* Hampurilaisvalikkonapin ulkoasu (koko, ikoni, väri) on header.css:ssä
   (.cosmetsky-header-icon) — nappi on SVG-ikoni, ei täällä toistettava. */

/*-------------------------------------------*/

/* Container. Liukuu vaakasuunnassa transform-ominaisuudella samaan tapaan
   kuin WooCommercen mini-cart-laatikko (.wc-block-components-drawer) —
   display pysyy aina "block":na, jotta transition ehtii animoitua; suljettuna
   elementti on vain siirretty näkymän ulkopuolelle. Visibility viivästetään
   sulkeutuessa transitionin keston verran, jotta se ei jää nauhaselaimen tms.
   fokusoitavaksi vaikka on ruudun ulkopuolella. */
#overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 30%;
  max-width: 360px; /* ensures it doesn't stretch too much on big screens */
  height: 100vh;
  height: 100dvh; /* mobiiliselaimet: huomioi osoitepalkin korkeus */
  /* Ilman tätä width:100% (ks. mobiilin media query alla) + padding laskisi
     paddingin 100%:n PÄÄLLE (oletus content-box), jolloin koko valikko olisi
     todellisuudessa 32px leveämpi kuin näyttö ja sulkupainike jäisi osittain
     näkymän ulkopuolelle oikeaan reunaan. */
  box-sizing: border-box;
  background: #fff;
  border-right: 1px solid #ddd;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 999999;
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}

#overlay-menu:not(.hidden) {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s linear 0s;
}

@media (max-width: 768px) {
  #overlay-menu {
    width: 100%;
    max-width: none;
    padding: 16px;
    border-right: none;
  }
}

/* Basic list look */
#overlay-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#overlay-menu li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

#overlay-menu li a {
  display: block;
  font-size: 15px;
  color: #111;
  text-decoration: none;
}

/* Header row inside menu */
#overlay-menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Profile row at the top of the mobile menu */
.menu-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eee;
  color: #111;
  text-decoration: none;
}

.menu-profile img.avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.menu-profile-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 1px solid #ddd;
  flex-shrink: 0;
}

.menu-profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-profile-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-profile-link {
  font-size: 13px;
  color: #666;
}

/* Back icon */
.menu-back {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 0;
  color: #111;
}

.menu-back-label {
  font-size: 14px;
}

.icon-back {
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  display: inline-block;
}

.icon-back::before,
.icon-back::after {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.icon-back::before {
  top: -4px;
  transform: rotate(-45deg);
}

.icon-back::after {
  top: 4px;
  transform: rotate(45deg);
}

/* Close icon */
.menu-close {
  position: relative;           /* anchor for the icon */
  background: none;
  border: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.icon-close {
  position: relative;           /* anchor pseudo-lines */
  display: block;
  width: 18px;
  height: 18px;                 /* visual box for the X */
}

.icon-close::before,
.icon-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;                  /* line length */
  height: 2px;                  /* line thickness */
  background: currentColor;
  transform-origin: center;     /* rotate around center */
}

.icon-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Dark background overlay */
#menu-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5); /* adjust to taste */
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#menu-overlay-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Panels container — all panels (root + sub) live here as siblings */
#overlay-menu .menu-panels > ul { display: none; }
#overlay-menu .menu-panels > ul.show { display: block; }

/* Parent items with children — add an arrow */
#overlay-menu li.menu-item-has-children > a {
  position: relative;
  padding-right: 18px;
}
#overlay-menu li.menu-item-has-children > a::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
}

/* Ensure moved submenus behave like root lists (full width, stacked) */
#overlay-menu .menu-panels > ul { width: 100%; }
#overlay-menu .menu-panels > ul > li { display: block; width: 100%; }

/* Back button minor reset */
#overlay-menu .menu-back.hidden { display: none; }