.btn,
.btn-primary,
.site-header-cta,
.home-hero-cta,
.therapy-hero-cta,
.animal-services-cta,
.cats-hero-cta,
.therapy-reasons-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1;
  box-shadow: var(--shadow-button);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

/* These CTA buttons need a fixed brand color, independent of legacy variables. */
.site-header-cta,
.home-hero-cta {
  background: #372e2d;
  border-color: #372e2d;
}

/* Home doctors section keeps its own brand treatment. */
.doctors-main-btn {
  background: #372e2d;
  border-color: transparent;
  color: #fff;
}

.doctors-main-btn:hover,
.doctors-main-btn:focus-visible {
  background: #f86076;
  border-color: transparent;
  color: #fff;
}

/* Consultation form CTA uses the earth-brown brand accent. */
.contact-section .contact-submit,
.contact-section .wpcf7-submit {
  background: #372e2d;
  border-color: #372e2d;
  color: #fff;
}

.contact-section .contact-submit:hover,
.contact-section .contact-submit:focus-visible,
.contact-section .wpcf7-submit:hover,
.contact-section .wpcf7-submit:focus-visible {
  background: #f86076;
  border-color: #f86076;
  color: #fff;
}

/* The appointment link inside home doctor cards uses the earth-brown accent. */
.doctors-section .doctor-btn {
  border-color: #372e2d;
  color: #372e2d;
}

.doctors-section .doctor-btn:hover,
.doctors-section .doctor-btn:focus-visible {
  border-color: #372e2d;
  color: #372e2d;
}

.btn:hover,
.btn-primary:hover,
.site-header-cta:hover,
.home-hero-cta:hover,
.therapy-hero-cta:hover,
.animal-services-cta:hover,
.cats-hero-cta:hover,
.therapy-reasons-cta-button:hover,
.btn:focus-visible,
.btn-primary:focus-visible,
.site-header-cta:focus-visible,
.home-hero-cta:focus-visible,
.therapy-hero-cta:focus-visible,
.animal-services-cta:focus-visible,
.cats-hero-cta:focus-visible,
.therapy-reasons-cta-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(55, 46, 45, 0.18);
}

.btn-outline,
.services-labs-tag {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--color-orange);
  background: var(--color-white);
  color: var(--color-orange);
  box-shadow: none;
  font-size: var(--font-size-base);
  font-weight: 400;
}

.btn-regular {
  font-weight: 400;
}

.btn-strong {
  font-weight: 600;
}

.btn-soft,
.btn-teal,
.services-diagnostics-promo-btn {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-orange {
  background: var(--color-orange);
  color: var(--color-white);
}

.home-hero-cta-icon,
.therapy-hero-cta-icon,
.animal-services-cta-icon,
.cats-hero-cta-icon,
.therapy-reasons-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: currentColor;
}

@media (max-width: 768px) {
  .home-hero-cta,
  .therapy-hero-cta,
  .animal-services-cta,
  .cats-hero-cta,
  .therapy-reasons-cta-button,
  .site-header-cta,
  .services-diagnostics-promo-btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* Compact CTA arrows */
.home-hero-cta-icon,
.cats-hero-cta-icon {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
  line-height: 1;
}

.home-hero-cta-icon {
  font-size: 18px;
}

.cats-hero-cta-icon {
  width: 16px;
  height: 16px;
}

/* Keep the homepage doctors CTA independent from the shared teal button utility. */
.doctors-main-btn {
  background: #372e2d;
  border-color: transparent;
  color: #fff;
}

.doctors-main-btn:hover,
.doctors-main-btn:focus-visible {
  background: #f86076;
  border-color: transparent;
  color: #fff;
}