/* v39: Desktop hover fixed even if old JS set inline display:none
   - Desktop: submenus are ALWAYS display:block; hidden via opacity/visibility
   - Mobile: submenus are display:none until <li class="open">
*/

#menu, #menu * { box-sizing: border-box; }
#menu{ position:relative; z-index:1000; overflow:visible !important; }
.nav-inner.header-row-2, .nav-menu, #navMenu{ position:relative; z-index:1100; overflow:visible !important; }

/* Header */
.nav-inner.header-row-1{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.nav-controls{display:flex;align-items:center;gap:8px}
.nav-login{display:flex;align-items:center;justify-content:flex-end;max-width:100%}
.menu-login{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;max-width:100%}
.menu-login input{
  width:clamp(220px, 14vw, 340px);
  min-width:220px;
  padding:8px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.35);
  color:#fff !important; caret-color:#fff !important;
}
.menu-login input::placeholder{color:rgba(255,255,255,.55)}
.menu-login button{padding:8px 12px;border-radius:10px;white-space:nowrap}
.menu-login a{white-space:nowrap}
.menu-login label.remember{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.menu-login label.remember input{width:auto;min-width:auto}
.nav-login,.menu-login,.menu-user{position:relative;z-index:1200}

/* Menu row */
#containerul{display:flex !important;gap:14px;align-items:center;flex-wrap:wrap;margin:0;padding:0}
#containerul>li{position:relative;list-style:none}
#containerul .menu-title{display:inline-block;padding:6px 10px;border-radius:10px;cursor:pointer;user-select:none;white-space:nowrap}

/* Submenus (desktop defaults) */
#containerul>li>ul{
  display:block !important;              /* MUST be block on desktop */
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:rgba(15,18,26,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:8px 0;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(6px) !important;
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:5000 !important;
  pointer-events:none;
}
#containerul>li>ul>li{margin:0;list-style:none}
#containerul>li>ul>li>a{display:block;padding:9px 14px;text-decoration:none}
#containerul>li>ul>li>a:hover{background:rgba(255,255,255,.06)}

/* OPEN: hover/focus */
#containerul>li:hover>ul,
#containerul>li:focus-within>ul{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

/* Mobile: stacked accordion */
@media (max-width:900px){
  .menu-login{flex-wrap:wrap}
  .menu-login input{width:clamp(160px, 42vw, 260px); min-width:160px}
  #containerul{flex-direction:column;align-items:stretch}

  #containerul>li>ul{
    position:static !important;
    min-width:0;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    background:transparent;border:0;border-radius:0;padding:0;
    pointer-events:auto !important;
    display:none !important; /* closed by default */
  }
  #containerul>li.open>ul{display:block !important}
}