/* ── MEDELOOP SHARED BUTTON SYSTEM ── */

/* Primary — slate filled */
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: #334155;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(51,65,85,0.25);
  white-space: nowrap;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn-primary:hover {
  background: #1e293b;
  box-shadow: 0 6px 20px rgba(51,65,85,0.35);
  transform: translateY(-1px);
}

/* Ghost — transparent, navy border, for light backgrounds */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: transparent;
  color: var(--navy, #0C3651);
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1.5px solid rgba(12,54,81,0.25);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-ghost:hover {
  background: rgba(12,54,81,0.05);
  border-color: rgba(12,54,81,0.4);
  transform: translateY(-1px);
}

/* Ghost White — transparent, white border, for dark backgrounds */
.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,0.35);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.65);
}

/* Secondary — light slate border, for paired CTAs on light backgrounds */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 32px;
  background: transparent;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1.5px solid #CBD5E1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn-secondary:hover {
  border-color: #334155;
  color: #1e293b;
  transform: translateY(-1px);
}

/* Paper — outline teal, for whitepaper/read links on light backgrounds */
.btn-paper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #F8FAFC;
  color: #476380;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid #CBD5E1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.btn-paper:hover {
  border-color: #0891B2;
  color: #0891B2;
}

/* Paper Dark — outline teal on dark/teal section backgrounds */
.btn-paper-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #ffffff;
  color: #0891B2;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid rgba(8,145,178,0.25);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-paper-dark:hover {
  border-color: #0891B2;
  box-shadow: 0 4px 12px rgba(8,145,178,0.15);
}

/* Paper Navy — variant used on teal-bg dark sections */
.btn-paper-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #ffffff;
  color: #0F766E;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid rgba(15,118,110,0.25);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-paper-navy:hover {
  border-color: #0F766E;
  box-shadow: 0 4px 12px rgba(15,118,110,0.15);
}

/* Whitepaper CTA — on dark navy section backgrounds */
.btn-whitepaper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: rgba(8,145,178,0.08);
  color: #38BDF8;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1.5px solid rgba(8,145,178,0.4);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-whitepaper:hover {
  background: rgba(8,145,178,0.16);
  border-color: rgba(8,145,178,0.7);
}

/* Size modifiers */
.btn-sm { padding: 8px 18px !important; font-size: 13px !important; }

/* Hover-only helpers for inline-styled buttons */
.btn-dark {
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn-dark:hover {
  background: #0a2a3d !important;
  box-shadow: 0 6px 20px rgba(12,54,81,0.3) !important;
  transform: translateY(-1px);
}
.btn-outline-dark {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-outline-dark:hover {
  background: rgba(12,54,81,0.05) !important;
  border-color: rgba(12,54,81,0.4) !important;
  transform: translateY(-1px);
}