/* =========================
   GPC LOOP BADGES — Premium Micro Animations
   - % sold: sheen
   - urgent days: pulse only when .gpc-urgent
   - near sold out: red glow/outline when .gpc-near-soldout
   ========================= */

/* Positioning context for overlay */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  position: relative;
  display: block;
}

/* Badge container over image */
.gpc-loop-badges{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:5;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  pointer-events:none; /* overlay never blocks clicks */
}

/* Base badge */
.gpc-badge{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  line-height:1;
  color:#fff;

  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.12);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease,
    filter .25s ease;
  will-change: transform;
}

/* Hover: trigger by product card hover (pointer-events is none on container) */
.woocommerce ul.products li.product:hover .gpc-badge{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.20);
}

/* ---------------------------------
   1) Tickets left: calm float
---------------------------------- */
.gpc-badge-left{
  animation: gpcFloat 7.5s ease-in-out infinite;
}

/* ---------------------------------
   2) % sold: different animation (sheen)
---------------------------------- */
.gpc-badge-sold{
  overflow:hidden;
}
.gpc-badge-sold::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-65%;
  width:55%;
  height:190%;
  transform: rotate(25deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  animation: gpcSheen 9s ease-in-out infinite;
  pointer-events:none;
}

/* ---------------------------------
   3) Days left: calm by default
---------------------------------- */
.gpc-badge-days{
  animation: gpcFloat 8.8s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* ---------------------------------
   URGENT: pulse ONLY when .gpc-urgent
   (days_left <= 7 from PHP)
---------------------------------- */
.gpc-badge-days.gpc-urgent{
  animation: gpcUrgentPulse 1.65s ease-in-out infinite !important;
  border-color: rgba(255,90,95,.55);
  box-shadow: 0 10px 28px rgba(255,90,95,.18);
}

/* ---------------------------------
   NEAR SOLD OUT: red glow/outline (>= 90% sold)
   We apply class on LEFT badge: .gpc-near-soldout
---------------------------------- */
.gpc-badge-left.gpc-near-soldout{
  border-color: rgba(255,90,95,.78);
  box-shadow:
    0 12px 36px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,90,95,.35);
  filter: saturate(1.1);
}

/* On hover, intensify near-soldout slightly */
.woocommerce ul.products li.product:hover .gpc-badge-left.gpc-near-soldout{
  box-shadow:
    0 16px 44px rgba(0,0,0,.40),
    0 0 0 3px rgba(255,90,95,.40),
    0 10px 30px rgba(255,90,95,.18);
}

/* Optional: soldout state (if you kept gpc-soldout in PHP) */
.gpc-badge.gpc-soldout{
  border-color: rgba(255,90,95,.9);
  box-shadow:
    0 16px 46px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,90,95,.45);
}

/* ---------------------------------
   Keyframes
---------------------------------- */
@keyframes gpcFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes gpcSheen{
  0%   { transform: translateX(0) rotate(25deg); opacity:0; }
  10%  { opacity:.55; }
  42%  { transform: translateX(240%) rotate(25deg); opacity:0; }
  100% { transform: translateX(240%) rotate(25deg); opacity:0; }
}

@keyframes gpcUrgentPulse{
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .gpc-badge,
  .gpc-badge-left,
  .gpc-badge-days,
  .gpc-badge-sold::before{
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile polish */
@media (max-width: 768px){
  .gpc-loop-badges{
    top:10px;
    left:10px;
    right:10px;
    gap:8px;
  }
  .gpc-badge{
    font-size:12px;
    padding:7px 10px;
  }
}