/**
 * LV ContentCue Frontend Styles
 * Author: LeadVenture
 * Version: 1.0.0
 * Description: Styles for the ContentCUE notification badge system
 */

.lv-cc-wrapper {
  position: relative;
  display: inline-block;
}

/* ----------------------------------
   Badge Base Styles
---------------------------------- */
.lv-cc-badge {
  --lv-cc-bg: #160032;
  --lv-cc-text: #ec1c24;

  position: absolute;
  top: -18px;
  right: -18px;
  width: 18px;
  height: 18px;
  background: var(--lv-cc-bg);
  color: var(--lv-cc-text);
  font-size: 11px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  line-height: 1;
  padding: 1px;
  z-index: 10;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}

.lv-cc-hidden {
  display: none;
}

.lv-cc-visible {
  display: flex;
}

/* ----------------------------------
   Badge Shape Variants
---------------------------------- */
.lv-cc-badge.circle {
  border-radius: 50%;
}

.lv-cc-badge.square {
  border-radius: 2px;
}

.lv-cc-badge.rectangle {
  width: 22px;
  height: 16px;
  border-radius: 2px;
}

/* ----------------------------------
   Link Wrapper
---------------------------------- */

.lv-cc-link-text {
  --lv-cc-link-margin: inherit;
  position: relative;
  display: inline-block;
  margin-right: var(--lv-cc-link-margin);
}

/* ----------------------------------
   Responsive Adjustments
---------------------------------- */
@media (max-width: 768px) {
  .lv-cc-badge {
    position: relative;
    top: 0;
    right: 0;
  }

  .lv-cc-link-text {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

/* ----------------------------------
   Animations
---------------------------------- */
@keyframes lv-cc-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  80% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lv-cc-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes lv-cc-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-2px);
  }
}

@keyframes lv-cc-shake {
  0%,
  15%,
  100% {
    transform: translateX(0);
  }
  2%,
  6%,
  10%,
  14% {
    transform: translateX(-2px);
  }
  4%,
  8%,
  12% {
    transform: translateX(2px);
  }
}

/* ----------------------------------
   Utility Animation Classes
---------------------------------- */
.lv-cc-animate-in {
  animation: lv-cc-pop 0.3s ease-out;
}

.lv-cc-link-text:hover .lv-cc-badge.lv-cc-animate-pulse {
  animation: lv-cc-pulse 1s infinite;
}

.lv-cc-link-text:hover .lv-cc-badge.lv-cc-animate-bounce {
  animation: lv-cc-bounce 0.8s ease infinite;
}

.lv-cc-link-text:hover .lv-cc-badge.lv-cc-animate-bounce {
  animation: lv-cc-bounce 0.8s ease infinite;
}

.lv-cc-link-text:hover .lv-cc-badge.lv-cc-animate-shake {
  animation: lv-cc-shake 2s cubic-bezier(0.36, 0, 0.66, -0.56) infinite;
}

.lv-cc-link-text:hover .lv-cc-badge.lv-cc-animate-scale {
  transform: scale(1.2);
}