/* --- MTZ Sidebar CSS (inline) --- */
:root{
  --mtz-panel-open: 280px;
  --mtz-panel-closed: 72px;
  --mtz-bg: linear-gradient(180deg, #111319 0%, #08090c 100%);
  --mtz-accent: #21f3ff;

  --mtz-text: #ffffff;
  --mtz-muted: #a3a6b4;

  --mtz-item-bg: transparent;
  --mtz-item-text: var(--mtz-muted);

  --mtz-item-bg-hover: rgba(255,255,255,0.10);
  --mtz-item-text-hover: var(--mtz-text);

  --mtz-item-bg-active: rgba(33,243,255,0.14);
  --mtz-item-text-active: var(--mtz-text);

  --mtz-item-outline-focus: rgba(33,243,255,0.45);

  --mtz-toggle-bg: #181b22;
  --mtz-toggle-bg-hover: rgba(255,255,255,0.10);
  --mtz-toggle-bg-active: rgba(255,255,255,0.14);
}

body{ transition: padding-left .25s ease-in-out; }
body.mtz-panel-expanded{ padding-left: var(--mtz-panel-open); }
body.mtz-panel-collapsed{ padding-left: var(--mtz-panel-closed); }

.mtz-dashboard, .mtz-dashboard *{ box-sizing: border-box; }

/* Thumbnails inside Games/Apps dropdown items */
.mtz-subthumb{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.mtz-subthumb--placeholder{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}

.mtz-subtitle{
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mtz-subempty{
  display: block;
  padding: 8px 10px;
  margin-left: 0;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* Defend against theme/global Elementor styles */
#mtz-sidepanel button{
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
#mtz-sidepanel svg,
#mtz-toggle svg,
#mtz-toggle-floating svg{
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  display: block;
}

#mtz-sidepanel{
  position: fixed;
  top: 0; left: 0;
  width: var(--mtz-panel-open);
  height: 100vh;
  background: var(--mtz-bg);
  color: var(--mtz-text);
  z-index: 10000;
  box-shadow: 4px 0 24px rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  transition: width .25s ease-in-out;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#mtz-sidepanel.is-collapsed{ width: var(--mtz-panel-closed); }

.mtz-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.mtz-logo{
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;
  text-decoration:none !important;
  color: inherit !important;
}
.mtz-logo-icon{
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #222;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color: var(--mtz-accent);
  font-weight: 800;
}
.mtz-logo-icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* use 'cover' if you want it to crop instead */
  border-radius: 6px;
}
.mtz-logo-text .mtz-main{
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--mtz-text);
  letter-spacing: .1em;
  font-family: 'Space Grotesk', 'Sans-Serif';
}
.mtz-logo-text .mtz-main:hover { color: #00D4FF; }

.mtz-toggle{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: var(--mtz-toggle-bg) !important;
  color: var(--mtz-text) !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
  padding: 0;
  line-height: 1;
  position: relative !important;
  overflow: hidden;
}
#mtz-toggle:hover{
  background: var(--mtz-toggle-bg-hover) !important;
  border-color: #00D4FF!important;
}
.mtz-toggle:active{
  transform: translateY(1px);
  background: var(--mtz-toggle-bg-active) !important;
  border-color: rgba(33,243,255,0.70);
}
.mtz-toggle:focus, .mtz-toggle:focus-visible{
  outline: 2px solid var(--mtz-item-outline-focus);
  outline-offset: 2px;
  background: rgba(255,255,255,0.12) !important;
}

.mtz-toggle .mtz-toggle-ico{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100%;
  height: 100%;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none;
}
.mtz-toggle svg{ width: 18px; height: 18px; display:block; }

/* Ensure only one icon is visible (defensive against themes forcing svg display) */
.mtz-toggle .mtz-ico-ham{ display:block !important; }
.mtz-toggle .mtz-ico-x{ display:none !important; }

body.mtz-panel-expanded .mtz-toggle .mtz-ico-ham{ display:none !important; }
body.mtz-panel-expanded .mtz-toggle .mtz-ico-x{ display:block !important; }

body.mtz-panel-collapsed .mtz-toggle .mtz-ico-ham{ display:block !important; }
body.mtz-panel-collapsed .mtz-toggle .mtz-ico-x{ display:none !important; }

/* IMPORTANT: keep floating toggle as an overlay so it never causes layout shift */
.mtz-toggle-floating{
  position: fixed !important;
  z-index: 10001 !important;
  display: inline-flex !important;

  /* Default: hidden unless mobile rule turns it on */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .18s ease, visibility .18s ease;
}

.mtz-nav{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 6px;
}

.mtz-link,
.mtz-subtoggle{
  appearance: none;
  -webkit-appearance: none;

  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 10px;

  background: var(--mtz-item-bg) !important;
  color: var(--mtz-item-text) !important;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;

  text-decoration:none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;

  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

#mtz-sidepanel .mtz-link:hover,
#mtz-sidepanel .mtz-subtoggle:hover{
  background: var(--mtz-item-bg-hover) !important;
  color: var(--mtz-item-text-hover) !important;
  border-color: rgba(255,255,255,0.08) !important;
  transform: translateX(2px);
}
#mtz-sidepanel .mtz-link:active,
#mtz-sidepanel .mtz-subtoggle:active{
  background: var(--mtz-item-bg-active) !important;
  color: var(--mtz-item-text-active) !important;
  border-color: rgba(33,243,255,0.35) !important;
  transform: translateX(2px) translateY(1px);
}

