/* ================================================================
   Footer & Floating Elements
   Site footer, sticky mobile bar, WhatsApp floating button.
   ================================================================ */

.site-footer {

  background: var(--dark-slate);

  color: #94a3b8;

  padding-top: 70px;

}



.footer-container {

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr 1fr;

  gap: 36px;

  padding-bottom: 50px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 16px;

}



.footer-logo .brand-name {

  color: #ffffff;

  font-size: 1.35rem;

}



.footer-desc {

  font-size: 0.88rem;

  line-height: 1.6;

  margin-bottom: 18px;

}



.footer-contact-quick p {

  font-size: 0.88rem;

  color: #cbd5e1;

  margin-bottom: 6px;

}



.footer-contact-quick strong {

  color: #ffffff;

}



.footer-col h4 {

  color: #ffffff;

  font-size: 1.05rem;

  margin-bottom: 18px;

  position: relative;

  padding-bottom: 8px;

}



.footer-col h4::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 28px;

  height: 2px;

  background: var(--primary-blue);

}



.footer-links {

  list-style: none;

}



.footer-links li {

  margin-bottom: 10px;

}



.footer-links a {

  font-size: 0.88rem;

  color: #94a3b8;

  transition: color var(--transition-fast);

}



.footer-links a:hover {

  color: #ffffff;

  padding-left: 4px;

}



.footer-bottom {

  padding: 22px 0;

  font-size: 0.84rem;

}



.bottom-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.bottom-container strong {

  color: #38bdf8;

}



/* ==========================================================================

   Floating WhatsApp Button

   ========================================================================== */

.floating-wa-btn {
  animation: floatBounce 3s ease-in-out infinite;

  position: fixed;

  bottom: 90px;

  right: 24px;

  width: 58px;

  height: 58px;

  background: #25D366;

  color: #ffffff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.9rem;

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);

  z-index: 999;

  transition: all var(--transition-fast);

}



.floating-wa-btn:hover {

  transform: scale(1.1);

  color: #ffffff;

  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.6);

}



/* Floating Instagram Button */

.floating-insta-btn {
  animation: floatBounce 3s ease-in-out infinite 1.5s;

  position: fixed;

  bottom: 160px; /* Positioned above the WhatsApp button */

  right: 24px;

  width: 58px;

  height: 58px;

  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  color: #ffffff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.9rem;

  box-shadow: 0 8px 24px rgba(214, 36, 159, 0.45);

  z-index: 999;

  transition: all var(--transition-fast);

}



.floating-insta-btn:hover {

  transform: scale(1.1);

  color: #ffffff;

  box-shadow: 0 12px 28px rgba(214, 36, 159, 0.6);

}



.tooltip-label {

  display: none;

}



/* ==========================================================================

   Google Form Modal

   ========================================================================== */

.footer-logo-wrap {

  background: #ffffff;

  padding: 8px 16px;

  border-radius: var(--radius-md);

  display: inline-block;

  margin-bottom: 16px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

}



.footer-brand-logo-img {

  height: 48px;

  width: auto;

  display: block;

}



.sticky-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

  height: 100%;

  border-radius: var(--radius-sm);

  font-size: 0.72rem;

  font-weight: 700;

  text-align: center;

  text-decoration: none;

}



.sticky-btn i {

  font-size: 1.15rem;

}



.sticky-call {

  background: var(--slate-100);

  color: var(--slate-800);

  border: 1px solid var(--border-color);

}



.sticky-call:hover {

  background: var(--slate-200);

}



.sticky-wa {

  background: var(--whatsapp-color);

  color: #ffffff;

}



.sticky-wa:hover {

  background: var(--whatsapp-dark);

}



.sticky-book {

  background: var(--primary-blue);

  color: #ffffff;

}



.sticky-book:hover {

  background: var(--primary-blue-dark);

}



/* ==========================================================================

   Media Queries

   ========================================================================== */



/* Tablet Breakpoint (max-width: 1024px) */

@media (max-width: 768px) {

  .footer-container {

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

  }


  .footer-container {

    grid-template-columns: 1fr;

  }

}



  
/* ==========================================================================
   Shop / Products Section
   ========================================================================== */

}

@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 768px) {
  .bottom-container {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}