/* Gallery Layout Styles - Extracted from inline CSS */

/* Ensure body and html have proper height */
html,
body {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Use flexbox layout for sticky footer */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Main content wrapper - grows to fill available space */
.main-content-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Gallery content - minimal padding, let it grow naturally */
.netflix-gallery {
  flex: 1 !important;
  padding-bottom: 40px; /* Minimal padding for spacing */
}

/* Footer - sticks to bottom */
footer {
  margin-top: auto !important;
  width: 100% !important;
  z-index: 10 !important;
  flex-shrink: 0 !important; /* Prevent footer from shrinking */
}

/* Placeholder card styles for Water Simulation */
.placeholder-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 2px dashed #444;
  border-radius: 8px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: all 0.3s ease;
}

.placeholder-card:hover {
  border-color: #00bcd4;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.placeholder-content {
  text-align: center;
  color: #b3b3b3;
  padding: 40px 20px;
}

.placeholder-icon {
  font-size: 3rem;
  color: #00bcd4;
  margin-bottom: 20px;
}

.placeholder-text h4 {
  color: white;
  font-size: 1.2rem;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.placeholder-text p {
  color: #b3b3b3;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}