/* ================================================================
   DK MAKES 3.0 — PREMIUM DESIGN SYSTEM
   ================================================================ */

/* ===== CSS CUSTOM PROPERTIES (Design Tokens) ===== */
:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --color-gold-50: #FFF9EB;
    --color-gold-100: #FFF0CC;
    --color-gold-200: #FFE099;
    --color-gold-300: #FFD066;
    --color-gold-400: #FFC233;
    --color-gold-500: #D4A853;
    --color-gold-600: #B8912E;
    --color-gold-700: #8B6914;
    --color-graphite-50: #F5F6F8;
    --color-graphite-100: #E8EAED;
    --color-graphite-200: #D1D5DB;
    --color-graphite-300: #9CA3AF;
    --color-graphite-400: #6B7280;
    --color-graphite-500: #374151;
    --color-graphite-600: #1F2937;
    --color-graphite-700: #111827;
    --color-graphite-800: #0A0F1A;
    --color-cream: #FAFAF7;
    --color-warm-white: #F8F7F4;
}

body { font-family: var(--font-sans); background-color: var(--color-warm-white); color: var(--color-graphite-700); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4 { font-family: var(--font-display); letter-spacing: -0.01em; }
html { scroll-behavior: smooth; }
::selection { background: var(--color-gold-200); color: var(--color-graphite-700); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* ===== PREMIUM BUTTONS ===== */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-600));
    color: #fff; padding: 0.8rem 2.2rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.9rem;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 2px 12px rgba(212,168,83,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    position: relative; overflow: hidden;
}
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.35s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212,168,83,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(212,168,83,0.3); }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--color-graphite-700); color: #fff; padding: 0.8rem 2.2rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.btn-secondary:hover { background: var(--color-graphite-600); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border: 2px solid var(--color-gold-500); color: var(--color-gold-600); padding: 0.7rem 2rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden;
}
.btn-outline::before { content: ''; position: absolute; inset: 0; background: var(--color-gold-500); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index: 0; }
.btn-outline:hover { color: #fff; border-color: var(--color-gold-500); }
.btn-outline:hover::before { transform: scaleX(1); }
.btn-outline > * { position: relative; z-index: 1; }
.btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-graphite-500); padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.85rem; transition: all 0.2s; }
.btn-ghost:hover { color: var(--color-gold-600); background: var(--color-gold-50); }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, #EF4444, #DC2626); color: #fff; padding: 0.7rem 1.8rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.85rem; transition: all 0.3s; box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,0.4); }
.btn-sm { padding: 0.5rem 1.2rem; font-size: 0.8rem; border-radius: 0.5rem; }

/* ===== CARD PREMIUM ===== */
.card-premium {
    background: #fff; border-radius: 1.25rem; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    transition: all 0.5s cubic-bezier(0.4,0,0.2,1); border: 1px solid rgba(0,0,0,0.03);
}
.card-premium:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.04); transform: translateY(-6px); }
.card-glass {
    background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.3); border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

