/* Smart Auto‑Mix button state */

.dxl-smart-auto-mix-btn {
  min-width: 120px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #c89b6a;
  background: radial-gradient(circle at 30% 0%, #f3e7d2 0%, #7b4f3c 45%, #2b1f1a 100%);
  color: #1b120e;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(200,155,106,0.8),
    inset 0 0 4px rgba(0,0,0,0.6);
  transition: box-shadow 0.15s ease, transform 0.08s ease, filter 0.15s ease;
}

.dxl-smart-auto-mix-btn:hover {
  filter: brightness(1.05);
  box-shadow:
    0 0 14px rgba(200,155,106,0.95),
    inset 0 0 4px rgba(0,0,0,0.7);
}

.dxl-smart-auto-mix-btn:active {
  transform: translateY(1px);
}

.dxl-smart-auto-mix-btn.dxl-smart-auto-mix-active {
  border-color: #f7d9a0;
  box-shadow:
    0 0 18px rgba(247,217,160,0.95),
    inset 0 0 5px rgba(0,0,0,0.75);
}
#dxl-smart-mix-modes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.dxl-mix-mode-btn {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: #3a2b1f;
  color: #f5e3c3;
  border: 1px solid #b08a5b;
  border-radius: 6px;
  cursor: pointer;
  transition: 120ms ease-out;
}

.dxl-mix-mode-btn:hover {
  background: #4a3a2a;
  transform: translateY(-1px);
}

.dxl-mix-mode-btn.active {
  background: #b08a5b;
  color: #1b1814;
  border-color: #d7c967;
  box-shadow: 0 0 6px rgba(215, 201, 103, 0.6);
}
#dxl-smart-mix-modes {
  display: flex;
  justify-content: center;
  gap: 12px;

  /* ⭐ Add spacing below Smart Auto‑Mix button */
  margin-top: 16px;   
}
#dxl-smart-mix-modes {
  display: flex;
  justify-content: center;
  gap: 12px;

  /* ⭐ Proper spacing below Smart Auto-Mix button */
  margin-top: 16px;

  /* ⭐ Prevent touching other elements */
  padding-bottom: 6px;
}