.video-js .vjs-fullscreen-control,
.video-js .vjs-picture-in-picture-control {
  display: none;
}

.video-container {
  width: 100%;
  max-width: 800px;
  position: relative;
}
.video-js {
  width: 100%;
  height: 450px;
}
/* Hide default big play button */
.vjs-big-play-button {
  display: none !important;
}
/* Custom play button styles */
.custom-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* Hide custom play button when video is playing */
.video-js.vjs-playing + .custom-play-button {
  opacity: 0;
  pointer-events: none;
}
/* Show custom play button on pause */
.video-js.vjs-paused + .custom-play-button {
  opacity: 1;
  pointer-events: auto;
}



.media-grid {
  /*
  --pc-inline-grid-grid-template-columns-xs: repeat(2, minmax(0, 1fr));
  --pc-inline-grid-grid-template-columns-md: repeat(3, minmax(0, 1fr));
  --pc-inline-grid-grid-template-columns-lg: repeat(4, minmax(0, 1fr));
  --pc-inline-grid-gap-xs: var(--p-space-200);
  --pc-inline-grid-gap-md: var(--p-space-300);
  display: grid;
  gap: 16px;
  
  grid-template-columns: repeat(4, 1fr);*/
}

.grid-item {
  cursor: grab;
}

.media-grid-videos .grid-item {
  cursor: initial;
}

.grid-item-content {
  position: relative;
}

.drag-handle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  border-radius: 4px;
  cursor: grab;
}

.sortable-ghost {
  opacity: 0.3;
}

.sortable-drag {
  cursor: grabbing;
}





.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
 
}

.image-container {
  position: relative;
}

.image-container:has(input[checkbox]) {
  cursor: pointer;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.checkbox-wrapper {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 10;
}

/* Hide the actual checkbox input */
.Polaris-Checkbox {
  opacity: 1;
  pointer-events: none;
}

/* Make the entire container clickable */
.image-container label {
  display: block;
  cursor: pointer;
}

.Polaris-Modal-Dialog__Modal {
  min-width: 500px;
}

.video-container video {
  transition: opacity 0.3s ease;
}

.Polaris-Modal-Dialog__Container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 516;
}

.Polaris-Backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(33, 43, 54, 0.4);
  z-index: 515;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  
}

.grid-item {
  list-style: none;
}

.grid-item-content {
  position: relative;
}

/* This wrapper maintains aspect ratio of images */
.image-wrapper {
width: 100%;
position: relative;
display: block;
}

.image-wrapper img {
width: 100%;
height: auto;
display: block;
border-radius: 8px; /* Match Polaris rounded corners */
}

.sortable-ghost {
  opacity: 0.3;
}

.sortable-drag {
  opacity: 1;
}

.Polaris-ShadowBevel.selected::before {
  border: 2px solid #111;
  box-shadow: none;
}