/* Menu Container Styles */

.paylix-menu-container {
  width: 100%;
  margin: 0 auto;
}

.paylix-menu {
  max-width: 1140px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  position: relative;
}

.paylix-menu:before { display: none; }

/* Menu pill using same variables as other elements */
.paylix-menu-pill {
  background: var(--backgroundColor, #ffffff);
  border: 1px solid var(--borderColor, #e5e7eb);
  box-shadow: var(--shadow-100, 0 1px 2px rgba(16,24,40,.06));
  border-radius: 14px;
  padding: 6px;
  display: inline-flex;
  gap: 6px;
  overflow: auto;
  width: -moz-fit-content;
  width: fit-content;
}

.menu-tab {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  color: var(--darkFontColor, #334155);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  background: transparent;
}

.menu-tab:hover {
  background: var(--backgroundAccentLight, #f1f5f9);
}

.menu-tab.active {
  background: var(--brandLightColor, #e9d5ff);
  border-color: var(--brandColor, #c084fc);
  color: var(--brandColor, #7c3aed);
}

.menu-tab:last-child {
  margin-right: 0;
}

@media (max-width: 768px) {
  .paylix-menu { margin-bottom: 1rem; }
  .paylix-menu-pill { width: 100%; }
  .menu-tab { padding: 10px 12px; }
}

/* Dark mode styles */
.dark .paylix-menu-pill {
  background: var(--backgroundColor, #1a2744);
  border-color: var(--borderColor, #2a3754);
  box-shadow: var(--shadow-100, 0 10px 22px rgba(8, 12, 28, 0.45));
}

.dark .menu-tab {
  color: var(--darkFontColor, #e8eaed);
}

.dark .menu-tab:hover {
  background: var(--backgroundAccentDark, rgba(255, 255, 255, 0.05));
}

.dark .menu-tab.active {
  background: var(--brandLightColor, #5b3fb5);
  border-color: var(--brandColor, #7c5dd8);
  color: var(--lightFontColor, #ffffff);
}

@media (max-width: 768px) {
  .paylix-banner-title {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
  }
}