/* Cupid's Worst Nightmare ! Widget Styles */
.cwn-widget {
  position: relative !important; 
  width: 220px !important; 
  height: 220px !important;
  min-width: 220px !important; /* forces it to stay exactly 220px */
  max-width: 220px !important; /* prevents stretching i hope */
  background: rgba(10, 10, 15, 0.8) !important; 
  backdrop-filter: blur(10px);
  clip-path: polygon(50% 20%, 80% 0%, 100% 25%, 100% 55%, 50% 100%, 0% 55%, 0% 25%, 20% 0%) !important;
  padding: 60px 15px 20px 15px !important; 
  text-align: center !important; 
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,0.05) !important; 
  margin: 20px auto !important; 
  font-family: 'Garamond', serif !important;
  display: block !important;
}

.cwn-title {
  color: #fff; text-transform: uppercase; font-size: 0.65em; letter-spacing: 2px; 
  display: block; margin-bottom: 20px;
}
.cwn-nav {
  display: flex; justify-content: center; gap: 12px; 
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px;
}
.cwn-nav a { text-decoration: none; font-size: 0.7em; font-weight: bold; transition: 0.3s; }
.cwn-nav a:hover { filter: brightness(1.5); }

/* -- Color Variations -- */

/* Purple */
.cwn-purple { box-shadow: inset 0 0 25px #7e22ce; animation: beat-purple 4s ease-in-out infinite; }
.cwn-purple .cwn-title { text-shadow: 0 0 10px #a855f7; }
.cwn-purple .cwn-nav a { color: #a855f7; }
.cwn-purple .cwn-nav a:hover { text-shadow: 0 0 5px #a855f7; }
@keyframes beat-purple { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #7e22ce); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #7e22ce); } }

/* Black */
.cwn-black { box-shadow: inset 0 0 25px #000000; animation: beat-black 4s ease-in-out infinite; }
.cwn-black .cwn-title { text-shadow: 0 0 10px #666666; }
.cwn-black .cwn-nav a { color: #666666; }
.cwn-black .cwn-nav a:hover { text-shadow: 0 0 5px #666666; }
@keyframes beat-black { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #000000); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #000000); } }

/* Blue */
.cwn-blue { box-shadow: inset 0 0 25px #1d4ed8; animation: beat-blue 4s ease-in-out infinite; }
.cwn-blue .cwn-title { text-shadow: 0 0 10px #3b82f6; }
.cwn-blue .cwn-nav a { color: #3b82f6; }
.cwn-blue .cwn-nav a:hover { text-shadow: 0 0 5px #3b82f6; }
@keyframes beat-blue { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #1d4ed8); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #1d4ed8); } }

/* Green */
.cwn-green { box-shadow: inset 0 0 25px #065f46; animation: beat-green 4s ease-in-out infinite; }
.cwn-green .cwn-title { text-shadow: 0 0 10px #10b981; }
.cwn-green .cwn-nav a { color: #10b981; }
.cwn-green .cwn-nav a:hover { text-shadow: 0 0 5px #10b981; }
@keyframes beat-green { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #065f46); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #065f46); } }

/* Red */
.cwn-red { box-shadow: inset 0 0 25px #b91c1c; animation: beat-red 4s ease-in-out infinite; }
.cwn-red .cwn-title { text-shadow: 0 0 10px #ef4444; }
.cwn-red .cwn-nav a { color: #ef4444; }
.cwn-red .cwn-nav a:hover { text-shadow: 0 0 5px #ef4444; }
@keyframes beat-red { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #b91c1c); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #b91c1c); } }

/* Pink */
.cwn-pink { box-shadow: inset 0 0 25px #be185d; animation: beat-pink 4s ease-in-out infinite; }
.cwn-pink .cwn-title { text-shadow: 0 0 10px #f472b6; }
.cwn-pink .cwn-nav a { color: #f472b6; }
.cwn-pink .cwn-nav a:hover { text-shadow: 0 0 5px #f472b6; }
@keyframes beat-pink { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #be185d); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #be185d); } }

/* White */
.cwn-white { box-shadow: inset 0 0 25px #94a3b8; animation: beat-white 4s ease-in-out infinite; }
.cwn-white .cwn-title { text-shadow: 0 0 10px #ffffff; }
.cwn-white .cwn-nav a { color: #ffffff; }
.cwn-white .cwn-nav a:hover { text-shadow: 0 0 5px #ffffff; }
@keyframes beat-white { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #94a3b8); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px #94a3b8); } }