/* --- Floating Info Bars on Image --- */

/* Base style for live calls bar */
.live-calls-bar {
  position: absolute;
  top: 40%; /* Desktop position */
  left: 15%;   /* Desktop position */
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: 0.55vw; /* ~8px @ 1440px */
  box-shadow: 0px 0.55vw 1.39vw rgba(0, 0, 0, 0.2); /* ~0 8px 20px */
  padding: 0.69vw 1.39vw; /* ~10px 20px @ 1440px */
  display: flex;
  align-items: center;
  z-index: 10;
  width: fit-content;
  white-space: nowrap; /* Prevent wrapping */
  bottom: unset;
}
.live-calls-bar span {
  font-weight: 600;
  font-size: 1.5vw; /* ~23px @ 1440px */
  color: #231F20;
}
/* Scale icon size with vw */
.live-calls-bar img { 
    width: 1.67vw;   /* ~24px @ 1440px */
    height: 1.67vw;  /* ~24px @ 1440px */
    margin-right: 0.69vw; /* ~10px @ 1440px */
}
.live-calls-bar .pulse-dot {
  width: 1.39vw;  /* ~20px @ 1440px */
  height: 1.39vw; /* ~20px @ 1440px */
  background-color: #fd7133;
  border-radius: 50%;
  margin-left: 0.83vw; /* ~12px @ 1440px */
  animation: pulse 1.5s infinite ease-in-out;
}

/* Base style for CS online bar */
.cs-online-bar {
  position: absolute;
  top: 40%; /* Desktop position */
  left: 48%;   /* Desktop position */
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: 0.35vw; /* ~8px @ 1440px */
  box-shadow: 0 0.28vw 0.83vw rgba(0, 0, 0, 0.2); /* ~0 4px 12px */
  padding: 0.69vw 1.00vw; /* ~10px 20px @ 1440px */
  display: flex;
  align-items: center;
  z-index: 10;
  width: fit-content;
  white-space: nowrap; /* Prevent wrapping */
  bottom: unset;
}
/* Scale CS icon container and image */
.cs-online-bar .cs-icon {
    width: 4.58vw;    /* ~66px @ 1440px */
    height: 1.67vw;   /* ~24px @ 1440px */
    margin-right: 0.83vw; /* ~12px @ 1440px */
}
.cs-online-bar .cs-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   color: transparent;
}
.cs-online-bar .cs-text {
  font-weight: 600;
  font-size: 1.5vw; /* ~23px @ 1440px */
  color: #231F20;
}
.cs-online-bar .blink-dot {
  width: 1.39vw;  /* ~20px @ 1440px */
  height: 1.39vw; /* ~20px @ 1440px */
  background-color: #3be38f;
  border-radius: 50%;
  margin-left: 0.83vw; /* ~12px @ 1440px */
  animation: pulse 1.5s infinite ease-in-out;
}

/* Pulse animation (used by both bars) */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}


/* --- Styles for Mobile Screens (max-width: 767.98px) --- */
/* The media query now primarily handles POSITIONING changes */
/* --- Styles for Mobile Screens (max-width: 767.98px) --- */
@media (max-width: 800px) {

  /* Adjust the "Live Calls" bar for mobile - Side-by-Side */
  .live-calls-bar {
    width: auto;       /* Let content determine width */
    max-width: none;   /* Remove max-width constraint */
    top: 30%;        /* Lower position for mobile */
    left: 30%;         /* Move further left */
    transform: translateX(-50%); 
    
    /* Size adjustments */
    padding: 5px 10px; /* Reduced padding */
    border-radius: 6px; /* Slightly smaller radius */
  }
  .live-calls-bar span {
      font-size: 11px; /* Significantly smaller text */
  }
  .live-calls-bar .pulse-dot {
      width: 8px; height: 8px; margin-left: 5px; /* Smaller dot */
  }
  .live-calls-bar img { 
      width: 14px; height: 14px; margin-right: 5px; /* Smaller icon */
  }


  /* Adjust the "CS Online" bar for mobile - Side-by-Side */
  .cs-online-bar {
    width: auto;       /* Let content determine width */
    max-width: none;   /* Remove max-width constraint */
    top: 47%;        /* Same vertical position as live calls */
    left: 34%;         /* Move further right */
    transform: translateX(-50%); 

    /* Size adjustments */
    padding: 3px 6px; /* Reduced padding */
    border-radius: 6px; /* Slightly smaller radius */
  }
  .cs-online-bar .cs-text {
      font-size: 10px; /* Significantly smaller text */
  }
  .cs-online-bar .blink-dot {
      width: 8px; height: 8px; margin-left: 5px; /* Smaller dot */
  }
  .cs-online-bar .cs-icon { 
      width: 15px; height: 14px; margin-right: 5px; /* Smaller icon area */
  }

} /* End of media query */