/* Lightbox mobile optimization - maximize screen space */
@media (max-width: 767px) {

    .modal-dialog.lightbox-modal {
      max-width: 100vw !important;
      width: 100vw !important;
      margin: 0 !important;
      max-height: 100vh !important;
    }

    .modal-content.lightbox-content {
      min-height: 100vh !important;
      background: rgba(0, 0, 0, 0.9) !important;
      border: none !important;
    }

    .modal-body.lightbox-body {
      padding: 0 !important;
      min-height: 100vh !important;
    }

    .carousel-inner {
      height: 100vh !important;
    }

    .carousel-item {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 100vh !important;
      transition: none !important;
      transform: none !important;
    }

    .carousel-item-start,
    .carousel-item-end,
    .carousel-item-next,
    .carousel-item-prev {
      transform: none !important;
    }

    .carousel-item:not(.active) {
      display: none !important;
    }

    .carousel-item.active {
      display: flex !important;
      opacity: 1 !important;
    }

    .carousel-item .ratio-16x9 {
        background-color: transparent !important;
    }

    .carousel-item img,
    .carousel-item video {
      max-width: 100vw !important;
      max-height: 100vh !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
    }

    .modal-body.lightbox-body > img,
    .modal-body.lightbox-body > video {
      max-width: 100vw !important;
      max-height: 100vh !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-image: none;
    }

    .carousel-control-prev-icon::before {
        font-family: FontAwesome; 
        font-weight: 900; 
        content: "\f053";
        color: #fff;
        text-shadow:
            2px 1px rgba(0, 0, 0, 0.5); 
    }

    .carousel-control-next-icon::before {
        font-family: FontAwesome; 
        font-weight: 900;
        content: "\f054"; 
        color: #fff; 
        text-shadow:
            2px 1px rgba(0, 0, 0, 0.5);  
    }
  }