/* دکمه‌های عملیاتی ClassMe — ثبت سبز، حذف قرمز، انصراف زرد */

.cm-btn {
  --cm-btn-bg: #2F66F2;
  --cm-btn-bg-hover: #2454d4;
  --cm-btn-fg: #ffffff;
  --cm-btn-shadow: rgba(47, 102, 242, 0.28);
  --cm-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23ffffff'/%3E%3C/svg%3E");

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none !important;
  color: var(--cm-btn-fg) !important;
  background: var(--cm-btn-bg);
  box-shadow: 0 6px 16px -6px var(--cm-btn-shadow);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}

.cm-btn::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--cm-btn-icon) center / contain no-repeat;
  mask: var(--cm-btn-icon) center / contain no-repeat;
}

.cm-btn:hover {
  background: var(--cm-btn-bg-hover);
  color: var(--cm-btn-fg) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px var(--cm-btn-shadow);
  filter: brightness(1.03);
}

.cm-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -6px var(--cm-btn-shadow);
}

.cm-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cm-btn-bg) 45%, transparent);
  outline-offset: 2px;
}

.cm-btn:disabled,
.cm-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* در حال ارسال — خاکستری قفل‌شده با نامهٔ در حال پرواز کنار متن */
.cm-btn.cm-btn--sending {
  --cm-btn-bg: #6b7280;
  --cm-btn-bg-hover: #6b7280;
  --cm-btn-shadow: rgba(107, 114, 128, 0.28);
  opacity: 1;
  cursor: wait;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.cm-btn.cm-btn--sending:disabled {
  opacity: 1;
}

.cm-btn.cm-btn--sending:hover {
  background: var(--cm-btn-bg);
  transform: none;
  filter: none;
  box-shadow: none;
}

.cm-send-letter {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cm-send-letter 0.85s ease-in-out infinite;
}

@keyframes cm-send-letter {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  35% {
    transform: translate(-10px, -5px) rotate(-18deg);
    opacity: 1;
  }
  70% {
    transform: translate(12px, -3px) rotate(14deg);
    opacity: 0.25;
  }
  71% {
    transform: translate(-8px, 4px) rotate(-8deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* ثبت / ذخیره / تأیید — سبز */
.cm-btn--save {
  --cm-btn-bg: #16a34a;
  --cm-btn-bg-hover: #15803d;
  --cm-btn-shadow: rgba(22, 163, 74, 0.35);
  --cm-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23000'/%3E%3C/svg%3E");
}

/* افزودن ردیف — سبز با آیکون به‌علاوه */
.cm-btn--add {
  --cm-btn-bg: #16a34a;
  --cm-btn-bg-hover: #15803d;
  --cm-btn-shadow: rgba(22, 163, 74, 0.35);
  --cm-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* حذف — قرمز */
.cm-btn--delete {
  --cm-btn-bg: #d83d32;
  --cm-btn-bg-hover: #b92f26;
  --cm-btn-shadow: rgba(216, 61, 50, 0.35);
  --cm-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z' fill='%23000'/%3E%3C/svg%3E");
}

/* انصراف / کنسل — زرد */
.cm-btn--cancel {
  --cm-btn-bg: #facc15;
  --cm-btn-bg-hover: #eab308;
  --cm-btn-fg: #1a1a1a;
  --cm-btn-shadow: rgba(234, 179, 8, 0.4);
  --cm-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.3 5.71 12 12.01 5.7 5.71 4.29 7.12 10.59 13.4 4.29 19.7 5.7 21.12 12 14.82l6.3 6.3 1.41-1.42-6.3-6.3 6.3-6.3-1.41-1.41z' fill='%23000'/%3E%3C/svg%3E");
}

/* اندازه فشرده — جداول و اکشن‌های ردیفی */
.cm-btn--sm {
  min-height: 36px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  border-radius: 10px;
  gap: 0.35rem;
}

.cm-btn--sm::before {
  width: 0.9rem;
  height: 0.9rem;
}

/* تمام‌عرض */
.cm-btn--block {
  width: 100%;
}

/* بدون آیکون */
.cm-btn--no-icon::before {
  display: none;
}

/* گروه دکمه‌های فرم */
.cm-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

@media (max-width: 575.98px) {
  .cm-btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cm-btn-row .cm-btn {
    width: 100%;
  }
}