.scs-wrap { max-width: 1100px; margin: 0 auto; }
.scs-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 16px; margin: 14px 0; }
.scs-box { background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:16px; }
.scs-error { border-color:#d63638; }
.scs-muted { color:#666; font-size: 13px; margin-top:8px; }

.scs-reader { max-width: 420px; margin: 10px 0; }
.scs-actions { display:flex; gap:10px; margin-top:10px; }
.scs-balance { font-size: 16px; margin: 8px 0 14px; }

.scs-food-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.scs-food { border:1px solid #eee; border-radius:10px; padding:12px; }
.scs-food-name { font-weight:700; margin-bottom:6px; }
.scs-food-meta { display:flex; justify-content:space-between; font-size: 13px; color:#444; margin-bottom: 10px; }
.scs-qty { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.scs-qty button { width:34px; height:34px; border-radius:8px; border:1px solid #ddd; background:#f7f7f7; cursor:pointer; }
.scs-qty input { width:60px; text-align:center; border-radius:8px; border:1px solid #ddd; padding:6px; }

/* Food thumbnail styling (grid) */
.scs-food-thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 56px;
	background: #f5f5f5;
	border: 1px solid rgba(0,0,0,.08);
  }
  
  .scs-food-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
  }

.scs-sidecart { position: fixed; right: -380px; top: 0; height: 100%; width: 360px; background:#fff; border-left:1px solid #e5e5e5; box-shadow: -10px 0 25px rgba(0,0,0,.08); transition: right .25s ease; z-index: 9999; display:flex; flex-direction:column; }
.scs-sidecart.open { right: 0; }
.scs-sidecart-header { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #eee; }
.scs-close { border:none; background:transparent; font-size:22px; cursor:pointer; }
.scs-sidecart-body { padding: 12px 14px; overflow:auto; flex: 1; }
.scs-sidecart-footer { padding: 12px 14px; border-top:1px solid #eee; }
.scs-total { font-weight:700; margin-bottom:10px; }

.scs-cart-item { border:1px solid #eee; border-radius:10px; padding:10px; margin-bottom:10px; }
.scs-cart-name { font-weight:700; margin-bottom:8px; }
.scs-cart-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.scs-cart-controls button { border:1px solid #ddd; background:#f7f7f7; border-radius:8px; padding:6px 10px; cursor:pointer; }
.scs-cart-qty { width:70px; border:1px solid #ddd; border-radius:8px; padding:6px; text-align:center; }
.scs-cart-line { margin-top:8px; font-weight:700; }

.scs-table { width:100%; border-collapse: collapse; }
.scs-table th, .scs-table td { border-bottom:1px solid #eee; padding:8px; text-align:left; }

/*
	bootstarp table responsive
*/
/* Mimic Bootstrap's .table-responsive */
.table-responsive {
	position: relative;          /* so the hint can be positioned inside */
    display: block;
    width: 100%;
    overflow-x: auto;          /* horizontal scroll if needed */
	padding: 5px;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

/* Optional: make sure the table behaves nicely inside */
.table-responsive table {
    /*width: max-content;*/
    width: 100%;
    border-collapse: collapse;
}

.dataTables_wrapper .dataTables_filter input{
	margin-bottom: 10px;
}

@media (max-width: 768px) {
    /* Scroll hint */
	.table-responsive::after {
		content: 'Swipe left to see more →';
		position: fixed;
		right: 12px;
        bottom: 12px;
		padding: 6px 10px;
		font-size: 11px;
		font-weight: 500;
		background: linear-gradient(to right, transparent, rgba(0,0,0,0.8));
		color: #fff;
		border-radius: 999px;
		pointer-events: none;  /* don’t block scroll */
		white-space: nowrap;
		opacity: 1;
		transition: opacity 0.3s ease;
		z-index: 9999;                /* stay above content */
	}

	/* If no scroll or user already scrolled -> hide hint */
	.table-responsive.no-scroll::after,
	.table-responsive.scrolled::after {
		opacity: 0;
	}
	
}




/*
	toast part - substitute of the alert() message
*/
#scsToast.scs-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999999;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: #fff;
  background: #111;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  max-width: calc(100% - 24px);
  text-align: center;
}

#scsToast.scs-toast.is-error{ background:#b91c1c; }
#scsToast.scs-toast.is-success{ background:#15803d; }
#scsToast.scs-toast.is-info{ background:#111; }