/* Couponix Animated Microinteractions */
:root{
  --cx-ease:cubic-bezier(.2,.8,.2,1);
}
.card,.checkout-card,.brand-card,.combo-card,.deal-card,.pack-card,.stat-card,.wishlist-card,.product-card,.reward-card,.badge-card{
  transition:transform .24s var(--cx-ease), box-shadow .24s var(--cx-ease), border-color .24s var(--cx-ease), background .24s var(--cx-ease);
  will-change:transform;
}
.card:hover,.checkout-card:hover,.brand-card:hover,.combo-card:hover,.deal-card:hover,.pack-card:hover,.stat-card:hover,.wishlist-card:hover,.product-card:hover,.reward-card:hover,.badge-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(15,23,42,.12) !important;
  border-color:#C7D2FE !important;
}
.btn,.cart-pill,.credits-pill,.navbar a,button{
  transition:transform .18s var(--cx-ease), box-shadow .18s var(--cx-ease), opacity .18s var(--cx-ease);
}
.btn:active,button:active{transform:scale(.97)}
.cx-toast-stack{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:380px;
  pointer-events:none;
}
.cx-toast{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,255,255,.96);
  border:1px solid #E5E7EB;
  border-left:5px solid #4F46E5;
  border-radius:20px;
  padding:14px 16px;
  box-shadow:0 18px 46px rgba(15,23,42,.18);
  transform:translateX(120%);
  opacity:0;
  animation:cxToastIn .38s var(--cx-ease) forwards;
  pointer-events:auto;
}
.cx-toast.success{border-left-color:#10B981}.cx-toast.reward{border-left-color:#F59E0B}.cx-toast.error{border-left-color:#EF4444}
.cx-toast-icon{font-size:24px;line-height:1}.cx-toast-title{font-weight:800;color:#0F172A;margin-bottom:3px}.cx-toast-message{color:#64748B;font-size:14px;line-height:1.4}.cx-toast-close{margin-left:auto;border:none;background:#F1F5F9;color:#475569;border-radius:999px;width:26px;height:26px;cursor:pointer;padding:0}
@keyframes cxToastIn{to{transform:translateX(0);opacity:1}}
@keyframes cxToastOut{to{transform:translateX(120%);opacity:0}}
.cx-confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9998}
.cx-reward-modal-backdrop{position:fixed;inset:0;z-index:9997;background:rgba(15,23,42,.38);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;animation:cxFadeIn .22s ease forwards}
.cx-reward-modal{width:min(440px,100%);background:white;border-radius:30px;padding:30px;text-align:center;box-shadow:0 30px 80px rgba(15,23,42,.28);transform:translateY(18px) scale(.96);animation:cxPopIn .36s var(--cx-ease) forwards;border:1px solid #E5E7EB}
.cx-reward-icon{width:84px;height:84px;margin:0 auto 16px;border-radius:26px;background:linear-gradient(135deg,#FEF3C7,#EEF2FF);display:flex;align-items:center;justify-content:center;font-size:44px;animation:cxPulse 1.4s ease infinite}
.cx-reward-modal h2{margin:0 0 8px;color:#0F172A}.cx-reward-modal p{margin:0 0 20px;color:#64748B;line-height:1.6}.cx-reward-modal .btn{display:inline-block}
.cx-success-glow{position:relative;overflow:hidden}.cx-success-glow:before{content:"";position:absolute;inset:-2px;background:linear-gradient(120deg,transparent,#C7D2FE,transparent);transform:translateX(-100%);animation:cxShimmer 2.4s ease infinite;opacity:.55;pointer-events:none}.cx-success-glow>*{position:relative}
.cx-float-in{animation:cxFloatIn .52s var(--cx-ease) both}.cx-stagger > *{animation:cxFloatIn .5s var(--cx-ease) both}.cx-stagger > *:nth-child(2){animation-delay:.06s}.cx-stagger > *:nth-child(3){animation-delay:.12s}.cx-stagger > *:nth-child(4){animation-delay:.18s}.cx-stagger > *:nth-child(5){animation-delay:.24s}.cx-stagger > *:nth-child(6){animation-delay:.30s}
@keyframes cxFadeIn{to{opacity:1}}@keyframes cxPopIn{to{transform:translateY(0) scale(1)}}@keyframes cxPulse{50%{transform:scale(1.08) rotate(-3deg)}}@keyframes cxShimmer{to{transform:translateX(100%)}}@keyframes cxFloatIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){.cx-toast-stack{left:14px;right:14px;bottom:14px;max-width:none}.cx-toast{border-radius:18px}.card:hover,.checkout-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.card:hover,.checkout-card:hover{transform:none!important}}