/* button-modern.css */
/* modern restyle of button.css – overrides only button rules */

.button, button {
  background: linear-gradient(135deg, #3a8ef6, #0056d8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 86, 216, 0.25);
}

.button:hover, button:hover {
  background: linear-gradient(135deg, #4c9dfc, #1a66e8);
  box-shadow: 0 4px 10px rgba(0, 86, 216, 0.35);
}

.button:active, button:active {
  background: #0048b3;
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.button--tertiary {
  background: linear-gradient(135deg, #2bb3a3, #00897b);
  border: none;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 137, 123, 0.25);
}

.button--tertiary:hover {
  background: linear-gradient(135deg, #33cbb8, #00a08d);
}

.button--ghost {
  background: transparent;
  border: 2px solid #3a8ef6;
  color: #3a8ef6;
  border-radius: 8px;
  font-weight: 500;
}

.button--ghost:hover {
  background: #3a8ef6;
  color: #fff;
  box-shadow: 0 2px 6px rgba(58, 142, 246, 0.3);
}

.button--darkgray {
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  border: none;
  color: #2c3e50;
}

.button--darkgray:hover {
  background: linear-gradient(135deg, #f1f3f5, #e0e5e9);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.button--small {
  padding: 6px 12px;
  font-size: 0.875rem;
  border-radius: 6px;
}

.button--disabled,
.button:disabled {
  background: #ccd4db !important;
  color: #7a8691 !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* optional ripple animation for modern look */
.button::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.4);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.button:active::after {
  transform: scale(3);
  opacity: 0;
}