.mtz-link:focus,
.mtz-link:focus-visible,
.mtz-subtoggle:focus,
.mtz-subtoggle:focus-visible{
  outline: 2px solid var(--mtz-item-outline-focus);
  outline-offset: 2px;
  background: transparent;
  color: var(--mtz-text) !important;
}

#mtz-sidepanel .mtz-link.is-active,
#mtz-sidepanel .mtz-sublink.is-active{
  background: var(--mtz-item-bg-active) !important;
  color: var(--mtz-text) !important;
  border-color: rgba(33,243,255,0.35) !important;
}

.mtz-icon{
  width: 24px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: inherit;
}
.mtz-icon svg{ width: 20px; height: 20px; fill: currentColor; display:block; }
.mtz-label{ overflow:hidden; text-overflow: ellipsis; }

.mtz-chevron{
  margin-left: auto;
  width: 18px; height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.70);
  transform-origin: 50% 50%;
  transition: transform .18s ease;
  flex-shrink:0;
}
.mtz-chevron svg{ width: 18px; height: 18px; display:block; fill: currentColor; }
.mtz-subtoggle[aria-expanded="true"] .mtz-chevron{ transform: rotate(90deg); }
body.mtz-panel-collapsed .mtz-chevron{ opacity: 0; transform: rotate(0deg); }

