/* Food Customizer — customization / variation popup. Dark, elegant, outlined. */
:root {
	--fc-ink: #f2ede4;
	--fc-muted: rgba(242, 237, 228, .55);
	--fc-line: rgba(242, 237, 228, .22);
	--fc-line-strong: rgba(242, 237, 228, .7);
	--fc-panel: #16130f;              /* warm near-black panel */
	--fc-panel-2: #1e1a15;
}
body.fc-modal-open { overflow: hidden; }

.fc-modal-root { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fc-modal-overlay { position: absolute; inset: 0; background: rgba(6, 5, 4, .72); backdrop-filter: blur(3px); }

.fc-modal {
	position: relative; z-index: 1; background: var(--fc-panel); color: var(--fc-ink);
	width: min(920px, 96vw); max-height: 92vh; border: var(--fc-bw, 1px) solid var(--fc-line);
	border-radius: var(--fc-radius-box, 6px); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto; box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.fc-modal-media { grid-row: 1 / 3; background: #0d0b09; display: flex; align-items: center; justify-content: center; padding: 22px; }
.fc-modal-media img { max-width: 100%; max-height: 100%; border-radius: var(--fc-radius, 4px); object-fit: cover; }
.fc-modal-body { padding: 24px 26px; overflow-y: auto; }
.fc-modal-title { font-size: var(--fc-fs-title, 1.5rem); font-weight: 500; margin: 0 0 6px; color: var(--fc-ink); text-transform: uppercase; letter-spacing: .03em; }
.fc-modal-desc { color: var(--fc-muted); font-size: .9rem; line-height: 1.55; margin-bottom: 16px; }

.fc-group { margin: 18px 0; }
.fc-group h3 { font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif); font-size: var(--fc-fs-heading, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-muted); margin: 0 0 10px; font-weight: 600; }

.fc-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: var(--fc-bw, 1px) solid var(--fc-line); border-radius: var(--fc-radius, 4px); margin-bottom: 8px; background: transparent; cursor: pointer; }
.fc-opt span { color: var(--fc-ink); }
.fc-opt-right { display: flex; align-items: center; gap: 10px; }
.fc-opt-price { color: var(--fc-muted); font-size: .88rem; white-space: nowrap; }
.fc-variant input, .fc-remove input { width: 17px; height: 17px; accent-color: var(--fc-ink); }
.fc-variant:has(input:checked) { border-color: var(--fc-line-strong); }
.fc-remove input { accent-color: var(--fc-ink); }

.fc-addon { cursor: default; }
.fc-stepper, .fc-qty-stepper { display: inline-flex; align-items: center; gap: 10px; }
.fc-stepper button, .fc-qty-stepper button {
	width: 30px; height: 30px; border-radius: var(--fc-radius, 3px); border: var(--fc-bw, 1px) solid var(--fc-line); background: transparent;
	font-size: 17px; line-height: 1; cursor: pointer; color: var(--fc-ink); display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.fc-stepper button:hover, .fc-qty-stepper button:hover { border-color: var(--fc-line-strong); }
.fc-qty, .fc-main-qty { min-width: 18px; text-align: center; font-weight: 600; }

.fc-allergen-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-allergen-chip { font-family: 'Jost', 'Roboto', sans-serif; font-weight: 500; font-size: var(--fc-fs-heading, .72rem); padding: 3px 10px; border-radius: var(--fc-radius, 3px); border: var(--fc-bw, 1px) solid var(--fc-line); color: var(--fc-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Variation option pills in the popup */
.fc-var-group h3 { margin-bottom: 10px; }
.fc-var-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-modal .fc-var-pill { border: var(--fc-bw, 1px) solid var(--fc-line); background: transparent; color: var(--fc-ink); border-radius: var(--fc-radius, 3px); padding: 9px 15px; font-size: var(--fc-fs-pill, .88rem); font-weight: 500; line-height: 1.25; cursor: pointer; transition: all .15s; }
.fc-modal .fc-var-pill:hover {
	background: var(--fc-opt-hov-bg, transparent);
	border-color: var(--fc-opt-hov-line, var(--fc-line-strong));
	color: var(--fc-opt-hov-text, var(--fc-ink));
}
.fc-modal .fc-var-pill.is-active:hover { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); }
.fc-modal .fc-var-pill.is-active { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); }

.fc-modal-footer {
	grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 26px; border-top: 1px solid var(--fc-line); background: var(--fc-panel-2); flex-wrap: wrap;
}
.fc-final-wrap { display: flex; flex-direction: column; }
.fc-final-wrap small { color: var(--fc-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.fc-final-price { font-size: var(--fc-fs-price, 1.3rem); font-weight: 600; color: var(--fc-ink); }
.fc-add-btn.button, .fc-varmodal-add {
	background: var(--fc-btn-bg, transparent) !important; color: var(--fc-btn-text, var(--fc-ink)) !important; border: var(--fc-bw, 1px) solid var(--fc-btn-bg, var(--fc-line-strong)) !important; border-radius: var(--fc-radius, 3px) !important;
	padding: 12px 30px !important; font-weight: 600 !important; font-size: var(--fc-fs-button, .82rem) !important; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.fc-add-btn.button:hover, .fc-varmodal-add:hover { background: var(--fc-btn-bg-hov, rgba(255, 255, 255, .1)) !important; color: var(--fc-btn-text-hov, var(--fc-ink)) !important; border-color: var(--fc-btn-bg-hov, var(--fc-ink)) !important; }
.fc-add-btn.loading, .fc-varmodal-add.loading { opacity: .6; pointer-events: none; }
.fc-varmodal-add.is-disabled { opacity: .4; pointer-events: none; }

.fc-modal-close {
	position: absolute; top: 12px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: var(--fc-radius, 3px);
	border: var(--fc-bw, 1px) solid var(--fc-line); background: rgba(0, 0, 0, .3); font-size: 22px; line-height: 1; cursor: pointer; color: var(--fc-ink);
}
.fc-modal-close:hover { border-color: var(--fc-line-strong); }
.fc-customize-btn.loading { opacity: .6; pointer-events: none; }

@media (max-width: 720px) {
	.fc-modal { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; max-height: 94vh; }
	.fc-modal-media { grid-row: auto; max-height: 28vh; }
	.fc-modal-body { padding: 20px 18px; }
	.fc-modal-footer { grid-column: 1; }
	/* Stack the option selectors vertically — full-width, readable, easy to tap. */
	.fc-var-pills { flex-direction: column; gap: 8px; }
	.fc-modal .fc-var-pill { width: 100%; text-align: left; padding: 12px 15px; }
}
.fc-modal, .fc-modal-root { font-family: var(--fc-ff-body, inherit); }

/* Quantity is a real input (typeable) styled like the plain number it replaced. */
input.fc-main-qty {
	width: 3.4em;
	min-width: 42px;
	padding: 2px 0;
	text-align: center;
	font: inherit;
	font-weight: 600;
	color: var(--fc-ink);
	background: transparent;
	border: var(--fc-bw, 1px) solid transparent;
	border-radius: var(--fc-radius, 3px);
	-moz-appearance: textfield;
}
input.fc-main-qty:hover { border-color: var(--fc-line, rgba(242,237,228,.22)); }
input.fc-main-qty:focus {
	outline: none;
	border-color: var(--fc-line-strong);
	background: transparent;
}
input.fc-main-qty::-webkit-outer-spin-button,
input.fc-main-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Option rows on hover — admin-controlled (Food Customizer → Design →
   "Option rows on hover"). The tokens are only emitted when those colours are
   set, so an empty setting simply leaves the row unhighlighted. The nested
   selectors need the extra weight to beat `.fc-opt span { color: … }`. */
.fc-opt:hover {
	background: var(--fc-opt-hov-bg, transparent);
	border-color: var(--fc-opt-hov-line, var(--fc-line));
}
.fc-opt:hover span,
.fc-opt:hover .fc-opt-price,
.fc-opt:hover .fc-qty {
	color: var(--fc-opt-hov-text, var(--fc-ink));
}
.fc-opt:hover .fc-plus,
.fc-opt:hover .fc-minus {
	color: var(--fc-opt-hov-text, var(--fc-ink));
	border-color: var(--fc-opt-hov-text, var(--fc-line));
}

/* =========================================================================
 * Refined popup — a pass over the product options dialog.
 * Everything below is expressed in the plugin's tokens, so it holds on the
 * dark delivery site and the light catering site alike. Colours are mixed
 * from --fc-accent / --fc-ink rather than hard-coded, and every rule degrades
 * to the previous look if color-mix() is unsupported.
 * ===================================================================== */

/* --- entrance ---------------------------------------------------------- */
@keyframes fc-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fc-fade-in  { from { opacity: 0; } to { opacity: 1; } }
.fc-modal-root .fc-modal-overlay { animation: fc-fade-in .22s ease both; }
.fc-modal-root .fc-modal { animation: fc-modal-in .28s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
	.fc-modal-root .fc-modal, .fc-modal-root .fc-modal-overlay { animation: none; }
}

/* --- shell ------------------------------------------------------------- */
.fc-modal {
	grid-template-columns: 44% 56%;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12);
}
/* Full-bleed image instead of a padded box — the photo is the hero. */
.fc-modal-media { padding: 0; background: color-mix(in srgb, var(--fc-ink) 8%, transparent); }
.fc-modal-media img {
	width: 100%; height: 100%; max-width: none; max-height: none;
	object-fit: cover; border-radius: 0;
}

/* --- body rhythm ------------------------------------------------------- */
.fc-modal-body { padding: 30px 32px 26px; scrollbar-width: thin; scrollbar-color: var(--fc-line-strong) transparent; }
.fc-modal-body::-webkit-scrollbar { width: 8px; }
.fc-modal-body::-webkit-scrollbar-thumb { background: var(--fc-line); border-radius: 99px; }
.fc-modal-body::-webkit-scrollbar-thumb:hover { background: var(--fc-line-strong); }

.fc-modal-title {
	font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif);
	line-height: 1.12; letter-spacing: .02em; margin: 0 0 10px;
}
.fc-modal-desc { margin-bottom: 22px; }

/* Hairline between groups reads calmer than margin alone. */
.fc-group { margin: 0; padding: 20px 0; border-top: 1px solid var(--fc-line); }
.fc-group:first-of-type { border-top: 0; padding-top: 4px; }
.fc-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.fc-group h3::after { content: ""; flex: 1; height: 1px; background: var(--fc-line); }

/* --- option rows ------------------------------------------------------- */
.fc-modal .fc-opt { padding: 13px 15px; transition: border-color .15s, background .15s; }
/* A chosen row is unmistakable: accent-tinted, firmer edge. */
.fc-modal .fc-opt:has(input:checked) {
	border-color: var(--fc-accent, var(--fc-line-strong));
	background: color-mix(in srgb, var(--fc-accent) 10%, transparent);
}
.fc-modal .fc-opt:has(input:checked) span { color: var(--fc-ink); }
.fc-modal .fc-opt input[type="radio"],
.fc-modal .fc-opt input[type="checkbox"] { accent-color: var(--fc-accent, var(--fc-ink)); cursor: pointer; }
/* An extra that has been added stands out from the ones that have not. */
.fc-modal .fc-addon.fc-has-qty { border-color: var(--fc-accent, var(--fc-line-strong)); }

/* --- footer ------------------------------------------------------------ */
.fc-modal-footer { padding: 18px 32px; gap: 20px; }
.fc-final-price { font-family: var(--fc-ff-heading, 'Cormorant Garamond', serif); line-height: 1.1; }
.fc-final-wrap small { opacity: .85; }
.fc-modal-footer .fc-qty-stepper { margin-left: auto; }
.fc-add-btn.button { padding: 11px 26px !important; }

/* --- close ------------------------------------------------------------- */
.fc-modal-close {
	width: 36px; height: 36px; border-radius: 999px;
	background: color-mix(in srgb, var(--fc-panel) 78%, transparent);
	backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	transition: background .15s, border-color .15s, transform .15s;
}
.fc-modal-close:hover { transform: rotate(90deg); border-color: var(--fc-line-strong); }
/* patiotime draws a dot on every bare <button> via ::before; inside a flex box
   that becomes a second item and pushes the × off centre. */
.fc-modal-close::before,
.fc-modal-close::after { content: none; display: none; }
.fc-modal-close {
	padding: 0;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	font-family: inherit;
}

/* --- narrow screens ---------------------------------------------------- */
@media (max-width: 720px) {
	.fc-modal { grid-template-columns: 1fr; }
	.fc-modal-media { max-height: 30vh; min-height: 160px; }
	.fc-modal-body { padding: 22px 20px 18px; }
	.fc-modal-footer { padding: 16px 20px; gap: 12px; }
	.fc-modal-footer .fc-qty-stepper { margin-left: 0; }
	.fc-add-btn.button { flex: 0 0 auto; padding: 10px 22px !important; }
}

/* --- product with no options: compact, single column --------------------- */
.fc-modal.fc-modal--simple {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	width: min(440px, 94vw);
}
.fc-modal--simple .fc-modal-media { grid-row: auto; height: 240px; }
.fc-modal--simple .fc-modal-body { padding: 24px 26px 20px; }
.fc-modal--simple .fc-modal-desc { margin-bottom: 4px; }
.fc-modal--simple .fc-modal-footer { grid-column: 1; padding: 16px 26px; }

/* The footer sits on the panel colour; a hairline separates it. */
.fc-modal-footer { background: var(--fc-panel-2, var(--fc-panel)); }

/* Compact dialog: keep the footer on one line where it fits, with a button that
   is sized to its label rather than stretched across the panel. */
.fc-modal--simple .fc-modal-footer { gap: 12px; }
.fc-modal--simple .fc-add-btn.button { flex: 0 0 auto; width: auto; padding: 10px 22px !important; }

/* Minimum order for this item, under the description. Quiet but not hidden —
   it is a condition of ordering, so it reads as information, not a warning. */
.fc-modal-min {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 12px;
	border: var(--fc-bw, 1px) solid var(--fc-line);
	border-radius: var(--fc-radius, 4px);
	background: color-mix(in srgb, var(--fc-accent, currentColor) 8%, transparent);
	color: var(--fc-ink);
	font-size: var(--fc-fs-small, .8rem);
	font-weight: 600;
	letter-spacing: .02em;
}

/* --- compact dialog, side by side on a wide screen ---------------------- *
 * A product with nothing to choose gets the narrow single-column dialog, which
 * leaves the photo small and the panel tall. From tablet width up it reads far
 * better as two columns: a generous photo on the left, the name, note and
 * buying controls on the right. Below that width it stays stacked.
 * ----------------------------------------------------------------------- */
@media (min-width: 721px) {
	.fc-modal.fc-modal--simple {
		grid-template-columns: 46% 54%;
		grid-template-rows: 1fr auto;
		width: min(860px, 94vw);
	}
	.fc-modal--simple .fc-modal-media {
		grid-row: 1 / 3;      /* the photo spans body and footer, as the full dialog does */
		height: auto;
		min-height: 340px;
	}
	.fc-modal--simple .fc-modal-body { padding: 30px 32px 20px; }
	.fc-modal--simple .fc-modal-footer { grid-column: 2; padding: 18px 32px; }
}

/* --- close button, last word ------------------------------------------- *
 * Themes restyle every bare <button>, and a rounded-corner or line-height
 * rule from the theme was reshaping this one and nudging the glyph off centre.
 * Stated here with enough weight to win, and the × is centred by the flex box
 * rather than by line-height, which is what the glyph's own metrics kept
 * throwing off.
 * ----------------------------------------------------------------------- */
.fc-modal-root .fc-modal .fc-modal-close,
.fc-modal-root .fc-modal .fc-modal-close:hover,
.fc-modal-root .fc-modal .fc-modal-close:focus {
	box-sizing: border-box;
	width: 38px !important;
	height: 38px !important;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 21px !important;
	line-height: 0 !important;     /* the flex box does the centring, not the glyph */
	text-indent: 0;
	overflow: hidden;
}
.fc-modal-root .fc-modal .fc-modal-close svg {
	display: block;
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	fill: none;
	pointer-events: none;   /* clicks always land on the button itself */
}