/* ===== Meal Sheet (modal) ===== */
.sheet1.hidden {
	display: none;
}

/* overlay container */
.sheet1 {
	position: fixed;
	inset: 0;
	z-index: 1550;
	display: flex;
	align-items: center;
	justify-content: center;
	/* animation base */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease-out;
}

/* visible state */
.sheet1.sheet-open {
	opacity: 1;
	pointer-events: auto;
}

/* dark background */
.sheetBackdrop {
	position: absolute;      /* inside mealSheet */
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 0;
	opacity: 0;
	transition: opacity 0.20s ease-out;
}

/* when sheet is open, backdrop fades in */
.sheet1.sheet-open .sheetBackdrop {
	opacity: 1;
}

/* white product panel */
.sheetPanel {
	position: relative;
	width: min(500px,92vw);
	max-height: 86vh;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 8px 32px rgba(0,0,0,.10);
	overflow: hidden;
	display: flex;
	flex-direction: column;

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

/* when open: panel slides up & fades in */
.sheet1.sheet-open .sheetPanel {
	transform: translateY(0);
	opacity: 1;
}

.productClose { 
	position: absolute;
	left: 12px;
	top: 12px;
	width: 50px;
	height: 50px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,.15);
	cursor: pointer;
	z-index: 2;
	/* center the image */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.productClose img{
	display: block;
	width: 18px;
	height: 18px;
}

.productShare { 
	position:absolute; 
	right:12px; 
	top:12px; 
	width:48px; 
	height:48px; 
	border-radius:999px; 
	border:0; 
	background:#fff; 
	box-shadow:0 6px 16px rgba(0,0,0,.15); 
	cursor:pointer; 
   z-index:2; 
	place-items: center; 
   align-items: center;
   justify-content: center;
   display: flex;
   padding: 0;
}

.productShare img { 
	width:26px; 
	height:26px; 
	display:block; 
   margin-bottom:2px;
}

.sheetGrid {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	padding: 0 0px;   /* ← 30px left/right */
}

/* inner image card: full width within the gutter, 30px top margin */
.sheetLeft {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f3f5;
	width: 100%;
	margin: 0px 0 0;
	aspect-ratio: 10 / 8.5;
	height: auto;
	overflow: hidden;
	flex: 0 0 auto;
}

/* container for combined discount + daysAdvance badge */
.sheetDiscBadge{
	position: absolute;
	left: clamp(18px, 3vw, 24px);
	bottom: 10px;
	display: inline-flex;
	border-radius: 8px;
   border: 1px solid #ccc;
	overflow: hidden;      /* outer rounded corners shared by segments */
}

/* individual segments inside the badge */
.sheetDealSeg{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 11px;
	height: 30px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/* left: discount */
.sheetDealSeg--discount{
	background: #ea580c;   /* orange */
}

/* right: +N day(s) */
.sheetDealSeg--advance{
	background: #039a30;   /* green */
}


/* keep the image filling that rounded box */
.sheetLeft img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	mix-blend-mode: multiply;
}

.sheetRight { 
	display:flex; 
	flex-direction:column; 
	min-width:0; 
	background:#fff; 
	flex: 0 0 auto;
}

.sheetRightInner { 
	padding:18px 0 22px 0; 
	overflow:visible; 
	flex-direction: column; 
   display: flex;
}

.productTitle { 
	font-size:clamp(21px, 4vw, 24px); 
	font-weight:700; 
	margin:0 clamp(18px, 3vw, 24px) 8px;
	line-height:1.2;
}

/* ===== Description clamp + Read More ===== */
.productDescWrap{
  position: relative;
  margin: 0 clamp(18px, 3vw, 24px) 18px;
}

.productDesc{
  color:#555;
  margin:0;
  font-weight:400;
  line-height:1.3;
  word-break: break-word;
}

/* Collapsed (4 lines) */
.productDesc--clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4; 
  overflow: hidden;
}

