.attribute-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;

  gap: 12px;
  min-height: 33px;
}

.attribute-button {
  background-color: var(--e-global-color-c966fbd) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  fill: var(--e-global-color-accent) !important;
  color: var(--e-global-color-accent) !important;
  border-style: solid !important;
  border-width: 1px 1px 1px 1px !important;
  border-color: var(--e-global-color-accent) !important;
  padding: 8px 12px 8px 12px !important;
  height: 100% !important;
}

.attribute-buttons.align-items-start {
  align-items: start;
  justify-content: start;
}

.attribute-button-text {
  display: inline-block;
  white-space: nowrap; /* Prevent text wrapping */
}

.attribute-button-wrapper {
  font-size: clamp(0.875rem, 0.8336rem + 0.1541vw, 1rem);
}

/* Active state styles */
[id^="attr-orientation-"]:focus {
  background-color: inherit !important;
  color: inherit !important;
  outline: none !important;
}

[id^="attr-orientation-"].active {
  background-color: #4F3621 !important; /* Green for left */
  color: white !important;
}

#attr-orientation-right-1.active {
  background-color: #4F3621 !important; /* Blue for right */
  color: white !important;
}

.sirka-button:not(.active):hover,
.elementor-button.sirka-button.active,
.sirka-osteni-button:not(.active):hover,
.elementor-button.sirka-osteni-button.active,
.delka-button:not(.active):hover,
.elementor-button.delka-button.active {
  background-color: #4F3621 !important;
  color: white !important;
}

.sirka-button:focus,
.sirka-osteni-button:focus,
.delka-button:focus {
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
}