/**
 * The ordering page.
 *
 * Two columns on desktop — menu left, live order panel right — collapsing to a
 * single column with a bottom order bar on phones, which is how most people
 * will actually use this. Theme-agnostic: everything is scoped and uses its own
 * tokens so it looks deliberate whatever theme sits under it.
 */

/*
 * The ordering block sizes itself to its container and never past it. It gets
 * dropped into home pages, page-builder rows and narrow columns, and a element
 * that overflows its parent there does not just scroll — it can shove the
 * page's own header and footer out of the main column entirely.
 */
.mataam-order,
.mataam-order * {
	max-width: 100%;
}

.mataam-order {
	width: 100%;
	overflow-x: clip;
	--o-ink: #14171a;
	--o-dim: #6b737c;
	--o-line: #e6e9ec;
	--o-bg: #fff;
	--o-soft: #f7f8f9;
	--o-accent: #16a34a;
	--o-accent-ink: #0b3d21;
	--o-warn: #b45309;
	--o-radius: 14px;

	color: var(--o-ink);
	font-family: inherit;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px 80px;
}

.mataam-order *,
.mataam-order *::before,
.mataam-order *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- Hero */

.mataam-order__hero {
	margin: 0 0 0;
	padding: 54px 16px 46px;
	background: linear-gradient(160deg, #14171a 0%, #23282e 100%);
	color: #fff;
	text-align: center;
}

.mataam-order__hero-inner { max-width: 640px; margin: 0 auto; }

.mataam-order__eyebrow {
	margin: 0 0 6px;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.66;
}

.mataam-order__title {
	margin: 0 0 8px;
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
}

.mataam-order__sub { margin: 0; font-size: 1rem; opacity: 0.8; line-height: 1.55; }

/* ---------------------------------------------------------------- Bar */

.mataam-order__bar {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 0 0 22px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--o-line);
}

.mataam-order__bar-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.mataam-order__branchpick { display: flex; align-items: center; gap: 8px; }

.mataam-order__label {
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--o-dim);
}

.mataam-order__select {
	padding: 9px 12px;
	border: 1.5px solid var(--o-line);
	border-radius: 10px;
	font-size: 0.92rem;
	font-weight: 600;
	background: var(--o-bg);
	color: inherit;
	max-width: 240px;
}

.mataam-order__near {
	background: none;
	border: 0;
	padding: 0;
	color: var(--o-dim);
	font-size: 0.84rem;
	text-decoration: underline;
	cursor: pointer;
}

.mataam-order__types {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	background: var(--o-soft);
	border-radius: 999px;
}

.mataam-order__type {
	border: 0;
	background: transparent;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--o-dim);
	cursor: pointer;
	white-space: nowrap;
}

.mataam-order__type.is-active {
	background: var(--o-bg);
	color: var(--o-ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.mataam-order__meta {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.84rem;
}

.mataam-order__eta { color: var(--o-dim); }

.mataam-order__closed {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 16px;
	background: #fffbeb;
	border-inline-start: 3px solid var(--o-warn);
	border-radius: 0 10px 10px 0;
	margin-bottom: 20px;
	font-size: 0.92rem;
}

/* ---------------------------------------------------------------- Body */

.mataam-order__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 30px;
	align-items: start;
}

@media screen and (max-width: 980px) {
	.mataam-order__body { grid-template-columns: 1fr; }
}

/* Prompt when no branch chosen */

.mataam-order__prompt {
	padding: 60px 28px;
	text-align: center;
	border: 1px dashed var(--o-line);
	border-radius: var(--o-radius);
	background: var(--o-soft);
}

.mataam-order__prompt h2 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; }
.mataam-order__prompt p { max-width: 46ch; margin: 0 auto 20px; color: var(--o-dim); line-height: 1.6; }

.mataam-order__cta {
	padding: 13px 26px;
	border: 0;
	border-radius: 10px;
	background: var(--o-ink);
	color: #fff;
	font-size: 0.96rem;
	font-weight: 650;
	cursor: pointer;
}

