/**
 * Sticky tabs menu layout.
 *
 * A category strip that sticks under the host header: condensed caps tabs on
 * a 2px black rule, the active tab underlined in ink. Panels set items as
 * rows. The three legacy tab styles (pills, underline, minimal) resolve to
 * this one grammar. Depends on css/foodmaster-tokens.css.
 */

.foodmaster-sticky-tabs {
	width: 100%;
	background: var(--fm-paper);
	color: var(--fm-black);
}

/* Strip */
.foodmaster-tabs-nav-wrapper {
	position: sticky;
	top: var(--foodmaster-sticky-header-height, 0px);
	z-index: 20;
	background: var(--fm-paper);
	border-bottom: var(--fm-rule-strong);
}

.foodmaster-tabs-nav {
	position: relative;
	max-width: var(--fm-container);
	margin: 0 auto;
	padding: 0;
	min-height: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.foodmaster-tabs-nav-container {
	overflow: hidden;
}

/* The inner strip is the scroll container; the script measures it. */
.foodmaster-tabs-nav-inner {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.foodmaster-tabs-nav-inner::-webkit-scrollbar {
	display: none;
}

.foodmaster-tab-button {
	flex: 0 0 auto;
}

.foodmaster-tab-button:first-child {
	padding-inline-start: 0;
}

.foodmaster-tab-button {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--fm-m) * 6);
	margin: 0;
	padding: calc(var(--fm-m) * 1.5) calc(var(--fm-m) * 1.5) calc(var(--fm-m) * 1.5);
	background: var(--fm-chip-bg);
	border: var(--fm-chip-border);
	border-radius: var(--fm-chip-radius, 0);
	box-shadow: inset 0 -3px 0 transparent;
	color: var(--fm-chip-color);
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 17px;
	line-height: 1;
	letter-spacing: calc(0.02em * var(--fm-tracking));
	text-transform: var(--fm-caps);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--fm-fast) var(--fm-ease), background var(--fm-fast) var(--fm-ease), box-shadow var(--fm-fast) var(--fm-ease);
}

.foodmaster-tab-button:hover {
	color: var(--fm-black);
}

.foodmaster-tab-button.active {
	background: var(--fm-chip-active-bg);
	color: var(--fm-chip-active-color);
	box-shadow: var(--fm-chip-active-shadow);
}

.foodmaster-sticky-tabs .foodmaster-tab-button:focus-visible,
.foodmaster-sticky-tabs.tab-style-pills .foodmaster-tab-button:focus-visible {
	box-shadow: var(--fm-focus) !important;
	outline: none;
	z-index: 1;
}

.foodmaster-tab-text {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.foodmaster-tab-count {
	font-family: var(--fm-font-body);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fm-n6);
}

.foodmaster-tab-button.active .foodmaster-tab-count {
	color: var(--fm-chip-active-count);
}

/* Legacy tab styles all resolve to the strip; the active chip keeps its fill */
.foodmaster-sticky-tabs.tab-style-pills .foodmaster-tab-button,
.foodmaster-sticky-tabs.tab-style-underline .foodmaster-tab-button,
.foodmaster-sticky-tabs.tab-style-minimal .foodmaster-tab-button {
	border: var(--fm-chip-border);
}

.foodmaster-sticky-tabs.tab-style-pills .foodmaster-tab-button:not(.active),
.foodmaster-sticky-tabs.tab-style-underline .foodmaster-tab-button:not(.active),
.foodmaster-sticky-tabs.tab-style-minimal .foodmaster-tab-button:not(.active) {
	background: var(--fm-chip-bg);
}

/* Scroll indicators: a paper fade with a chevron, only when the strip overflows */
.foodmaster-tabs-scroll-indicator {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: calc(var(--fm-m) * 6);
	width: calc(var(--fm-m) * 6);
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--fm-black);
	cursor: pointer;
	z-index: 2;
}

.foodmaster-tabs-scroll-left {
	left: 0;
	background: linear-gradient(to right, var(--fm-paper) 55%, transparent);
	justify-content: flex-start;
	padding-left: 4px;
}

