/* =========================================
   GLOBAL BUTTONS — Your Care Solutions
   Loaded site-wide. Use .btn + a variant on any <a> or <button>.

   Variants:
     .btn--primary   solid brand blue, white text (main CTA, any background)
     .btn--on-dark    white bg, dark teal text (secondary button on dark/teal sections)
     .btn--outline    transparent + light border, white text (tertiary, dark sections)
   ========================================= */

.btn {
  --btn-teal:      #0c6e62;
  --btn-teal-dark: #084a42;
  --btn-blue:      #29AAE2;
  --btn-blue-dark: #1f7faa;
  --btn-font:      "Poppins", "Segoe UI", system-ui, sans-serif;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--btn-font);
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

/* ---- Primary: solid brand blue, white text ---- */
.btn--primary {
  background: var(--btn-blue);
  color: #ffffff;
}
.btn--primary:hover { background: var(--btn-blue-dark); color: #ffffff; }

/* ---- On dark: white bg, teal text (secondary button on dark/teal sections) ---- */
.btn--on-dark {
  background: #ffffff;
  color: var(--btn-teal-dark);
}
.btn--on-dark:hover { background: var(--btn-blue); color: #ffffff; }

/* ---- Outline: transparent + light border, white text (tertiary, dark sections) ---- */
.btn--outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* ---- Small ---- */
.btn--sm {
  font-size: 0.875rem;
  padding: 0.7rem 1.25rem;
}

/* ---- Full width ---- */
.btn--full {
  width: 100%;
  justify-content: center;
}