/* Сторінка закладу цілком: шапка, картки, контакти, зручності, оцінки, меню, відгуки.
   Токени — у site.css. Класи mpl-* навмисно не перетинаються з .box-* із Кастомайзера. */

.mpl-place {
	--mpl-pad: 22px;
	--mpl-radius: 16px;
	/* Концентричність: внутрішній радіус = зовнішній мінус відступ */
	--mpl-radius-inner: 10px;
	--mpl-gap: 18px;
}

.mpl-icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

.mpl-muted {
	color: var(--text-color-light);
	font-weight: 400;
}

/* ---------- Шапка ---------- */

.mpl-header {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--clr-sub-border);
}

.mpl-eyebrow {
	margin: 0 0 6px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-color);
}

.mpl-title {
	margin: 0 0 14px;
	line-height: 1.15;
	text-wrap: balance;
}

.mpl-facts-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpl-fact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--font-size-sm);
	color: var(--text-color-light);
	font-variant-numeric: tabular-nums;
}

.mpl-fact b {
	color: var(--clr-foreground);
}

.mpl-fact--rating .mpl-icon {
	color: #f0a020;
	fill: #f0a020;
}

/* ---------- Картка ---------- */

.mpl-card {
	margin: 0 0 var(--mpl-gap);
	padding: var(--mpl-pad);
	border-radius: var(--mpl-radius);
	background-color: var(--clr-background);
	box-shadow: var(--mf-shadow-border);
}

/* Перший блок після шапки — трохи вагоміший, це головне на сторінці */
.mpl-card--lead {
	background-color: var(--clr-sub-background);
	box-shadow: 0 0 0 1px var(--theme-color), var(--mf-shadow-border);
}

.mpl-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 1.2;
	color: var(--clr-foreground);
	text-wrap: balance;
}

.mpl-card-title .mpl-icon {
	width: 1.1em;
	height: 1.1em;
	color: var(--theme-color);
}

.mpl-text {
	margin: 0;
	line-height: 1.65;
	color: var(--text-color-normal);
	text-wrap: pretty;
}

.mpl-text p {
	margin: 0 0 12px;
}

.mpl-text p:last-child {
	margin-bottom: 0;
}

.mpl-meta {
	margin: 16px 0 0;
	font-size: var(--font-size-xs);
	color: var(--text-color-light);
}

.mpl-link {
	color: var(--clr-foreground);
	text-decoration: underline;
	text-decoration-color: rgba(var(--clr-foreground-rgb), 0.25);
	text-underline-offset: 3px;
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

.mpl-link:hover,
.mpl-link:focus-visible {
	color: var(--theme-color);
	text-decoration-color: currentColor;
}

/* ---------- Статус ---------- */

.mpl-status {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 var(--mpl-gap);
	padding: 14px 18px;
	border-radius: var(--mpl-radius);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.mpl-status .mpl-icon {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.15em;
}

.mpl-status--temporary {
	color: #8a5200;
	background-color: rgba(219, 166, 23, 0.14);
}

.mpl-status--permanent {
	color: #a01b1c;
	background-color: rgba(179, 45, 46, 0.12);
}

/* ---------- Контакти ---------- */

.mpl-contacts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 28px;
	margin: 0;
}

.mpl-contact dt {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 3px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-color-light);
}

.mpl-contact dd {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--clr-foreground);
	overflow-wrap: anywhere;
}

/* Дотик по телефону на мобільному має бути зручним */
.mpl-contact dd a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* ---------- Зручності ---------- */

.mpl-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: var(--font-size-sm);
	color: var(--text-color-normal);
	font-variant-numeric: tabular-nums;
}

.mpl-check .mpl-icon {
	width: 1.15em;
	height: 1.15em;
	color: var(--text-color-light);
}

.mpl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--mpl-radius-inner);
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 1.3;
	color: #0a6b33;
	background-color: rgba(16, 137, 62, 0.1);
}

.mpl-chip .mpl-icon {
	width: 0.95em;
	height: 0.95em;
}

.mpl-chip--plain {
	color: var(--clr-foreground);
	background-color: var(--light-bg-color);
	font-weight: 500;
}

.mpl-chips--plain {
	margin-bottom: 16px;
}

