/* ───────── Footer Base ───────── */
.site-footer {
  background: #111;
  color: #eee;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow: hidden;
}
.footer-feature-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1rem 0.25rem;
}
.feature {
  display:flex; align-items:flex-start; gap:.75rem;
  background:#0d0d0d; border:1px solid #1f1f1f; border-radius:10px;
  padding:.9rem 1rem;
}
.feat-icon { width:40px; height:40px; display:grid; place-items:center; background:#1a1a1a; border-radius:8px; }
.feat-icon i { color:#ffb703; font-size:1.05rem; }
.feat-title { font-weight:700; color:#ffb703; }
.feat-text { opacity:.85; font-size:.9rem; }

@media (max-width: 900px) {
  .footer-feature-bar { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .footer-feature-bar { grid-template-columns: 1fr; }
}


/* Fade + slide reveal on load */
@keyframes footerSlideIn {
  0%   { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0);    }
}
.site-footer { animation: footerSlideIn 0.7s ease-out; }

/* ───────── Layout shell ───────── */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;          /* keeps whole block centred */
}

.footer-brand { flex: 1 1 240px; text-align: center; }

.logo   { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; }
.tagline{ margin-bottom: 1.2rem; font-style: italic; opacity: 0.85; }

/* ───────── Social Icons ───────── */
.social-links {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.social-links a {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1e1e1e;
  transition: transform 0.25s, background 0.25s;
  text-decoration: none;
}
.social-links a i   { font-size: 1.25rem; color: #ffb703; }
.social-links a svg { width: 1.25rem; height: 1.25rem; color: #ffb703; }
.social-links a:hover       { transform: translateY(-3px) scale(1.07); background:#ffb703; }
.social-links a:hover   svg,
.social-links a:hover   i     { color:#111; }

/* ───────── Link Columns – auto‑responsive Grid ───────── */
.footer-links {
  /* Each column must stay at least 200 px wide; grid wraps otherwise */
  --minCol: 200px;
  display: grid;
  gap: 2rem 3rem;                          /* row gap / column gap     */
  grid-template-columns: repeat(auto-fit, minmax(var(--minCol), 1fr));
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.footer-grid { max-width: 100%; gap: 1.5rem 2.5rem; }

/* ▼▼  NEW BREAKPOINT  ▼▼
   When viewport < 737 px, stack the columns vertically            */
@media (max-width: 736px) {
  .footer-links { grid-template-columns: 1fr; }
}

/* remove bullets, tidy spacing */
.link-col ul      { list-style:none; padding:0; margin:0; }
.link-col ul li   { margin-bottom:0.45rem; }

.link-col h3 {
  font-size:1.05rem;
  margin-bottom:0.75rem;
  letter-spacing:0.3px;
}

.link-col a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
  transition:opacity 0.2s, color 0.2s;
}
.link-col a:hover { opacity:1; color:#ffb703; }

/* ───────── Bottom Bar ───────── */
.footer-bottom {
  border-top: 1px solid #222;
  text-align: center;
  padding: 1.1rem 1rem;
  font-size: 0.85rem;
  background: #0d0d0d;
}

/* Payments */
.footer-payments { max-width:1200px; margin:0 auto; padding: 0.5rem 1rem 1.5rem; }
.footer-payments h4 { margin:0 0 .5rem 0; font-size:1rem; color:#ffb703; }
.payments { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.pay-badge { background:#0d0d0d; border:1px solid #1f1f1f; color:#ddd; padding:.35rem .6rem; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.pay-logo { height:24px; width:auto; display:block; filter: saturate(0.9) brightness(1.1); }

/* ───────── Tiny‑phone tweaks (≤ 420 px) ───────── */
@media (max-width: 420px) {
  .footer-inner { padding: 2rem 1rem; }

  /* icons a bit smaller */
  .social-links { gap: 0.6rem; }
  .social-links a { width: 34px; }
}