/* Link-like overlay at the end of line 4 */
.productDescMore{
  position: absolute;
  right: 0;
  bottom: 0;
  border: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,1) 35%, #fff 70%);
  padding: 0 0 0 50px; /* covers the underlying last characters nicely */
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.productDescDots{
  color:#555;
  font-weight:400;
}

.productDescMoreLabel{
  color:#2c75e3;
  font-weight:600;
}

.productDescMore:focus-visible{
  outline: 2px solid rgba(37,99,235,0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

.productDescWrap.is-expandable{
  cursor: pointer;
}


.sheetDescUnderline { 
	background-color:#e3e5e7; 
	height: 1px; 
	margin: 0 0 0 clamp(20px, 5vw, 24px); 
}

.sheetWeight { 
	color:#555; 
	margin:7px 0px 20px clamp(18px, 3vw, 24px); 
	font-weight: 400; 
	font-size: 15px; 
}

/* === Spicy level row === */
.sheetSpicyRow{
	display: none;                 /* hidden by default, shown via JS */
	align-items: center;
	gap: 8px;
	font-weight: 400;
	margin: 0 clamp(18px, 3vw, 24px) 10px 0;
	color: #555;
	font-size: 15px;
}


.sheetSpicyIcons{
	display: flex;
	gap: 1px;
}

/* each chili icon */
.spicyIcon{
	width: 10px;
	height: 20px;

	/* use the PNG as a mask (shape) */
	-webkit-mask-image: url('../images/spicy.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	mask-image: url('../images/spicy.png');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;

	/* actual color of the chili */
	background-color: #d62d2d;  /* red */
}

/* “off” icons go grey + faint */
.spicyIcon--off{
	opacity: 0.25;
	filter: grayscale(100%);
}

/* weight + spicy row */
.sheetMeta{
	display: flex;
	justify-content: space-between;
	align-items: center;
}



/* ===== Modifiers styling ===== */
.mods { 
	margin: 6px 0 0px; 
}

.modGroup { 
	margin:0px 0px; 
	border-top: 10px solid #e1e3e5; 
}

/* Remove all borders initially */
.modGroup .optRow {
    border-bottom: none;
}


/* Remove top border from the very first row */
.modGroup .optRow:first-child {
    border-top: none;
}


.modHead { 
	display:flex; 
	gap:1px; 
	margin:0 clamp(18px, 3vw, 24px); 
	flex-direction: column; 
}

.modTitle { 
	font-weight:600; 
	color: #000; 
	font-size:18px; 
	margin-top: 15px; 
	display: block; 
}

.modBody { 
	display:flex; 
	flex-direction:column; 
	padding: 5px 0 5px clamp(18px, 3vw, 24px); 
}


/* option row */
.optRow { 
	display:flex; 
	align-items:center; 
	justify-content:space-between; 
	gap:12px; 
	padding:14px 0px; 
	border-top:1px solid #f0f2f3 
}

/* When a multi-select group reached its max, non-selected rows fade */
.optRow--disabled {
	opacity: 0.35;          /* slightly faded like on the app */
	pointer-events: none;   /* don’t allow clicking these rows */
}

.optLeft { 
	display:flex; 
	flex-direction:column; 
	gap:2px; 
	min-width:0 
}

.optTitle { 
	font-size:15px; 
	font-weight:400; 
	color:#000; 
	overflow:hidden 
}

.optSub { 
	font-size:13px; 
	color:#a85524; 
	font-weight:500 
}

/* right controls */
.optCtrl { 
	flex:0 0 auto; 
	display:flex; 
	align-items:center; 
	gap:10px;
   margin-right:clamp(10px, 3vw, 15px);
}

.optRadio,.optCheck {
	width:22px; 
	height:22px; 
	border-radius:999px; 
	border:1px solid #919395; 
	display:grid; 
	place-items:center; 
	background:#fff; 
	cursor:pointer;
   margin-right: 8px;
}

.optCheck { 
	border-radius:4px 
}

.optRadio.is-on::after { 
	content:""; 
	width:12px; 
	height:12px; 
	border-radius:999px; 
	background:#000; 
	border: 1px solid #000; 
}

.optCheck.is-on { 
	background:#000; 
	border-color:#000 
}

.optCheck.is-on::after{
	content:'\2713';
	color:#ffffff;
	font-size:14px;
	font-weight: 700;
}


/* stepper for portioned options */
.stepper { 
	display:inline-flex; 
	align-items:center; 
	gap:8px;
}

.stepper button { 
	width:38px; 
	height:38px; 
	border:0; 
	background:#f3f4f6; 
	border-radius:999px; 
	font-size:20px; 
	line-height:0; 
	cursor:pointer 
}

.stepper .val { 
	min-width:18px; 
	text-align:center; 
	font-weight:500 
}

.mods .loading { 
	color:#6b7280; 
	font-size:14px; 
	padding:12px 14px 
}

.sheetInstruc {
	flex-direction: column; 
	border-top:10px solid #e1e3e5; 
	margin: 0 0px 20px 0px;
	padding: 0 clamp(18px, 3vw, 24px);
   display: flex;
}


.productFooter{
	position: sticky;
	bottom: 0;
	padding: 6px clamp(18px, 3vw, 24px) clamp(10px, 3vw, 20px);
	background: #eef1f4;
   border-top: 1px solid #e1e3e5;
	display: flex;
	flex-direction: column;
	gap: 9px;
	transition: transform .18s ease, opacity .18s ease;
	will-change: transform;
}

/* top row: price on left, qty on right */
.productFooterTop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

/* qty control on the right */
.qtyCtrl{
	display: inline-flex;
	align-items: center;
	background: #eef1f4;
	border: 1px solid #b1b3b5;
	border-radius: 8px;
	padding: 0 0px;
}

.qtyCtrl button{
	width: 42px;
	height: 42px;
	border: 0;
	background: #eef1f4;
	border-radius: 10px;
	font-size: 26px;
   font-weight: 400;
	cursor: pointer;
}

.productQtyBtn {
  touch-action: manipulation; /* key: reduces double-tap zoom behavior */
}

.productQtyOpt {
  touch-action: manipulation; /* key: reduces double-tap zoom behavior */
}

.qtyCtrl .qnum{
	min-width: 30px;
	text-align: center;
	font-weight: 600;
   font-size: 17px;
   color: #000;
}

/* price block */
.priceTag{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.priceTagMainRow{
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.priceTagMain{
	font-size: 21px;
	font-weight: 600;
}

.priceTagOld{
	font-size: 14px;
	color: #777;
	text-decoration: line-through;
}

.priceTagEach{
	font-size: 12px;
	color: #444;
}

/* discounted state: orange like the app */
.priceTag--discount .priceTagMain{
	color: #df4e00;
}

.sheetAddBtn{
   height: 44px;
	position: relative;               /* so the icon can be placed inside */
	display: flex;
	align-items: center;
	justify-content: center;          /* center the text */
	width: 100%;
	border: 0;
	border-radius: 10px;
	padding: 14px 0;
	background: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	text-transform: uppercase;
}



/* icon fixed on the left */
.sheetAddIcon{
	position: absolute;
	left: 20px;                       /* tweak as needed */
	width: 20px;
	height: 20px;
	background: url('../images/cart.png') center/contain no-repeat;
	flex-shrink: 0;
	/* make dark icon white */
	filter: brightness(0) invert(1);
}

/* text naturally centers because of justify-content:center */
.sheetAddText{
	pointer-events: none;             /* so clicks go to the button, not the span */
}

.sheetAddBtn:active{
	transform: translateY(1px);
}

.sheetAddBtn:disabled{
  background: #A1A3A5;
  cursor: default;
  opacity: 1;      /* prevents browser default dimming */
  transform: none;
}

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

.stepper.hidden { 
	display:none; 
}

.optAdd {
	width:38px; 
	height:38px;
	border:0; background:#f3f4f6;
	border-radius:999px; 
	font-size:20px; 
	line-height:0;
	cursor:pointer; 
	display:inline-flex; 
	align-items:center; 
	justify-content:center;
   touch-action: manipulation; /* key: reduces double-tap zoom behavior */
}

/* === Badges row (Min order + Gluten-free, etc.) === */
.sheetBadges{
	display: none;                 /* JS sets to flex when there are badges */
	flex-wrap: nowrap;             /* one line only */
	overflow-x: auto;              /* allow left–right scroll */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;

	gap: 8px;
	margin: 0px 0px 8px;
	padding: 0 clamp(18px, 3vw, 24px) 4px;  
	/* hide scrollbar (Firefox + old Edge) */
	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* IE / old Edge */
}

/* hide scrollbar (Chrome / Safari / new Edge) */
.sheetBadges::-webkit-scrollbar{
	display: none;
}

/* base pill */
.dietBadge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 10px 10px;
	border-radius: 8px;
	background: #f0f2f4;
	font-size: 14px;
	color: #000;
	white-space: nowrap;
}

.dietBadge img{
	width: 16px;
	height: 16px;
	margin-right: 6px;
	display: block;
}



/* orange min-order pill */
.dietBadge--min{
	background: #e6f3df;
	color: #008015;
	font-weight: 600;
}

.dietBadge--min img{
	width: 18px;
	height: 18px;
	margin-right: 6px;
	display: block;
	background: transparent;  /* IMPORTANT: no fill, otherwise you get a square */

	/* turn black icon into orange */
	filter: invert(33.96%)
        sepia(72.45%)
        saturate(1282.70%)
        hue-rotate(129.28deg)
        brightness(85.99%)
        contrast(252.37%);
}

/* disabled minus at minimum qty */
.qtyCtrl button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Portion group reached its total portions cap:
   keep the circle normal, only make the "+" light grey */
.modGroup[data-maxed="1"] .optAdd,
.modGroup[data-maxed="1"] [data-stepper] button[data-op="+"] {
	opacity: 1;          /* cancel any disabled fading */
	color: #d0d0d0;      /* light grey plus sign */
	pointer-events: none;/* still not clickable */
}

/* Per-option portion limit reached: only the "+" turns light grey */
.optAdd.optPlus--max,
.stepper button[data-op="+"].optPlus--max {
	color: #d0d0d0;     /* light grey glyph */
	pointer-events: none;
}


/* ===== Portion "+" icon dimming (because "+" is an <img>) ===== */
/* Option A (recommended): keep the circle normal, dim only the icon */
.modGroup[data-maxed="1"] .optAdd img,
.modGroup[data-maxed="1"] [data-stepper] button[data-op="+"] img,
.optAdd.optPlus--max img,
.stepper button[data-op="+"].optPlus--max img {
  opacity: 0.28;              /* adjust 0.20–0.40 to taste */
}

/* Safety net: any disabled stepper/add icon dims */
.optAdd:disabled img,
.stepper button:disabled img {
  opacity: 0.28;
}

.modReq { 
	font-size:13px; 
	font-weight:400; 
	color:#6b7280 
}



/* required groups: "Required", "Required (up to ...)" */
.modReq--required{
  color: #df5611;      /* orange – use your brand orange here */
  font-weight: 600;    /* bold */
}

/* Pending required selections */
.sheetAdd--pending {
  background: #a1a3a5;   /* light grey like the app */
  color: #ffffff;
}





/* ===== Split layout (short panels) ===== */
#mealSheet.sheet--split .sheetPanel{
  width: min(1040px, 96vw);
  max-width: none;

  /* KEY: give the panel an actual height so right column can scroll + show footer */
  height: 86vh;
  max-height: 86vh;
}

/* Two columns fill the panel height */
#mealSheet.sheet--split .sheetGrid{
  flex-direction: row;
  align-items: stretch;   /* KEY: force both columns to full height */
  height: 100%;           /* KEY */
  overflow: hidden;       /* grid is not the scroller */
  flex: 1 1 auto;
  min-height: 0;
}

/* Left image column bigger */
#mealSheet.sheet--split .sheetLeft{
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
}

#mealSheet.sheet--split .sheetDiscBadge{
  bottom: 20px;
}


