/**
 * Shared bottom "Join for Free" band — auth-join-banner partial.
 * Used on cashback store, per-store sell GC, etc. Variables live on .cs-cb-bottom-signup
 * so pages without .cs-cb-hero still get a blue Join with Email CTA.
 */
.cs-cb-bottom-signup {
  --cs-cb-blue: #1677ff;
  --cs-cb-blue-hover: #0f63d8;
  --cs-cb-ink: #15252c;
  --cs-cb-muted: #5a6f78;
  margin: 36px 0 12px;
  padding: 40px 0 48px;
  background: #050a14;
  border-radius: 14px;
}

.cs-cb-bottom-signup__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 32px 24px;
  background: #fff;
  border: 1px solid rgba(77, 179, 255, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(5, 10, 20, 0.22);
}

.cs-cb-bottom-signup .banner_form,
.cs-cb-bottom-signup .cs-auth-banner {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
  text-align: center;
}

.cs-cb-bottom-signup .banner_form h4,
.cs-cb-bottom-signup .cs-auth-banner h4 {
  margin: 0 0 12px;
  font-family: Montserrat, Poppins, "Segoe UI", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--cs-cb-ink);
  text-align: center;
  line-height: 1.25;
}

.cs-cb-bottom-signup .cs-auth-banner-sub {
  margin: -4px 0 16px !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 500;
  color: var(--cs-cb-muted) !important;
  text-align: center;
  line-height: 1.45;
}

.cs-cb-bottom-signup .banner_form .form-control,
.cs-cb-bottom-signup .cs-auth-banner .form-control {
  border-radius: 8px;
  border: 1px solid #d5e0e6;
  min-height: 48px;
  margin-bottom: 12px;
  font-size: 15px;
  text-align: left;
}

.cs-cb-bottom-signup .banner_form .btn.btn_email,
.cs-cb-bottom-signup .cs-auth-banner .btn.btn_email,
.cs-cb-bottom-signup .banner_form button.btn_email,
.cs-cb-bottom-signup .cs-auth-banner button.btn_email {
  width: 100%;
  border-radius: 8px;
  min-height: 48px;
  background: var(--cs-cb-blue) !important;
  background-image: none !important;
  border: 1px solid var(--cs-cb-blue) !important;
  border-color: var(--cs-cb-blue) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  box-shadow: none !important;
}

.cs-cb-bottom-signup .banner_form .btn.btn_email:hover,
.cs-cb-bottom-signup .cs-auth-banner .btn.btn_email:hover,
.cs-cb-bottom-signup .banner_form .btn.btn_email:focus,
.cs-cb-bottom-signup .cs-auth-banner .btn.btn_email:focus,
.cs-cb-bottom-signup .banner_form button.btn_email:hover,
.cs-cb-bottom-signup .cs-auth-banner button.btn_email:hover {
  background: var(--cs-cb-blue-hover) !important;
  border-color: var(--cs-cb-blue-hover) !important;
  color: #fff !important;
}

.cs-cb-bottom-signup .banner_form h6,
.cs-cb-bottom-signup .cs-auth-banner h6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
  padding: 0;
  text-align: center;
  color: #8a9aaa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.cs-cb-bottom-signup .banner_form h6::before,
.cs-cb-bottom-signup .cs-auth-banner h6::before,
.cs-cb-bottom-signup .banner_form h6::after,
.cs-cb-bottom-signup .cs-auth-banner h6::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px solid #dde5ea;
}

.cs-cb-bottom-signup .cs-sso-buttons {
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-cb-bottom-signup .cs-sso-btn {
  border-radius: 8px;
}

.cs-cb-bottom-signup .banner_form > p,
.cs-cb-bottom-signup .cs-auth-banner > p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--cs-cb-muted);
  margin: 14px 0 0 !important;
  padding: 0;
  text-align: center;
}

.cs-cb-bottom-signup .banner_form > p + p,
.cs-cb-bottom-signup .cs-auth-banner > p + p {
  margin-top: 8px !important;
}

.cs-cb-bottom-signup .cs-auth-banner > p a,
.cs-cb-bottom-signup .banner_form > p .linkcolor {
  color: var(--cs-cb-blue) !important;
  font-weight: 600;
}

@media (max-width: 767px) {
  .cs-cb-bottom-signup {
    padding: 32px 0 40px;
    border-radius: 0;
  }

  .cs-cb-bottom-signup__inner {
    padding: 22px 18px 20px;
  }

  .cs-cb-bottom-signup .banner_form h4,
  .cs-cb-bottom-signup .cs-auth-banner h4 {
    font-size: 22px;
  }
}