/* ==========================================================================
   Rang Mitra Painting — Footer + Contact (footer.css)
   ========================================================================== */

/* Contact strip (phone / whatsapp / email / map) */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: var(--space-4); }
.contact-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: transform var(--transition), box-shadow var(--transition);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-card__icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(108,76,241,.1); color: var(--color-primary);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__label { font-size: 0.76rem; color: var(--color-text-muted); }
.contact-card__value { font-weight: 700; font-size: 0.95rem; }
/* Stacked, individually-clickable phone / WhatsApp numbers */
.contact-multi a { display: block; font-weight: 700; font-size: 0.92rem; color: var(--color-text); transition: color var(--transition); }
.contact-multi a:hover { color: var(--color-primary); }
.contact-map { grid-column: 1 / -1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.contact-map iframe { width: 100%; height: 280px; border: 0; display: block; }

/* Footer */
.footer {
  background: #14121f;
  color: #cdd0da;
  margin-top: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.footer-brand__logo { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-brand__logo .nav-logo__name { color: #fff; }
.footer-brand p { color: #9aa0b0; font-size: 0.9rem; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: 0.95rem; margin-bottom: var(--space-4); }
.footer-col a { display: block; color: #9aa0b0; padding: 6px 0; font-size: 0.9rem; transition: color var(--transition); }
.footer-col a:hover { color: #fff; }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #fff;
  transition: background var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--color-primary); transform: translateY(-3px); }
.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font-size: 0.85rem; color: #8a90a0;
}

/* Floating WhatsApp button */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: 90px; z-index: 140;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.45);
  transition: transform var(--transition);
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 30px; height: 30px; }
@media (min-width: 769px) { .whatsapp-fab { bottom: 24px; } }