/* Vanvic Social — custom styles layered on top of the Tailwind Play CDN.
   Original design: dark-first, glassmorphism panels, brand gradient accents.
   No build step — this file is served as-is. */

/* Alpine.js hasn't finished initializing yet — hide anything marked x-cloak until it has,
   so toggled elements (like the "copied" checkmark on the product page's share button) don't
   flash visible for a frame before Alpine evaluates their x-show condition. */
[x-cloak] { display: none !important; }

:root {
  --brand-from: #6d28d9;
  --brand-to: #2563eb;
  --bg-base: #0b0f14;
  --bg-panel: #121821;
  --bg-panel-solid: #161d29;
  --border-subtle: rgba(255, 255, 255, 0.08);
}

body {
  background-color: var(--bg-base);
  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #2a3341; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #384254; }

.text-gradient-brand {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-brand {
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
}

.glass-panel {
  background: rgba(18, 24, 33, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
}

.glass-panel-solid {
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-subtle);
}

.btn-glow {
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.btn-glow:hover {
  box-shadow: 0 0 24px rgba(109, 40, 217, 0.45);
  transform: translateY(-1px);
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(109, 40, 217, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.5s ease both; }

/* "Save for Later" / "Saved" wishlist button — active-state color driven by the same .text-red-500
   class app.js already toggles, plus a small heart-pop pulse played once per click. */
.wishlist-btn.text-red-500 { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.1); }
@keyframes wishlist-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.wishlist-pulse svg { animation: wishlist-pulse 0.35s ease; }

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, #161d29 25%, #1e2733 37%, #161d29 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease infinite;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
}
.badge-success { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16,185,129,.3); }
.badge-warning { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245,158,11,.3); }
.badge-danger  { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(239,68,68,.3); }
.badge-neutral { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148,163,184,.3); }
.badge-info    { background: rgba(37, 99, 235, 0.12); color: #60a5fa; border-color: rgba(37,99,235,.3); }

.flash-toast { animation: fade-in-up 0.3s ease both; }

/* "Follow" button on the seller storefront page (views/public/seller.php) — active-state styling
   once followed, mirroring the wishlist button's treatment above. */
.follow-btn.following { background: rgba(109, 40, 217, 0.15); border-color: rgba(109, 40, 217, 0.4); color: #fff; }

/* Seller image uploader (assets/js/image-uploader.js) — drag handle affordance on the reorderable
   thumbnails it renders, plus a focus ring for keyboard users tabbing to the move/remove buttons. */
.uploader-thumb[draggable="true"] { cursor: grab; }
.uploader-thumb[draggable="true"]:active { cursor: grabbing; }
.uploader-thumb button:focus-visible { outline: 2px solid rgba(109, 40, 217, 0.6); outline-offset: -2px; }

.sidebar-link.active {
  background: rgba(109, 40, 217, 0.15);
  color: #fff;
  border-color: rgba(109, 40, 217, 0.4);
}

input, textarea, select {
  color-scheme: dark;
}

/* ==========================================================================
   Light theme — toggled by adding class="light" to <html> (see the
   Dark Mode switch in the profile dropdown). Everything below overrides the
   dark-first rules above; selectors are scoped to "html.light" so they only
   ever apply when the toggle is on, and win over the plain Tailwind utility
   classes (like .text-white) purely because two classes beat one — no
   !important needed. Colors mirror the same light/dark "step" relationships
   the dark theme uses (white = strongest text ... gray-600 = most muted).
   ========================================================================== */
html.light {
  --bg-base: #eef1f5;
  --bg-panel: #f8fafc;
  --bg-panel-solid: #ffffff;
  --border-subtle: rgba(15, 23, 42, 0.10);
}

html.light body { color: #0f172a; }

html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html.light .glass-panel { background: rgba(255, 255, 255, 0.72); }

html.light .skeleton-shimmer {
  background: linear-gradient(90deg, #e5e9ef 25%, #f1f4f8 37%, #e5e9ef 63%);
  background-size: 800px 100%;
}

html.light .card-hover:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); }

html.light .sidebar-link.active { color: #1e1b4b; }

html.light input,
html.light textarea,
html.light select { color-scheme: light; }

/* Text colors */
html.light .text-white { color: #0f172a; }
html.light .text-gray-100 { color: #1e293b; }
html.light .text-gray-200 { color: #334155; }
html.light .text-gray-300 { color: #475569; }
html.light .text-gray-400 { color: #64748b; }
html.light .text-gray-500 { color: #94a3b8; }
html.light .text-gray-600 { color: #94a3b8; }
html.light .text-amber-300 { color: #b45309; }
html.light .text-amber-400 { color: #d97706; }
html.light .text-blue-300 { color: #1d4ed8; }
html.light .text-blue-400 { color: #2563eb; }
html.light .text-emerald-300 { color: #047857; }
html.light .text-emerald-400 { color: #059669; }
html.light .text-red-300 { color: #b91c1c; }
html.light .text-red-400 { color: #dc2626; }
html.light .text-red-500 { color: #dc2626; }

/* Backgrounds */
html.light .bg-base { background-color: #eef1f5; }
html.light .bg-panel { background-color: #f8fafc; }
html.light .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04); }
html.light .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06); }
html.light .bg-white\/30 { background-color: rgba(15, 23, 42, 0.14); }
html.light .bg-gray-500 { background-color: #cbd5e1; }
html.light .bg-gray-700 { background-color: #e2e8f0; }

/* Borders */
html.light .border-white\/5 { border-color: rgba(15, 23, 42, 0.08); }
html.light .border-white\/10 { border-color: rgba(15, 23, 42, 0.12); }

@keyframes realtime-badge-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.55); } 100% { transform: scale(1); } }
.realtime-badge { animation: realtime-badge-pulse .45s ease-out; }
.realtime-toast { animation: fadeInUp .2s ease-out; }
.realtime-toast-leave { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }