.like-dislike-01 {
  /* Base styles for icons (regular shown by default) */
  .icon-like-regular,
  .icon-dislike-regular {
      display: block;
  }
  .icon-like-solid,
  .icon-dislike-solid {
      display: none;
  }

  /* Checked state styles using peer-checked (Tailwind's way for display) */
  /* Hide regular icon when checked */
  .peer:checked ~ .icon-like-regular,
  .peer:checked ~ .icon-dislike-regular {
      display: none;
  }
   /* Show solid icon when checked */
  .peer:checked ~ .icon-like-solid,
  .peer:checked ~ .icon-dislike-solid {
      display: block;
  }

  /* Apply checked colors and animations */
  .peer#like-checkbox:checked ~ .icon-like-solid {
      color: #06AF30; /* Light Green */
      animation: checked-icon-like 0.5s ease-in-out;
  }
  .peer#dislike-checkbox:checked ~ .icon-dislike-solid {
      color: #f87171; /* Light Red */
      transform: rotate(180deg); /* Keep rotation */
      animation: checked-icon-dislike 0.5s ease-in-out;
  }

   /* Apply hover animations */
   .like-dislike-01 .icon-container:hover .icon-like-regular,
   .like-dislike-01 .icon-container:hover .icon-like-solid {
       animation: rotate-icon-like 0.7s ease-in-out both;
  }
  .like-dislike-01 .icon-container:hover .icon-dislike-regular,
  .like-dislike-01 .icon-container:hover .icon-dislike-solid {
       /* Ensure rotation persists on hover */
       transform: rotate(180deg);
       animation: rotate-icon-dislike 0.7s ease-in-out both;
   }

  /* Keep original keyframes */
  @keyframes rotate-icon-like {
      0% { transform: rotate(0deg) translate3d(0, 0, 0); }
      25% { transform: rotate(3deg) translate3d(0, 0, 0); }
      50% { transform: rotate(-3deg) translate3d(0, 0, 0); }
      75% { transform: rotate(1deg) translate3d(0, 0, 0); }
      100% { transform: rotate(0deg) translate3d(0, 0, 0); }
  }

  @keyframes rotate-icon-dislike {
       /* Start animation from 180 degrees */
      0% { transform: rotate(180deg) translate3d(0, 0, 0); }
      25% { transform: rotate(183deg) translate3d(0, 0, 0); }
      50% { transform: rotate(177deg) translate3d(0, 0, 0); }
      75% { transform: rotate(181deg) translate3d(0, 0, 0); }
      100% { transform: rotate(180deg) translate3d(0, 0, 0); }
  }

  @keyframes checked-icon-like {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.2) rotate(-10deg); }
      100% { transform: scale(1) rotate(0deg); opacity: 1; } /* Ensure it settles */
  }

  @keyframes checked-icon-dislike {
       /* Start animation from 180 degrees */
      0% { transform: scale(0) rotate(180deg); opacity: 0; }
      50% { transform: scale(1.2) rotate(170deg); }
      100% { transform: scale(1) rotate(180deg); opacity: 1; } /* Ensure it settles */
  }

  /* Fireworks Animation */
  .like-dislike-01 .fireworks-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      scale: 0.4;
   }

   .like-dislike-01 .checked-fx {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
      opacity: 0;
   }

  /* Trigger fireworks on check */
  .peer#like-checkbox:checked ~ .fireworks-container > .checked-like-fx {
       right: 40px;
       top: 50%;
       transform: translateY(-50%);
       animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
       animation-duration: 1.25s, 1.25s, 6.25s;
       opacity: 1;
  }

  .peer#dislike-checkbox:checked ~ .fireworks-container > .checked-dislike-fx {
       left: 40px;
       top: 50%;
       transform: translateY(-50%);
       animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
       animation-duration: 1.25s, 1.25s, 6.25s;
       opacity: 1;
  }

  @keyframes fireworks-position {
      0%, 19.9% { margin-top: 10%; margin-left: 40%; }
      20%, 39.9% { margin-top: 40%; margin-left: 30%; }
      40%, 59.9% { margin-top: 20%; margin-left: 70%; }
      60%, 79.9% { margin-top: 30%; margin-left: 20%; }
      80%, 99.9% { margin-top: 30%; margin-left: 80%; }
  }

  @keyframes fireworks-gravity {
      to { transform: translateY(200px); opacity: 0; }
  }

  @keyframes fireworks-bang {
      to {
          /* Using a simplified shadow for brevity */
          box-shadow:
            60px -50px #ff00ff, -40px 30px #00ffff, 100px 0px #ffff00,
            -80px -70px #ff8000, 50px 90px #00ff80, -50px -90px #ff0080,
            114px -107px #8800ff, 212px -166px #a600ff, 197px -6px #ff006a,
            179px -329px #3300ff, -167px -262px #ff0062, 233px 65px #ff008c,
            81px 42px #0051ff, -13px 54px #00ff2b, -60px -183px #0900ff,
            127px -259px #ff00e6, 117px -122px #00b7ff, 95px 20px #ff8000;
      }
  }
}