/* =========================================================
   WTFE - footer.css
   Site footer + floating WhatsApp CTA. Intended to back a
   shared _Footer partial once ported to .NET Core (Razor Layout).
   Depends on tokens defined in variables.css.
   ========================================================= */

footer{
  background:linear-gradient(180deg,#ffffff 0%,var(--off-white) 100%);
  color:var(--charcoal);padding:84px 0 0;
  position:relative;overflow:hidden;
}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 88% 0%,rgba(228,33,41,.07),transparent 45%),
    linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:100% 100%,42px 42px,42px 42px;
  mask-image:radial-gradient(ellipse at 20% 0%,black 0%,transparent 65%);
}
footer::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--red-dark) 50%,var(--red));
}
footer .container{position:relative;z-index:1;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line);}
.foot-brand-name{color:var(--black);font-family:'Poppins',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.02em;margin-bottom:16px;}
.foot-brand-name span{color:var(--red);}
.foot-brand p{font-size:.9rem;line-height:1.7;max-width:280px;}
.brand-accent{color:var(--red);font-weight:700;}
footer h4{color:var(--black);font-size:1rem;margin-bottom:22px;}
footer ul li{margin-bottom:12px;}
footer ul li a{font-size:.9rem;position:relative;display:inline-block;padding-bottom:2px;transition:.3s;}
footer ul li a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:.3s;}
footer ul li a:hover{color:var(--red);}
footer ul li a:hover::after{width:100%;}
/* Customer Care highlight pill - new class, only used where explicitly
   added in page markup, so it has zero effect on pages that don't opt in. */
.foot-cta{margin-top:14px;margin-bottom:0;max-width:100%;}
.foot-cta a{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;font-weight:700;font-size:.78rem;padding:10px 16px;border-radius:50px;
  box-shadow:0 12px 26px -10px var(--red-glow);max-width:100%;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}
.foot-cta a::after{display:none;}
.foot-cta a:hover{color:#fff;transform:translateY(-3px) scale(1.03);box-shadow:0 16px 32px -8px var(--red-glow);}
.foot-cta-ic{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:pulse 2.4s infinite;}
.foot-cta-ic svg{width:11px;height:11px;stroke:#fff;flex-shrink:0;}

.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:28px 0;font-size:.85rem;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);}
.foot-bottom a{color:var(--black);font-weight:600;position:relative;display:inline-block;padding-bottom:2px;transition:.25s;}
.foot-bottom a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:.3s;}
.foot-bottom a:hover{color:var(--red);}
.foot-bottom a:hover::after{width:100%;}

.whatsapp-float{
  position:fixed;bottom:28px;right:28px;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-dark));display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 30px -8px var(--red-glow);z-index:900;animation:pulse 2.4s infinite;
}
.whatsapp-float svg{width:26px;height:26px;stroke:#fff;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(228,33,41,.5);}70%{box-shadow:0 0 0 18px rgba(228,33,41,0);}100%{box-shadow:0 0 0 0 rgba(228,33,41,0);}}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .foot-grid{grid-template-columns:1fr;gap:34px;}
}