/* === eMAG-style FLYOUT megjelenítés (grid) === */

/* A bal sín */
.wcx-rail{
  position:relative;
  z-index:20;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:visible;
}
.wcx-rail-list, .wcx-rail-list li{ list-style:none; margin:0; padding:0; }
.wcx-rail-list li > a{
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:10px 12px; border-radius:10px;
}
.wcx-rail-list li > a:hover{
  background: rgba(22,163,74,.08);
}

/* A FLYOUT – a sub-menu panel */
.wcx-rail-list > li{ position:relative; }
.wcx-rail-list > li > .sub-menu{
  position:absolute;
  top:0;
  left:calc(100% + 12px);
  min-width:760px;
  max-width:1000px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  padding:16px 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px 24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index:30;
}

/* Hover állapot – csak akkor legyen látható, amikor a szülőn vagyunk */
.wcx-rail-list > li:hover > .sub-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

/* Oszlopcímek és linkek */
.wcx-rail-list .sub-menu > li.wcx-col-title > a{
  font-weight:700;
  color:#111827;
  cursor:default;
  pointer-events:none;
  padding:4px 2px;
}
.wcx-rail-list .sub-menu > li.wcx-col-title > a:hover{
  background:transparent;
}
.wcx-rail-list .sub-menu > li.wcx-col-title > .sub-menu{
  margin-top:4px;
  display:grid;
  grid-auto-rows:min-content;
  gap:2px 0;
  position:static;
  left:auto; top:auto;
  border:none; box-shadow:none; padding:0;
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
}
.wcx-rail-list .sub-menu > li.wcx-col-title > .sub-menu > li > a{
  display:block;
  white-space:nowrap;
  padding:6px 4px;
  border-radius:6px;
  color:#111827;
}
.wcx-rail-list .sub-menu > li.wcx-col-title > .sub-menu > li > a:hover{
  background:rgba(17,24,39,.04);
}

/* Ikon buborék az anchor előtt (feltéve, hogy a mapping már be van kötve) */
.wcx-rail-list li > a::before{
  content:"";
  display:inline-block; width:28px; height:28px; margin-right:8px;
  background:#16a34a; border-radius:8px;
  -webkit-mask-size:18px 18px; mask-size:18px 18px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}