/* =========================================================
   Duftbuddy Premiummodus - Testversion
   Edlere Animationen, Auswahl-Glow, Luxury-Veredelung
   ========================================================= */

:root{
  --premium-gold:#d4af37;
  --premium-gold-soft:rgba(212,175,55,.26);
  --premium-dark:#15100d;
}

/* Sanfte Grundanimationen */
.card,
.top5-card,
.order-box,
.note-with-sample,
.btn,
button{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    opacity .22s ease;
}

/* Karten etwas lebendiger */
.card{
  animation: premiumFadeUp .34s ease both;
}

@keyframes premiumFadeUp{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(20,15,10,.12);
}

/* Auswahl wirkt wie ein Juwel */
.card.selected{
  border-color:var(--premium-gold) !important;
  box-shadow:
    0 0 0 3px rgba(212,175,55,.24),
    0 18px 38px rgba(212,175,55,.22) !important;
  position:relative;
}

.card.selected::after{
  content:"✓ Juwel gewählt";
  position:absolute;
  right:14px;
  bottom:12px;
  background:linear-gradient(135deg,#f8dc79,#d4af37);
  color:#17110f;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  font-size:.72rem;
  box-shadow:0 8px 18px rgba(212,175,55,.28);
}

/* Buttons hochwertiger */
.select-btn,
#submitBtn,
.whatsapp-btn{
  letter-spacing:.01em;
}

.select-btn:hover,
.detail-btn:hover,
#submitBtn:hover,
.whatsapp-btn:hover{
  transform:translateY(-2px);
}

/* Luxury-Karten: mehr Premium-Glow */
.card.card-luxury{
  position:relative;
  overflow:hidden;
}

.card.card-luxury::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 42%,
      rgba(255,255,255,.55) 48%,
      rgba(212,175,55,.22) 51%,
      transparent 58%,
      transparent 100%
    );
  transform:translateX(-60%) rotate(8deg);
  opacity:.0;
  pointer-events:none;
}

.card.card-luxury:hover::before{
  animation: luxurySheen 1.2s ease;
}

@keyframes luxurySheen{
  0%{transform:translateX(-60%) rotate(8deg);opacity:0;}
  25%{opacity:.55;}
  100%{transform:translateX(60%) rotate(8deg);opacity:0;}
}

.card.card-luxury:hover{
  box-shadow:
    0 22px 48px rgba(212,175,55,.30),
    inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

/* Luxury Kennzeichnung */
.card.card-luxury .tag::after{
  content:" ✨";
}

/* Top5 Bereich: leichter Premium-Effekt */
.top5-section{
  position:relative;
}

.top5-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(212,175,55,.18), transparent 28%),
    radial-gradient(circle at 82% 88%, rgba(255,255,255,.10), transparent 34%);
  pointer-events:none;
}

.top5-card{
  position:relative;
  z-index:1;
}

.top5-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}

/* Bestellbox edler */
.order-box{
  box-shadow:
    0 22px 48px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

.order-box h3::after{
  content:"";
  display:block;
  width:54px;
  height:2px;
  background:linear-gradient(90deg,var(--premium-gold),transparent);
  margin-top:10px;
  border-radius:999px;
}

/* WhatsApp Button mit sanftem Glow */
.whatsapp-btn{
  position:relative;
  overflow:hidden;
}

.whatsapp-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-120%);
}

.whatsapp-btn:hover::after{
  animation: whatsappGlow .8s ease;
}

@keyframes whatsappGlow{
  from{transform:translateX(-120%);}
  to{transform:translateX(120%);}
}

/* Modal weicher */
.modal-card{
  animation: modalPremium .22s ease both;
}

@keyframes modalPremium{
  from{opacity:0;transform:translateY(12px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Kleine Premium-Badges */
.neu-badge{
  animation: badgeFloat 3.2s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{transform:rotate(8deg) translateY(0);}
  50%{transform:rotate(8deg) translateY(-3px);}
}

/* Mobile: Effekte dezenter */
@media(max-width:900px){
  .card:hover,
  .top5-card:hover{
    transform:none;
  }

  .card.selected::after{
    font-size:.68rem;
    right:10px;
    bottom:10px;
  }
}

/* Nutzer mit reduzierter Bewegung respektieren */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}