/* Bunny Modal Styles */

/* Modal trigger button */
.bunny-modal-trigger {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background-color: #FF5B86;
  border-radius: 5px;
  padding: 0 6px;
  cursor: pointer;
  user-select: none;
}

/* Modal overlay */
#bunny-modal-overlay {
  position: fixed;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 1rem;
}

/* Modal content container */
#bunny-modal-content {
  position: relative;
  width: 90vw;
  max-width: 1200px;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* Iframe fills container with 16:9 aspect ratio */
#bunny-modal-content iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  #bunny-modal-content iframe {
    height: calc(90vw * 9 / 16);
    max-height: calc(1200px * 9 / 16);
  }
}

/* Close button */
#bunny-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 8px;
  transition: background 0.3s ease;
  user-select: none;
}

#bunny-modal-close:hover {
  background: rgba(255,255,255,0.5);
}