/* ==========================================
   DISCOUNT BADGE – DESKTOP ONLY
   - visible on desktop
   - hidden on mobile
   ========================================== */

/* aby absolute fungovalo vo vnútri obrázka */
.p-image-wrapper{
  position: relative;
}

/* umiestnenie badge – pravý horný roh */
.p-image-wrapper .flags-extra{
  position: absolute;
  top: 6%;
  right: 6%;
  left: auto;
  z-index: 5;
  pointer-events: none;
}

/* ==========================
   BADGE – DESKTOP
   ========================== */
.p-image-wrapper .flags-extra .flag.flag-discount{
  --lm-green: #22A06B;
  --lm-green-deep: #167A52;

  background:
    radial-gradient(120% 120% at 30% 25%, #ffffff40 0%, transparent 45%),
    linear-gradient(145deg, var(--lm-green), var(--lm-green-deep));
  color: #ffffff;

  border: 1px solid #ffffff35;
  border-radius: 50%;

  box-shadow:
    0 10px 22px #00000022,
    inset 0 1px 0 #ffffff2a;

  text-shadow: 0 1px 2px #00000045;
  font-weight: 700;
  letter-spacing: .2px;

  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  animation: lm-badge-breathe 2.6s ease-in-out infinite;
}

/* ==========================
   ATTENTION RING
   ========================== */
.p-image-wrapper .flags-extra .flag.flag-discount::before{
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;

  background:
    radial-gradient(circle,
      transparent 58%,
      #22A06B55 62%,
      #22A06B22 68%,
      transparent 74%),
    radial-gradient(60% 60% at 40% 35%, #22A06B33 0%, transparent 70%),
    radial-gradient(55% 55% at 70% 70%, #22A06B22 0%, transparent 72%);

  filter: blur(10px);
  opacity: .9;
  z-index: -1;

  animation: lm-ring-pulse 2.6s ease-in-out infinite;
}

/* ==========================
   SOFT SHINE SWEEP
   ========================== */
.p-image-wrapper .flags-extra .flag.flag-discount::after{
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;

  background: linear-gradient(
    120deg,
    transparent 42%,
    #ffffff26 50%,
    transparent 58%
  );

  transform: translateX(-75%) rotate(12deg);
  opacity: 0;
  pointer-events: none;

  animation: lm-shine-sweep 3.8s ease-in-out infinite;
}

/* ==========================
   DESKTOP HOVER
   ========================== */
@media (hover: hover){
  .p-image-wrapper .flags-extra .flag.flag-discount:hover{
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      0 14px 28px #00000026,
      inset 0 1px 0 #ffffff30;
  }
}

/* ==========================
   MOBILE – BADGE OFF
   ========================== */
@media (max-width: 767px){
  .p-image-wrapper .flags-extra{
    display: none !important;
  }
}

/* ==========================
   ANIMATIONS
   ========================== */
@keyframes lm-badge-breathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.03); }
}

@keyframes lm-ring-pulse{
  0%, 100%{
    transform: scale(1);
    opacity: .65;
  }
  50%{
    transform: scale(1.06);
    opacity: .95;
  }
}

@keyframes lm-shine-sweep{
  0%   { transform: translateX(-75%) rotate(12deg); opacity: 0; }
  12%  { opacity: .75; }
  26%  { transform: translateX(75%) rotate(12deg); opacity: 0; }
  100% { transform: translateX(75%) rotate(12deg); opacity: 0; }
}

/* ==========================
   ACCESSIBILITY
   ========================== */
@media (prefers-reduced-motion: reduce){
  .p-image-wrapper .flags-extra .flag.flag-discount{
    animation: none;
  }
  .p-image-wrapper .flags-extra .flag.flag-discount::before,
  .p-image-wrapper .flags-extra .flag.flag-discount::after{
    animation: none;
  }
}