.mpl-absent {
	margin: 14px 0 0;
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--text-color-light);
	text-wrap: pretty;
}

.mpl-absent span {
	font-weight: 600;
}

/* ---------- Оцінки ---------- */

.mpl-ratings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
}

.mpl-score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.mpl-score b {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--clr-foreground);
}

.mpl-score span {
	font-size: var(--font-size-sm);
	color: var(--text-color-light);
}

.mpl-bars {
	flex: 1 1 260px;
	margin: 0;
}

.mpl-bar {
	display: grid;
	grid-template-columns: minmax(110px, auto) 1fr;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 8px;
}

.mpl-bar:last-child {
	margin-bottom: 0;
}

.mpl-bar dt {
	font-size: var(--font-size-sm);
	color: var(--text-color-normal);
}

.mpl-bar dd {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--font-size-sm);
	font-variant-numeric: tabular-nums;
}

.mpl-bar-track {
	flex: 1 1 auto;
	height: 6px;
	border-radius: 999px;
	background-color: var(--light-bg-color);
	overflow: hidden;
}

.mpl-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-color: var(--theme-color);
}

/* ---------- Меню ---------- */

.mpl-dishes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpl-dishes li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 0;
	border-top: 1px solid var(--clr-sub-border);
	font-size: var(--font-size-sm);
}

.mpl-dishes li:first-child {
	padding-top: 0;
	border-top: 0;
}

.mpl-dish-name {
	color: var(--clr-foreground);
	text-wrap: pretty;
}

/* Крапки між назвою і ціною, як у паперовому меню */
.mpl-dish-dots {
	flex: 1 1 auto;
	min-width: 16px;
	height: 1px;
	margin-bottom: 4px;
	border-bottom: 1px dotted var(--clr-sub-border);
}

.mpl-dish-price {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--clr-foreground);
	font-variant-numeric: tabular-nums;
}

.mpl-actions {
	margin: 18px 0 0;
}

.mpl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--white);
	background-color: var(--theme-color);
	transition-property: opacity, scale;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.mpl-button:hover,
.mpl-button:focus-visible {
	color: var(--white);
	opacity: 0.92;
}

.mpl-button:active {
	scale: 0.96;
}

/* ---------- Відгуки ---------- */

.mpl-pros-cons {
	display: grid;
	gap: 18px 32px;
	margin: 18px 0 0;
}

@media (min-width: 620px) {
	.mpl-pros-cons:has(.mpl-pros):has(.mpl-cons) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mpl-pros-cons h3 {
	margin: 0 0 8px;
	font-size: var(--font-size-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mpl-pros h3 {
	color: #0a6b33;
}

.mpl-cons h3 {
	color: #8a5200;
}

.mpl-pros-cons ul {
	margin: 0;
	padding-inline-start: 18px;
	font-size: var(--font-size-sm);
	line-height: 1.55;
	color: var(--text-color-normal);
}

.mpl-pros-cons li {
	margin-bottom: 5px;
	text-wrap: pretty;
}

.mpl-tip {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: var(--mpl-radius-inner);
	font-size: var(--font-size-sm);
	line-height: 1.55;
	color: var(--clr-foreground);
	background-color: var(--light-bg-color);
	text-wrap: pretty;
}

.mpl-quotes {
	display: grid;
	gap: 12px;
	margin-top: 18px;
}

.mpl-quote {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--mpl-radius-inner);
	background-color: var(--light-bg-color);
}

.mpl-quote p {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.55;
	color: var(--text-color-normal);
	text-wrap: pretty;
}

.mpl-quote p::before {
	content: "«";
}

.mpl-quote p::after {
	content: "»";
}

.mpl-quote cite {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-size: var(--font-size-xs);
	font-style: normal;
	font-weight: 600;
	color: var(--text-color-light);
	font-variant-numeric: tabular-nums;
}

.mpl-quote cite .mpl-icon {
	color: #f0a020;
	fill: #f0a020;
}

/* ---------- Вузькі екрани ---------- */

@media (max-width: 620px) {
	.mpl-place {
		--mpl-pad: 18px;
	}

	.mpl-contacts {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpl-score b {
		font-size: 2.2rem;
	}

	.mpl-bar {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpl-button,
	.mpl-link {
		transition: none;
	}

	.mpl-button:active {
		scale: 1;
	}
}