/* =========================
   BharatWipe - styles.css
   Updated to show logo only in sidebar
   ========================= */

/* Colors & tokens */
:root{
  --bg: #f6fbf8;
  --card: #ffffff;
  --accent: #1b7b38;
  --accent-2: #3aa56b;
  --muted: #6f8b7a;
  --shadow: 0 8px 30px rgba(10,20,10,0.03);
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --text: #163a2f;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* App grid */
.app-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  padding:20px;
  background: #fff;
  border-right:1px solid rgba(0,0,0,0.03);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* Sidebar header (logo only) */
.sidebar-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:6px;
}

/* Logo container (fixed size — logo only, no text) */
/* .logo-wrap{
  width:64px;
  height:64px;
  border-radius:12px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent; /* transparent background so logo sits neatly */
  box-shadow: 0 6px 18px rgba(5,15,10,0.03);
  flex:0 0 64px;
} */

.logo-wrap
{
  width: 100vw !important;
  height: 100% !important;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 6px 18px rgba(5,15,10,0.03);
  flex: 0 0 180px;
}
/* actual logo image */
.logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* brand-title is intentionally hidden across pages */
.brand-title{ display:none; }

/* small fallback initials (BW) — hidden by default */
.logo-fallback{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  font-size:20px;
}

/* Nav in sidebar */
.nav{margin-top:24px;display:flex;flex-direction:column;gap:8px;width:100%}
.nav .menu-item{
  background:transparent;
  border:0;
  text-align:left;
  padding:12px 14px;
  border-radius:10px;
  font-weight:600;
  color:#385845;
  cursor:pointer;
  width:100%;
}
.nav .menu-item.active,
.nav .menu-item:hover{
  background: #eaf5ec;
}

/* Main container & header */
.container{padding:22px 36px}
.header{display:flex;align-items:center;gap:12px}
.search-input{
  flex:1;
  padding:14px 16px;
  border-radius:28px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow: 0 8px 30px rgba(10,20,10,0.02);
}

/* Card */
.card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}

/* Pills & small UI */
.pill{background: #e9fbf0;padding:8px 12px;border-radius:20px;color:var(--accent);font-weight:600}

/* Buttons */
.btn{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  padding:10px 18px;
  border-radius:20px;
  border:none;
  cursor:pointer;
  font-weight:700;
  box-shadow:0 6px 18px rgba(27,123,56,0.12);
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:0.5;cursor:not-allowed}
.btn-ghost{
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  border:1px solid rgba(0,0,0,0.06);
  font-weight:600;
  cursor:pointer;
}

/* Forms */
.input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  margin-top:6px;
  outline:none;
}
.input:focus{box-shadow:0 6px 18px rgba(27,123,56,0.06);border-color:rgba(27,123,56,0.18)}

/* Sell page specifics */
.sell-grid{display:flex;gap:22px;align-items:flex-start}
.uploads{width:320px;display:flex;flex-direction:column;gap:18px}
.upload-tile{display:block;width:100%;cursor:pointer;border-radius:12px;overflow:hidden}
.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;color:var(--accent);font-weight:700;background:linear-gradient(180deg,#eaf5ec,#f8fbf9);border-radius:12px;border:1px dashed rgba(27,123,56,0.08)}
.preview-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.preview-list img.upload-preview{width:100px;height:70px;object-fit:cover;border-radius:8px;border:1px solid rgba(0,0,0,0.04)}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product{
  background:var(--card);
  border-radius:12px;
  padding:22px;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.04);
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.product .img{display:flex;align-items:center;justify-content:center;min-height:140px}
.product .img img{max-width:160px;max-height:120px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.03);box-shadow:0 2px 6px rgba(0,0,0,0.03)}
.product .title{font-size:16px;margin-top:14px;color:var(--text)}
.product .muted{color:var(--muted);margin-top:6px}
.product .price{color:var(--accent);font-weight:700;margin-top:10px}

/* Detail page */
.detail-grid{display:flex;gap:18px;align-items:flex-start}
.detail-grid .thumb{width:320px;height:240px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.04)}

/* Toast */
.toast{transition:all 0.3s ease}

/* utility */
.center{display:flex;align-items:center;justify-content:center}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center}

/* Responsiveness */
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .app-grid{grid-template-columns:72px 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sell-grid{flex-direction:column}
  .uploads{width:100%}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .sidebar{display:none}
}

/* small helpers */
.hidden{display:none}