/* @layer components {} */
/* Left side bg images */
.img-slider {
	.slide-1 {
		background-image: url('../images/menu/slide-1.webp');
	}

	.slide-2 {
		background-image: url('../images/menu/slide-2.webp');
	}

	.slide-3 {
		background-image: url('../images/menu/slide-3.webp');
	}
}

/* Menu items select sticky nav */
.category-nav {
	position: sticky;
	top: 20px;
	display: flex;
	justify-content: flex-end;
	padding: 0;
	margin-bottom: -52px;
	pointer-events: all;
	z-index: 30;

	&.open {
		.category-toggle {
			color: var(--gold);
			border-color: var(--gold-dim);

			svg {
				transform: rotate(180deg);
			}
		}

		.category-list {
			display: block;
		}
	}

	@media (width < 1024px) {
		margin-bottom: -65px;
	}

	@media (width < 600px) {
		margin-bottom: -60px;
	}

	.category-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		background: rgba(13, 11, 9, 0.85);
		backdrop-filter: blur(16px);
		border: 1px solid var(--border);
		border-radius: 100px;
		padding: 9px 16px 9px 14px;
		cursor: pointer;
		font-family: 'Jost', sans-serif;
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--text-secondary);
		transition:
			color 0.2s,
			border-color 0.2s;
		white-space: nowrap;

		&:hover {
			color: var(--gold);
			border-color: var(--border-hover);
		}

		svg {
			width: 12px;
			height: 12px;
			transition: transform 0.25s;
			flex-shrink: 0;
		}
	}

	.category-list {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		background: rgba(13, 11, 9, 0.95);
		backdrop-filter: blur(20px);
		border: 1px solid var(--border);
		border-radius: 10px;
		overflow-y: auto;
		max-height: 60vh;
		min-width: 200px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
		scrollbar-width: thin;
		scrollbar-color: var(--gold-dim) transparent;

		&::-webkit-scrollbar {
			width: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--gold-dim);
			border-radius: 2px;
		}

		button {
			display: block;
			width: 100%;
			text-align: left;
			background: none;
			border: none;
			border-bottom: 1px solid var(--border);
			padding: 11px 18px;
			font-family: 'Jost', sans-serif;
			font-size: 0.72rem;
			letter-spacing: 0.1em;
			color: var(--text-secondary);
			cursor: pointer;
			transition:
				color 0.15s,
				background 0.15s;
			white-space: nowrap;

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				color: var(--gold);
				background: rgba(201, 168, 76, 0.06);
			}
		}
	}
}

/* Menu category list section */
.menu-section {
	padding-top: 48px;

	@media (width < 1024px) {
		padding-top: 40px;
	}

	@media (width < 600px) {
		padding-top: 36px;
	}

	h2 {
		font-family: 'Cinzel', serif;
		font-size: 0.82rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--gold);
		font-weight: 400;

		margin-bottom: 24px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--border);

		@media (width < 1024px) {
			margin-bottom: 20px;
			font-size: 0.8rem;
		}

		@media (width < 600px) {
			margin-bottom: 16px;
		}
	}

	.section-divider {
		display: block;
		border: none;
		height: 1px;
		background: linear-gradient(to right, transparent, var(--gold-dim), transparent);
		margin: 10px 0 0;
		opacity: 0.35;
		position: relative;
	}
}

