.chat-toggle-btn {
        position: fixed;  
        /* bottom: 20px; */
        bottom: 65px;
        right: 20px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        /* background: #002f6c; */
        background: #0677ce;
        color: white;
        width: 195px;
        /* height: 55px; */
        height: 50px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 15px; 
        font-size: 17px;
        font-weight: bold;
        box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
        cursor: pointer;
        z-index: 1000;
        gap: 10px;
}

/* Red badge inside Online button */
.chat-toggle-btn .notification-circle {  
        position: absolute;
        top: -8px;       /* tweak for best alignment */
        right: -8px;     /* tweak for best alignment */
        min-width: 22px; /* ensures circle even with 1 digit */
        height: 22px;
        border-radius: 50%; 
        background: linear-gradient(to bottom, #ff3b3b, #b30000);
        color: white;
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
        padding: 5px;   /* small padding so double-digit fits */
        line-height: 1; /* avoid vertical misalignment */
}


    .chatbot-container {
      position: fixed;
      /* bottom: 90px; */
      bottom: 50px;
      right: 20px;
      width: 350px;
      max-width: 95%;
      background: #fff;
      border-radius: 12px;      
      box-shadow: 0px 4px 15px #002f6c;
      /* box-shadow: 0px 4px 15px #0677ce;  */
      overflow: hidden;
      z-index: 1000;
      display: none;
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      from {opacity: 0; transform: scale(0.9);}
      to {opacity: 1; transform: scale(1);}
    }

    .chatbot-header {
      /* background: #002f6c; */
       background: #0677ce;
      color: #fff;
      padding: 15px;
      font-size: 1rem;
      font-weight: 500;
      font-family: 'Goudy Old Style','Cambria','Times New Roman';
      display: flex;
      justify-content: space-between;
      /* justify-content: center; */
      align-items: center;
    }

    .chatbot-body {
      padding: 15px;            
    }

    .form-control {
      border-radius: 10px;

    }

    /* This Is Gap between New Enqu And Track Entry */
    #mainForm .mb-3 {
      margin-bottom: 15px; /* increase or decrease gap */
    }

    .bookingbtn {    

        background: #0677ce;
        color: white;
        border-radius: 10px;
        width: 100%;
        height: 45px;
        padding: 10px 10px;
        font-size: 18px !important;  /* force it */
        font-weight: bold;
        border: none;

    }

    .error {
      color: #dc3545;     
      font-size: 1em;
      padding: 2px;
      padding-left:10px;
      font-weight: normal;
    }

    .close-btn {
      background: transparent;
      border: none;
      color: white;
      font-size: 20px;
    }
    
    .back-btn{
        background: transparent;
        border: none;
        color: white;
        font-size: 20px;

    }
    .lbl-OTP{      
      color: #28a745;
      font-size: 13px;
      padding: 2px;
      padding-left:15px;      
      visibility:hidden;
      font-weight: bold;
    }
    .swal-button {         
         background-color: #002f6c !important;
         color: white !important;
         font-weight: bold;
    }
   .swal-button:hover {        
        background-color: #002f6c !important;
        color: white !important;        
    }    
 
    /* .loader-img {
         width: 60px;
        height: 60px;
        object-fit: contain;
        image-rendering: auto;
    }     */

    @media (max-width: 576px) {
      .chatbot-container {
        width: 95%;
        bottom: 80px;
        right: 10px;
      }
}