/* Modern styling for the Create New Topic button */
#create-topic-button,
button.button.is-primary {
  background: linear-gradient(135deg, #6e8efb, #a777e3) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

#create-topic-button:before,
button.button.is-primary:before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #a777e3, #6e8efb) !important;
  opacity: 0 !important;
  z-index: -1 !important;
  transition: opacity 0.3s ease !important;
}

#create-topic-button:hover,
button.button.is-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

#create-topic-button:hover:before,
button.button.is-primary:hover:before {
  opacity: 1 !important;
}

#create-topic-button:active,
button.button.is-primary:active {
  transform: translateY(1px) !important;
  box-shadow: 0 3px 6px rgba(50, 50, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Style for the plus icon */
#create-topic-button .icon,
button.button.is-primary .icon {
  margin-right: 6px !important;
}

#create-topic-button .fa-plus,
button.button.is-primary .fa-plus {
  font-size: 0.9em !important;
}