/* WP Stark Add-on — Checklist CSS (v1.0.6-compat restored) */
.wpsa-checklist {
  --wpsa-text: #414856;
  --wpsa-check: #4f29f0;
  --wpsa-disabled: #c3c8de;
  --wpsa-height: auto;
  --wpsa-row-gap: 8px;
  --wpsa-icon-size: 18px;
  --wpsa-stroke: 3px;
  --wpsa-strike: clamp(1px, 0.12em, 3px);
  height: var(--wpsa-height);
  position: relative;
  display: grid;
  grid-template-columns: var(--wpsa-icon-size) auto;
  align-items: center;
  justify-content: start;
  font-size: 0.95em;
  gap: var(--wpsa-row-gap) 16px;
  padding: 12px 16px;
}
.wpsa-checklist label {
  color: var(--wpsa-text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: fit-content;
  transition: color 0.3s ease, padding 0.3s ease;
  line-height: 1.2em;
}
.wpsa-checklist label::before,
.wpsa-checklist label::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* Strike bar (usado na animação de corte) */
.wpsa-checklist label::before {
  height: var(--wpsa-strike);
  width: 8px;
  left: calc(-1 * (var(--wpsa-icon-size) + 12px));
  background: var(--wpsa-check);
  border-radius: 2px;
  transition: background 0.3s ease;
}
/* Esconde a barra por padrão p/ não aparecer dentro do círculo */
.wpsa-checklist input[type="checkbox"] + label::before {
  width: 0;
  opacity: 0;
}
.wpsa-checklist input[type="checkbox"]:checked + label::before {
  opacity: 1;
}
/* Ponto base para "fogos" */
.wpsa-checklist label::after {
  height: calc(var(--wpsa-stroke) + 1px);
  width: calc(var(--wpsa-stroke) + 1px);
  top: calc(var(--wpsa-icon-size) * 0.45);
  left: calc(-1 * (var(--wpsa-icon-size) + 10px));
  border-radius: 50%;
  opacity: 0;
}

.wpsa-checklist input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  height: var(--wpsa-icon-size);
  width: var(--wpsa-icon-size);
  outline: none;
  border-radius: 50%;
  border: var(--wpsa-stroke) solid var(--wpsa-check);
  margin: 0 15px 0 0;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  margin-right: 20px;
}

/* Traços do check (versão estável) */
.wpsa-checklist input[type="checkbox"]::before,
.wpsa-checklist input[type="checkbox"]::after {
  content: "";
  position: absolute;
  height: var(--wpsa-stroke);
  top: auto;
  background: var(--wpsa-check);
  border-radius: 2px;
  width: 0;           /* base */
  opacity: 0;         /* invisível até o checked */
}
.wpsa-checklist input[type="checkbox"]::before {
  right: 58%;
  transform-origin: right bottom;
}
.wpsa-checklist input[type="checkbox"]::after {
  left: 40%;
  transform-origin: left bottom;
}

/* ESTADO MARCADO */
.wpsa-checklist input[type="checkbox"]:checked {
  border-color: transparent; /* remove o círculo ao marcar */
}
.wpsa-checklist input[type="checkbox"]:checked::before {
  opacity: 1;
  animation: wpsa-check-01 0.35s ease forwards;
}
.wpsa-checklist input[type="checkbox"]:checked::after {
  opacity: 1;
  animation: wpsa-check-02 0.35s ease forwards;
}
.wpsa-checklist input[type="checkbox"]:checked + label {
  color: var(--wpsa-disabled);
  animation: wpsa-move 0.3s ease 0.05s forwards;
}
.wpsa-checklist input[type="checkbox"]:checked + label::before {
  background: var(--wpsa-disabled);
  animation: wpsa-slice 0.4s ease forwards;
}
.wpsa-checklist input[type="checkbox"]:checked + label::after {
  opacity: 1;
  animation: wpsa-firework 0.5s ease forwards 0.05s;
}

/* Animações (versão estável) */
@keyframes wpsa-move {
  50%   { padding-left: 8px; padding-right: 0; }
  100%  { padding-right: 4px; }
}
@keyframes wpsa-slice {
  0%   { width: 8px; }
  60%  { width: 100%; left: 4px; }
  100% { width: 100%; left: -2px; padding-left: 0; }
}
@keyframes wpsa-check-01 {
  0%   { width: 6px; top: auto; transform: rotate(0); }
  50%  { width: 0px; top: auto; transform: rotate(0); }
  51%  { width: 0px; top: calc(var(--wpsa-icon-size) * 0.48); transform: rotate(45deg); }
  100% { width: calc(var(--wpsa-icon-size) * 0.38); top: calc(var(--wpsa-icon-size) * 0.48); transform: rotate(45deg); }
}
@keyframes wpsa-check-02 {
  0%   { width: 6px; top: auto; transform: rotate(0); }
  50%  { width: 0px; top: auto; transform: rotate(0); }
  51%  { width: 0px; top: calc(var(--wpsa-icon-size) * 0.48); transform: rotate(-45deg); }
  100% { width: calc(var(--wpsa-icon-size) * 0.7);  top: calc(var(--wpsa-icon-size) * 0.48); transform: rotate(-45deg); }
}
@keyframes wpsa-firework {
  0%   { opacity: 1; box-shadow: 0 0 0 calc(-1 * var(--wpsa-stroke)) var(--wpsa-check), 0 0 0 calc(-1 * var(--wpsa-stroke)) var(--wpsa-check), 0 0 0 calc(-1 * var(--wpsa-stroke)) var(--wpsa-check), 0 0 0 calc(-1 * var(--wpsa-stroke)) var(--wpsa-check), 0 0 0 calc(-1 * var(--wpsa-stroke)) var(--wpsa-check), 0 0 0 calc(-1 * var(--wpsa-stroke)) var(--wpsa-check); }
  30%  { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 calc(-0.8 * var(--wpsa-icon-size)) 0 0 var(--wpsa-check), calc(0.9 * var(--wpsa-icon-size)) calc(-0.45 * var(--wpsa-icon-size)) 0 0 var(--wpsa-check), calc(0.9 * var(--wpsa-icon-size)) calc(0.45 * var(--wpsa-icon-size)) 0 0 var(--wpsa-check), 0 calc(0.8 * var(--wpsa-icon-size)) 0 0 var(--wpsa-check), calc(-0.9 * var(--wpsa-icon-size)) calc(0.45 * var(--wpsa-icon-size)) 0 0 var(--wpsa-check), calc(-0.9 * var(--wpsa-icon-size)) calc(-0.45 * var(--wpsa-icon-size)) 0 0 var(--wpsa-check); }
}

/* Responsivo */
@media (max-width: 767px) {
  .wpsa-checklist { font-size: 0.9em; }
  /* remove o tachado no mobile */
  .wpsa-checklist input[type="checkbox"]:checked + label::before {
    animation: none !important;
    display: none !important;
  }
}