/* ===========================
   Luca Reward Toast – TOP RIGHT, full slide in/out
   =========================== */

#luca-reward-stack{
  position:fixed;
  top:30px; right:16px;
  left:auto; bottom:auto;
  z-index:999999;
  display:flex; flex-direction:column; gap:12px;
  pointer-events:none;
}

/* Card */
.luca-reward{
  --grad: linear-gradient(90deg,#f24f7c 0%, #7b5ed6 50%, #22c1d6 100%);
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-width:min(86vw, 380px);
  max-width:min(86vw, 380px);
  padding:14px 16px 14px 14px;
  color:#fff; background:var(--grad);
  border-radius:16px; box-shadow:0 12px 36px rgba(0,0,0,.28);
  pointer-events:auto; overflow:hidden;
  will-change: transform;
  animation:luca-slide-in-right .48s ease-out both; /* slower/cleaner slide-in */
}

/* Geopattern */
.luca-reward::before{
  content:"";
  position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:url('https://app.luca1998s.com/wp-content/plugins/youzify/includes/public/assets/images/geopattern.png');
  background-size:240px auto; background-position:center; background-repeat:repeat;
}

/* Party GIF – Standard State */
.luca-reward::after{
  content:"";
  position:absolute; right:34px; bottom:10px; width:72px; height:72px;
  background:url('https://app.luca1998s.com/wp-content/uploads/2025/10/congratsgif.gif') center/contain no-repeat;
  opacity:.95; filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}

/* Present icon (left) – Standard State */
.luca-reward .luca-reward-icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:8px;
  background:url('https://app.luca1998s.com/wp-content/uploads/2025/10/presenticon.png') center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

/* Typography */
.luca-reward .luca-reward-text{
  display:flex; flex-direction:column; gap:4px;
  margin-right:130px; /* more space so text never hits the GIF */
  font-family:-apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.luca-reward .luca-reward-line1{
  font-weight:600; letter-spacing:.1px;
  font-size:clamp(14px, 2.7vw, 17px);
  line-height:1.15;
}
.luca-reward .luca-reward-line2{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-weight:600; letter-spacing:.08em;
  font-size:clamp(12px, 2.4vw, 14px);
}

/* Chip: "⚡+2 Sparks" — bold, Bolt ganz vorne */
.luca-reward .luca-chip{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.38rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(2px);
  font-weight:800;               /* back to bold */
  text-transform:none;           /* genau "Sparks", nicht alles CAPS */
  letter-spacing:.04em;
}
.luca-reward .luca-chip::before{
  content:"⚡";                  /* Bolt vor dem gesamten Inhalt */
  font-weight:900;
  margin-right:0;                /* direkt an "+2" dran: "⚡+2" */
  line-height:1;
}

/* Close */
.luca-reward .luca-close{
  position:absolute; top:8px; right:10px; width:28px; height:28px;
  color:#fff; opacity:.7; font-size:18px; line-height:28px; text-align:center;
  cursor:pointer; user-select:none;
}

/* Desktop – bigger, and push GIF a bit further */
@media (min-width: 992px){
  .luca-reward{
    min-width:520px; max-width:520px;
    padding:20px 24px;
  }
  .luca-reward .luca-reward-icon{ width:40px; height:40px; }
  .luca-reward::after{ width:90px; height:90px; bottom:12px; right:48px; }
  .luca-reward .luca-reward-text{ margin-right:170px; }
  .luca-reward .luca-reward-line1{ font-size:19px; }
  .luca-reward .luca-reward-line2{ font-size:16px; }
  .luca-reward .luca-chip{ padding:.5rem 1rem; }
}

/* Exit – full slide out to the right, same speed as in */
.luca-reward.is-hiding{ animation:luca-slide-out-right .48s ease-in forwards; }

/* Keyframes */
@keyframes luca-slide-in-right{
  from{ transform:translateX(120%) }
  to  { transform:translateX(0) }
}
@keyframes luca-slide-out-right{
  to{ transform:translateX(120%) }
}


/* ==========================================================================
   STATE MODIFIER: NICE TRY / ALREADY REWARDED
   Logic: Selector targets cards that DO NOT have a .luca-chip inside.
   ========================================================================== */

/* 1. Remove GIF */
.luca-reward:not(:has(.luca-chip))::after {
  display: none !important;
}

/* 2. Reduce Width (~36% smaller) & Reset Text Margin */
.luca-reward:not(:has(.luca-chip)) {
  /* Mobile: 380px * 0.64 = ~243px -> 250px */
  min-width: min(86vw, 250px);
  max-width: min(86vw, 250px);
}
.luca-reward:not(:has(.luca-chip)) .luca-reward-text {
  margin-right: 0 !important; /* No space needed for GIF anymore */
}

/* Desktop Adjustment for Nice Try */
@media (min-width: 992px){
  .luca-reward:not(:has(.luca-chip)) {
    /* Desktop: 520px * 0.64 = ~332px -> 335px */
    min-width: 335px;
    max-width: 335px;
  }
}

/* 3. Icon Override Target */
/* 
   Hinweis: Das JS setzt jetzt 'background-image' per inline-style auf das Element 
   .luca-reward-icon, wenn es ein "Nice Try" ist. 
   Deshalb brauchen wir hier KEINE URL mehr definieren, nur sicherstellen, 
   dass es nicht vom Standard überschrieben wird, falls nötig.
   Das normale CSS (.luca-reward .luca-reward-icon) setzt das Present Icon,
   aber Inline-Styles gewinnen immer. Alles sauber.
*/