/* Similar Items Panel - responsive sizing to match video player panel EXACTLY */
@media (min-width: 1400px) {
  .similar-items-panel {
    width: clamp(40vw, 45vw, 70vw) !important;
    height: clamp(40vh, 70vh, 80vh) !important;
    left: calc(2vw + clamp(40vw, 45vw, 70vw) + 2vw) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .similar-items-panel {
    width: clamp(40vw, 35vw, 70vw) !important;
    height: clamp(40vh, 55vh, 80vh) !important;
    left: calc(2vw + clamp(40vw, 55vw, 70vw) + 2vw) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .similar-items-panel {
    width: clamp(40vw, 3vw, 70vw) !important;
    height: clamp(40vh, 55vh, 80vh) !important;
    left: calc(2vw + clamp(40vw, 55vw, 70vw) + 2vw) !important;
  }
}

.similar-items-panel {
  position: fixed;
  top: 50% !important;
  /* The following are now set dynamically in JS for perfect alignment: */
  /* left: ...; width: ...; height: ...; */
  background: transparent;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transform: translateY(-50%) !important; /* Center vertically like the expanded card */
  pointer-events: none; /* Start with no pointer events */
}

/* When the similar-items panel is rendered inside an expanded card (mobile),
   force it to fill the card's content area and remove fixed positioning
   calculations so it visually sits centered with equal left/right spacing. */
.expanded-card.expanded .similar-items-panel {
  position: absolute !important;
  inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important; /* disable translateY centering from desktop rules */
  display: block !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

.expanded-card.expanded .similar-items-panel .similar-items-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important; /* let the container content manage its own padding */
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.similar-items-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.similar-items-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  z-index: 10001;
  transition: all 0.2s ease;
}

.similar-items-close:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.similar-items-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #080b11;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  border: 2px solid #196875;
  animation: similarItemsFadeIn 0.5s forwards;
}

/* Default game styling */
.similar-items-container {
  border: 2px solid #196875;
}

/* Movie styling */
.similar-items-panel[data-original-card^="movie"] .similar-items-container {
  border: 2px solid #9b4d5f;
}

/* Book styling */
.similar-items-panel[data-original-card^="book"] .similar-items-container {
  border: 2px solid #b08d57;
}

/* TV Show styling */
.similar-items-panel[data-original-card^="tvshow"] .similar-items-container {
  border: 2px solid #3d5afe;
}

/* History styling */
.similar-items-panel[data-original-card^="history"] .similar-items-container {
  border: 2px solid #8b6914;
}

.similar-items-header {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid rgba(63, 203, 224, 0.2);
  background: rgba(25, 104, 117, 0.1);
}

/* Movie header styling */
.similar-items-panel[data-original-card^="movie"] .similar-items-header {
  border-bottom: 1px solid rgba(155, 77, 95, 0.2);
  background: rgba(155, 77, 95, 0.1);
}

/* Book header styling */
.similar-items-panel[data-original-card^="book"] .similar-items-header {
  border-bottom: 1px solid rgba(176, 141, 87, 0.2);
  background: rgba(176, 141, 87, 0.1);
}

/* TV Show header styling */
.similar-items-panel[data-original-card^="tvshow"] .similar-items-header {
  border-bottom: 1px solid rgba(61, 90, 254, 0.2);
  background: rgba(61, 90, 254, 0.1);
}
/* History header styling */
.similar-items-panel[data-original-card^="history"] .similar-items-header {
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
  background: rgba(139, 105, 20, 0.1);
}


.similar-items-header h3 {
  margin: 0;
  color: #3fcbe0;
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(63, 203, 224, 0.3);
}

/* Movie header text color */
.similar-items-panel[data-original-card^="movie"] .similar-items-header h3 {
  color: #ff8a9e;
  text-shadow: 0 0 10px rgba(155, 77, 95, 0.3);
}

/* Book header text color */
.similar-items-panel[data-original-card^="book"] .similar-items-header h3 {
  color: #d4af37;
  text-shadow: 0 0 10px rgba(176, 141, 87, 0.3);
}

/* TV Show header text color */
.similar-items-panel[data-original-card^="tvshow"] .similar-items-header h3 {
  color: #e6e9ff;
  text-shadow: 0 0 10px rgba(61, 90, 254, 0.3);
}
/* History header text color */
.similar-items-panel[data-original-card^="history"] .similar-items-header h3 {
  color: #f4e4c1;
  text-shadow: 0 0 10px rgba(139, 105, 20, 0.3);
}



.similar-items-loading {
  margin-top: 10px;
  color: #aaa;
  font-size: 0.9rem;
  display: none;
}

.similar-items-content {
  flex: 1;
  padding: 15px; /* Reduced padding to give more space for content */
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.similar-items-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.no-similar-items {
  text-align: center;
  color: #aaa;
  font-size: 1.1rem;
  margin-top: 50px;
}

/* Similar item cards - match the style of side panel cards exactly */
.similar-item-card {
  display: flex;
  align-items: flex-start;
  padding: 10px; /* Reduced padding to fit better */
  background: linear-gradient(145deg, #000, #4b0d0d);
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(145deg, #000, #4b0d0d),
    linear-gradient(45deg, #9b4d5f, #c1a8a8);
  animation: fadeIn 0.5s ease-in-out;
  min-height: 190px; /* Increased height to accommodate larger images */
  width: 100%;
  max-width: 100%; /* Ensure cards don't exceed container width */
  box-sizing: border-box; /* Include padding and border in width calculation */
}

.similar-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1), 0 0 15px rgba(155, 77, 95, 0.71);
}

/* Game card styling - match side panel exactly */
.similar-item-card[data-type="game"] {
  background: linear-gradient(145deg, #05374a, #260220);
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(145deg, #05374a, #260220),
    linear-gradient(45deg, #196875, #196875);
}

.similar-item-card[data-type="game"]:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1), 0 0 15px rgba(191, 0, 255, 0.377);
}

/* Book card styling - match side panel exactly */
.similar-item-card[data-type="book"] {
  background: linear-gradient(145deg, #261403 0%, #40241e 100%);
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(145deg, #261403 0%, #40241e 100%),
    linear-gradient(45deg, #b08d57, #b08d57);
}

.similar-item-card[data-type="book"]:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1), 0 0 15px rgba(255, 174, 0, 0.377);
}

/* TV Show card styling - match side panel exactly */
.similar-item-card[data-type="tvshow"] {
  background: linear-gradient(145deg, #000409, #04214e);
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(145deg, #000409, #04214e),
    linear-gradient(45deg, #878a98, #28717b);
}

.similar-item-card[data-type="tvshow"]:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1), 0 0 15px rgba(13, 13, 198, 0.71);
}

/* History card styling - match side panel exactly */
.similar-item-card[data-type="history"] {
  background: linear-gradient(145deg, #3d2f1f, #1f1207);
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(145deg, #3d2f1f, #1f1207),
    linear-gradient(45deg, #8b6914, #a67c19);
}

.similar-item-card[data-type="history"]:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1), 0 0 15px rgba(139, 105, 20, 0.4);
}


/* Image containers for different types - larger fixed sizing for better visibility */
.similar-item-card .book-image-container,
.similar-item-card .movie-image-container,
.similar-item-card .game-image-container,
.similar-item-card .tvshow-image-container,
.similar-item-card .history-image-container {
  width: 120px; /* Fixed larger width for better visibility */
  height: 160px; /* Fixed taller height for better aspect ratio */
  flex-shrink: 0;
  margin-right: 15px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.similar-item-card .book-image,
.similar-item-card .movie-image,
.similar-item-card .game-image,
.similar-item-card .tvshow-image,
.similar-item-card .history-image {
  width: 100%; /* Fill container width */
  height: 100%; /* Fill container height */
  object-fit: contain; /* Maintain aspect ratio and show full image */
  border-radius: 6px;
  transition: transform 0.3s ease;
}
.similar-item-card:hover .book-image,
.similar-item-card:hover .movie-image,
.similar-item-card:hover .game-image,
.similar-item-card:hover .tvshow-image,
.similar-item-card:hover .history-image {
  transform: scale(1.05);
}

.similar-item-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.similar-item-card .card-content h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.similar-item-card .card-meta {
  margin-bottom: 8px;
}

.similar-item-card .card-meta p {
  margin: 2px 0;
  font-size: 0.85rem;
  color: #aaa;
}

.similar-item-card .card-meta p.author {
  color: #ddd;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.similar-item-card .card-meta p.setting,
.similar-item-card .card-meta p.time,
.similar-item-card .card-meta p.date {
  color: #aaa;
  font-size: 0.8rem;
}

.similar-item-card .card-meta p.setting strong,
.similar-item-card .card-meta p.time strong,
.similar-item-card .card-meta p.date strong {
  color: #ccc;
}

.similar-item-card .description {
  font-size: 0.8rem;
  color: #ccc;
  line-height: 1.3;
  margin: 0;
  flex: 1;
}



/* Animation */
@keyframes similarItemsFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive design */
@media (max-width: 1200px) {
  .similar-item-card {
    min-height: 160px;
    padding: 10px;
  }
  
  .similar-item-card .book-image-container,
  .similar-item-card .movie-image-container,
  .similar-item-card .game-image-container,
  .similar-item-card .tvshow-image-container {
    min-width: 80px;
    max-width: 110px;
    height: 130px;
  }
}

@media (max-width: 768px) {
  .similar-items-panel {
    padding: 10px;
  }
  
  .similar-items-header {
    padding: 15px;
  }
  
  .similar-items-content {
    padding: 15px;
  }
  
  .similar-item-card {
    min-height: 140px;
    padding: 8px;
  }
  
  .similar-item-card .book-image-container,
  .similar-item-card .movie-image-container,
  .similar-item-card .game-image-container,
  .similar-item-card .tvshow-image-container {
    min-width: 70px;
    max-width: 90px;
    height: 110px;
    margin-right: 12px;
  }
  
  .similar-item-card .card-content h3 {
    font-size: 1rem;
  }
  
  .similar-item-card .card-meta p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .similar-item-card {
    min-height: 120px;
    padding: 6px;
  }
  
  .similar-item-card .book-image-container,
  .similar-item-card .movie-image-container,
  .similar-item-card .game-image-container,
  .similar-item-card .tvshow-image-container {
    min-width: 60px;
    max-width: 75px;
    height: 95px;
    margin-right: 10px;
  }
  
  .similar-item-card .card-content h3 {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }
  
  .similar-item-card .card-meta p {
    font-size: 0.75rem;
    margin: 1px 0;
  }
}

/* Scrollbar styling for similar items content */
.similar-items-content::-webkit-scrollbar {
  width: 8px;
}

.similar-items-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.similar-items-content::-webkit-scrollbar-thumb {
  background: rgba(63, 203, 224, 0.3);
  border-radius: 4px;
}

.similar-items-content::-webkit-scrollbar-thumb:hover {
  background: rgba(63, 203, 224, 0.5);
}