/*
|--------------------------------------------------------------------------
| Custom Widget Stylesheet
|--------------------------------------------------------------------------
|
| Contains all custom styles for chat widgets and theme fixes.
|
*/


/*
|--------------------------------------------------------------------------
| WhatsApp Chat Widget
|--------------------------------------------------------------------------
*/
.whatsapp-chat-container {
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 1000;
}
.whatsapp-launcher {
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}
.whatsapp-launcher:hover {
  transform: scale(1.1);
}
.whatsapp-window {
  position: absolute; 
  bottom: 80px;      
  left: -10px;          
  width: 330px;
  max-height: 550px;
  background-color: #E5DDD5; 
  background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.whatsapp-chat-container.open .whatsapp-window {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.whatsapp-chat-container.open .whatsapp-launcher {
  transform: scale(0);
}
.whatsapp-header {
  padding: 15px;
  background-color: #075E54; 
  color: white;
  display: flex;
  align-items: center;
  gap: 15px;
}
.whatsapp-profile img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}
.agent-name { font-weight: bold; }
.agent-status { font-size: 0.8rem; color: #d0d0d0; }
.whatsapp-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
}
.whatsapp-body {
  flex-grow: 1;
  padding: 20px 20px 10px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.whatsapp-message {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 7.5px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.agent-message {
  background-color: #fff;
  align-self: flex-start;
}
.whatsapp-footer {
  padding: 10px 15px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatsapp-footer textarea {
  flex-grow: 1;
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 1rem;
  resize: none;
  max-height: 80px;
}
.whatsapp-footer textarea:focus {
  outline: none;
}
.whatsapp-send-btn {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  background-color: #128C7E; 
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Live Chat Widget
|--------------------------------------------------------------------------
*/
.live-chat-container {
  position: fixed;
  bottom: 0;
  left: 25px;
  z-index: 1000;
}
.chat-launcher-bar {
  width: 150px;
  height: 45px;
  background-color: #1a1a1a;
  color: white;
  border: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  gap: 8px;
  transition: all 0.3s ease;
}
.notification-dot {
  width: 8px;
  height: 8px;
  background-color: #e74c3c;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
.chat-window {
  width: 350px;
  height: 450px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.live-chat-container.open .chat-window {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.live-chat-container.open .chat-launcher-bar {
  opacity: 0;
  visibility: hidden;
}
.chat-header {
  background-color: #1a1a1a;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.chat-close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}
.chat-close-btn:hover {
  color: white;
}
.chat-body {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.chat-message {
  max-width: 85%;
  padding: 12px 15px;
  border-radius: 18px;
  line-height: 1.4;
  word-wrap: break-word;
}
.bot-message {
  background-color: #e9e9eb;
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.user-message {
  background-color: #007bff;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-footer {
  display: flex;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
}
#chat-input {
  flex-grow: 1;
  border: none;
  padding: 10px;
  font-size: 1rem;
  background: transparent;
}
#chat-input:focus {
  outline: none;
}
#chat-send-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 1.2rem;
  cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Theme Fixes & Enhancements (Our Services Section)
|--------------------------------------------------------------------------
*/

/* Fix #1: Forces the row to use a modern Flexbox layout for proper alignment */
.service-style-one .wrapper .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Fix #2: Makes each service box fill the entire height of its container */
.service-style-one .single-service {
  height: 100%;
}

/* Fix #3: Removes unwanted blue underlines from service titles */
/* NOTE: !important is used to forcefully override default theme styles. */
.service-style-one .single-service .text h5 a,
.service-style-one .single-service .text p {
  text-decoration: none !important;
  border: none !important;
}

/* Enhancement: Styles for the animated "View More/Less" functionality */
.single-service.service-hidden {
  /* Collapsed state */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  transition: all 0.7s ease-in-out;
}
.single-service.service-hidden.is-visible {
  /* Expanded state */
  max-height: 500px; /* Adjust if your content is taller */
  opacity: 1;
  /* Uses Bootstrap's CSS variable to restore original padding */
  padding-top: var(--bs-gutter-x); 
  padding-bottom: var(--bs-gutter-x);
}