/* Button Component Styles */
:root {
  --link-hover: rgba(28, 112, 110, 255);
  --disabled: rgba(0, 0, 0, 0.1);
  --disabled-text: rgba(0, 0, 0, 0.4);
  --ghost-text: rgba(159, 159, 159, 255);
  --black: rgba(0, 0, 0, 255);
  --primary-dark: rgba(44, 126, 117, 255);
  --white: rgba(255, 255, 255, 255);
}

/* Base Button Styles */
.btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 0.875rem 1.5rem;
  border-radius: 100px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  text-decoration: none;
  margin-bottom: 1.5rem;
  white-space: nowrap;
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(90.00deg, rgba(107, 185, 163, 1), rgba(73, 163, 149, 1) 45%, rgba(56, 149, 141, 1) 100%);
  color: var(--white);
  flex: 0.7;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

/* Secondary Button */
.btn-secondary {
  background: var(--white);
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex: 1.7;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Button Icon */
.btn-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Button Text */
.btn-text {
  font-weight: 300;
}

/* Button Group */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}