/* /app/public/assets/app.css - BhaiKart global styles */
:root {
  --brand: #ea580c;
  --brand-hover: #c2410c;
}
* { -webkit-tap-highlight-color: transparent; }
html, body { font-family: 'Work Sans', system-ui, sans-serif; }
h1,h2,h3,h4,h5 { font-family: 'Outfit', sans-serif; letter-spacing: -0.01em; }
.h-display { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -0.02em; }

/* Subtle grain */
.bg-grain {
  background-image: radial-gradient(#e7e5e4 1px, transparent 1px);
  background-size: 18px 18px;
}
.bg-warm-gradient {
  background: radial-gradient(1200px 500px at 100% 0%, #ffedd5 0%, transparent 50%),
              radial-gradient(800px 400px at 0% 100%, #ffe4e6 0%, transparent 60%),
              #fafaf9;
}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
       padding:.65rem 1.25rem; border-radius:.6rem; font-family:'Outfit',sans-serif;
       font-weight:600; font-size:.95rem; transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease; }
.btn-primary { background: var(--brand); color:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background:#fff; color:#1c1917; border:1px solid #d6d3d1; }
.btn-secondary:hover { background:#f5f5f4; }
.btn-ghost { color:#57534e; }
.btn-ghost:hover { color:#1c1917; background:#f5f5f4; }
.btn-lg { padding:.85rem 1.6rem; font-size:1rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Inputs */
.input, .select, .textarea {
  display:block; width:100%; padding:.65rem .85rem; border-radius:.6rem;
  border:1px solid #d6d3d1; background:#fff; color:#1c1917; font-size:.95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px #fed7aa;
}
.label { display:block; margin-bottom:.35rem; font-family:'Outfit',sans-serif; font-weight:500; font-size:.85rem; color:#44403c; }

/* Cards */
.card { background:#fff; border:1px solid #e7e5e4; border-radius: .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-hover { transition: box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { box-shadow: 0 6px 24px -8px rgba(120,53,15,.15); border-color:#fed7aa; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; font-family:'Outfit',sans-serif; }
.badge-active { background:#dcfce7; color:#166534; }
.badge-inactive { background:#fee2e2; color:#991b1b; }
.badge-free { background:#f5f5f4; color:#44403c; }
.badge-pro { background:#ffedd5; color:#9a3412; }
.badge-premium { background:#1c1917; color:#fff; }
.badge-warn { background:#fef3c7; color:#92400e; }

/* Sidebar */
.side-link { display:flex; align-items:center; gap:.75rem; padding:.6rem .85rem; border-radius:.55rem;
             color:#57534e; font-family:'Outfit',sans-serif; font-weight:500; font-size:.92rem; }
.side-link:hover { background:#f5f5f4; color:#1c1917; }
.side-link.active { background:#fff7ed; color:#c2410c; }
.side-link i { font-size:1.15rem; }

/* Toast */
.toast { position:fixed; bottom:1.25rem; right:1.25rem; z-index:60; display:none;
         padding:.85rem 1.1rem; border-radius:.65rem; background:#1c1917; color:#fff;
         box-shadow: 0 10px 30px -10px rgba(0,0,0,.3); font-family:'Outfit',sans-serif; font-weight:500; }
.toast.show { display:block; animation: slideIn .2s ease; }
@keyframes slideIn { from { transform: translateY(6px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* Wizard progress */
.step-dot { width:2rem; height:2rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
            background:#f5f5f4; color:#78716c; font-family:'Outfit',sans-serif; font-weight:600; font-size:.8rem; }
.step-dot.active { background:var(--brand); color:#fff; }
.step-dot.done { background:#16a34a; color:#fff; }
.step-bar { flex:1; height:2px; background:#e7e5e4; }
.step-bar.active { background: var(--brand); }

/* Table */
.tbl { width:100%; border-collapse:separate; border-spacing:0; }
.tbl th { text-align:left; font-family:'Outfit',sans-serif; font-weight:600; font-size:.78rem; color:#78716c; text-transform:uppercase; letter-spacing:.03em; padding:.65rem .85rem; border-bottom:1px solid #e7e5e4; background:#fafaf9; }
.tbl td { padding:.85rem .85rem; border-bottom:1px solid #f5f5f4; font-size:.9rem; }
.tbl tr:hover td { background:#fafaf9; }

/* Product cards */
.prod-card { background:#fff; border:1px solid #e7e5e4; border-radius:.9rem; overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .15s ease; }
.prod-card:hover { box-shadow: 0 8px 24px -12px rgba(0,0,0,.15); }
.prod-card img { width:100%; height:180px; object-fit:cover; background:#f5f5f4; }

/* Inactive banner (storefront) */
.inactive-banner { position: sticky; top:0; z-index:40; background: #1c1917; color:#fff;
                   padding:.75rem 1rem; font-family:'Outfit',sans-serif; font-weight:500; font-size:.9rem; text-align:center; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(28,25,23,.55); display:none; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:1rem; max-width:520px; width:100%; padding:1.5rem; }

/* Utility */
.spinner { display:inline-block; width:1rem; height:1rem; border:2px solid #fed7aa; border-top-color: var(--brand); border-radius:999px; animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }