/* Floating WhatsApp button */
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #25D366;
      color: white;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      cursor: pointer;
      box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
      z-index: 1000;
    }

    /* Overlay */
    .chat-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: 999;
    }

    .chat-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    /* Chat Box */
    .chat-box {
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 320px;
      height: 450px;
      background: #1c1e21;
      border-radius: 12px;
      box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
      display: flex;           
      flex-direction: column;  
      font-family: Arial, sans-serif;
      z-index: 1001;
      overflow: hidden;

      opacity: 0;
      transform: translateY(50px);
      pointer-events: none;
      transition: all 0.4s ease;
    }

    .chat-box.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .chat-header {
      background: #128C7E;
      color: white;
      padding: 12px 15px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .chat-header span {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
    }

    .chat-header i {
      font-size: 18px;
    }

    .close-btn {
      cursor: pointer;
      font-size: 18px;
      color: white;
    }

    .chat-body {
      padding: 15px;
      background: #1c1e21;
      flex: 1;                
      overflow-y: auto;       
    }

    .chat-msg {
      background: #3e4042;
      color: #fff;
      padding: 12px 15px;
      border-radius: 18px;
      border-top-left-radius: 0;
      max-width: 85%;
      font-size: 14px;
      line-height: 1.4;
    }

    .chat-footer {
      padding: 12px;
      background: #1c1e21;
      display: flex;
      justify-content: flex-end;
    }

    /* Button + QR Wrapper */
    .whatsapp-btn-wrapper {
      position: relative;
      display: inline-block;
    }

    .open-chat-btn {
      display: flex;
      align-items: center;
      background: #25D366;
      color: white;
      border: none;
      border-radius: 25px;
      padding: 10px 18px;
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;
      gap: 8px;
      transition: background 0.3s ease;
    }

    .open-chat-btn i {
      font-size: 16px;
    }

    .open-chat-btn:hover {
      background: #20ba57;
    }

    /* QR Popup */
    .qr-popup {
      position: absolute;
      bottom: 50px;
      left: 35%; /* little left */
      transform: translateX(-50%);
      background: #fff;
      padding: 10px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      display: none;
      flex-direction: column;
      align-items: center;
      z-index: 2000;
    }

    .qr-popup img {
      width: 150px;
      height: 150px;
      border-radius: 8px;
    }

    .qr-popup p {
      margin: 5px 0 0;
      font-size: 13px;
      color: #333;
    }

    /* Show QR on hover */
    .whatsapp-btn-wrapper:hover .qr-popup {
      display: flex;
      animation: fadeInUp 0.3s ease-in-out;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translate(-50%, 20px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
@media (max-width: 600px) {
  .whatsapp-float {
    right: 15px;   /* push slightly left */
    bottom: 15px;  /* optional: adjust bottom spacing */
    width: 55px;   /* a bit smaller on mobile */
    height: 55px;
    font-size: 24px;
  }
}
    /* ✅ Responsive for mobile */
    @media (max-width: 600px) {
      .chat-box {
        width: 90%;
        height: 50%;
        bottom: 80px;
        right: 5%;
      }

      .qr-popup {
        left: 40%;  /* center on mobile */
        transform: translateX(-50%);
      }

      .open-chat-btn {
        font-size: 13px;
        padding: 8px 14px;
      }

      .qr-popup img {
        width: 120px;
        height: 120px;
      }
    }