/* Make image feel bigger + slightly left */
#mealSheet.sheet--split .sheetLeft img{
  object-position: 35% center;
  height: auto;
}



/* Right column becomes a true flex column with fixed footer */
#mealSheet.sheet--split .sheetRight{
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  overflow: hidden;          /* IMPORTANT: only inner scrolls */
  border-left: 1px solid #e3e5e7;
}

/* Scroll happens here */
#mealSheet.sheet--split .sheetRightInner{
  flex: 1 1 0;
  min-height: 0;

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* Keep your normal padding (no giant top gap needed) */
  padding: 60px 0 22px 0;

  /* Safari-safe: scrolling works more reliably when this is block */
  display: block;
}

/* Footer always visible at bottom of right column */
#mealSheet.sheet--split .productFooter{
  position: relative;   /* cancel sticky */
  flex: 0 0 auto;
  bottom: auto;
}





/* ===== Fullscreen product sheet on short viewports ===== */
@media (max-width: 500px) {
	/* stretch panel to top/bottom instead of centering it */
	.sheet1{
		align-items: stretch;
	}

	.sheetPanel{
		margin: 0;              /* no outer margin */
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;       /* no rounded corners */
	}

   .sheet1.sheet-open .sheetBackdrop {
      opacity: 0;
   }

   .productFooter{
      position: fixed;
      width: 100%;
   }

   .sheetRight { 
      padding-bottom: 130px;
   }

   /* When typing (soft keyboard open): hide the footer so it doesn't jump above the keyboard */
   #mealSheet.sheet--kbd .productFooter{
      transform: translateY(120%);
      opacity: 0;
      pointer-events: none;
   }

   /* Remove extra bottom padding when footer is hidden */
   #mealSheet.sheet--kbd .sheetRight{
      padding-bottom: 18px;
   }
}




