/* ================= RESET / BASE ================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f8fafc;
  color: #111827;
}

.container {
  padding: 12px;
}

/* ================= TOP BAR ================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.brand {
  font-size: 18px;
  font-weight: 700;
}

.cart-btn {
  position: relative;
  font-size: 20px;
  text-decoration: none;
  color: #111827;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}

/* ================= SLIDER ================= */
.slider {
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.slide.active {
  opacity: 1;
}

/* ================= SHOP STATUS ================= */
.shop-banner {
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 14px;
  font-size: 14px;
}

.shop-banner.open {
  background: #dcfce7;
  color: #166534;
}

.shop-banner.closed {
  background: #fee2e2;
  color: #b91c1c;
}

/* ================= FILTER BAR ================= */
.filter-bar {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

/* Filter chip */
.filter-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-size: 13px;
  font-weight: 600;
}

/* Switch */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.switch input {
  display: none;
}

.slider-switch {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.slider-switch::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.25s ease;
}

.switch input:checked + .slider-switch {
  background: #22c55e;
}

.switch input:checked + .slider-switch::before {
  transform: translateX(20px);
}

/* ================= MENU GRID ================= */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

/* ================= MENU CARD ================= */
.menu-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.menu-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

.menu-card h4 {
  margin: 10px 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.menu-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #16a34a;
}

/* Button */
.menu-card button {
  margin-top: 10px;
  width: 100%;
  padding: 9px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.menu-card button:active {
  transform: scale(0.97);
}

/* Disabled */
.menu-card.disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* ================= BADGES ================= */
.type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

.type-veg {
  background: #dcfce7;
  color: #166534;
}

.type-nonveg {
  background: #fee2e2;
  color: #991b1b;
}

.qty-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #374151;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Out of stock */
.menu-card small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
}

/* ================= EMPTY STATE ================= */
.empty-state {
  text-align: center;
  padding: 30px 10px;
  color: #6b7280;
  font-size: 14px;
}
/* ===== Overlay ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  z-index: 998;
}

/* ===== Bottom Sheet ===== */
.cart-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 16px;
  z-index: 999;
  transition: .3s ease;
}

.cart-sheet.show {
  bottom: 0;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 10px;
}

.sheet-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
}

.sheet-desc {
  color: #6b7280;
  font-size: 14px;
  margin: 8px 0;
}

.sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stock-badge {
  font-size: 12px;
  color: #047857;
}

.qty-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
}

.qty-control button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  font-size: 18px;
  background: #e5e7eb;
}

.btn-primary.full {
  width: 100%;
}
/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 40;
  display: none;
}

/* Sheet */
.cart-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 50;
  transition: bottom .3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.cart-sheet.show {
  bottom: 0;
}

/* Handle */
.sheet-handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 4px;
  margin: 8px auto;
}

/* Header */
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.sheet-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
}

/* Body */
.sheet-body {
  padding: 16px;
}

/* Image */
.sheet-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Description */
.sheet-desc {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 12px;
}

/* Price row */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.price {
  font-size: 20px;
  font-weight: 700;
}

/* Stock */
.stock-badge {
  background: #ecfeff;
  color: #0369a1;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* Quantity */
.qty-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qty-control button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  font-size: 18px;
}

/* Button */
.btn-primary.full {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 12px;
}
.btn-primary.full:active {
  transform: scale(0.97);
}
/* ================= ADD TO CART ================= */
.cart-item{
  display:flex;
  gap:12px;
  padding:12px;
  border-bottom:1px solid #e5e7eb;
  align-items:center;
}

.cart-item img{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
}

.cart-info{
  flex:1;
}

.qty-control{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

.qty-control button{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #e5e7eb;
  background:#fff;
}

.remove-btn{
  border:none;
  background:none;
  font-size:18px;
  color:#b91c1c;
  cursor:pointer;
}

.cart-summary{
  position:sticky;
  bottom:0;
  background:#fff;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #e5e7eb;
}
.order-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.order-header,
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-items {
  margin: 10px 0;
}

.order-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
}

.status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status.pending { background:#fef3c7; color:#92400e }
.status.confirmed { background:#dcfce7; color:#166534 }
.status.cancelled { background:#fee2e2; color:#991b1b }

.payment {
  font-size: 13px;
  font-weight: 600;
}

.payment.paid { color:#16a34a }
.payment.pending { color:#ca8a04 }
.payment.failed { color:#dc2626 }
.order-status-badge{
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
  display:inline-block;
}
.status-confirmed{
  background:#ecfeff;
  color:#047857;
}
.status-cancelled{
  background:#fee2e2;
  color:#b91c1c;
}
.status-delivered{
  background:#dcfce7;
  color:#166534;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:#ffffff;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
  position:sticky;
  top:0;
  z-index:100;
}

.brand{
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  color:#111827;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.cart-btn{
  position:relative;
  text-decoration:none;
  font-size:18px;
}

.cart-badge{
  position:absolute;
  top:-6px;
  right:-10px;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
}

.profile-btn{
  background:#f3f4f6;
  border:none;
  border-radius:999px;
  width:36px;
  height:36px;
  font-size:18px;
  cursor:pointer;
}