/**
 * Modal close (X) — ทุกโมดอล · เมาส์ชี้แล้วขยับไม่นิ่ง
 */
@keyframes ixCloseIdle {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: 0 0 0 0 rgba(154, 176, 204, 0), 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  50% {
    transform: translateY(-2px) scale(1.03) rotate(0deg);
    box-shadow: 0 0 0 4px rgba(154, 176, 204, 0.14), 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

@keyframes ixCloseHover {
  0%   { transform: translateY(0) scale(1.1) rotate(0deg); }
  20%  { transform: translateY(-3px) scale(1.12) rotate(12deg); }
  40%  { transform: translateY(1px) scale(1.08) rotate(-10deg); }
  60%  { transform: translateY(-2px) scale(1.14) rotate(8deg); }
  80%  { transform: translateY(0) scale(1.1) rotate(-6deg); }
  100% { transform: translateY(-3px) scale(1.12) rotate(12deg); }
}

@keyframes ixCloseShine {
  0%   { left: -130%; }
  100% { left: 120%; }
}

html body .ix-modal-close,
html body button.ix-modal-close,
html body .ix-overlay .ix-modal-close,
html body #modalProductDetail .ix-modal-close,
html body #modalAuth .ix-modal-close,
html body #modalUser .ix-modal-close,
html body #modalHistory .ix-modal-close,
html body #modalHistoryKey .ix-modal-close,
html body #modalHistoryKey button.ix-modal-close {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(190, 210, 235, 0.4) !important;
  background:
    linear-gradient(145deg, rgba(40, 46, 58, 0.95), rgba(12, 14, 18, 0.98)) !important;
  color: #f3f6fa !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 18px rgba(122, 143, 168, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.4) !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease !important;
  /* idle: ลอยเบาๆ ไม่นิ่ง */
  animation: ixCloseIdle 2.4s ease-in-out infinite !important;
  overflow: hidden !important;
  isolation: isolate !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  will-change: transform;
}

html body .ix-modal-close::before,
html body button.ix-modal-close::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7;
}

html body .ix-modal-close::after,
html body button.ix-modal-close::after {
  content: "" !important;
  position: absolute !important;
  width: 140% !important;
  height: 140% !important;
  top: -20% !important;
  left: -130% !important;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.32), transparent) !important;
  transform: rotate(18deg) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* เมาส์ชี้: หมุน/เด้งวนต่อเนื่อง ไม่อยู่นิ่ง */
html body .ix-modal-close:hover,
html body button.ix-modal-close:hover,
html body .ix-overlay .ix-modal-close:hover,
html body #modalProductDetail .ix-modal-close:hover,
html body #modalAuth .ix-modal-close:hover,
html body #modalUser .ix-modal-close:hover,
html body #modalHistory .ix-modal-close:hover,
html body #modalHistoryKey .ix-modal-close:hover {
  color: #ffffff !important;
  border-color: rgba(220, 235, 255, 0.75) !important;
  background:
    linear-gradient(145deg, rgba(75, 98, 130, 0.98), rgba(24, 30, 40, 0.98)) !important;
  filter: brightness(1.1) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 0 30px rgba(154, 176, 204, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.45) !important;
  animation: ixCloseHover 0.7s ease-in-out infinite !important;
}

html body .ix-modal-close:hover::after,
html body button.ix-modal-close:hover::after {
  animation: ixCloseShine 0.85s ease-in-out infinite !important;
}

html body .ix-modal-close:active,
html body button.ix-modal-close:active {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  background:
    linear-gradient(145deg, rgba(100, 125, 160, 0.98), rgba(30, 38, 52, 1)) !important;
  transform: scale(0.88) rotate(90deg) !important;
  animation: none !important;
  filter: brightness(1.12) !important;
  box-shadow:
    0 0 0 2px rgba(190, 210, 235, 0.5),
    0 0 22px rgba(154, 176, 204, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.5) inset !important;
}

html body .ix-modal-close:focus-visible,
html body button.ix-modal-close:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(190, 210, 235, 0.55),
    0 0 22px rgba(154, 176, 204, 0.55) !important;
}

@media (hover: none) {
  /* มือถือ: แตะแล้วเด้งสั้นๆ */
  html body .ix-modal-close:active {
    transform: scale(0.9) rotate(20deg) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .ix-modal-close,
  html body .ix-modal-close:hover,
  html body .ix-modal-close:active {
    animation: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
  }
  html body .ix-modal-close:hover {
    transform: scale(1.08) rotate(90deg) !important;
  }
  html body .ix-modal-close::after { display: none !important; }
}