/* Menu item card */
.menu-items {
	display: flex;
	flex-direction: column;
	gap: 10px;

	@media (width < 600px) {
		gap: 14px;
	}

	.menu-card {
		display: flex;
		align-items: center;
		gap: 16px;
		background: var(--bg-card);
		border: 1px solid var(--border);
		padding: 14px 16px;
		cursor: pointer;
		transition:
			background 0.25s,
			border-color 0.25s,
			transform 0.2s;
		position: relative;
		overflow: hidden;
		animation: fadeUp 0.5s ease backwards;

		@media (width < 1024px) {
			flex-direction: row;
		}

		@media (width < 600px) {
			flex-direction: column;
			align-items: flex-start;
			padding: 0;
			gap: 0;
			border-radius: 10px;
		}

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 2px;
			background: var(--gold);
			transform: scaleY(0);
			transition: transform 0.25s;
			transform-origin: bottom;

			@media (width < 600px) {
				display: none;
			}
		}

		&:hover {
			background: var(--bg-card-hover);
			border-color: var(--border-hover);
			transform: translateX(3px);

			&::before {
				transform: scaleY(1);
			}

			@media (width < 600px) {
				transform: none;
			}

			.item-img img {
				transform: scale(1.08);
			}
		}

		.item-img {
			width: 62px;
			height: 62px;
			border-radius: 2px;
			object-fit: cover;
			flex-shrink: 0;
			background: #2a2520;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.4rem;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.3s;
			}

			@media (width < 600px) {
				width: 100%;
				height: 52vw;
				max-height: 240px;
				border-radius: 0;

				img {
					border-radius: 0;
				}
			}
		}

		.item-info {
			flex: 1;
			min-width: 0;

			@media (width < 600px) {
				padding: 14px 16px 4px;
				width: 100%;
			}
		}

		.item-name {
			font-family: 'Cormorant Garamond', serif;
			font-size: 1.08rem;
			font-weight: 400;
			color: var(--text-primary);
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			gap: 6px;

			@media (width < 1024px) {
				font-size: 1.05rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			@media (width < 600px) {
				white-space: normal;
				line-height: 1.3;
			}
		}

		.item-emoji {
			font-size: 0.9rem;
		}

		.item-desc {
			font-family: 'Jost', sans-serif;
			font-size: 0.72rem;
			letter-spacing: 0.03em;
			color: var(--text-secondary);
			overflow: hidden;
			text-overflow: ellipsis;

			@media (width < 600px) {
				margin-top: 4px;
				white-space: normal;
				font-size: 0.75rem;
				line-height: 1.5;
				overflow: visible;
				display: block;
			}
		}

		.item-price {
			font-family: 'Cinzel', serif;
			font-size: 0.88rem;
			letter-spacing: 0.06em;
			color: var(--gold-light);
			flex-shrink: 0;
			background: rgba(201, 168, 76, 0.07);
			border: 1px solid rgba(201, 168, 76, 0.2);
			padding: 6px 12px;

			@media (width < 600px) {
				margin: 10px 16px 16px;
				align-self: flex-start;
				font-size: 0.85rem;
				padding: 6px 14px;
			}
		}
	}
}

.menu-disclaimer {
	font-family: 'Jost', sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	text-align: center;
	padding-top: 32px;
	margin-top: 8px;
}
.menu-disclaimer--top {
	padding-top: 0;
	padding-bottom: 20px;
	margin-top: 0;
	margin-bottom: 8px;
}

/* Menu item modal */
.menu-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;

	&.open {
		display: flex;
	}

	.menu-modal-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(13, 11, 9, 0.85);
		backdrop-filter: blur(8px);
	}

	.menu-modal-content {
		position: relative;
		background: var(--bg-card);
		border: 1px solid var(--border);
		width: 100%;
		max-width: 520px;
		max-height: 85vh;
		overflow-y: auto;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
		animation: menuModalIn 0.25s ease;
	}

	.menu-modal-close {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		background: rgba(13, 11, 9, 0.7);
		backdrop-filter: blur(6px);
		border: 1px solid var(--border);
		border-radius: 50%;
		color: var(--text-primary);
		cursor: pointer;
		transition:
			color 0.2s,
			border-color 0.2s;

		&:hover {
			color: var(--gold);
			border-color: var(--border-hover);
		}

		svg {
			width: 16px;
			height: 16px;
		}
	}

	.menu-modal-img {
		width: 100%;
		aspect-ratio: 4 / 3;
		background: #2a2520;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.menu-modal-info {
		padding: 24px 28px 28px;

		h3 {
			font-family: 'Cormorant Garamond', serif;
			font-size: 1.5rem;
			font-weight: 400;
			color: var(--text-primary);
			margin-bottom: 12px;
		}

		p {
			font-family: 'Jost', sans-serif;
			font-size: 0.85rem;
			line-height: 1.7;
			letter-spacing: 0.02em;
			color: var(--text-secondary);
			margin-bottom: 18px;

			&:empty {
				display: none;
			}
		}
	}

	.menu-modal-price {
		display: inline-block;
		font-family: 'Cinzel', serif;
		font-size: 0.95rem;
		letter-spacing: 0.06em;
		color: var(--gold-light);
		background: rgba(201, 168, 76, 0.07);
		border: 1px solid rgba(201, 168, 76, 0.2);
		padding: 8px 16px;
	}

	@media (width < 600px) {
		padding: 0;

		.menu-modal-content {
			max-width: 100%;
			max-height: 100%;
			height: 100%;
			border: none;
		}

		.menu-modal-img {
			aspect-ratio: 1 / 1;
		}
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes menuModalIn {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(8px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}