/* =============================================
   KP Prompt Creator — Marketplace Minimal Styles
   (Most styling handled by Tailwind CSS)
   ============================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

/* ---- Gradient helpers ---- */
.hero-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #8b5cf6 100%);
}
.dark-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #312e81 50%, #5b21b6 100%);
}
.balance-gradient {
  background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #14b8a6 100%);
}

/* ---- Toast notifications ---- */
.toast {
  position: fixed;
  top: 1rem;
  bottom: auto;
  right: 1rem;
  left: auto;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 400px;
  width: auto;
  height: auto;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  word-break: break-word;
}
.toast.show { transform: translateX(0); }
.toast-success { background: linear-gradient(135deg, #059669, #10b981); }
.toast-error { background: linear-gradient(135deg, #dc2626, #f43f5e); }
.toast-info { background: linear-gradient(135deg, #4f46e5, #8b5cf6); }

/* ---- Spinner ---- */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.modal-content {
  background: #fff;
  border-radius: 1rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}
.modal-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}
.modal-close {
  background: #f1f5f9;
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.2s;
}
.modal-close:hover { background: #e2e8f0; color: #1e293b; }

/* ---- Star rating ---- */
.star-rating {
  display: flex;
  gap: 0.25rem;
}
.star-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.15s;
  padding: 0.125rem;
}
.star-btn:hover, .star-btn.active { color: #f59e0b; }

/* ---- Notification items ---- */
.notif-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid transparent;
}
.notif-item:hover { background: #f8fafc; }
.notif-unread {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.notif-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6366f1;
}
.notif-body { flex: 1; min-width: 0; }
.notif-body strong { display: block; font-size: 0.875rem; color: #1e293b; }
.notif-body p { font-size: 0.8rem; color: #64748b; margin: 0.125rem 0; }
.notif-body small { font-size: 0.75rem; }

/* ---- Image grid in modals ---- */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}
.image-item {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.image-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}
.image-item button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}

/* ---- Upload previews ---- */
.upload-preview-img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
}
.file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #166534;
}

/* ---- Detail page images ---- */
.detail-images {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  margin: 1rem 0;
}
.detail-img {
  height: 200px;
  border-radius: 0.75rem;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
  border: 1px solid #e2e8f0;
}
.detail-img:hover { transform: scale(1.02); }

/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Mobile bottom nav safe area ---- */
@media (max-width: 767px) {
  body { padding-bottom: 4.5rem; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Custom Confirm Modal ---- */
.kp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;transition:opacity .2s ease;padding:16px}
.kp-modal-overlay.show{opacity:1}
.kp-modal-overlay.closing{opacity:0}
.kp-modal{background:#fff;border-radius:16px;padding:32px 28px 24px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);transform:scale(.9) translateY(10px);transition:transform .25s cubic-bezier(.175,.885,.32,1.275)}
.kp-modal-overlay.show .kp-modal{transform:scale(1) translateY(0)}
.kp-modal-overlay.closing .kp-modal{transform:scale(.95) translateY(5px)}
.kp-modal-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:24px;background:#f3f0ff;color:#7c5cfc}
.kp-modal-danger .kp-modal-icon{background:#fef2f2;color:#ef4444}
.kp-modal-info .kp-modal-icon{background:#eff6ff;color:#3b82f6}
.kp-modal-message{font-size:15px;line-height:1.6;color:#1e293b;margin-bottom:24px}
.kp-modal-actions{display:flex;gap:10px;justify-content:center}
.kp-modal-btn{padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease;min-width:90px}
.kp-modal-cancel{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}
.kp-modal-cancel:hover{background:#e2e8f0;color:#1e293b}
.kp-modal-confirm{background:#7c5cfc;color:#fff;box-shadow:0 2px 8px rgba(124,92,252,.3)}
.kp-modal-confirm:hover{background:#6346e0;transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,92,252,.4)}
.kp-modal-danger .kp-modal-confirm{background:#ef4444;box-shadow:0 2px 8px rgba(239,68,68,.3)}
.kp-modal-danger .kp-modal-confirm:hover{background:#dc2626;box-shadow:0 4px 12px rgba(239,68,68,.4)}