/* Hopino Mobile Diamond Menu v1.1.1 – Floating, compact, elegant */
.hmdm-bar{
  position: fixed;
  left: 10px; right: 10px; bottom: 10px; /* floating with 10px inset */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--hmdm-bg, #5634d1) 92%, transparent);
  box-shadow: 0 8px 30px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  z-index: 9999;
  font-family: inherit;
}

.hmdm-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--hmdm-ic, #fff);
  min-width: 64px; /* tighter spacing */
}

.hmdm-icon{
  width: var(--hmdm-size, 48px);
  height: var(--hmdm-size, 48px);
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  transition: transform .22s ease, background .22s ease, color .22s, box-shadow .22s;
}

.hmdm-item .dashicons,
.hmdm-item i{ font-size: 20px; line-height: 1; }
.hmdm-item img{ max-width: 22px; max-height: 22px; }

/* Active transforms to diamond and slightly elevates */
.hmdm-item.hmdm-active .hmdm-icon{
  background: var(--hmdm-abg,#6f49f1);
  color: var(--hmdm-aic,#fff);
  transform: translateY(-10px) rotate(45deg);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.hmdm-item.hmdm-active .hmdm-icon>*{ transform: rotate(-45deg); }

.hmdm-label{
  font-size: 10px;
  color: rgba(255,255,255,.95);
}

/* Touch feedback */
.hmdm-item:active .hmdm-icon{ filter: brightness(1.1); transform: translateY(-2px) scale(1.02); }

/* Animations for AJAX container */
.hmdm-fade-out{opacity:0; transition: opacity .2s ease}
.hmdm-fade-in{opacity:1; transition: opacity .2s ease}
.hmdm-slide-left-out{transform: translateX(16px); opacity:.01; transition: transform .22s ease, opacity .22s}
.hmdm-slide-left-in{transform: translateX(0); opacity:1; transition: transform .22s ease, opacity .22s}
.hmdm-slide-up-out{transform: translateY(16px); opacity:.01; transition: transform .22s ease, opacity .22s}
.hmdm-slide-up-in{transform: translateY(0); opacity:1; transition: transform .22s ease, opacity .22s}

/* Only on small screens */
@media (min-width: 960px){ .hmdm-bar{ display:none; } }

/* Default variables */
.hmdm-bar{
  --hmdm-bg:#5634d1;
  --hmdm-ic:#fff;
  --hmdm-abg:#6f49f1;
  --hmdm-aic:#fff;
  --hmdm-size:48px;
}


/* --- HMDM v1.1.5 UI tweaks: floating, circular items, diamond active, active label hidden --- */
.hmdm-bar{
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  border-radius: 18px !important;
  padding: 8px 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.08) inset !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
}
/* non-active icons circular */
.hmdm-bar .hmdm-item .hmdm-icon{
  border-radius: 999px !important;
  background: rgba(255,255,255,.06);
}
/* active becomes diamond + slightly lifted + less rounded corners */
.hmdm-bar .hmdm-item.hmdm-active .hmdm-icon{
  border-radius: 12px !important;
  transform: translateY(-8px) rotate(45deg) !important;
}
.hmdm-bar .hmdm-item.hmdm-active .hmdm-icon > *{
  transform: rotate(-45deg) !important;
}
/* hide label for active item only */
.hmdm-bar .hmdm-item.hmdm-active .hmdm-label{
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* compact labels for others */
.hmdm-bar .hmdm-label{
  font-size: 10px !important;
  line-height: 1.1;
  color: rgba(255,255,255,.92);
}