/* Off canvas only for #sidemenu */
#sidemenu {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 86vw;
  height: 100dvh;
  overflow: auto;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 9999;
  padding: 18px 18px 28px;
}

html.sidemenu-open #sidemenu { transform: translateX(0); }

/* Thin vertical handle green with white text */
#sidemenu-handle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 14px;
  height: 120px;
  background: #18a957;
  color: #fff;
  border: 0;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  z-index: 10000;
  display: grid;
  place-items: center;
}
#sidemenu-handle span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Overlay */
#sidemenu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
  display: none;
}
html.sidemenu-open #sidemenu-overlay { display: block; }

/* Menu items black, tidy spacing */
#sidemenu .elementor-icon-list-items { margin: 0; padding: 0; }
#sidemenu .elementor-icon-list-item a {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  text-decoration: none;
  color: #111 !important; /* force black text */
}
#sidemenu .elementor-icon-list-text {
  color: #111 !important; /* force black label */
}
#sidemenu .elementor-icon-list-item a:hover {
  background: rgba(0,0,0,.06);
  border-radius: 8px;
}

/* force icon color to black */
#sidemenu .elementor-icon-list-icon { color: #000 !important; }
#sidemenu .elementor-icon-list-icon svg { width: 12px; height: 12px; }
#sidemenu .elementor-icon-list-icon svg,
#sidemenu .elementor-icon-list-icon svg path {
  fill: #000 !important;
  stroke: #000 !important;
}

/* Active state that persists */
#sidemenu .elementor-icon-list-item.is-active > a {
  background: rgba(24,169,87,.12);
  border-radius: 8px;
  outline: 2px solid rgba(24,169,87,.35);
}

/* Small screens */
@media (max-width: 767.98px) {
  #sidemenu { width: 92vw; }
  #sidemenu-handle { height: 96px; }
}

/* Prevent page scroll when open */
html.sidemenu-open,
html.sidemenu-open body { overflow: hidden; }

/* Smooth anchor scroll */
html { scroll-behavior: smooth; }

/* Floating action button blue bubble with white lines */
#sidemenu-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 9999px;
  background: #1e66ff;
  color: #fff;
  z-index: 10000;
  display: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
#sidemenu-fab i {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 2px;
}

/* Use CSS class to switch to fab */
#sidemenu.sidemenufab ~ #sidemenu-handle { display: none !important; }
#sidemenu.sidemenufab ~ #sidemenu-fab { display: inline-block; }

/* Optional remove dots entirely inside the side menu */
/* #sidemenu .elementor-icon-list-icon { display: none; } */

/* compact spacing inside the side menu */
#sidemenu .elementor-icon-list-item a {
  padding: 8px 6px;     /* was 10px 8px */
  gap: 8px;             /* was 10px */
  line-height: 1.25;    /* slightly tighter */
  font-size: 14px;      /* optional, reduce text size a touch */
}
#sidemenu .elementor-icon-list-icon svg {
  width: 10px;          /* was 12px */
  height: 10px;
}
#sidemenu { padding: 14px 14px 20px; }  /* slightly less panel padding */

/* robust internal scrolling with mobile safe areas */
#sidemenu {
  height: 100dvh;                /* dynamic viewport on modern browsers */
  max-height: 100svh;            /* iOS 16 plus, Android modern */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;  /* prevent page from scrolling when you hit edges */
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* optional slim scrollbar styling */
#sidemenu::-webkit-scrollbar { width: 8px; }
#sidemenu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 8px; }
#sidemenu::-webkit-scrollbar-track { background: transparent; }