/* Home.css — full file (copy & paste into your project) */
/* All styles extracted from previous index — keep in sync with original look */

:root{
  --accent:#0b8cff;
  --muted:#6b7280;
  --bg:#f6f7fb;
  --card:#fff;
  --primary:#0b8cff;
  --success:#07b159;
  --shadow: 0 12px 34px rgba(12,12,12,.10);
}

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

/* App layout */
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:96px;
  background:#fff;
  border-right:1px solid #eee;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 6px;
  gap:10px;
}
.logo{font-weight:700;margin-bottom:8px}
.cat-item{
  width:76px;
  min-height:48px;
  padding:8px 6px;
  font-size:13px;
  color:var(--muted);
  border-radius:12px;
  cursor:pointer;
  transition:all .18s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  word-break:break-word;
  white-space:normal;
  line-height:1.1;
}
.cat-item:hover{background:#f8fbff}
.cat-item.active{
  background:var(--primary);
  color:#fff;
  font-weight:600;
  box-shadow:0 8px 22px rgba(11,140,255,.08);
}

/* Main / grid */
.main{
  flex:1;
  padding:18px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.card{
  background:var(--card);
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 22px rgba(12,12,12,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:260px;
}
.thumb{
  height:160px;
  border-radius:12px;
  object-fit:cover;
  background:#f2f4f7;
  width:100%;
}
.title{font-weight:700;font-size:16px;margin:0 0 6px 0;line-height:1.2}

/* Other UI */
.variants-price { display:flex; justify-content:center; align-items:center; margin-top:6px; gap:24px; }
.variants-price .variants { color: var(--muted); font-size: 14px; }
.variants-price .price { font-weight: 700; color: var(--accent); font-size: 16px; }
.controls{margin-top:auto}
.btn{
  background:var(--primary);
  color:#fff;
  padding:10px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  width:100%;
  font-size:15px;
  box-shadow:0 8px 20px rgba(11,140,255,.08);
}
.btn:active{transform:translateY(1px)}

/* Bottom cart bar */
.cart-bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  background:#fff;
  border-radius:14px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow);
  z-index:999;
}
.cart-info{display:flex;gap:12px;align-items:center}
.cart-bubble{
  background:var(--primary);
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 8px 20px rgba(11,140,255,.12);
}
.cart-total{font-weight:700}
.arrow-wrap{display:flex;align-items:center;gap:10px}
.arrow-btn{
  width:52px;height:52px;border-radius:999px;border:0;
  background:linear-gradient(180deg,var(--success),#049a47);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 34px rgba(7,177,89,.15);
}
.arrow-svg{width:20px;height:20px;transition:transform .22s ease}
.arrow-svg.down{transform:rotate(180deg)}

/* Slide-up modal with animation (bottom-sheet) */
.modal{
  position:fixed;
  left:0; right:0; top:0; bottom:0;
  display:none;                 /* toggled via .open class */
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,0.28);
  z-index:1200;
}
.modal.open { display:flex; }

/* Panel (sheet) */
.panel{
  position:relative;            /* for absolute close button */
  width:100%;
  max-width:920px;
  max-height:86vh;
  overflow:auto;
  background:#fff;
  padding:20px 20px 16px 20px;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  box-shadow:0 30px 60px rgba(0,0,0,.14);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  z-index:1250; /* ensure panel is above modal backdrop so children receive clicks */
}
.modal.open .panel { transform: translateY(0); opacity:1; }

/* Cart item row */
.cart-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #f2f4f7;
}
.cart-item img{
  width:72px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  background:#fff;
  border:1px solid #eee;
}
.qty-controls{display:flex;gap:8px;align-items:center}
.icon-btn{
  border:1px solid #eee;
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.panel .footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:12px;
}
.muted{color:var(--muted)}

/* Modal header content */
.modal-header{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* title to the left */
  gap:12px;
  margin-bottom:12px;
}
.modal-header h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#111;
  line-height:1;
}

/* Circular close button overlapping top-right */
.modal-close{
  position:absolute;   /* absolute relative to .panel */
  top:14px;            /* vertical offset to match screenshot */
  right:14px;          /* horizontal offset */
  width:44px;          /* button size to match look */
  height:44px;
  border-radius:50%;
  border:1px solid rgba(16,24,40,0.06);
  background:#f3f5f8;
  color:#6b7280;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(12,12,12,0.07);
  transition: transform .08s ease, background .12s ease;
  z-index:1300; /* raised above panel, which is above backdrop */
}
.modal-close:hover{
  transform: translateY(-2px);
  background:#eef3fb;
  color:#222;
}

/* Reserve header right padding so title doesn't collide with absolute button */
.modal-header { padding-right: 68px; }

/* compact screens adjustments */
@media (max-width:480px){
  .modal-close{ width:36px; height:36px; font-size:18px; top:12px; right:12px; }
  .panel{ padding:14px 14px 12px 14px; }
  .modal-header { padding-right: 56px; }
  .thumb{height:140px}
  .sidebar{width:88px}
  .main { padding-bottom: 120px; }
}

/* general responsiveness */
@media(max-width:780px){
  .thumb{height:140px}
  .sidebar{width:88px}
  .panel{padding:12px}
  .main { padding-bottom: 120px; }
}

/* Keep a comfortable bottom space for cart bar */
.main { padding-bottom: 120px; }


/* Ensure backdrop (outside the cart panel) is clickable for closing */
.modal {
  pointer-events: auto; /* backdrop receives clicks */
}

.modal .panel {
  pointer-events: auto; /* keep panel interactive */
}