/* ===============================
   THEME CUSTOMIZER (Hot Previews)
   =============================== */

/* Match Theme Modal Width */
.custom-theme-modal-width {
  max-width: 720px !important;
}

/* -------------------------------
   Modal entrance animation
--------------------------------- */
@keyframes fadeInUpBounce {
  0%   { opacity: 0; transform: translateY(40px); }
  60%  { opacity: 1; transform: translateY(-10px); }
  80%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

.modal.fade .modal-dialog {
  animation: fadeInUpBounce 0.6s ease forwards;
}

/* -------------------------------
   iPhone preview cards (desktop/default)
--------------------------------- */
.iphone-preview {
  width: 120px;
  height: 240px;
  background: #ffffff;
  border-radius: 28px;
  padding: 6px;
  margin: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iphone-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(107, 70, 193, 0.25), 0 0 20px rgba(107, 70, 193, 0.15);
}

/* The actual media inside the phone (img OR video) */
.iphone-screen {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  border: 1px solid #ccc;
  display: block;

  /* Desktop: your old behavior was fine */
  object-fit: cover;
  object-position: center;
}

/* -------------------------------
   Match Hot Previews Modal colors
--------------------------------- */
#hotPreviewsModal .modal-content {
  background-color: #e6efeb !important;
  color: #36454F !important;
  border: none !important;
}

#hotPreviewsModal .top-btn,
#hotPreviewsModal #resetThemeVideoBtn {
  background-color: #36454F !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.15);
  transition: all 0.2s ease-in-out;
  text-decoration: none !important;
}

#hotPreviewsModal .top-btn:hover,
#hotPreviewsModal #resetThemeVideoBtn:hover {
  transform: scale(1.05);
  background-color: #2c3840 !important;
  color: #ffffff !important;
}

#hotPreviewsModal .text-gray-800,
#hotPreviewsModal .text-gray-700 {
  color: #36454F !important;
}

#hotPreviewsModal .iphone-preview {
  border: 1px solid #36454F22;
}

#hotPreviewsModal .iphone-screen {
  border: 1px solid #36454F22;
}

#hotPreviewsModal .modal-title {
  color: #36454F !important;
}

/* -------------------------------
   Mobile modal sizing
--------------------------------- */
@media (max-width: 767.98px) {
  #hotPreviewsModal .modal-dialog {
    margin: 1rem auto;
    max-width: 95vw;
  }

  #hotPreviewsModal .modal-content {
    border-radius: 1rem;
    padding: 0.5rem;
  }

  #hotPreviewsModal .modal-body {
    max-height: 65vh;
    overflow-y: auto;
    padding-bottom: 1.5rem;
  }

  #hotPreviewsModal h6 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  #hotPreviewsModal .modal-header {
    padding-top: 1rem;
    padding-bottom: 0.25rem;
  }

  .custom-theme-modal-width {
    max-width: 95vw !important;
    margin: 1rem auto;
  }
}

/* =========================================================
   ✅ MOBILE FIX (THE IMPORTANT PART)
   - 1 per row (themes + videos)
   - bigger phones
   - THEMES = NOT ZOOMED (contain)
   - VIDEOS = still fill nicely (cover)
   ========================================================= */
@media (max-width: 767.98px) {

  /* 1 per row for BOTH sections (your theme row + video row use this same class stack) */
  #hotPreviewsModal .d-flex.flex-wrap.justify-content-center.gap-3.mb-5 {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Bigger “phone” card */
  #hotPreviewsModal .iphone-preview {
    width: min(88vw, 320px) !important;
    aspect-ratio: 9 / 19.5 !important; /* iPhone-ish */
    height: auto !important;

    padding: 10px !important;
    margin: 14px auto !important;
    border-radius: 34px !important;
  }

  /* Ensure media truly fills the phone box dimensions */
  #hotPreviewsModal .iphone-screen {
    width: 100% !important;
    height: 100% !important;
    border-radius: 28px !important;
    display: block !important;
    object-position: center !important;
  }

  /* ✅ THEMES: do NOT crop screenshots */
  #hotPreviewsModal .preview-card img.iphone-screen {
    object-fit: contain !important;
    background: #ffffff; /* makes the letterbox look clean */
  }

  /* ✅ VIDEOS: keep them filling the phone */
  #hotPreviewsModal video.iphone-screen,
  #hotPreviewsModal .hp-preview-video {
    object-fit: cover !important;
  }

  /* Kill any old fixed 120x220 rules (these were fighting you) */
  #hotPreviewsModal .preview-card img,
  #hotPreviewsModal .preview-card video,
  #hotPreviewsModal .theme-preview-card img,
  #hotPreviewsModal .theme-preview-card video {
    width: 100% !important;
    height: 100% !important;
  }
}