/* Required group that already has something selected -> show green */
.modReq--required.modReq--done{
	color: #16a34a;      /* same idea as your "Complete" green */
}

/* ===== Order view (read-only) ===== */
#mealSheet.sheet--orderView #sheetAdd { display:none; }
#mealSheet.sheet--orderView #sheetPriceEach { display:none; }

#mealSheet.sheet--orderView #sheetMinus,
#mealSheet.sheet--orderView #sheetPlus { display:none; }

#mealSheet.sheet--orderView .qtyCtrl{
	border:0;
	background:transparent;
	min-width:auto;
	padding:0;
}

#mealSheet.sheet--orderView #sheetQty{
	font-weight:600;
}

#mealSheet.sheet--orderView #sheetQty::before{
	content:"x ";
	color:#888;
	font-weight:400;
}

#mealSheet.sheet--orderView #sheetQty::after{
	content:" order";
	color:#000;
	font-weight:600;
}

/* OrderDetail → Product sheet (read-only): hide purchase-only UI */
#mealSheet.sheet--orderView .dietBadge--min{
  display: none !important;
}

/* Hide the “(… ea)” line in orders (it’s redundant there) */
#mealSheet.sheet--orderView #sheetPriceEach{
  display: none !important;
}

/* Special Instructions: remove browser focus highlight */
#specialInstruc:focus,
#specialInstruc:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: prevent iOS/Android “tap highlight” flash */
#specialInstruc{
  -webkit-tap-highlight-color: transparent;
}