/* ════════════════════════════════════════════════════════════
   Shared course CTA — visual source of truth for all 10
   course landing-page primary buttons.

   Apply by giving the anchor `class="mf-course-cta"`. Matches
   the dark rounded button in the design reference and the
   auto-injected paygate bundle button below it.
   ════════════════════════════════════════════════════════════ */

.mf-course-cta,
a.mf-course-cta,
button.mf-course-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 36px;
  border: 1px solid #3a322b;
  border-radius: 20px;
  background: #3a322b;
  color: #fdfaf3;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(22, 18, 15, 0.18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mf-course-cta:hover,
.mf-course-cta:focus-visible {
  background: #2a241f;
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(22, 18, 15, 0.24);
  outline: none;
}

.mf-course-cta:active { transform: translateY(0); }

.mf-course-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.mf-course-cta:hover svg { transform: translateX(3px); }

@media (max-width: 520px) {
  .mf-course-cta {
    padding: 20px 24px;
    font-size: 13.5px;
    letter-spacing: 0.16em;
  }
}

/* Auto-injected paygate bundle CTA: re-style to match the design ref
   (rounded-rect, full width, same dark fill as primary). The bundle
   element is created in paygate.js with [data-paygate-bundle]. */
[data-paygate-bundle] {
  margin-top: 22px !important;
  width: 100%;
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-paygate-bundle] [data-paygate-bundle-btn] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 22px 28px !important;
  border-radius: 20px !important;
  border: 1px solid #3a322b !important;
  background: #3a322b !important;
  color: #fdfaf3 !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  text-align: center !important;
  box-shadow: 0 14px 40px rgba(22, 18, 15, 0.18) !important;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

[data-paygate-bundle] [data-paygate-bundle-btn]:hover {
  background: #2a241f !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(22, 18, 15, 0.24) !important;
}