/* Premium mobile menu styles - glass panel, backdrop, animations */
:root{
  --nav-width-min: 92vw;
  --nav-width-max: 430px;
  --nav-bg: rgba(5,15,35,0.82);
  --nav-border: rgba(120,210,255,0.12);
  --accent: #16C7FF;
  --panel-ease: cubic-bezier(0.22,1,0.36,1);
}

.mobile-menu-panel{
  position: fixed;
  right: 0;
  top: 0;
  height: 100dvh;
  width: min(var(--nav-width-min), var(--nav-width-max));
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-left: 1px solid var(--nav-border);
  box-shadow: 0 40px 120px rgba(2,6,24,0.6);
  z-index: 140;
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 540ms var(--panel-ease), opacity 420ms ease;
  isolation: isolate;
}
.mobile-menu-panel.open{
  transform: translateX(0);
  opacity: 1;
}

.mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 8px 12px 8px;
}
.mobile-menu-brand{display:flex;align-items:center;gap:12px}
.mobile-menu-brand img{height:44px;width:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45));}
.mobile-menu-title{font-weight:800;font-size:0.95rem;letter-spacing:0.03em;color:#fff}
.mobile-menu-sub{font-size:0.7rem;color:rgba(255,255,255,0.7);margin-top:2px}

.mobile-menu-close{background:transparent;border:0;color:#fff;width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mobile-menu-close:focus{outline:none;box-shadow:0 0 0 4px rgba(22,199,255,0.12)}

.mobile-menu-sep{height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.03));margin:12px 0;border-radius:2px}

.mobile-menu-list{display:flex;flex-direction:column;gap:8px;padding:6px 0;overflow:auto}
.mobile-menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;cursor:pointer;transition:background 220ms ease,box-shadow 220ms ease,transform 220ms ease;user-select:none
}
.mobile-menu-item .left{display:flex;align-items:center;gap:12px}
.mobile-menu-item svg{width:20px;height:20px;stroke:#9fb8d6;fill:none;stroke-width:1.8}
.mobile-menu-item .label{font-weight:700;color:rgba(255,255,255,0.95);font-size:1.03rem}
.mobile-menu-item .chev{opacity:0.9;transform:translateX(0);transition:transform 220ms ease}

.mobile-menu-item:hover{background:rgba(0,190,255,0.04);}
.mobile-menu-item:active{background:rgba(0,190,255,0.06);}

/* Active item */
.mobile-menu-item.active{background:rgba(0,190,255,0.08);border:1px solid rgba(0,210,255,0.16);box-shadow:0 6px 22px rgba(8,100,200,0.06)}
.mobile-menu-item.active svg{stroke:var(--accent)}

/* staggered animation for items */
.mobile-menu-item{opacity:0;transform:translateY(10px);}
.mobile-menu-panel.open .mobile-menu-item{opacity:1;transform:translateY(0)}
.mobile-menu-item[data-delay]{transition-delay:var(--delay,0ms)}

/* admin card */
.admin-card{margin:12px 0;padding:12px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:space-between}
.admin-left{display:flex;align-items:center;gap:12px}
.admin-left svg{width:22px;height:22px;stroke:var(--accent);}
.admin-title{font-weight:800;color:#fff}
.admin-sub{font-size:0.82rem;color:rgba(255,255,255,0.78)}
.admin-cta{background:linear-gradient(135deg,var(--accent),#008CFF);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800}

/* language block */
.lang-block{margin-top:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
.lang-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lang-options{display:flex;gap:8px}
.lang-option{padding:8px 10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:rgba(255,255,255,0.88);cursor:pointer}
.lang-option.active{background:rgba(0,190,255,0.06);border-color:rgba(0,210,255,0.12);color:#fff}

/* bottom branding */
.menu-footer{margin-top:auto;padding:18px 6px;color:rgba(255,255,255,0.6);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.18em}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .mobile-menu-panel{transition:none}
  .mobile-menu-item{transition:none}
}

/* responsive tweaks */
@media (min-width:768px){
  :root{--nav-width-min:82vw;--nav-width-max:460px}
}