/* ═══════════════════════════════════════════
   Toggle – Play/Pause (from Uiverse.io by MuhammadHasann)
   ═══════════════════════════════════════════ */

.toggle-cont {
  width: 100px;
  height: 50px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.toggle-cont .toggle-input {
  display: none;
}

.toggle-cont .toggle-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 6px;
  width: 100%;
  height: 100%;
  background: #1a1a26;
  border-radius: 9999px;
  box-sizing: content-box;
  box-shadow: 0px 0px 16px -8px rgba(254, 254, 254, 0.3);
  transition: all 0.3s ease;
}

.toggle-cont .toggle-label:hover {
  box-shadow: 0px 0px 24px -4px rgba(244, 63, 94, 0.3);
}

.toggle-cont .toggle-label .cont-label-play {
  position: relative;
  width: 50px;
  aspect-ratio: 1 / 1;
  background: #2a2a3a;
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.toggle-cont .toggle-input:checked + .toggle-label .cont-label-play {
  background: var(--accent, #f43f5e);
  transform: translateX(50px);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
}

.toggle-cont .toggle-label .label-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 24px;
  aspect-ratio: 1 / 1;
  background: #fefefe;
  border-radius: 4px;
  clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%);
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.toggle-cont .toggle-input:checked + .toggle-label .label-play {
  width: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}