/* ==========================================================================
   13 - فوتر
   اطلاعات تماس (آدرس، تلفن، اینستاگرام، واتساپ) در js/components/footer.js
   قابل ویرایش است. استایل آن اینجاست.
   ========================================================================== */

footer{background:var(--footer-bg); position:relative; padding-top:64px;}
footer::before{
  content:""; position:absolute; top:0; right:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--green), var(--lavender));
}

.footer-grid{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:32px; padding-bottom:40px;}
.footer-grid h4{font-size:14px; color:var(--text-heading); margin-bottom:16px;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul li a{font-size:14px; color:var(--text-muted); display:inline-flex; align-items:center; gap:8px;}
.footer-grid ul li a:hover{color:var(--green);}

.footer-brand p{font-size:14px; color:var(--text-muted); margin-top:12px; max-width:260px;}

/* آیکون‌های مربوط به اطلاعات تماس (آدرس/تلفن) */
.footer-grid ul li a svg{width:16px; height:16px; stroke:var(--text-muted); flex-shrink:0; transition:stroke .2s ease;}
.footer-grid ul li a:hover svg{stroke:var(--green);}

/* شبکه‌های اجتماعی: اینستاگرام و واتساپ */
.social-row{display:flex; gap:12px; margin-top:20px;}
.social-btn{
  width:40px; height:40px; border-radius:50%; background:var(--bg-1); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; transition:all .2s ease;
}
.social-btn svg{width:19px; height:19px; stroke:var(--text-muted); transition:stroke .2s ease;}
.social-btn:hover{transform:translateY(-3px); border-color:var(--green);}
.social-btn:hover svg{stroke:var(--green);}
.social-btn.whatsapp:hover{border-color:#25D366;}
.social-btn.whatsapp:hover svg{stroke:#25D366;}
.social-btn.instagram:hover{border-color:var(--lavender-deep);}
.social-btn.instagram:hover svg{stroke:var(--lavender-deep);}

.footer-bottom{
  border-top:1px solid var(--hairline); padding:20px 0; display:flex; justify-content:space-between;
  font-size:13px; color:var(--text-muted); flex-wrap:wrap; gap:12px;
}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}