/* footer.css */
.footer-bar {
  border-top: 1px solid rgba(255,255,255,0.1);
  background: var(--gn-bg-footer, transparent);
  padding-top: 12px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

.footer-links a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  margin-left: 10px;
  border-radius: 8px;
  padding: 2px 8px;
  transition: background 0.2s ease;
}

.footer-links a:hover {
  background: rgba(255,255,255,0.1);
}

/* Mobile layout */
@media (max-width: 576px) {
  .footer-bar .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-links {
    margin-top: 6px;
  }
}

/* Modal styles */
.gn-disclaimer-link {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin-left: 8px;
  border-radius: 8px;
  font: inherit;
  color: rgba(255,255,255,.9) !important;
  cursor: pointer;
}
.gn-disclaimer-link:hover { background: rgba(255,255,255,.08); }

.gn-modal[aria-hidden="true"] { display: none; }
.gn-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
}
.gn-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.gn-modal__dialog {
  position: relative;
  width: min(640px, 92vw);
  border-radius: 14px;
  background: #121821;
  color: #e9eef7;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.gn-modal__header, .gn-modal__footer {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gn-modal__footer {
  border-top: 1px solid rgba(255,255,255,.06);
  justify-content: flex-end;
}
.gn-modal__body {
  padding: 14px 16px;
  line-height: 1.6;
}
.gn-modal__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #aab7cf;
  font-size: 18px;
  cursor: pointer;
}
.gn-modal__close:hover { color: #fff; }

.gn-btn {
  border: 0;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.gn-btn.ghost {
  background: rgba(255,255,255,.08);
  color: #e9eef7;
}
.gn-btn.ghost:hover {
  background: rgba(255,255,255,.12);
}

@media (prefers-color-scheme: light) {
  .gn-modal__dialog { background: #fff; color:#0b1220; border-color: rgba(0,0,0,.08); }
  .gn-modal__header, .gn-modal__footer { border-color: rgba(0,0,0,.08); }
  .gn-disclaimer-link { color:#0b1220; }
  .gn-disclaimer-link:hover { background: rgba(0,0,0,.06); }
}



/* ===== Footer tune (works with your current markup) ===== */

/* Give the page some bottom padding so floating UI (install/share) or iOS bars
   don't overlap the footer text. */
body{
  /* space for bottom UI + iOS safe area */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Lift footer a bit and make it look like a neat pill/card */
footer.py-3.mt-4{
  margin-top: 40px;                 /* a bit more breathing room from content */
  margin-bottom: 16px;              /* keeps it off the very bottom edge */
}

footer.py-3.mt-4 > .container{
  max-width: 1180px;                /* you already use this width */
  margin: 0 auto;                   /* center it */
  padding: 12px 16px;               /* inner spacing */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.02);/* subtle card look; stays dark-mode friendly */
  backdrop-filter: blur(3px);       /* optional; harmless on browsers that ignore it */
}

/* Make the two <span> blocks align nicely on desktop */
footer.py-3.mt-4 > .container{
  align-items: center;
}

/* The right-side links already have .d-flex.gap-2; just let them wrap cleanly */
footer.py-3.mt-4 > .container .d-flex.gap-2{
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px){
  /* Pull footer slightly up and give side gutters */
  footer.py-3.mt-4{
    margin-top: 28px;
    margin-bottom: 12px;
  }
  footer.py-3.mt-4 > .container{
    /*margin: 0 12px;*/
    padding: 12px 14px;
    flex-direction: column;     /* stack lines */
    align-items: flex-start;    /* left align text & links */
    gap: 8px;
  }
  /* Slightly smaller links so they don't wrap awkwardly */
  footer.py-3.mt-4 > .container .d-flex.gap-2 a{
    font-size: 0.95rem;
  }
}

footer a {
  color: #b0b0b0;
  text-decoration: none;
  margin: 0 8px;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}


footer a {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 6px;
  transition: all 0.3s ease;
}

footer a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

footer a:hover {
  color: #00bcd4; /* or your theme color */
}

<!--Footer -->
<div id="footer-container"></div>

<script>
  fetch("footer.html")
    .then(response => response.text())
    .then(data => {
      document.getElementById("footer-container").innerHTML = data;
      const script = document.createElement("script");
      script.src = "js/footer.js";
      document.body.appendChild(script);
    });
</script>
<link rel="stylesheet" href="css/footer.css">
<!--Footer -->


/* Reserve a stable scrollbar gutter on desktop so left/right edges align */
html { scrollbar-gutter: stable; }   /* harmless on mobile, supported in modern browsers */

/* Shared layout tokens */
:root{
  --gutter: clamp(12px, 4vw, 24px);
  --content-max: 1180px; /* match your page content width */
}

/* Footer shell */
footer.footer-bar{
  padding: 16px 0;
  /* give room for your floating “Chat • Financial Goal” button */
  padding-bottom: 72px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Inner container aligns with the rest of the page */
footer.footer-bar .container{
  width: min(100% - (var(--gutter) * 2), var(--content-max));
  margin-inline: auto;   /* center it */
  padding-inline: 0;     /* the width calc above already includes gutters */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;       /* wraps neatly on small screens */
}

/* Links wrap without overlapping */
footer.footer-bar .footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Mobile tweaks: full-bleed safety + more space for the FAB */
@media (max-width: 576px){
  footer.footer-bar{
    padding-bottom: 88px;             /* extra space for the floating button */
  }
  footer.footer-bar .container{
    width: 100%;
    padding-inline: var(--gutter);     /* simple, symmetric padding on phones */
  }
}

/* iOS safe-area (notch) support — optional but nice */
@supports (padding: max(0px)){
  @media (max-width: 576px){
    footer.footer-bar{
      padding-left:  max(var(--gutter), env(safe-area-inset-left));
      padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
  }
}