/* wrapper is optional, helps scope styles */
.action-button-wrap { padding: 6px 0; }

/* base style for Shiny actionButtons */
.action-button-wrap .btn.action-button {
  font-size: 17px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 9999px !important;     /* full pill */
  border-width: 2px;
  border-color: transparent;
  transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

/* keep default colours for btn-primary, just polish the states */
.action-button-wrap .btn.action-button.btn-primary {
  color: #fff;                           /* ensure contrast */
}

/* hover */
.action-button-wrap .btn.action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* focus (keyboard) */
.action-button-wrap .btn.action-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,.35);  /* focus ring */
}

/* active/pressed */
.action-button-wrap .btn.action-button:active,
.action-button-wrap .btn.action-button.active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
}

/* disabled */
.action-button-wrap .btn.action-button:disabled,
.action-button-wrap .btn.action-button.disabled {
  opacity: .55;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* spacing between consecutive buttons */
.action-button-wrap .btn.action-button + .btn.action-button {
  margin-left: 10px;
}

/* optional: nicer icon spacing if you use <i> or shiny::icon() */
.action-button-wrap .btn.action-button i {
  margin-right: 8px;
}