/*
 * 5UWebsite.com — Bottom CTA "Get a 5U Website Consultation"
 * The legacy site shipped two markup variants (desktop with QR, mobile with link).
 * Here we ship both, each shown via @media. The classes
 *    .bottom-cta--desktop  -> visible at >= md (768px+)
 *    .bottom-cta--mobile   -> visible at <  md
 * mirror the legacy `sppb-hidden-sm sppb-hidden-xs` and
 * `sppb-hidden-xl sppb-hidden-lg sppb-hidden-md` classes.
 *
 * Source: legacy section-id-1589326037425/426 inline styles in FAQ source HTML.
 *
 * Depends on: tokens.css, base.css
 */

.bottom-cta {
  background: var(--color-bg-cta-blue);
  color: #fff;
  padding: var(--space-section-y-sm) 0;   /* 60px top/bottom desktop */
}

.bottom-cta a { color: #fff; }
.bottom-cta a:hover { color: #fff; opacity: 0.9; }

/* ============ Desktop variant (default, hide on <md) ============ */
.bottom-cta--desktop { display: block; }
.bottom-cta--mobile  { display: none; padding: var(--space-section-y-xs) 0; }

@media (max-width: 991.98px) {
  .bottom-cta--desktop { display: none; }
  .bottom-cta--mobile  { display: block; }
}

/* ============ Desktop layout — 2 columns ============ */
.bottom-cta--desktop .bottom-cta__inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
}
.bottom-cta__left,
.bottom-cta__right {
  margin-top: 20px;
  margin-right: 0;
  flex: 0 0 auto;
}
.bottom-cta__right { text-align: center; max-width: 230px; }

.bottom-cta__left h2,
.bottom-cta__wechat-heading {
  font-family: "Noto Sans SC", "Montserrat", var(--font-sans);
  font-size: var(--fs-cta-h2);
  font-weight: 700;
  color: #fff;
  line-height: var(--lh-cta-h2);
  margin-top: 0;
  margin-bottom: 8px;
  text-align: left;
}
.bottom-cta__wechat-heading { text-align: center; margin-top: 0; }

.bottom-cta__btn {
  width: 70%;
  text-align: center;
  margin: 12px 0;
  padding: 2px 20px;
  border: 2px solid #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-cta-line);
  font-family: "Noto Sans SC", var(--font-sans);
  font-weight: 500;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: #fff;
  transition: background var(--transition-med), color var(--transition-med);
}
.bottom-cta__btn svg {
  flex: 0 0 18px;
  margin-right: 4px;
}
.bottom-cta__btn:hover {
  background: #fff;
  color: var(--color-brand) !important;
}
.bottom-cta__btn:hover .bottom-cta__link,
.bottom-cta__btn:hover svg {
  color: var(--color-brand) !important;
}
.bottom-cta__link {
  color: #fff;
  font-weight: 500;
  flex: 1;
  text-align: left;
}

.bottom-cta__assurance {
  font-size: var(--fs-cta-line);
  font-family: "Noto Sans SC", var(--font-sans);
  font-weight: 500;
  color: #fff;
  line-height: 50px;
  margin: 8px 0 0;
}

/* WeChat right column */
.bottom-cta__wechat-icon {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.bottom-cta__wechat-icon svg { width: 34px; height: 34px; }
.bottom-cta__qr {
  display: block;
  margin: 16px auto 10px;
  width: 200px;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ============ Mobile variant ============ */
.bottom-cta--mobile h2 {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
}
.bottom-cta--mobile .bottom-cta__btn {
  width: 100%;
  margin: 12px auto;
}
.bottom-cta--mobile .bottom-cta__assurance {
  font-size: 18px;
  line-height: 32px;
  text-align: center;
}
.bottom-cta__buttonrow {
  margin-top: 20px;
  text-align: center;
}
.bottom-cta__buttonrow .btn {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 24px;
  width: 182px;
}
.bottom-cta__buttonrow .btn:hover {
  background: #fff;
  color: var(--color-brand);
}

@media (max-width: 575.98px) {
  .bottom-cta--mobile { padding: 30px 0; }
}