/* Add this to your child theme's style.css, or wrap it in a <style> tag
   inside inc/order-widget.php's render function if you'd rather keep
   everything in one file. */

#order-widget-toggle{
	position:fixed;
	right:20px;
	bottom:100px; /* stacked above the theme's existing WhatsApp chat bubble
	                 at bottom:20px — adjust this value if it still overlaps */
	width:56px;
	height:56px;
	border-radius:50%;
	background:#0a6cff;
	border:none;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 14px rgba(0,0,0,.25);
	cursor:pointer;
	z-index:9999;
}

#order-widget-panel{
	position:fixed;
	right:20px;
	bottom:165px;
	width:320px;
	max-height:60vh;
	background:#fff;
	border-radius:12px;
	box-shadow:0 8px 30px rgba(0,0,0,.2);
	display:flex;
	flex-direction:column;
	overflow:hidden;
	z-index:9999;
}
.ow-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:.75rem 1rem;
	background:#0a6cff;
	color:#fff;
	font-weight:600;
}
#order-widget-close{
	background:none;
	border:none;
	color:#fff;
	font-size:1.3rem;
	line-height:1;
	cursor:pointer;
}
#order-widget-search{
	margin:.6rem;
	padding:.5rem .6rem;
	border:1px solid #ddd;
	border-radius:6px;
	font-size:.85rem;
}
#order-widget-list{
	flex:1;
	overflow-y:auto;
	padding:0 .6rem;
}
.ow-item{
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.5rem .2rem;
	border-bottom:1px solid #f2f2f2;
	font-size:.85rem;
	cursor:pointer;
}
.ow-item--disabled{
	opacity:.5;
	cursor:not-allowed;
}
.ow-item__text{flex:1;}
.ow-item__badge{
	font-size:.7rem;
	color:#b00020;
}
.ow-footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:.6rem 1rem;
	border-top:1px solid #eee;
	font-size:.8rem;
}
#order-widget-send{
	background:#25D366;
	color:#fff;
	border:none;
	padding:.5rem .9rem;
	border-radius:8px;
	font-weight:600;
	cursor:pointer;
}
#order-widget-send:disabled{
	background:#ccc;
	cursor:not-allowed;
}