/* Main container */
.cameraStreamingVideo-container {
    position: relative;
    width: 640px;
    height: 480px;
    background: #000;
    overflow: hidden;
  }
  
  /* Video element styling */
  .cameraStreamingVideo-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Mode: Bottom Right (smaller and fixed at bottom-right) */
  .cameraStreamingVideo-container.mode-bottom_right {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 320px;
    height: 240px;
    z-index: 1000;
  }
  
  /* Mode: Fullscreen */
  .cameraStreamingVideo-container.mode-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #000;
  }
  
  /* Control panel for fullscreen mode */
  .cameraStreaming-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1100;
  }
  
  /* Button styling */
  .cameraStreaming-btn {
    margin: 0 5px;
    padding: 8px 12px;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .cameraStreaming-btn:hover {
    background-color: #ddd;
  }
  
  /* Review overlay styling (default) */
  .cameraStreaming-review {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    padding: 20px;
    z-index: 1200;
    text-align: center;
    border-radius: 8px;
  }

  /* Mobile-specific adjustments for the review overlay */
  @media (max-width: 480px) {
    .cameraStreaming-review {
      top: 0;
      left: 0;
      transform: none;
      width: 100%;
      height: 100%;
      padding: 10px;  /* Adjust if needed */
      border-radius: 0; /* Remove rounding for full-screen appearance */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  
  .cameraStreaming-review img {
    max-width: 100%;
    height: auto;
    border: 2px solid #fff;
  }
  
  .review-buttons {
    margin-top: 15px;
  }
  
  .review-buttons button {
    margin: 0 10px;
    padding: 8px 12px;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .review-buttons button:hover {
    background-color: #ddd;
  }
  

/* Base style for icon-only buttons (default for mid-sized devices) */
.cameraStreaming-btn,
.review-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  padding: 0;
  
  /* Hide text while keeping it accessible for screen readers */
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* Icon backgrounds */
.cameraStreaming-btn.capture {
  background-image: url('icons/take_picture.svg');
}
.cameraStreaming-btn.load {
  background-image: url('icons/load_picture.svg');
}
.cameraStreaming-btn.switch-camera {
  background-image: url('icons/switch_camera.svg');
}
.review-buttons .accept-btn {
  background-image: url('icons/accept.svg');
}
.review-buttons .refuse-btn {
  background-image: url('icons/refuse.svg');
}

/* Hover effect */
.cameraStreaming-btn:hover,
.review-buttons button:hover {
  background-color: #ddd;
}

/* Larger buttons for mobile devices (max-width: 480px) */
@media (max-width: 480px) {
  .cameraStreaming-btn,
  .review-buttons button {
    width: 80px;
    height: 80px;
    background-size: 40px 40px;
  }
}

/* Smaller buttons for larger screens (min-width: 768px) */
@media (min-width: 768px) {
  .cameraStreaming-btn,
  .review-buttons button {
    width: 48px;
    height: 48px;
    background-size: 24px 24px;
  }
}

@media (max-width: 1024px) {
  .cameraStreamingVideo-container.mode-bottom_right {
    width: 160px;
    height: 120px;
  }
}