/* ============================================================
   Food Product Options — Modal styles
   Rebrand karne ke liye sirf ye variables badlein.
   ============================================================ */
:root {
	--fpo-red:        #e8442c;
	--fpo-red-dark:   #c9351f;
	--fpo-pink-bg:    #fdecea;
	--fpo-pink-pill:  #fde3df;
	--fpo-ink:        #2b2b3a;
	--fpo-ink-soft:   #8a8a99;
	--fpo-line:       #efeff3;
	--fpo-card:       #ffffff;
	--fpo-radius:     16px;
	--fpo-shadow:     0 20px 60px rgba(0,0,0,.25);
}

/* Overlay */
.fpo-overlay{
	position: fixed; inset: 0; z-index: 999999;
	background: rgba(20,20,30,.55);
	display: none; align-items: center; justify-content: center;
	padding: 24px;
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.fpo-overlay.is-open{ display: flex; }

/* Modal shell */
.fpo-modal{
	width: min(1040px, 100%);
	height: min(680px, 92vh);
	background: var(--fpo-card);
	border-radius: 22px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 42% 58%;
	box-shadow: var(--fpo-shadow);
	position: relative;
}

/* Left image panel — fixed square frame, poori image (crop nahi) */
.fpo-media{
	background: linear-gradient(160deg, #f6f1ee 0%, #ece3dd 100%);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 22px;
	overflow: hidden;
	min-height: 0;
}
.fpo-media-frame{
	width: 100%;
	aspect-ratio: 1 / 1;          /* fixed square */
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 12px 30px rgba(0,0,0,.14);
	position: sticky;              /* scroll par image upar tiki rahe */
	top: 22px;
	display: flex; align-items: center; justify-content: center;
}
.fpo-media-frame img{
	width: 100%; height: 100%;
	object-fit: contain;          /* poori uploaded image, same-to-same */
	display: block;
}

/* Right panel */
.fpo-panel{
	display: flex; flex-direction: column;
	min-width: 0; min-height: 0;  /* grid item ko shrink hone do */
	overflow: hidden;
}
.fpo-head{
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 24px 12px;
}
.fpo-price{ font-size: 30px; font-weight: 800; color: var(--fpo-ink); }
.fpo-head-actions{ display: flex; gap: 10px; }
.fpo-iconbtn{
	width: 44px; height: 44px; border-radius: 50%;
	border: none; cursor: pointer;
	background: var(--fpo-red); color: #fff;
	font-size: 18px; display: grid; place-items: center;
	transition: background .15s ease;
}
.fpo-iconbtn:hover{ background: var(--fpo-red-dark); }

/* Scroll body */
.fpo-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 24px 20px; }
.fpo-body::-webkit-scrollbar{ width: 8px; }
.fpo-body::-webkit-scrollbar-thumb{ background: #e2e2ea; border-radius: 8px; }

/* Quick select (pink) box */
.fpo-quick{
	background: var(--fpo-pink-bg);
	border-radius: var(--fpo-radius);
	padding: 16px 18px; margin-bottom: 18px;
}
.fpo-quick h4{ margin: 0 0 2px; font-size: 16px; color: var(--fpo-ink); }
.fpo-quick p{ margin: 0 0 12px; font-size: 13px; color: var(--fpo-ink-soft); }
.fpo-quick-row{
	background: #fff; border: 1px solid #f6d9d3; border-radius: 12px;
	padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
	cursor: pointer;
}
.fpo-quick-row strong{ display:flex; align-items:center; gap:8px; color: var(--fpo-ink); font-size:15px; }
.fpo-quick-row span{ display:block; font-size:12px; color: var(--fpo-ink-soft); margin-top:2px; }
.fpo-quick-row .fpo-radio{ pointer-events:none; }

/* Group header card */
.fpo-group-head{
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; border: 1px solid var(--fpo-line);
	border-radius: var(--fpo-radius);
	padding: 18px 20px; margin: 18px 0 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.fpo-group-head h3{ margin: 0; font-size: 19px; font-weight: 800; color: var(--fpo-ink); }
.fpo-badge{
	font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 6px;
}
.fpo-badge.req{ background: var(--fpo-pink-pill); color: var(--fpo-red); }
.fpo-badge.opt{ background: var(--fpo-pink-pill); color: var(--fpo-red); }

/* Radio / checkbox rows */
.fpo-row{
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; border: 1px solid var(--fpo-line);
	border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
	cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.fpo-row:hover{ border-color: #f2c9c1; }
.fpo-row.is-selected{ border-color: var(--fpo-red); box-shadow: 0 0 0 1px var(--fpo-red) inset; }
.fpo-row-left{ display: flex; align-items: center; gap: 14px; }
.fpo-row-label{ font-size: 16px; color: var(--fpo-ink); }
.fpo-row-price{ font-size: 16px; font-weight: 800; color: var(--fpo-ink); }

/* Custom radio / checkbox dot */
.fpo-radio{
	width: 22px; height: 22px; border-radius: 50%;
	border: 2px solid #f0b8ae; flex: 0 0 auto; position: relative;
	transition: border-color .15s ease;
}
.fpo-row.is-selected .fpo-radio{ border-color: var(--fpo-red); }
.fpo-row.is-selected .fpo-radio::after{
	content: ""; position: absolute; inset: 4px; border-radius: 50%;
	background: var(--fpo-red);
}
.fpo-radio.sq{ border-radius: 6px; }
.fpo-row.is-selected .fpo-radio.sq::after{ border-radius: 3px; }

/* Drinks grid */
.fpo-drinks{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fpo-drink{
	border: 1px solid var(--fpo-line); border-radius: 16px; padding: 12px;
	background: #fff; text-align: center; position: relative;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fpo-drink.is-selected{ border-color: var(--fpo-red); box-shadow: 0 0 0 1px var(--fpo-red) inset; }
.fpo-drink-check{
	position: absolute; top: 10px; right: 10px;
	width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e3e3ea; background:#fff;
}
.fpo-drink.is-selected .fpo-drink-check{ border-color: var(--fpo-red); }
.fpo-drink.is-selected .fpo-drink-check::after{
	content:""; position:absolute; inset:3px; border-radius:50%; background: var(--fpo-red);
}
.fpo-drink-img{
	height: 120px; display: grid; place-items: center; margin-bottom: 8px;
}
.fpo-drink-img img{ max-height: 120px; max-width: 100%; object-fit: contain; }
.fpo-drink-img .ph{ font-size: 40px; opacity:.35; }
.fpo-drink-name{ font-size: 15px; color: var(--fpo-ink); margin-bottom: 6px; }
.fpo-drink-price{ font-weight: 800; color: var(--fpo-ink); margin-bottom: 10px; }
.fpo-drink-add{
	width: 100%; border: 1.5px solid var(--fpo-red); color: var(--fpo-red);
	background: #fff; border-radius: 999px; padding: 9px 0; font-weight: 700;
	cursor: pointer; transition: all .15s ease;
}
.fpo-drink.is-selected .fpo-drink-add{ background: var(--fpo-red); color:#fff; }

/* Special instructions */
.fpo-instr{ margin-top: 22px; }
.fpo-instr h3{ margin: 0 0 10px; font-size: 19px; font-weight: 800; color: var(--fpo-ink); }
.fpo-instr textarea{
	width: 100%; min-height: 110px; resize: vertical;
	border: 1px solid var(--fpo-line); border-radius: 14px; padding: 14px 16px;
	font-size: 15px; color: var(--fpo-ink); font-family: inherit; box-sizing: border-box;
}
.fpo-instr .fpo-count{ text-align: right; font-size: 12px; color: var(--fpo-ink-soft); margin-top: 6px; }

/* Footer */
.fpo-foot{
	border-top: 1px solid var(--fpo-line); padding: 14px 24px;
	display: flex; align-items: center; gap: 14px;
}
.fpo-qty{ display:flex; align-items:center; border:1px solid var(--fpo-line); border-radius:999px; overflow:hidden; }
.fpo-qty button{ width:40px; height:44px; border:none; background:#fff; font-size:20px; cursor:pointer; color:var(--fpo-ink); }
.fpo-qty span{ width:38px; text-align:center; font-weight:700; }
.fpo-addbtn{
	flex: 1; border: none; cursor: pointer;
	background: var(--fpo-red); color: #fff; font-weight: 800; font-size: 16px;
	border-radius: 999px; padding: 15px 20px;
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	transition: background .15s ease;
}
.fpo-addbtn:hover{ background: var(--fpo-red-dark); }
.fpo-addbtn:disabled{ opacity:.6; cursor: not-allowed; }

/* Loader / error */
.fpo-loading{ display:grid; place-items:center; height:100%; color: var(--fpo-ink-soft); }
.fpo-error{ color: var(--fpo-red); font-size:13px; padding: 0 24px 10px; }

/* Mobile */
@media (max-width: 820px){
	.fpo-overlay{ padding: 0; }
	.fpo-modal{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; width: 100%; border-radius: 0; }
	.fpo-media{ padding: 14px; }
	.fpo-media-frame{ position: static; max-width: 240px; margin: 0 auto; }
	.fpo-drinks{ grid-template-columns: repeat(2, 1fr); }
	.fpo-price{ font-size: 24px; }
}