/* Search */

.mataam-order__search { margin-bottom: 16px; }

.mataam-order__searchinput {
	width: 100%;
	padding: 13px 18px;
	border: 1.5px solid var(--o-line);
	border-radius: 12px;
	font-size: 0.95rem;
	background: var(--o-bg);
}

.mataam-order__searchinput:focus {
	outline: 2px solid var(--o-ink);
	outline-offset: 1px;
	border-color: transparent;
}

/* Category nav */

.mataam-order__cats {
	position: sticky;
	top: 62px;
	z-index: 20;
	margin-bottom: 24px;
	padding: 10px 0;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(8px);
	overflow-x: auto;
	scrollbar-width: none;
}

.mataam-order__cats::-webkit-scrollbar { display: none; }

.mataam-order__cats ul {
	display: flex;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.mataam-order__cats li { margin: 0; }

.mataam-order__cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1.5px solid var(--o-line);
	border-radius: 999px;
	background: var(--o-bg);
	font-size: 0.87rem;
	font-weight: 600;
	color: var(--o-ink);
	cursor: pointer;
}

.mataam-order__cat:hover { border-color: var(--o-dim); }

.mataam-order__cat.is-active {
	background: var(--o-ink);
	border-color: var(--o-ink);
	color: #fff;
}

.mataam-order__catcount {
	font-size: 0.72rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* Sections */

.mataam-order__section { margin-bottom: 44px; scroll-margin-top: 130px; }

.mataam-order__secttitle {
	margin: 0 0 4px;
	font-size: 1.45rem;
	font-weight: 750;
	letter-spacing: -0.025em;
}

.mataam-order__sectdesc { margin: 0 0 18px; color: var(--o-dim); font-size: 0.9rem; }

.mataam-order__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}

@media screen and (max-width: 560px) {
	.mataam-order__grid { grid-template-columns: 1fr; }
}

/* Dish card */

.mataam-dish {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--o-line);
	border-radius: var(--o-radius);
	background: var(--o-bg);
	transition: border-color 150ms ease, transform 150ms ease;
}

