/* ==========================================================================

   Dishes Restaurant Plugin - front-end styles

   Colours/shape come from CSS variables set inline by the plugin

   (Dishes > Settings):

   --dpl-card-bg     : card background colour

   --dpl-primary     : global accent colour (active filter button)

   --dpl-border      : card border colour

   --dpl-radius      : card corner radius

   --dpl-title-color : card title colour

   --dpl-desc-color  : card description colour

   --dpl-price-bg    : price badge background

   --dpl-price-color : price badge text colour

   --dpl-img-height  : height of the dish image (image always fills full card width)

   ========================================================================== */



.dpl-grid {

	display: grid;

	gap: 28px;

	margin: 24px 0;

}



.dpl-cols-3 {

	grid-template-columns: repeat(3, 1fr);

}



@media (max-width: 900px) {

	.dpl-cols-3 {

		grid-template-columns: repeat(2, 1fr);

	}

}



@media (max-width: 600px) {

	.dpl-cols-3 {

		grid-template-columns: 1fr;

	}

}



/* Card - not a link, not clickable.

   Light flat block, no border, no shadow, everything centred. */

.dpl-card {

	background: var(--dpl-card-bg, #eef4f0);

	border-radius: var(--dpl-radius, 4px);

	overflow: hidden;

	text-align: center;

	display: flex;

	flex-direction: column;

	align-items: center;

}



.dpl-card-image-wrap {

	position: relative;

	width: 100%;

	height: var(--dpl-img-height, 260px);

	overflow: hidden;

	line-height: 0;

	font-size: 0;

	flex-shrink: 0;

}



.dpl-card-image {

	width: 100%;

	height: 300px !important;

	object-fit: cover;

	display: block;

	vertical-align: top;

	margin: 0;

	padding: 0;

}



.dpl-card-noimage {

	background: #d8dfe6;

}



/* Price badge - sits below the image, outside the image wrap */

.dpl-card-price {

	display: inline-block;

	margin-top: 16px;

	background: var(--dpl-price-bg, #b8892f);

	color: var(--dpl-price-color, #fff);

	font-size: 13px;

	font-weight: 700;

	padding: 6px 12px;

	border-radius: var(--dpl-badge-radius, 20px);

	line-height: 1;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

}



.dpl-card-body {

	padding: 26px 20px;

	display: flex;

	flex-direction: column;

	align-items: center;

	width: 100%;

}



.dpl-card-title {

	margin: 0 0 18px;

	font-family: 'Anton', 'Poppins', sans-serif;

	font-size: 24px;

	line-height: 1.2;

	font-weight: 400;

	letter-spacing: 0.02em;

	text-transform: uppercase;

}



.dpl-card-desc {

	margin: 0;

	max-width: 300px;

	font-family: 'Poppins', sans-serif;

	font-size: 15px;

	line-height: 1.65;

}



.dpl-no-results {

	grid-column: 1 / -1;

	text-align: center;

	color: #66727d;

	padding: 30px 0;

}



/* Filter buttons - centred, wraps to a new centred line if there are many */

.dpl-filter-wrap {

	position: relative;

}



.dpl-filter-buttons {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	gap: 12px;

	margin-bottom: 40px;

}



.dpl-filter-btn {

	background: #eef2f6;

	border: 1px solid #d8dfe6;

	color: #000000;

	padding: 10px 26px;

	font-size: 14px;

	font-weight: 600;

	border-radius: 5px;

	cursor: pointer;

	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;

}



.dpl-filter-btn:hover {

	border-color: var(--dpl-primary, #1a8f4c);

	transform: translateY(-1px);

}



.dpl-filter-btn.active {

	background: var(--dpl-primary, #1a8f4c);

	border-color: var(--dpl-primary, #1a8f4c);

	color: #fff;

}



/* Mobile: one filter button per row, full width */

@media (max-width: 600px) {

	.dpl-filter-buttons {

		flex-direction: column;

		align-items: stretch;

	}



	.dpl-filter-btn {

		width: 100%;

		text-align: center;

	}

}



/* Loader shown while an AJAX filter request is in flight */

.dpl-loader {

	display: none;

	justify-content: center;

	padding: 30px 0;

}



.dpl-loader.dpl-active {

	display: flex;

}



.dpl-spinner {

	width: 34px;

	height: 34px;

	border: 4px solid #e0e6ec;

	border-top-color: var(--dpl-primary, #1a8f4c);

	border-radius: 50%;

	animation: dpl-spin 0.8s linear infinite;

}



@keyframes dpl-spin {

	to {

		transform: rotate(360deg);

	}

}



.dpl-ajax-grid.dpl-loading {

	opacity: 0.35;

	pointer-events: none;

	transition: opacity 0.25s ease;

}



/* ==========================================================================

   "All Dishes" menu design - [dishes_all] only.

   Printed-menu style: light paper background, centered section headings

   (used for sub-categories - or the category name itself when it has no

   sub-categories), 2 dishes per row on desktop collapsing to 1 per row on

   mobile. Each item is a title + price on one line, description underneath,

   a thin rule closing off the item.

   Colours come from CSS variables set in Dishes > Settings:

   --dpl-list-bg, --dpl-menu-section-title-color, --dpl-list-title-color,

   --dpl-menu-price-color, --dpl-list-desc-color, --dpl-list-divider-color,

   --dpl-list-image-size, --dpl-list-item-bg, --dpl-list-item-radius,

   --dpl-cat-banner-bg, --dpl-cat-banner-title, --dpl-cat-banner-desc

   ========================================================================== */

.dpl-menu-wrap {

	max-width: 1200px;

	margin: 0 auto;

}



.dpl-menu-page-title {

	text-align: left;

	margin: 0 0 34px;

	font-family: 'Playfair Display', Georgia, serif;

	font-size: clamp(20px, 2.4vw, 26px);

	font-weight: 700;

	color: var(--dpl-list-title-color, #1a1a1a);

}



.dpl-list-wrap {

	background: var(--dpl-list-bg, #faf8f3);

	padding: 56px clamp(20px, 5vw, 64px);

	border-radius: var(--dpl-radius, 4px);

}



.dpl-menu-section {

	margin: 0 0 68px;

}



.dpl-menu-section:last-child {

	margin-bottom: 0;

}



.dpl-menu-section-title {

	position: relative;

	text-align: center;

	margin: 0 0 40px;

	font-family: 'Playfair Display', Georgia, serif;

	font-size: clamp(18px, 2vw, 24px);

	font-weight: 700;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: var(--dpl-menu-section-title-color, #1a1a1a);

}



.dpl-menu-section-title::after {

	content: '';

	display: block;

	width: 46px;

	height: 2px;

	margin: 16px auto 0;

	background: var(--dpl-menu-section-title-color, #1a1a1a);

	opacity: 0.3;

}



.dpl-menu-grid {

	display: grid;

	grid-template-columns: 1fr;

	column-gap: 60px;

	row-gap: 36px;

}



/* 2 columns on desktop only - tablet and mobile stay single column. */

@media (min-width: 901px) {

	.dpl-menu-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}



.dpl-menu-item {

	display: flex;

	align-items: flex-start;

	gap: 16px;

	padding-bottom: 22px;

	border-bottom: 1px solid var(--dpl-list-divider-color, #d8d3c6);

	background: var(--dpl-list-item-bg, transparent);

	border-radius: var(--dpl-list-item-radius, 0);

	min-width: 0;

}



.dpl-menu-item-has-image {

	padding: 8px 8px 18px;

}



.dpl-menu-item-image {

	width: var(--dpl-list-image-size, 72px);

	height: var(--dpl-list-image-size, 72px);

	border-radius: 50%;

	object-fit: cover;

	flex-shrink: 0;

	display: block;

}



.dpl-list-wrap[data-image-shape="square"] .dpl-menu-item-image {

	border-radius: 10px;

}



.dpl-menu-item-noimage {

	background: rgba(0, 0, 0, 0.06);

}



.dpl-menu-item-body {

	flex: 1;

	min-width: 0;

}



.dpl-menu-item-row {

	display: flex;

	align-items: baseline;

	justify-content: space-between;

	gap: 14px;

}



.dpl-menu-item-title {

	margin: 0;

	font-family: 'Playfair Display', Georgia, serif;

	font-size: clamp(15px, 1.3vw, 18px);

	line-height: 1.3;

	font-weight: 700;

	color: var(--dpl-list-title-color, #1a1a1a);

}



.dpl-menu-item-price {

	flex-shrink: 0;

	font-family: 'Playfair Display', Georgia, serif;

	font-size: clamp(15px, 1.3vw, 18px);

	font-weight: 700;

	color: var(--dpl-menu-price-color, #1a1a1a);

}



.dpl-menu-item-desc {

	margin: 8px 0 0;

	font-family: Georgia, 'Poppins', serif;

	font-size: 14px;

	line-height: 1.6;

	color: var(--dpl-list-desc-color, #555555);

}



@media (max-width: 640px) {

	.dpl-list-wrap {

		padding: 32px 18px;

	}



	.dpl-menu-section {

		margin-bottom: 48px;

	}



	.dpl-menu-section-title {

		margin-bottom: 26px;

	}



	.dpl-menu-section-title::after {

		margin-top: 12px;

	}



	.dpl-menu-grid {

		row-gap: 24px;

	}



	.dpl-menu-item-image {

		width: clamp(48px, 18vw, 64px);

		height: clamp(48px, 18vw, 64px);

	}



	.dpl-menu-item-title,

	.dpl-menu-item-price {

		font-size: 15px;

	}



	.dpl-menu-item-desc {

		font-size: 13px;

	}

}



/* Category banner shown right below the tabs when a category tab is active

   (image + name + description from Dishes > Categories). Image, if shown,

   is full-width; the text block follows underneath. */

.dpl-cat-header:empty {

	display: none;

}



.dpl-cat-banner {

	background: var(--dpl-cat-banner-bg, #161616);

	border-radius: var(--dpl-radius, 4px);

	overflow: hidden;

	margin-bottom: 24px;

}



.dpl-cat-banner-image {

	display: block;

	width: 100%;

	height: clamp(160px, 32vw, 320px);

	object-fit: cover;

}



.dpl-cat-banner-text {

	padding: 20px clamp(16px, 4vw, 32px);

	text-align: center;

}



.dpl-cat-banner-title {

	margin: 0 0 8px;

	font-family: 'Anton', 'Poppins', sans-serif;

	font-size: clamp(18px, 2.4vw, 26px);

	text-transform: uppercase;

	letter-spacing: 0.02em;

	color: var(--dpl-cat-banner-title, #ffffff);

}



.dpl-cat-banner-desc {

	font-family: Georgia, 'Poppins', serif;

	font-size: 14px;

	line-height: 1.6;

	color: var(--dpl-cat-banner-desc, #555555);

	max-width: 720px;

	margin: 0 auto;

}



@media (max-width: 480px) {

	.dpl-cat-banner-image {

		height: clamp(140px, 45vw, 220px);

	}

}



/* Category description - printed after a category's dish list(s) on [dishes_all] */

.dpl-category-desc {

	font-family: Georgia, 'Poppins', serif;

	font-size: 14px;

	line-height: 1.6;

	color: var(--dpl-list-desc-color, #555555);

	max-width: 720px;

	margin: 12px auto 32px;

	text-align: center;

}