/* ===== BADGES ===== */
.badge-new { background: linear-gradient(135deg, #10B981, #059669); color: #fff; font-size: 0.65rem; padding: 0.25rem 0.7rem; border-radius: 9999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.badge-sale { background: linear-gradient(135deg, #EF4444, #DC2626); color: #fff; font-size: 0.65rem; padding: 0.25rem 0.7rem; border-radius: 9999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
.badge-featured { background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-600)); color: #fff; font-size: 0.65rem; padding: 0.25rem 0.7rem; border-radius: 9999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(212,168,83,0.3); }
.badge-bestseller { background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff; font-size: 0.65rem; padding: 0.25rem 0.7rem; border-radius: 9999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(139,92,246,0.3); }

/* Status badges */
.status-badge { padding: 0.3rem 0.8rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.status-received { background: #FEF3C7; color: #92400E; }
.status-received::before { background: #F59E0B; }
.status-paid { background: #DBEAFE; color: #1E40AF; }
.status-paid::before { background: #3B82F6; }
.status-printing { background: #FDE68A; color: #78350F; }
.status-printing::before { background: #D97706; animation: pulse-dot 2s infinite; }
.status-shipped { background: #E0E7FF; color: #3730A3; }
.status-shipped::before { background: #6366F1; }
.status-delivered { background: #D1FAE5; color: #065F46; }
.status-delivered::before { background: #10B981; }
.status-cancelled { background: #FEE2E2; color: #991B1B; }
.status-cancelled::before { background: #EF4444; }
.status-refunded { background: #F3E8FF; color: #6B21A8; }
.status-refunded::before { background: #9333EA; }
.status-quality_check { background: #ECFDF5; color: #047857; }
.status-quality_check::before { background: #34D399; animation: pulse-dot 2s infinite; }
.status-packing { background: #FEF9C3; color: #854D0E; }
.status-packing::before { background: #EAB308; }
.status-awaiting_payment { background: #FFF7ED; color: #9A3412; }
.status-awaiting_payment::before { background: #FB923C; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== PRODUCT IMAGE ===== */
.product-img-wrap { overflow: hidden; border-radius: 1rem; position: relative; }
.product-img-wrap img { transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.product-img-wrap:hover img { transform: scale(1.06); }
.product-img-wrap .quick-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); display: flex; gap: 0.5rem; justify-content: center; }
.product-img-wrap:hover .quick-actions { transform: translateY(0); }

/* ===== TEXT EFFECTS ===== */
.text-gold-gradient { background: linear-gradient(135deg, var(--color-gold-400), var(--color-gold-700)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-shine { background: linear-gradient(120deg, var(--color-gold-600) 0%, var(--color-gold-400) 40%, #fff 50%, var(--color-gold-400) 60%, var(--color-gold-600) 100%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: text-shine-move 3s ease-in-out infinite; }
@keyframes text-shine-move { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.section-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-300)); border-radius: 2px; }

/* ===== ADMIN SIDEBAR ===== */
.admin-sidebar { background: linear-gradient(180deg, var(--color-graphite-800) 0%, #0D1117 100%); color: #fff; }
.admin-sidebar a { transition: all 0.25s cubic-bezier(0.4,0,0.2,1); padding: 0.65rem 1rem; border-radius: 0.75rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: #9CA3AF; }
.admin-sidebar a:hover { background: rgba(212,168,83,0.1); color: #E5E7EB; transform: translateX(2px); }
.admin-sidebar a.active { background: rgba(212,168,83,0.15); color: var(--color-gold-400); box-shadow: inset 3px 0 0 var(--color-gold-500); }

/* ===== FORM INPUTS ===== */
.form-input {
    border: 1.5px solid var(--color-graphite-200); border-radius: 0.75rem; padding: 0.7rem 1rem;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1); width: 100%; font-size: 0.9rem; background: #fff;
}
.form-input:focus { border-color: var(--color-gold-500); box-shadow: 0 0 0 3px rgba(212,168,83,0.12); outline: none; }
.form-input:hover:not(:focus) { border-color: var(--color-graphite-300); }

/* ===== TOAST ===== */
.toast { animation: toastSlideIn 0.5s cubic-bezier(0.4,0,0.2,1); backdrop-filter: blur(12px); }
@keyframes toastSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== SKELETON ===== */
.skeleton { background: linear-gradient(90deg, var(--color-graphite-50) 25%, var(--color-graphite-100) 50%, var(--color-graphite-50) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite ease-in-out; border-radius: 0.75rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== ANIMATIONS ===== */
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-fade-up { animation: fadeUp 0.6s ease-out; }
.animate-fade-up-delay-1 { animation: fadeUp 0.6s ease-out 0.1s both; }
.animate-fade-up-delay-2 { animation: fadeUp 0.6s ease-out 0.2s both; }
.animate-fade-up-delay-3 { animation: fadeUp 0.6s ease-out 0.3s both; }
.animate-scale-in { animation: scaleIn 0.5s cubic-bezier(0.4,0,0.2,1); }
.animate-slide-left { animation: slideLeft 0.5s ease-out; }
.animate-slide-right { animation: slideRight 0.5s ease-out; }
.animate-count-up { animation: fadeUp 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.hover-lift { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.icon-float { animation: iconFloat 3s ease-in-out infinite; }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ===== PROGRESS RING ===== */
.progress-ring-bg { stroke: var(--color-graphite-100); }
.progress-ring-fill { stroke: var(--color-gold-500); stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1); transform: rotate(-90deg); transform-origin: 50% 50%; }

/* ===== STAT CARDS ===== */
.stat-card { background: #fff; border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(0,0,0,0.04); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-300)); opacity: 0; transition: opacity 0.3s; }
.stat-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.stat-card:hover::before { opacity: 1; }

/* ===== DATA TABLE ===== */
.data-table { width: 100%; }
.data-table thead th { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-graphite-400); padding: 0.75rem 1rem; text-align: left; border-bottom: 1.5px solid var(--color-graphite-100); }
.data-table tbody td { padding: 0.8rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--color-graphite-50); }
.data-table tbody tr { transition: background 0.2s; }
.data-table tbody tr:hover { background: var(--color-gold-50); }

/* ===== TIMELINE ===== */
.timeline-line { position: relative; padding-left: 2rem; }
.timeline-line::before { content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background: var(--color-graphite-100); }
.timeline-dot { position: absolute; left: 0; top: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-gold-500); border: 3px solid var(--color-warm-white); box-shadow: 0 0 0 2px var(--color-gold-200); }

/* ===== PRINT ===== */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .card-premium, .stat-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}