/* Button component styles for Finby Theme */
.btn-primary {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Primary-blue-500);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--Primary-blue-600);
  box-shadow: var(--box-shadow-hover);
  color: var(--Basic-White);
}

.btn-primary-small {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Primary-blue-500);
  box-shadow: var(--box-shadow);
  color: var(--Basic-White);
  cursor: pointer;
}

.btn-primary-small:hover {
  background: var(--Primary-blue-600);
  box-shadow: var(--box-shadow-hover);
  color: var(--Basic-White);
}

.btn-primary-with-icon {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Primary-blue-500);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

.btn-primary-with-icon:hover {
  background: var(--Primary-blue-600);
  box-shadow: var(--box-shadow-hover);
  color: var(--Basic-White);
}

.btn-primary-small-with-icon {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Primary-blue-500);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

.btn-primary-small-with-icon:hover {
  background: var(--Primary-blue-600);
  box-shadow: var(--box-shadow-hover);
  color: var(--Basic-White);
}

.btn-primary-invert {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  color: var(--Primary-blue-400);
  text-decoration: underline;
  cursor: pointer;
}

.btn-primary-invert:hover {
  box-shadow: var(--box-shadow-hover);
}

.btn-primary-invert-small {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Basic-White);
  box-shadow: var(--box-shadow);
  color: var(--Primary-blue-500);
  cursor: pointer;
}

.btn-primary-invert-small:hover {
  box-shadow: var(--box-shadow-hover);
}

.btn-primary-invert-with-icon {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Basic-White);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

.btn-primary-invert-with-icon:hover {
  box-shadow: var(--box-shadow-hover);
}

.btn-primary-invert-small-with-icon {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--Basic-White);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

.btn-primary-invert-small-with-icon:hover {
  box-shadow: var(--box-shadow-hover);
}

.btn-secondary {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--secondary-bg);
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--secondary-bg-hover);
  color: var(--Basic-White);
}

.btn-secondary-small {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--secondary-bg);
  color: var(--Basic-White);
  cursor: pointer;
}

.btn-secondary-small:hover {
  background: var(--secondary-bg-hover);
  color: var(--Basic-White);
}

.btn-secondary-with-icon {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--secondary-bg);
  cursor: pointer;
}

.btn-secondary-with-icon:hover {
  background: var(--secondary-bg-hover);
}

.btn-secondary-small-with-icon {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  background: var(--secondary-bg);
  color: #fff;
  cursor: pointer;
}

.btn-secondary-small-with-icon:hover {
  background: var(--secondary-bg-hover);
}

.btn-link {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  color: var(--Link-color);
}

.btn-link:hover {
  color: var(--Link-hover-color);
}

.btn-link-small {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--Link-color);
  cursor: pointer;
}

.btn-link-small:hover {
  color: var(--Link-hover-color);
}

.btn-link-with-icon {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--Link-color);
}

.btn-link-with-icon:hover {
  color: var(--Link-hover-color);
}

.btn-link-small-with-icon {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--Link-color);
}

.btn-link-small-with-icon:hover {
  color: var(--Link-hover-color);
}
.group-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
p {
  color: var(--Basic-White);
  text-decoration: none;
  font-family: var(--font-family-poppins);
  line-height: var(--line-height-150);
}

.coming-soon-button {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-18);
  background: var(--Gray-300);
  padding: 0.5rem;
  border-radius: var(--border-radius);
  cursor: not-allowed;
}
@media (min-width: 767px) {
  .group-buttons {
    justify-content: flex-start;
  }
}