/* Universal Button System */
.btn-diy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 14px;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.btn-diy:hover {
  text-decoration: none !important;
  transform: translateY(-2px);
}

/* Red CTA Button */
.btn-diy--red {
  background: #dd1f44;
  color: #fff !important;
  border-color: #dd1f44;
  box-shadow: 0 4px 20px rgba(221, 31, 68, 0.3);
}
.btn-diy--red:hover {
  color: #fff !important;
  filter: brightness(0.95);
  box-shadow: 0 8px 30px rgba(221, 31, 68, 0.4);
}

/* Green CTA Button */
.btn-diy--green {
  background: #44bda0;
  color: #fff !important;
  border-color: #44bda0;
  box-shadow: 0 4px 20px rgba(68, 189, 160, 0.3);
}
.btn-diy--green:hover {
  color: #fff !important;
  filter: brightness(0.95);
  box-shadow: 0 8px 30px rgba(68, 189, 160, 0.4);
}

/* Outline Button (Green border) */
.btn-diy--outline {
  background: #fff;
  color: #44bda0 !important;
  border-color: #44bda0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.btn-diy--outline:hover {
  color: #44bda0 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  border-color: #dbe2ea;
}

/* White Button (for dark backgrounds) */
.btn-diy--white {
  background: #fff;
  color: #0f172a !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.btn-diy--white:hover {
  color: #0f172a !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}