/* Clerk Sign In Button Styles */
.clerk-sign-in-wrapper button,
.clerk-sign-in-wrapper .cl-button,
.clerk-sign-in-wrapper [class*="cl-button"] {
  padding: 0.625rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: white !important;
  background: linear-gradient(to right, #4F46E5, #7C3AED) !important;
  border-radius: 0.5rem !important;
  border: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  outline: none !important;
}

.clerk-sign-in-wrapper button:hover,
.clerk-sign-in-wrapper .cl-button:hover,
.clerk-sign-in-wrapper [class*="cl-button"]:hover {
  background: linear-gradient(to right, #7C3AED, #4F46E5) !important;
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.5), 0 4px 6px -2px rgba(79, 70, 229, 0.3) !important;
  transform: scale(1.05) !important;
}

.clerk-sign-in-wrapper button:focus,
.clerk-sign-in-wrapper .cl-button:focus,
.clerk-sign-in-wrapper [class*="cl-button"]:focus {
  outline: 2px solid #4F46E5 !important;
  outline-offset: 2px !important;
}

/* Clerk Sign Up Button Styles */
.clerk-sign-up-wrapper button,
.clerk-sign-up-wrapper .cl-button,
.clerk-sign-up-wrapper [class*="cl-button"] {
  padding: 0.625rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: white !important;
  background: linear-gradient(to right, #7C3AED, #00ff99) !important;
  border-radius: 0.5rem !important;
  border: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  outline: none !important;
}

.clerk-sign-up-wrapper button:hover,
.clerk-sign-up-wrapper .cl-button:hover,
.clerk-sign-up-wrapper [class*="cl-button"]:hover {
  background: linear-gradient(to right, #00ff99, #7C3AED) !important;
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.5), 0 4px 6px -2px rgba(124, 58, 237, 0.3) !important;
  transform: scale(1.05) !important;
}

.clerk-sign-up-wrapper button:focus,
.clerk-sign-up-wrapper .cl-button:focus,
.clerk-sign-up-wrapper [class*="cl-button"]:focus {
  outline: 2px solid #7C3AED !important;
  outline-offset: 2px !important;
}

/* Clerk User Button - Make it bigger */
.clerk-user-button-wrapper .cl-userButtonBox,
.clerk-user-button-wrapper .cl-userButtonTrigger,
.clerk-user-button-wrapper .cl-avatarBox,
.clerk-user-button-wrapper .cl-avatarImage,
.clerk-user-button-wrapper [class*="userButtonBox"],
.clerk-user-button-wrapper [class*="userButtonTrigger"],
.clerk-user-button-wrapper [class*="avatarBox"],
.clerk-user-button-wrapper [class*="avatarImage"] {
  width: 3.5rem !important;
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  min-height: 3.5rem !important;
}

.clerk-user-button-wrapper .cl-userButtonTrigger,
.clerk-user-button-wrapper [class*="userButtonTrigger"] {
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.clerk-user-button-wrapper .cl-userButtonTrigger:hover,
.clerk-user-button-wrapper [class*="userButtonTrigger"]:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
}