﻿/* ══════════════════════════════════════════
   oXben Shared Submenu – Right Side Panel
   ══════════════════════════════════════════ */

/* Toggle button – top-right, header level */
.oxb-menu-toggle{
  position:fixed;right:18px;top:10px;
  z-index:10001;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--bg2,#0e0e1a);
  border:1.5px solid var(--accent,#39ff14);
  color:var(--accent,#39ff14);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 0 14px rgba(57,255,20,.15);
  transition:right .25s,background .25s,color .25s,box-shadow .25s;
  font-size:16px;line-height:1;
}
.oxb-menu-toggle:hover{
  background:var(--accent,#39ff14);color:#000;
  box-shadow:0 0 20px rgba(57,255,20,.35);
}
.oxb-menu-toggle.open{
  right:234px;
  background:var(--accent,#39ff14);color:#000;
}

/* Side panel */
.oxb-panel{
  position:fixed;right:-220px;top:0;bottom:0;
  width:220px;z-index:10000;
  background:var(--bg2,#0e0e1a);
  border-left:1px solid var(--border,#1e2e1e);
  display:flex;flex-direction:column;
  padding:16px 14px;gap:6px;
  transition:right .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  box-shadow:-4px 0 24px rgba(0,0,0,.4);
  font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.oxb-panel.open{right:0}

/* Panel header */
.oxb-panel-head{
  font-size:11px;font-weight:700;
  color:var(--accent,#39ff14);
  letter-spacing:1.5px;text-transform:uppercase;
  padding:0 2px 8px;
  border-bottom:1px solid var(--border,#1e2e1e);
  margin-bottom:4px;
}

/* Nav links */
.oxb-nav-link{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-radius:7px;
  color:var(--text,#e0e8e0);
  text-decoration:none;
  font-size:13px;font-weight:500;
  transition:all .15s;cursor:pointer;
  border:none;background:none;
  font-family:inherit;width:100%;text-align:left;
}
.oxb-nav-link:hover{
  background:var(--bg4,#1a1a2e);
  color:var(--accent,#39ff14);
  text-decoration:none;
}
.oxb-nav-link svg{width:16px;height:16px;flex-shrink:0;opacity:.7}
.oxb-nav-link:hover svg{opacity:1}

/* Divider */
.oxb-divider{height:1px;background:var(--border,#1e2e1e);margin:6px 0}

/* Section label */
.oxb-label{
  font-size:10px;font-weight:700;
  color:var(--text-muted,#4a5a4a);
  letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px 2px;
}

/* Related links */
.oxb-related{font-size:12px;padding:7px 10px}
.oxb-related svg{width:13px;height:13px}

/* Theme items */
.oxb-theme-item{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-radius:7px;
  font-size:13px;font-weight:500;color:var(--text,#e0e8e0);
  cursor:pointer;transition:all .15s;
}
.oxb-theme-item:hover{background:var(--bg4,#1a1a2e);color:var(--accent,#39ff14)}
.oxb-theme-item.active{color:var(--accent,#39ff14);font-weight:600}
.oxb-theme-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.15);
}
.oxb-theme-item:hover .oxb-theme-dot{border-color:rgba(255,255,255,.35)}
.oxb-theme-item.active .oxb-theme-dot{
  box-shadow:0 0 6px currentColor;
  border-color:currentColor;
}

/* Google Translate */
.oxb-gt-section{margin-top:auto;padding-top:8px;border-top:1px solid var(--border,#1e2e1e)}

/* Font Size */
.oxb-fontsize{
  display:flex;align-items:center;gap:4px;
  padding:4px 10px;
}
.oxb-fs-btn{
  width:32px;height:28px;border:1px solid var(--border,#1e2e1e);
  border-radius:5px;background:var(--bg3,#141422);
  color:var(--text,#e0e8e0);cursor:pointer;
  font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.oxb-fs-btn:hover{border-color:var(--accent,#39ff14);color:var(--accent,#39ff14)}
.oxb-fs-reset{font-size:14px}
.oxb-fs-val{
  flex:1;text-align:center;
  font-size:11px;font-weight:600;
  color:var(--accent,#39ff14);
  font-variant-numeric:tabular-nums;
}

/* Quick Actions */
.oxb-actions{
  display:flex;gap:6px;padding:4px 10px;
}
.oxb-action-btn{
  flex:1;height:34px;
  border:1px solid var(--border,#1e2e1e);
  border-radius:7px;background:var(--bg3,#141422);
  color:var(--text-dim,#7a8a7a);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.oxb-action-btn svg{width:16px;height:16px}
.oxb-action-btn:hover{
  border-color:var(--accent,#39ff14);
  color:var(--accent,#39ff14);
  box-shadow:0 0 8px var(--accent-dim,#39ff1466);
}

/* QR Box */
.oxb-qr-box{
  text-align:center;padding:8px 0;
}
.oxb-qr-box img{border-radius:8px}

/* Custom language select – no popup, fully responsive */
#oxb_google_translate{display:none!important}
.oxb-lang-sel{
  display:block;
  width:100%;
  box-sizing:border-box;
  background:var(--bg3,#141422);
  color:var(--text,#e0e8e0);
  border:1px solid var(--border,#1e2e1e);
  border-radius:6px;
  padding:7px 10px;
  font-size:12px;
  font-family:inherit;
  outline:none;
  cursor:pointer;
}
.oxb-lang-sel:hover,.oxb-lang-sel:focus{border-color:var(--accent,#39ff14)}

/* Hide Google injected bars */
.goog-te-banner-frame{display:none!important}
body{top:0!important}
.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{display:none!important}
.VIpgJd-ZVi9od-SmKAyb{display:none!important}
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}

@media(max-width:600px){
  .oxb-menu-toggle{right:10px;width:34px;height:34px;font-size:14px}
  .oxb-menu-toggle.open{right:184px}
  .oxb-panel{width:180px;right:-180px;padding:12px 10px}
}
