/* ============================================================
   SHARED FOOTER — footer.css
   Included on every page of Teemuo
   ============================================================ */

/* ---- Footer base ---- */
.site-footer {
  background: #0F1115;
  color: #C8CDD4;
  font-size: 0.82rem;
  line-height: 1.6;
  margin-top: 12px;
  padding-bottom: calc(var(--bottom-nav-h) + 8px);
}

/* ---- Main footer grid ---- */
.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 20px;
  padding: 36px 20px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-col-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links a {
  color: #9CA3AF;
  transition: color 0.18s;
  font-size: 0.8rem;
}
.footer-links a:hover { color: #FFFFFF; }

/* ---- App download column ---- */
.footer-app-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1E2228;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 9px 16px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
  width: 100%;
  max-width: 180px;
  text-decoration: none;
}
.app-badge:hover { background: #2A3038; border-color: rgba(255,255,255,0.25); }

.app-badge svg { width: 24px; height: 24px; flex-shrink: 0; }

.app-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-badge-sub { font-size: 0.64rem; color: #9CA3AF; }
.app-badge-name { font-size: 0.82rem; font-weight: 700; color: #FFFFFF; }

.footer-app-perks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.footer-app-perk {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: #9CA3AF;
}
.footer-app-perk svg { width: 14px; height: 14px; fill: #E64545; flex-shrink: 0; }

/* ---- Social row ---- */
.footer-social-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 10px;
}
.footer-social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #1E2228;
  border: 1px solid rgba(255,255,255,0.1);
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.social-icon:hover { background: #2A3038; border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.social-icon svg { width: 18px; height: 18px; fill: #9CA3AF; transition: fill 0.2s; }
.social-icon:hover svg { fill: #FFFFFF; }

/* ---- Certification & Payment row ---- */
.footer-trust {
  padding: 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-trust-section { }
.footer-trust-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.trust-logo-chip {
  background: #1E2228;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #C8CDD4;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s;
}
.trust-logo-chip:hover { border-color: rgba(255,255,255,0.3); }
.trust-logo-chip svg { width: 14px; height: 14px; }

.payment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.payment-chip {
  background: #FFFFFF;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #0F1115;
  letter-spacing: 0.02em;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.payment-chip.visa     { background: #1A1F71; color: #FFFFFF; }
.payment-chip.master   { background: linear-gradient(90deg,#EB001B,#FF5F00,#F79E1B); color: #FFFFFF; }
.payment-chip.amex     { background: #007BC1; color: #FFFFFF; }
.payment-chip.paypal   { background: #003087; color: #FFFFFF; }
.payment-chip.discover { background: #FF6600; color: #FFFFFF; }
.payment-chip.gpay     { background: #E8E8E8; color: #0F1115; }
.payment-chip.applepay { background: #0F1115; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.25); }
.payment-chip.verve    { background: #006A4E; color: #FFFFFF; }

/* ---- Footer bottom bar ---- */
.footer-bottom {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.footer-bottom-copy {
  font-size: 0.72rem;
  color: #6B7280;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
.footer-bottom-links a {
  font-size: 0.72rem;
  color: #6B7280;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.footer-bottom-links a:hover { color: #9CA3AF; text-decoration-color: #9CA3AF; }

/* ============================================================
   CHATBOT WIDGET — Teemuo branded
   ============================================================ */

.chat-toggle {
  position: fixed;
  right: 18px;
  bottom: 80px;
  z-index: 120;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E64545, #C03030);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(230,69,69,0.45);
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(230,69,69,0.5); }
.chat-toggle:active { transform: scale(0.96); }
.chat-toggle svg { width: 26px; height: 26px; fill: #fff; transition: opacity 0.2s; }
.chat-toggle .chat-icon-open  { display: block; }
.chat-toggle .chat-icon-close { display: none; }
.chat-toggle.is-open .chat-icon-open  { display: none; }
.chat-toggle.is-open .chat-icon-close { display: block; }

/* Notification dot */
.chat-notif-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  background: #22C55E;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: pulse-dot 2s infinite;
}

@media (min-width: 700px) {
  .chat-toggle { bottom: 28px; right: 28px; }
}

/* WhatsApp toggle */
.whatsapp-toggle {
  position: fixed;
  right: 18px;
  bottom: 146px; /* above the chat toggle (80 + 56 + 10) */
  z-index: 120;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(37,211,102,0.45);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37,211,102,0.5); }
.whatsapp-toggle:active { transform: scale(0.96); }
.whatsapp-toggle svg { width: 30px; height: 30px; fill: #fff; }

@media (min-width: 700px) {
  .whatsapp-toggle { bottom: 94px; right: 28px; } /* 28 + 56 + 10 */
}

/* Chat panel */
.chat-panel {
  position: fixed;
  right: 18px;
  bottom: 152px;
  left: 18px;
  z-index: 121;
  max-width: 380px;
  margin-left: auto;
  height: min(68vh, 540px);
  background: #FFFFFF;
  border-radius: 16px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.08);
  animation: chatSlideUp 0.25s ease;
}
.chat-panel.is-open { display: flex; }

@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 700px) {
  .chat-panel { left: auto; width: 380px; bottom: 98px; right: 28px; }
}

/* Chat header */
.chat-header {
  background: linear-gradient(135deg, #E64545, #C03030);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.chat-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.chat-avatar svg { width: 20px; height: 20px; fill: #fff; }
.chat-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 9px; height: 9px;
  background: #22C55E;
  border-radius: 50%;
  border: 2px solid #C03030;
}
.chat-header-info { flex: 1; }
.chat-header-name { font-size: 0.9rem; font-weight: 700; color: #fff; line-height: 1.2; }
.chat-header-status { font-size: 0.7rem; color: rgba(255,255,255,0.8); }
.chat-close-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  flex-shrink: 0;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.28); }
.chat-close-btn svg { width: 16px; height: 16px; fill: #fff; }

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F7F7F7;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #E0E0E0; border-radius: 4px; }

/* Message bubbles */
.chat-msg { display: flex; align-items: flex-end; gap: 8px; }
.chat-msg.from-user { flex-direction: row-reverse; }

.bot-avatar-mini {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E64545, #C03030);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.bot-avatar-mini svg { width: 14px; height: 14px; fill: #fff; }

.chat-bubble {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.83rem;
  line-height: 1.5;
  word-break: break-word;
}
.chat-msg.from-bot  .chat-bubble {
  background: #FFFFFF;
  color: #1A1A1A;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chat-msg.from-user .chat-bubble {
  background: linear-gradient(135deg, #E64545, #C03030);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.chat-typing { display: flex; align-items: flex-end; gap: 8px; }
.typing-bubble {
  background: #FFFFFF;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 12px 14px;
  display: flex;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #BDBDBD;
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); background: #E64545; }
}

/* Quick chips */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 4px;
  background: #F7F7F7;
  flex-shrink: 0;
}
.chat-chip {
  border: 1.5px solid #E0E0E0;
  background: #FFFFFF;
  color: #333;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}
.chat-chip:hover { border-color: #E64545; color: #E64545; background: #FFF0F0; }

/* Product result chips in chat */
.chat-product-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #E8E8E8;
  background: #FAFAFA;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 6px;
  cursor: pointer;
  transition: all 0.18s;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.chat-product-card:first-of-type { margin-top: 8px; }
.chat-product-card:hover { border-color: #E64545; background: #FFF0F0; }
.chat-product-img {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #E8E8E8;
}
.chat-product-info { flex: 1; min-width: 0; }
.chat-product-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #1A1A1A;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.chat-product-price { font-size: 0.78rem; font-weight: 700; color: #E64545; margin-top: 2px; }

/* Input row */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #E8E8E8;
  background: #FFFFFF;
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  border: 1.5px solid #E0E0E0;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.84rem;
  outline: none;
  color: #1A1A1A;
  background: #F7F7F7;
  transition: border-color 0.2s, background 0.2s;
}
.chat-input:focus { border-color: #E64545; background: #FFFFFF; }
.chat-input::placeholder { color: #9CA3AF; }
.chat-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E64545, #C03030);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.chat-send-btn:hover { transform: scale(1.08); }
.chat-send-btn:active { transform: scale(0.94); }
.chat-send-btn svg { width: 17px; height: 17px; fill: #fff; }

/* ============================================================
   RESPONSIVE FOOTER
   ============================================================ */
@media (min-width: 700px) {
  .footer-main {
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 32px 32px;
    gap: 36px 32px;
  }
  .footer-trust {
    flex-direction: row;
    justify-content: space-between;
    padding: 24px 32px;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 16px 32px;
  }
}

@media (min-width: 1024px) {
  .site-footer { padding-bottom: 0; }
  .footer-main {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 32px 36px;
  }
  .footer-trust {
    max-width: 1400px;
    margin: 0 auto;
  }
  .footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
  }
  .chat-toggle { bottom: 36px; right: 36px; }
  .chat-panel { bottom: 108px; right: 36px; }
}