.mtz-submenu{
  display: none;
  height: 0;
  opacity: 0;
  transform: translateY(-4px);

  margin-left: 15px;
  margin-top: 0;
  margin-bottom: 6px;

  gap: 6px;
}
.mtz-submenu.is-open{
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.mtz-sublink{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 10px;

  color: var(--mtz-muted) !important;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;

  text-decoration:none !important;
  border: 1px solid transparent !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.mtz-sublink:hover{
  background: rgba(255,255,255,0.10) !important;
  color: var(--mtz-text) !important;
  border-color: rgba(255,255,255,0.08) !important;
  transform: translateX(2px);
}
.mtz-sublink:active{
  background: rgba(33,243,255,0.12) !important;
  color: var(--mtz-text) !important;
  border-color: rgba(33,243,255,0.30) !important;
  transform: translateX(2px) translateY(1px);
}
.mtz-sublink:focus, .mtz-sublink:focus-visible{
  outline: none;
  background: rgba(33,243,255,0.10) !important;
  color: var(--mtz-text) !important;
}

.mtz-sep{
  border-top: 1px solid rgba(255,255,255,0.05);
  margin: 10px 0;
}
.mtz-bottom{
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

body.mtz-panel-collapsed .mtz-label{ opacity: 0; transition: opacity .2s ease; }
body.mtz-panel-collapsed .mtz-logo{ display:none; }
body.mtz-panel-collapsed .mtz-header{ justify-content:center; }

@media (max-width: 768px){
  /* On mobile, the sidebar becomes a left drawer */
  body, body.mtz-panel-expanded, body.mtz-panel-collapsed{ padding-left: 0 !important; }

  /* Backdrop behind the drawer (click to close via JS) */
  .mtz-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.mtz-panel-expanded .mtz-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* Prevent the page from scrolling when the drawer is open */
  body.mtz-panel-expanded{
    overflow: hidden;
    touch-action: none;
  }

  #mtz-sidepanel,
  #mtz-sidepanel.is-collapsed{
    width: min(86vw, 340px);
    height: 100dvh;
    height: 100vh; /* fallback */
    left: 0;

    transform: translateX(-110%);
    transition: transform .25s ease-in-out;

    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));

    border-right: 1px solid rgba(255,255,255,0.06);

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mtz-panel-expanded #mtz-sidepanel{ transform: translateX(0); }
  body.mtz-panel-collapsed #mtz-sidepanel{ transform: translateX(-110%); }

  /* 3) Hamburger stays top-right, fixed, while scrolling */
  .mtz-toggle-floating{
    right: calc(26px + env(safe-area-inset-right, 0px));
    top: calc(26px + env(safe-area-inset-top, 0px));
    left: auto !important;

    /* show it only when panel is closed */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.mtz-panel-expanded .mtz-toggle-floating{
    /* 2) Hide without layout shift */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* 1) X button positioning: always absolute inside the drawer, top-right */
  #mtz-sidepanel .mtz-toggle{
    display:inline-flex !important;
    position: absolute !important;
    right: calc(14px + env(safe-area-inset-right, 0px)) !important;
    top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    z-index: 10002 !important;
  }

  /* Give the header some breathing room so the X doesn't overlap logo text */
  .mtz-header{
    justify-content:flex-start;
    gap:10px;
    padding-right: 54px; /* room for the X button */
  }
}

/* Extra tightening for very small devices */
@media (max-width: 420px){
  #mtz-sidepanel,
  #mtz-sidepanel.is-collapsed{ width: min(88vw, 320px); }

  .mtz-link,
  .mtz-subtoggle{ font-size: 15px; padding: 12px 10px; }
  .mtz-sublink{ font-size: 14px; padding: 10px 10px; }

  .mtz-logo-text .mtz-main{ font-size: 1.45rem; }
}

/* ==== MOBILE FIXES: keep X visible + prevent header/layout shift during close ==== */
@media (max-width: 768px){

  /* Ensure the close button (#mtz-toggle) is ALWAYS visible in the drawer */
  #mtz-sidepanel #mtz-toggle.mtz-toggle{
    display: inline-flex !important;
    position: absolute !important;
    right: calc(14px + env(safe-area-inset-right, 0px)) !important;
    top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    z-index: 10002 !important;
  }

  /* On mobile, NEVER apply the "collapsed desktop" hiding behavior inside the drawer.
     This prevents the logo/header height from changing while the drawer animates out. */
  body.mtz-panel-collapsed #mtz-sidepanel .mtz-logo{
    display: flex !important;
  }
  body.mtz-panel-collapsed #mtz-sidepanel .mtz-label{
    opacity: 1 !important;
  }
  body.mtz-panel-collapsed #mtz-sidepanel .mtz-chevron{
    opacity: 1 !important;
  }
  body.mtz-panel-collapsed #mtz-sidepanel .mtz-header{
    justify-content: flex-start !important;
    padding-right: 54px; /* keep room for the X */
  }
}

/* ==== MOBILE: fix bottom cutoff (Brave URL bar) + bigger toggles ==== */
@media (max-width: 768px){

  /* Use the best available viewport unit on mobile browsers
     - 100dvh tracks the *dynamic* viewport (URL bar expand/collapse)
     - 100svh tracks the *small* viewport (when URL bar is showing)
     We set height using svh first (safe), then dvh when supported. */
  #mtz-sidepanel,
  #mtz-sidepanel.is-collapsed{
    height: 100svh !important;   /* prevents being too tall when URL bar is visible */
    max-height: 100svh !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; /* extra room for last button */
  }

  /* Prefer dvh when supported (handles URL bar changes smoothly) */
  @supports (height: 100dvh){
    #mtz-sidepanel,
    #mtz-sidepanel.is-collapsed{
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  /* Ensure the panel content can scroll all the way to the last item */
  #mtz-sidepanel{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Make hamburger + X bigger on mobile */
  #mtz-toggle,
  #mtz-toggle-floating{
    width: 42px !important;
    height: 42px !important;
  }
  #mtz-toggle svg,
  #mtz-toggle-floating svg{
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }

  /* Slightly larger tap target feel */
  #mtz-toggle,
  #mtz-toggle-floating{
    border-width: 1px !important;
  }
}