/* ============================================================
   Site Footer — SMSACTIVE
   Self-contained component: include this file + footer.html's
   markup wherever the footer should appear.
   Mirrors the header's floating-pill bar treatment for consistency.
   ============================================================ */

.site-footer{
  --footer-pill-bg:#0d3322;
  --footer-border:rgba(255,255,255,.10);
  --footer-text:#ffffff;
  --footer-text-soft:#bfe0cf;

  padding:14px 16px 6px;
}

.site-footer__bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  row-gap:10px;
  background:var(--footer-pill-bg);
  border:1px solid var(--footer-border);
  border-radius:20px;
  padding:18px 22px;
  box-shadow:0 10px 26px -16px rgba(11,27,61,.5);
  max-width:1650px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Brand ---------- */
.site-footer__brand{
  display:flex;
  align-items:center;
  gap:1px;
  text-decoration:none;
  flex:0 0 auto;
}
.site-footer__logo{
  height:44px;
  width:44px;
  display:block;
  flex:0 0 auto;
}
.site-footer__wordmark{
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:700;
  letter-spacing:.1px;
  white-space:nowrap;
}
.site-footer__wordmark-sms{color:#ffffff;}
.site-footer__wordmark-active{color:#1cb426;}

/* ---------- Nav ---------- */
.site-footer__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  gap:6px;
  flex-wrap:wrap;
}
.site-footer__link{
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  color:var(--footer-text-soft);
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.site-footer__link:hover{
  background:rgba(255,255,255,.1);
  color:var(--footer-text);
}

/* ---------- Social ---------- */
.site-footer__social{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.site-footer__social-divider{
  width:1px;
  height:22px;
  background:rgba(255,255,255,.14);
  flex-shrink:0;
}
.site-footer__social-label{
  font-size:12.5px;
  font-weight:500;
  color:var(--footer-text-soft);
  white-space:nowrap;
}
.site-footer__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:#097f17;
  border-radius:50%;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
  transition:transform .16s ease, box-shadow .16s ease;
}
.site-footer__social-link svg{width:20px;height:20px;}
.site-footer__social-link:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px -4px rgba(0,0,0,.45);
}

/* ---------- Payment badges ---------- */
/* flex-basis:100% forces this onto its own row directly under the
   brand/nav/social row above (same breaker technique used elsewhere in
   this site), regardless of how much space that row has left. */
.site-footer__badges{
  flex-basis:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:6px;
  padding-top:16px;
  border-top:1px solid var(--footer-border);
}
/* The badge artwork (PAY WITH.../VISA/PayPal) is drawn in green, made
   for sitting on a light surface — on this dark green bar it'd blend
   in almost invisibly. Recoloring pure white via filter (rather than
   adding a background chip behind each one) keeps them legible without
   introducing any background at all. */
.site-footer__badges a{display:block;line-height:0;transition:transform .16s ease, opacity .16s ease;}
.site-footer__badges a:hover{transform:translateY(-2px);opacity:.85;}
.site-footer__badge{height:64px;width:auto;display:block;filter:brightness(0) invert(1);}

/* ---------- Legal bar ---------- */
/* Full-bleed band under the footer card — deliberately its own
   sibling outside .site-footer's padding (not nested inside the pill)
   so it can run edge-to-edge like a real "bottom of the site" strip,
   subtly distinct in tone from the page background above it. */
.site-footer__legal{
  text-align:center;
  padding:24px 16px 28px;
  border-top:1px solid #e6e9ec;
  background:#fbfdfc;
}
.site-footer__legal-brand{
  margin:0 0 10px;
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:800;
  letter-spacing:.02em;
}
.site-footer__legal-brand-sms{color:#0f3d28;}
.site-footer__legal-brand-active{color:#1cb426;}
.site-footer__legal-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.site-footer__legal-copy{
  margin:0;
  font-size:12.5px;
  color:#6b8577;
}
.site-footer__legal-divider{
  width:3px;height:3px;
  border-radius:50%;
  background:#c3d5cc;
  flex-shrink:0;
}
.site-footer__legal-email{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12.5px;
}
.site-footer__legal-email svg{width:13px;height:13px;color:#1f7a52;flex-shrink:0;}
.site-footer__legal-since{
  margin:8px 0 0;
  font-size:11px;
  color:#9fb3a9;
  letter-spacing:.02em;
}
.site-footer__legal-email a{
  color:#1f7a52;
  text-decoration:none;
  font-weight:600;
}
.site-footer__legal-email a:hover{text-decoration:underline;}
@media (max-width:480px){
  .site-footer__legal-divider{display:none;}
  .site-footer__legal-row{flex-direction:column;gap:4px;}
}

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .site-footer{padding:12px 12px 6px;}
  .site-footer__bar{
    flex-direction:column;
    gap:18px;
    padding:26px 20px;
    border-radius:20px;
  }
  .site-footer__badges{gap:22px;}
  .site-footer__badge{height:52px;}
}