.modal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  background: #000;
}

/* Fixed-height, single-line, underlined title with ellipsis */
h2 {
  width: 100%;
  max-width: 100%;
  margin: 10px auto 6px auto;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  text-align: center;
  border-bottom: 2px solid #f81775;
  padding-bottom: 2px;
  white-space: normal;      /* Allow wrapping */
  overflow: visible;        /* Show all lines */
  text-overflow: unset;     /* No ellipsis */
  height: auto;             /* Allow height to grow */
  line-height: 1.4;         /* Better for multi-line */
  word-break: break-word;   /* Break long words if needed */
}


/* If you want the rest of the modal content to scroll if it overflows: */
.modal-content {
  overflow: hidden;
}
.modal-content .modal-scroll-area {
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  min-height: 0;
}

.unlock-btn .fa-star {
  color: #ffd700 !important;
}

/* Animations */
@keyframes modalSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}



@keyframes shimmer {
  0% { -position: -100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}
.fade-in {
  animation: fadeIn 0.4s forwards;
}
.fade-out {
  animation: fadeOut 0.4s forwards;
}

/* Modal Fade In/Out Animations */
@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.97);}
  to   { opacity: 1; transform: scale(1);}
}
@keyframes fadeOutModal {
  from { opacity: 1; transform: scale(1);}
  to   { opacity: 0; transform: scale(0.97);}
}
.media-modal-fade-in {
  animation: fadeInModal 0.15s cubic-bezier(.4,0,.2,1) forwards;
}
.media-modal-fade-out {
  animation: fadeOutModal 0.25s cubic-bezier(.4,0,.2,1) forwards;
}

/* Confirm modal animations */
@keyframes confirmModalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes confirmModalFadeOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}
.confirm-modal-fade-in {
  animation: confirmModalFadeIn 0.15s cubic-bezier(.4,0,.2,1) forwards;
}
.confirm-modal-fade-out {
  animation: confirmModalFadeOut 0.25s cubic-bezier(.4,0,.2,1) forwards;
}

/* 16:9 Aspect Ratio Container */
.aspect-ratio-16-9 {
  position: relative;
  width: 100%;
  max-width: 900px;      /* Increased from 700px */
  aspect-ratio: 16 / 9;
  background: none;
  overflow: hidden;
  margin: 0 auto;
  min-width: 350px;      /* Increased from 320px */
  min-height: 200px;     /* Increased from 180px */
}
.aspect-ratio-16-9 > video,
.aspect-ratio-16-9 > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  object-fit: cover;
}