/* Xanndora Context Modal - frontend styles */
.xcm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999999;
}

.xcm-modal {
  width: min(560px, 100%);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(0,0,0,.30);
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}

.xcm-backdrop.is-open .xcm-modal {
  transform: translateY(0);
  opacity: 1;
}

.xcm-header {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,128,0,.14), rgba(25,135,84,.16));
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.xcm-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.xcm-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: rgba(17,24,39,.70);
  padding: 2px 6px;
}

.xcm-body {
  padding: 16px 18px;
  font-size: 14px;
  color: rgba(17,24,39,.88);
}

.xcm-body p { margin: 0 0 10px; }
.xcm-body p:last-child { margin-bottom: 0; }

.xcm-footer {
  padding: 14px 18px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.xcm-actions {
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.xcm-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
}

.xcm-btn-primary {
  border: none;
  background: linear-gradient(135deg, #198754, #FF8000);
  color: #fff;
}

.xcm-btn-secondary {
  background: #fff;
  color: rgba(17,24,39,.86);
}

.xcm-dontshow {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(17,24,39,.70);
}

.xcm-dontshow input { margin-top: 3px; }

@media (max-width: 480px) {
  .xcm-actions { flex-direction: column; }
  .xcm-btn { width: 100%; }
}