.advanced-checkbox {
  display: inline-block;
  perspective: 1000px; /* برای ایجاد افکت سه‌بعدی */
}

.advanced-checkbox input {
  display: none;
}

.advanced-checkbox label {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.advanced-checkbox input:checked + label .box {
  transform: rotateX(360deg) rotateY(360deg); /* چرخش ۳۶۰ درجه به صورت ترکیبی */
}

.box > div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #333, #111);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.front {
  transform: translateZ(40px);
}
.back {
  transform: rotateY(180deg) translateZ(40px);
}
.left {
  transform: rotateY(-90deg) translateZ(40px);
}
.right {
  transform: rotateY(90deg) translateZ(40px);
}
.top {
  transform: rotateX(90deg) translateZ(40px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(40px);
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: solid #00ff99;
  border-width: 0 6px 6px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  transition:
    width 0.3s ease,
    height 0.3s ease,
    opacity 0.3s ease;
}

.advanced-checkbox input:checked + label .checkmark {
  width: 24px;
  height: 48px;
  opacity: 1;
  transition-delay: 1s; /* تاخیر برای نمایش تیک */
}