/* Parallax Background */
.parallax {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
  background-image: url('background_parallax.png');
  background-size: cover;
  background-position: center;
  will-change: background-position;
  pointer-events: none;
  animation: parallaxMove 40s linear infinite;
}

@keyframes parallaxMove {
  0% {background-position: 0 0;}
  100% {background-position: 0 200px;}
}

/* Animated Icon */
#animatedMilkshakeIcon img {
  transition: transform 0.5s;
}
#animatedMilkshakeIcon:hover img {
  filter: drop-shadow(0 0 10px #b2f1f6);
  transform: scale(1.13) rotate(-8deg);
}

/* General Styling */
body {
  background: transparent;
}
.container {
  margin-top: 2rem;
  position: relative;
  z-index: 10;
}
section {
  background: rgba(255,255,255,0.98);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  padding: 2rem;
}

/* Carousel */
.carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  scroll-behavior: smooth;
}
.carousel .carousel-item img {
  border-radius: 0.8rem;
  width: 120px;
  height: 120px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.carousel .active {
  border: 2px solid #4fc3f7;
}

.milkshake-progress-indicator {
  width: 100%;
  margin: 1em 0;
}

/* Buttons, UI */
button[title="Teilen"] {
  background: #4fc3f7;
  color: #fff;
  border-radius: 25px;
  padding: 0.5em 1.2em;
  font-size: 1em;
  margin-top: 1em;
}

@media (max-width:900px) {
  .container section > div {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Favoriten-Herz-Icon */
.milkshake-heart {
  font-size: 2rem;
  color: #eee;
  cursor: pointer;
  transition: color 0.2s;
}
.milkshake-heart.fav {
  color: #e53935;
  text-shadow: 0 0 8px #fbb;
}

/* Feedback Popup */
.milkshake-feedback-popup {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 6px 48px rgba(0,0,0,0.19);
  padding: 2rem;
  width: 90vw;
  max-width: 350px;
}