/* Container wrapper */
.menu-control-bar-slot {
  width: 100%;
  padding: 0.75rem 1rem 0.25rem;
}

/* Main Container: Original neon theme glow and dark background (Untouched) */
.menu-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 70%, transparent);
  border-radius: 18px;
  background: #181818;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-color) 22%, transparent),
    0 0 24px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* Container for Veg & Non-Veg Buttons */
.menu-control-bar__group {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  /* Increased gap between Veg and Non-Veg buttons */
  min-width: 0;
}

/* Base styles shared by all buttons */
.menu-control-bar__toggle,
.menu-control-bar__collapse {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: all 0.18s ease;
  flex: 0 0 auto;
}

/* Veg/Non-Veg Toggle Buttons (Square-ish & White default) */
.menu-control-bar__toggle {
  border-radius: 12px;
  /* Square shape with slightly rounded edges */
  border: 1px solid var(--primary-color);
  /* Default white border outline */
  color: #ffffff;
  /* Default white text color */
  background: transparent;
  padding: 0.35rem 0.8rem;
  /* Trimmed padding to match menu proportions */
  gap: 0.4rem;
  min-height: 38px;
}

/* Hover effect for Veg/Non-Veg buttons */
.menu-control-bar__toggle:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--primary-color),
    0 0 12px rgba(255, 255, 255, 0.2);
  /* Soft white hover shadow */
}

/* Active (Clicked) State for Veg/Non-Veg buttons */
.menu-control-bar__toggle.is-active {
  background: rgba(255, 255, 255, 0.15);
  /* Slightly visible white background fill */
  color: #ffffff;
  /* Keeps text pure white */
  border-color: #ffffff;
  box-shadow:
    0 0 0 1px #ffffff,
    /* Solid white border highlight */
    0 0 15px rgba(255, 255, 255, 0.6);
  /* Pure white glowing box-shadow */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  /* Pure white text glow effect */
  opacity: 1;
}

/* Inactive State (when the other button is clicked) */
.menu-control-bar__toggle:not(.is-active) {
  opacity: 0.78;
  /* Slightly dims the unselected button */
}

/* Wrapper inside the toggle buttons for the red/green logos */
.menu-control-bar__badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Text label inside the buttons ("Veg" / "Non-Veg") */
.menu-control-bar__label {
  white-space: nowrap;
}

/* Global Collapse Button (Perfect Circle & Tinted background) */
.menu-control-bar__collapse {
  justify-content: center;
  width: 42px;
  /* Fixed width for perfect circle */
  height: 42px;
  /* Fixed height for perfect circle */
  padding: 0;
  margin-left: auto;
  border-radius: 50%;
  /* Forces the button into a complete circle */
  background: rgba(255, 255, 255, 0.08);
  /* Semi-transparent white/glass tint */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Subtle bright edge */
  backdrop-filter: blur(4px);
  /* Adds a slight blur to the background */
}

/* Hover effect for Collapse Button */
.menu-control-bar__collapse:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.15);
  /* Slightly brighter background on hover */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

/* SVG Arrow Icon inside Collapse Button */
.menu-control-bar__collapse svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  /* Forces the arrow icon to be purely white */
  stroke-width: 2.5;
  fill: none;
  transition: transform 0.2s ease;
}

/* Rotates the arrow pointing down when menu is collapsed */
.menu-control-bar__collapse.is-collapsed svg {
  transform: rotate(180deg);
}

/* Mobile Responsiveness Adjustments */
@media (max-width: 480px) {
  .menu-control-bar-slot {
    padding-inline: 0.75rem;
  }

  .menu-control-bar {
    padding: 0.65rem 0.7rem;
  }

  .menu-control-bar__toggle {
    padding: 0.35rem 0.65rem;
  }

  .menu-control-bar__label {
    font-size: 0.88rem;
  }

  .menu-control-bar__collapse {
    width: 38px;
    height: 38px;
  }

  .menu-control-bar__group {
    gap: 0.75rem;
    /* Slightly reduces the gap on smaller screens */
  }
}