/* =======================================
   ORDERS MODAL – SINGLE COLUMN
   ======================================= */

/* Full-screen overlay wrapper */
.ordersOverlay {
	position: fixed;
	inset: 0;
	z-index: 1100;

	display: flex;
	align-items: center;
	justify-content: center;

	/* animation base */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease-out;
}

/* Respect [hidden] attribute */
.ordersOverlay[hidden] {
  	display: none !important;
}

/* When open: fade in and enable clicks */
.ordersOverlay.orders-open {
	opacity: 1;
	pointer-events: auto;
}

/* Dark backdrop */
.ordersBackdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 5, 10, 0.5);
}

/* Panel – single column, scrolls inside */
.ordersPanel {
	position: relative;
	z-index: 1;
	width: min(500px, 92vw);
	height: 90vh; /* fixed height so inner content can scroll */
	background: #ffffff;
	border-radius: 14px;

	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* slide-up animation */
	transform: translateY(24px);
	opacity: 0;
	transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

/* When open: panel slides up & fades in */
.ordersOverlay.orders-open .ordersPanel {
	transform: translateY(0);
	opacity: 1;
}

/* Close button (X) */
.ordersCloseBtn {
	position: absolute;
	right: 12px;
	top: 17px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 0;
	background: #f1f3f5;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

/* Grid used as vertical stack now */
.ordersGrid {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0; /* allow inner scroll */
}

/* Top area: title (always visible) */
.ordersLeft {
	flex-shrink: 0;
	background: #f1f3f5;
	padding: clamp(15px, 3vw, 20px) 10px clamp(10px, 3vw, 12px);
}

/* Header row: back – title – right button */
.ordersLeftInner{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;   /* center title horizontally */
}

/* Title always centered */
.ordersTitle{
	margin: 0;
	font-size: clamp(17px, 3vw, 19px);
	font-weight: 700;
	text-align: center;
	color: #000;
}

.ordersTitle.is-centered{
  	text-align:center;
}

.ordersSubtitle {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

/* Right area: tabs + scrollable body */
.ordersRight {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
}

/* Wrapper around tabs + scrollable list */
.ordersContent {
	flex: 1 1 auto;
	padding: 0px 0 0;
	display: flex;
	flex-direction: column;
	min-height: 0;  /* important for scroll */
	overflow: hidden;
	font-size: 14px;
	color: #374151;
}

/* ===== Tabs ===== */

.ordersTabsWrap {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f1f3f5;
	border-radius: 0px;
	padding: 1px clamp(14px, 3vw, 22px) 5px;
	margin: 0px auto 0px;
	gap: 0px;
	width: 100%;
   border-bottom: 1px solid #fff;
}

.ordersTabs {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
   padding: 2px;
	gap: 0px;
	width: 100%;
   background: #e1e3e5;
}

.ordersTab {
	border: 0;
	border-radius: 8px;
	padding: 9px 24px;
	font-size: 15px;
	font-weight: 600;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
   position: relative;
	display: flex;
	align-items: center;
	justify-content: center; /* keeps label centered */
}

/* hidden by default (inactive tab) */
.ordersTabIcon{
	display: none;
	width: 20px;
	height: 20px;
	object-fit: contain;

	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}


.ordersTab.is-active{
	background:#ffffff;
	color:#000;
}

/* visible only on active tab */
.ordersTab.is-active .ordersTabIcon{
	display: block;
}


/* ===== Scrollable body (spinner + empty + list) ===== */

.ordersBody {
	margin: 0px 0 1px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0px clamp(14px, 3vw, 22px) 20px; /* space for scrollbar */
	scrollbar-gutter: stable;
}


.ordersSpinner {
  text-align: center;
  padding: 36px 0;
  font-size: 14px;
  color: #6b7280;
}

.ordersEmpty {
  text-align: center;
  padding: 36px 20px;
  font-size: 14px;
  color: #6b7280;
}

/* ===== Orders list + cards ===== */

.ordersList {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0 14px;
}

.orderCard {
  border-radius: 12px;
  background: #fafbfc;
  overflow: hidden;
  border: 1px solid #e1e3e5;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* Header image */
.orderCardHeaderImg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 3;
  background: #f3f4f6;
  overflow: hidden;
}

.orderCardHeaderImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top-left "Order #xxx" badge */
.orderCardBadgeTop {
  position: absolute;
  left: 14px;
  top: 7px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 500;
  text-shadow: 1px 1px 2px #000;
}

/* Body */
.orderCardBody {
  padding: 10px 14px 14px;
}

.orderCardRow1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.orderCardKitchen {
  font-size: 17px;
  font-weight: 600;
  color: #000;
}

/* 3-dots button on top-right of image */
.orderCardMenuBtn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 0px;
  border: 0;
  background: rgba(0,0,0,0.0);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.orderCardMenuIcon {
  width: 30px;
  height: 30px;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0,0,0,1.0));  /* black → white */
}

.orderCardMenuBtn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* show menu dots only in history mode */
.ordersList.ordersList--history .orderCardMenuBtn {
  display: inline-block;
}

/* Info + time + statuses as 2 aligned rows */
.orderCardMeta{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  color: #6b7280;
}

.orderCardMetaRow{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.orderCardInfo{
	font-size: 14px;
	color: #4b5563;
}

.orderCardTime{
  	color: #6b7280;
}

.orderCardMetaRight{
	display: flex;
	justify-content: flex-end;
	text-align: right;
}

.orderCardStatus {
  	font-weight: 600;
}

.orderCardStatus--delivery {
  	color: #16a34a; /* green */
}

.orderCardStatus--pickup {
  	color: #2563eb; /* blue */
}

.orderCardStatus--other {
	color: #de3409; /* orange */
}

/* Full-screen Orders modal on phones */
@media (max-width: 500px) {
	.ordersPanel {
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	/* optional: make sure it’s snug to the edges */
	.ordersOverlay {
		align-items: stretch;
		justify-content: stretch;
	}

   /* Dark backdrop */
   .ordersBackdrop {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.5);
   }
}

/* Left back button – does NOT affect centering */
.ordersBackBtn {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.ordersBackBtn[hidden]{
  	display:none !important;
}

.ordersBackIcon {
	width:20px;
	height:20px;
	display:block;
}

/* Right "Help" / context button – also independent of centering */
.ordersHeaderRightBtn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 6px;
  cursor: pointer;
  color: #2563eb;
}

.ordersHeaderRightBtn[hidden]{
	display:none !important;
}


/* Dark gradient overlay on order card image */
.orderCardHeaderImg::before {
	content: "";
	position: absolute;
	inset: 0;
	/* black → transparent, about 0.3 alpha at the top */
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.5),
		rgba(0, 0, 0, 0.5)
	);
	pointer-events: none;
}

/* Disable the old RIGHT-side close button (we use the LEFT nav button instead) */
.ordersCloseBtn{
  display:none !important;
}

/* LEFT nav button behaves like: X (list) / ← (detail) */
.ordersBackBtn{
  transition: background-color .18s ease, opacity .18s ease;
}

/* .ordersBackBtn:hover{
  background: rgba(0,0,0,0.06);
} */

/* When it's acting as the Close (X) button */
.ordersBackBtn.is-close{
  width:40px;
  height:40px;
  background:#f1f3f5;
}

/* .ordersBackBtn.is-close:hover{
  background:#e6e8ea;
} */

.ordersBackBtn.is-close .ordersBackIcon{
  width:15px;
  height:15px;
}

.ordersBackIcon{
  transition: transform .12s ease;
}

.ordersBackBtn:active .ordersBackIcon{
  transform: scale(0.92);
}