/* Custom styles to complement Tailwind */

/* ─── 暖色渐变背景 ─── */
body {
  background: linear-gradient(160deg, #FFF8F0 0%, #FEF6EC 25%, #FFF9F5 50%, #FEF7F0 75%, #FFF8F3 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ─── 毛玻璃卡片 ─── */
.glass-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 20px -8px rgba(140, 80, 30, 0.1);
}

/* ─── 滚动收缩导航 ─── */
#kkNav {
  transition: background-color .3s ease, padding .3s cubic-bezier(.4,0,.2,1);
}
#kkNav .kk-icon,
#kkNav .kk-label,
#kkNav .kk-btn {
  transition: width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1),
              padding .3s cubic-bezier(.4,0,.2,1), border-radius .3s ease, gap .3s ease,
              color .2s ease, transform .2s ease;
}
#kkNav.nav-compact {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
#kkNav.nav-compact #kingkongNav {
  padding-top: 6px;
  padding-bottom: 6px;
}
#kkNav.nav-compact .kk-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
}
#kkNav.nav-compact .kk-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
#kkNav.nav-compact .kk-label {
  display: none;
}
#kkNav.nav-compact .kk-btn {
  padding-top: 4px;
  padding-bottom: 4px;
  gap: 0;
}

/* Hide scrollbar for chip filter */
#ticketTypeFilter::-webkit-scrollbar {
  display: none;
}
/* 票种 chip 行吸附对齐 */
#ticketTypeFilter {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* ─── 金刚区导航 ─── */
.kk-btn {
  cursor: pointer;
  border: none;
  background: transparent;
}
.kk-btn:hover .kk-icon {
  transform: scale(1.08);
}
.kk-btn.kk-active .kk-icon {
  background: #C8102E !important;
}
.kk-btn.kk-active .kk-icon svg {
  color: #fff !important;
}
.kk-btn.kk-active .kk-label {
  color: #C8102E;
  font-weight: 600;
}

/* Chip filter */
.tt-chip {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(229, 231, 235, 0.8);
  color: #6b7280;
}
.tt-chip:hover {
  border-color: #C8102E;
  color: #C8102E;
}
.tt-chip.active {
  background: #C8102E;
  border-color: #C8102E;
  color: #fff;
}

/* ─── Card hover effect ─── */
.listing-card {
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -8px rgba(140, 80, 30, 0.18), 0 4px 12px -6px rgba(140, 80, 30, 0.08);
}

/* ─── Locked card ─── */
.locked-card {
  opacity: 0.75;
}
.locked-card:hover {
  transform: none;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.08);
}

/* ─── Sold out card ─── */
.sold-out-card {
  filter: grayscale(0.8);
  opacity: 0.6;
}
.sold-out-card:hover {
  transform: none;
  box-shadow: none;
}

/* ─── Sold out stamp (印章效果) ─── */
.sold-out-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  z-index: 20;
  padding: 12px 24px;
  border: 4px solid #dc2626;
  color: #dc2626;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
  text-shadow: 0 0 2px rgba(220,38,38,0.3);
  box-shadow: inset 0 0 0 2px rgba(220,38,38,0.2);
  pointer-events: none;
  white-space: nowrap;
}

/* ─── Ticket image placeholder ─── */
.ticket-img {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

/* ─── Modal animation ───
   蒙层与卡片各自独立做 opacity/transform 过渡（均为合成器动画，不触发重排），
   蒙层透明度从 0 渐入时 backdrop-blur 完成光栅化，避免「先顿一下再变模糊」 */
#contactOverlay {
  opacity: 0;
  transition: opacity .25s ease;
  will-change: opacity;
}
#contactModal.show #contactOverlay {
  opacity: 1;
}
#contactModalBody {
  opacity: 0;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,.72,.35,1), opacity .22s ease;
  will-change: transform, opacity;
}
#contactModal.show #contactModalBody {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 640px) {
  #contactModalBody {
    transform: translateY(28px) scale(.98);
  }
  #contactModal.show #contactModalBody {
    transform: translateY(0) scale(1);
  }
}

/* ─── Number display styling ─── */
.number-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─── Skeleton loading ─── */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Line clamp ─── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════ 后台管理 · 移动端适配 ═══════════ */

/* 表格：窄屏横向滚动（手机上表格列多，挤压会导致文字换行错乱） */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  min-width: 640px;
}
.table-scroll::-webkit-scrollbar {
  height: 4px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 2px;
}

/* 顶栏：手机上截断用户名，避免挤爆标题行 */
.user-info-trunc {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
@media (min-width: 640px) {
  .user-info-trunc {
    max-width: none;
  }
}

/* 顶部 tab：手机上隐藏横向滚动条 */
#adminTabs {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#adminTabs::-webkit-scrollbar {
  display: none;
}

/* 弹窗表单：手机上去掉两侧多余留白，按钮更好按 */
@media (max-width: 639px) {
  #adminModalBody form {
    padding: 1.25rem 1.25rem 1.5rem !important;
  }
  #adminModalBody input,
  #adminModalBody select,
  #adminModalBody textarea {
    font-size: 16px !important; /* 防 iOS 聚焦自动放大 */
  }
}