.foodmaster-tabs-scroll-right {
	right: 0;
	background: linear-gradient(to left, var(--fm-paper) 55%, transparent);
	justify-content: flex-end;
	padding-right: 4px;
}

.foodmaster-tabs-scroll-indicator.visible {
	display: flex;
}

.foodmaster-tabs-scroll-indicator svg {
	width: 20px;
	height: 20px;
}

/* The chevrons point toward the hidden chips in either reading direction */
/*rtl:begin:ignore*/
[dir="rtl"] .foodmaster-tabs-scroll-indicator svg {
	transform: scaleX(-1);
}
/*rtl:end:ignore*/

/* Layout: content column with an optional cart column */
.foodmaster-tabs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--fm-m) * 4);
	max-width: var(--fm-container);
	margin: 0 auto;
	padding: calc(var(--fm-m) * 2) var(--fm-m) 0;
}

.foodmaster-sticky-tabs.has-sidebar .foodmaster-tabs-layout {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.foodmaster-tabs-main {
	min-width: 0;
}

.foodmaster-tabs-sidebar {
	min-width: 0;
}

.foodmaster-tabs-sidebar-inner {
	position: sticky;
	top: calc(var(--foodmaster-sticky-header-height, 0px) + calc(var(--fm-m) * 6) + calc(var(--fm-m) * 2));
}

/* Panels */
.foodmaster-tab-panel {
	display: none;
}

.foodmaster-tab-panel.active {
	display: block;
	animation: fm-panel-in var(--fm-base) var(--fm-ease) both;
}

@keyframes fm-panel-in {
	from { transform: translateY(8px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.foodmaster-tab-panel[hidden] {
	display: none;
}

.foodmaster-tab-panel-content {
	border-top: 0;
}

/* Back to top: a black square, bottom end corner, phones only */
.foodmaster-back-to-top {
	appearance: none;
	-webkit-appearance: none;
	position: fixed;
	inset-inline-end: calc(var(--fm-m) * 2);
	bottom: calc(var(--fm-m) * 2);
	width: calc(var(--fm-m) * 6);
	height: calc(var(--fm-m) * 6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--fm-black);
	color: var(--fm-paper);
	border: 0;
	border-radius: var(--fm-radius);
	cursor: pointer;
	z-index: 30;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--fm-base) var(--fm-ease), transform var(--fm-base) var(--fm-ease);
}

.foodmaster-back-to-top.visible {
	display: flex;
	opacity: 1;
	transform: none;
}

.foodmaster-back-to-top:hover {
	background: var(--fm-ink);
	color: var(--fm-on-ink);
}

.foodmaster-back-to-top:focus-visible {
	box-shadow: var(--fm-focus);
}

/* Empty */
.foodmaster-sticky-tabs .foodmaster-no-categories {
	padding: calc(var(--fm-m) * 3) var(--fm-m);
	border-top: var(--fm-rule-strong);
	border-bottom: var(--fm-rule);
	color: var(--fm-n6);
}

.foodmaster-sticky-tabs .foodmaster-no-categories p {
	margin: 0;
}

/* Tablets and phones */
@media (max-width: 1024px) {
	.foodmaster-sticky-tabs.has-sidebar .foodmaster-tabs-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.foodmaster-tabs-sidebar-inner {
		position: static;
	}
}

@media (max-width: 768px) {
	.foodmaster-tab-button {
		min-height: calc(var(--fm-m) * 6);
		padding-inline: calc(var(--fm-m) * 1.25);
		font-size: 16px;
	}

	.foodmaster-tabs-layout {
		padding-top: var(--fm-m);
		gap: calc(var(--fm-m) * 3);
	}

	.foodmaster-back-to-top.visible {
		display: flex;
	}
}

@media (min-width: 769px) {
	.foodmaster-back-to-top {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.foodmaster-tab-panel.active {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.foodmaster-tab-button,
	.foodmaster-back-to-top {
		transition: none;
	}

	.foodmaster-tabs-nav-inner {
		scroll-behavior: auto;
	}
}

@media print {
	.foodmaster-tabs-nav-wrapper,
	.foodmaster-back-to-top {
		display: none;
	}

	.foodmaster-tab-panel {
		display: block;
	}
}