.mataam-dish:hover { border-color: #cdd3d9; transform: translateY(-1px); }
.mataam-dish.is-soldout { opacity: 0.55; }
.mataam-dish.is-soldout:hover { transform: none; }

.mataam-dish__media { flex-shrink: 0; width: 92px; height: 92px; }

.mataam-dish__media img {
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.mataam-dish__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.mataam-dish__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.3;
}

.mataam-dish__desc {
	margin: 0;
	font-size: 0.83rem;
	color: var(--o-dim);
	line-height: 1.45;
}

.mataam-dish__foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mataam-dish__price { font-weight: 700; font-size: 0.97rem; }

.mataam-dish__soldout {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b91c1c;
}

.mataam-dish__add {
	min-width: 74px;
	padding: 9px 18px;
	border: 0;
	border-radius: 9px;
	background: var(--o-ink);
	color: #fff;
	font-size: 0.86rem;
	font-weight: 650;
	cursor: pointer;
}

.mataam-dish__add:hover { background: #000; }
.mataam-dish__add:active { transform: scale(0.97); }

.mataam-order__empty { padding: 50px; text-align: center; color: var(--o-dim); }

/* ---------------------------------------------------------------- Panel */

.mataam-order__panel { position: sticky; top: 86px; }

.mataam-order__panelinner {
	border: 1px solid var(--o-line);
	border-radius: var(--o-radius);
	background: var(--o-bg);
	padding: 20px;
}

.mataam-order__paneltitle {
	margin: 0 0 16px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mataam-order__lines { display: grid; gap: 14px; margin-bottom: 16px; }

.mataam-order__emptycart { text-align: center; padding: 26px 8px; }
.mataam-order__emptytitle { margin: 0 0 5px; font-weight: 600; font-size: 0.94rem; }
.mataam-order__emptyhint { margin: 0; font-size: 0.83rem; color: var(--o-dim); line-height: 1.5; }

.mataam-line { display: flex; gap: 11px; align-items: flex-start; }

.mataam-line__media { flex-shrink: 0; width: 46px; height: 46px; }
.mataam-line__media img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; display: block; }

.mataam-line__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mataam-line__name { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.mataam-line__mods { font-size: 0.77rem; color: var(--o-dim); }
.mataam-line__note { font-size: 0.77rem; color: var(--o-warn); }
.mataam-line__price { font-size: 0.9rem; font-weight: 650; white-space: nowrap; }

.mataam-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--o-line);
	border-radius: 8px;
	overflow: hidden;
	width: fit-content;
}

.mataam-stepper__btn {
	width: 28px;
	height: 28px;
	border: 0;
	background: var(--o-soft);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	color: var(--o-ink);
}

.mataam-stepper__btn:hover { background: #eceef0; }

.mataam-stepper__qty {
	min-width: 28px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.mataam-order__totals {
	border-top: 1px solid var(--o-line);
	padding-top: 14px;
	margin-bottom: 16px;
	display: grid;
	gap: 8px;
}

.mataam-total { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--o-dim); }

.mataam-total--strong {
	font-size: 1.05rem;
	font-weight: 750;
	color: var(--o-ink);
	padding-top: 8px;
	border-top: 1px solid var(--o-line);
}

.mataam-order__minwarn {
	margin: 4px 0 0;
	font-size: 0.8rem;
	color: var(--o-warn);
	line-height: 1.45;
}

.mataam-order__checkout {
	display: block;
	width: 100%;
	padding: 14px;
	border-radius: 11px;
	background: var(--o-accent);
	color: #fff;
	text-align: center;
	font-size: 0.98rem;
	font-weight: 700;
	text-decoration: none;
}

.mataam-order__checkout:hover { background: #15803d; color: #fff; }

.mataam-order__checkout.is-disabled {
	background: #d6dade;
	color: #8a9199;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Mobile */

.mataam-order__mobilebar { display: none; }

@media screen and (max-width: 980px) {
	.mataam-order__panel {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		max-height: 78vh;
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
		background: var(--o-bg);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.2);
	}

	.mataam-order__panel.is-open { transform: none; }
	.mataam-order__panelinner { border: 0; border-radius: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

	.mataam-order__mobilebar {
		position: fixed;
		inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
		z-index: 55;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 18px;
		border: 0;
		border-radius: 13px;
		background: var(--o-ink);
		color: #fff;
		font-size: 0.95rem;
		font-weight: 650;
		cursor: pointer;
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.26);
	}

	.mataam-order__mobilecount {
		min-width: 25px;
		height: 25px;
		display: inline-grid;
		place-items: center;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.2);
		font-size: 0.8rem;
	}

	.mataam-order__mobilelabel { flex: 1; text-align: start; }
	.mataam-order__mobiletotal { font-variant-numeric: tabular-nums; }

	.mataam-order__cats { top: 0; }
	.mataam-order__bar { position: static; }
}

/* ---------------------------------------------------------------- Sheet */

.mataam-sheet {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(12, 15, 20, 0.55);
}

.mataam-sheet[hidden] { display: none; }

.mataam-sheet__panel {
	position: relative;
	width: min(460px, 100%);
	max-height: 84vh;
	overflow-y: auto;
	background: var(--o-bg, #fff);
	border-radius: 16px;
	padding: 26px 22px 22px;
}

.mataam-sheet__close {
	position: absolute;
	top: 10px;
	inset-inline-end: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	color: #6b737c;
}

.mataam-sheet__title { margin: 0 0 16px; font-size: 1.2rem; font-weight: 700; }
.mataam-sheet__field { margin-bottom: 16px; }
.mataam-sheet__field label { display: block; margin-bottom: 5px; font-size: 0.85rem; font-weight: 600; }

.mataam-sheet__input {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid #e6e9ec;
	border-radius: 9px;
	font-size: 0.92rem;
}

.mataam-sheet__add {
	width: 100%;
	padding: 13px;
	border: 0;
	border-radius: 10px;
	background: #14171a;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 650;
	cursor: pointer;
}

/* ---------------------------------------------------------------- Toast */

.mataam-order__toast {
	position: fixed;
	inset: auto 0 96px 0;
	z-index: 99998;
	width: fit-content;
	max-width: 90vw;
	margin: 0 auto;
	padding: 12px 22px;
	border-radius: 999px;
	background: #14171a;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
	animation: mataam-toast 220ms ease-out;
}

.mataam-order__toast[hidden] { display: none; }
.mataam-order__toast.is-bad { background: #b91c1c; }

@keyframes mataam-toast {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mataam-order__toast,
	.mataam-dish,
	.mataam-order__panel { animation: none; transition: none; }
}

.mataam-order__setup { padding: 40px; text-align: center; color: #6b737c; }

/* ---------------------------------------------------------------- Options */

.mataam-sheet__loading { padding: 30px; text-align: center; color: #6b737c; }

.mataam-optgroup {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
}

.mataam-optgroup__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 9px;
	width: 100%;
}

.mataam-optgroup__name { font-size: 0.95rem; font-weight: 700; }

.mataam-optgroup__req,
.mataam-optgroup__hint {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
}

.mataam-optgroup__req { background: #fee2e2; color: #7f1d1d; }
.mataam-optgroup__hint { background: #f1f3f5; color: #6b737c; }

.mataam-optgroup__list { display: grid; gap: 6px; }

.mataam-opt {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border: 1.5px solid #e6e9ec;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.92rem;
	transition: border-color 130ms ease;
}

.mataam-opt:hover { border-color: #cdd3d9; }
.mataam-opt:has(input:checked) { border-color: #14171a; background: #fafbfc; }

.mataam-opt input { width: 18px; height: 18px; accent-color: #14171a; flex-shrink: 0; }
.mataam-opt__label { flex: 1; }
.mataam-opt__price { font-size: 0.85rem; font-weight: 650; color: #6b737c; }

.mataam-sheet__qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid #e6e9ec;
	border-radius: 9px;
	overflow: hidden;
	margin-bottom: 16px;
}

.mataam-sheet__qty .mataam-stepper__btn { width: 40px; height: 40px; font-size: 18px; }
.mataam-sheet__qty .mataam-stepper__qty { min-width: 40px; font-size: 0.95rem; }

.mataam-sheet__add.is-disabled,
.mataam-sheet__add:disabled {
	background: #d6dade;
	color: #8a9199;
	cursor: not-allowed;
}

/* One-tap ordering: once a dish is in the basket the card itself becomes the
   control for it, so quantity changes never need a dialog or a scroll. */

.mataam-dish__stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1.5px solid var(--o-accent);
	border-radius: 9px;
	overflow: hidden;
}

.mataam-dish__stepper[hidden] { display: none; }

.mataam-dish__step {
	width: 34px;
	height: 34px;
	border: 0;
	background: var(--o-accent);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mataam-dish__step:hover { background: #15803d; }

.mataam-dish__qty {
	min-width: 32px;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--o-ink);
}

.mataam-dish.is-in-cart .mataam-dish__add { display: none; }
.mataam-dish.is-in-cart { border-color: var(--o-accent); }

/* Extras and notes: always reachable, never in the way. */
.mataam-dish__opts {
	align-self: flex-start;
	margin: 2px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--o-dim);
	font: inherit;
	font-size: 0.8rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mataam-dish__opts:hover { color: var(--o-ink); }

/* A long unbroken dish name or a wide image must not stretch the grid column;
   grid tracks size to content by default, which is how one item can widen the
   whole menu and push the order panel off screen. */
.mataam-order__body,
.mataam-order__menu,
.mataam-order__panel { min-width: 0; }

.mataam-order__grid { min-width: 0; }
.mataam-dish { min-width: 0; }
.mataam-dish__body { min-width: 0; }
.mataam-dish__name,
.mataam-dish__desc { overflow-wrap: anywhere; }