/* ==========================================================================
   Zyrgon - Kit Banquetes
   ========================================================================== */

/* ---- Banda: lista + imagem ---- */
.zkb {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

/* Lista em colunas de 300px, altura fixa 451px; quebra para nova coluna
   conforme o numero de menus (a largura total cresce com mais menus). */
.zkb-list {
	display: flex;
	flex-flow: column wrap;
	align-content: flex-start;
	height: 440px;
	gap: 20px;
	width: fit-content;
	flex: 0 0 auto; /* largura natural (300px x nº de colunas); nao encolhe */
	margin: 0;
	padding: 0;
	list-style: none;
}

.zkb-item {
	width: 300px;
	margin: 0;
	padding: 0;
}

.zkb-trigger {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: #000;
}

.zkb-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #000;
}

.zkb-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.zkb-title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 24px;
	color: #000;
	text-decoration: underline;
	text-underline-position: from-font;
}

.zkb-trigger:hover .zkb-title {
	opacity: 0.7;
}

/* Imagem (imagem_kit_banquete) - 398x451 fixa ao lado da lista */
.zkb-figure {
	flex: 1 1 0; /* ocupa o espaco restante ao lado da lista (ajusta a 1 ou 2 colunas) */
	min-width: 0; /* permite encolher sem sobrepor a lista */
	height: 440px; /* acompanha a altura da banda da lista */
	margin: 0;
	overflow: hidden;
}

.zkb-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Popup de detalhe (1028 x 544) ---- */
.zkb-popup {
	position: fixed;
	inset: 0;
	display: none; /* alterado para flex pelo JS */
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000000; /* acima do popup do Elementor */
	box-sizing: border-box;
}

.zkb-popup__dialog {
position: relative;
    display: flex;
    flex-direction: column;
    width: 1138px;
    height: 644px;
    max-width: 95vw;
    max-height: 90vh;
    padding: 50px;
    background: #fff;
    box-sizing: border-box;
    
}

.zkb-popup__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.zkb-popup__back {
	flex: 0 0 auto;
	display: inline-flex;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: #000;
	line-height: 0;
}

.zkb-popup__back svg {
	display: block;
}

.zkb-popup__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	color: #000;
}

.zkb-popup__close {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	color: #000;
	text-decoration: underline;
	white-space: nowrap;
}

/* Area com scroll - preenche a altura restante do dialog */
.zkb-popup__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 16px;
	scrollbar-width: thin;
	scrollbar-color: #000 #e6e6e6;
}

.zkb-popup__body::-webkit-scrollbar {
	width: 8px;
}

.zkb-popup__body::-webkit-scrollbar-track {
	background: #e6e6e6;
	border-radius: 10px;
}

.zkb-popup__body::-webkit-scrollbar-thumb {
	background: #000;
	border-radius: 20px;
}

/* Conteudo wysiwyg */
.zkb-popup__content {
	color: #000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 24px;
}

.zkb-popup__content p {
	margin: 0 0 12px;
}

.zkb-popup__content strong,
.zkb-popup__content b {
	font-weight: 700;
}

.zkb-popup__content h1,
.zkb-popup__content h2,

.zkb-popup__content h4,
.zkb-popup__content h5,
.zkb-popup__content h6 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}
.zkb-popup__content h3{
    	margin: 0 0 8px;
	font-size: 20px;
	line-height: 24px;
}
.zkb-popup__content ul,
.zkb-popup__content ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.zkb-popup__content li {
	margin: 0 0 4px;
}

.zkb-popup__content a {
	color: inherit;
	text-decoration: underline;
}

.zkb-popup__content img {
	max-width: 100%;
	height: auto;
}

/* Duas colunas no desktop (como no Figma) */
@media (min-width: 1024px) {
	.zkb-popup__content {
		
		column-gap: 20px;
	}

	.zkb-popup__content > * {
		break-inside: avoid;
	}
}

span.kit-banquete-titulo-popup{
    font-size: 20px;
}

.elementor-widget-zyrgon_kit_banquete [type=button]:hover,
.elementor-widget-zyrgon_kit_banquete [type=button]:focus, 
.elementor-widget-zyrgon_kit_banquete [type=submit]:focus, 
.elementor-widget-zyrgon_kit_banquete [type=submit]:hover, 
.elementor-widget-zyrgon_kit_banquete button:focus, 
.elementor-widget-zyrgon_kit_banquete button:hover,
.zkb-popup [type=button]:hover, 
.zkb-popup [type=button]:focus{
    background-color:#fff!important;
    color:#000;
}
.zkb-popup__close:hover,
.zkb-popup .zkb-popup__close:focus{
    text-decoration:underline;
}

/* ---- Responsivo ---- */
@media (max-width: 1023px) {
	.zkb {
		flex-direction: column;
	}

	.zkb-list {
		height: auto;
		flex-flow: column nowrap;
		width: 100%;
	}

	.zkb-item {
		width: 100%;
	}

	.zkb-figure {
		flex: none;
		width: 100%;
		height: auto;
	}

	.zkb-figure img {
		height: auto;
	}

	.zkb-popup__dialog {
		width: auto;
		height: auto;
	}

	.zkb-popup__content {
		column-count: 1;
	}
	span.kit-banquete-titulo-popup{
    font-size: 16px;
}

}

@media (max-width: 767px) {
    span.kit-banquete-titulo-popup{
    font-size: 14px;
}

	.zkb-popup {
		padding: 16px;
	}

	.zkb-popup__dialog {
		max-height: 92vh;
		padding: 20px;
	}

	.zkb-popup__title {
		font-size: 28px;
	}

	.zkb-popup__content {
		font-size: 18px;
	}
}





/* Duas colunas como no Figma:
   esquerda = Buffet de Frios + Aperitivos Quentes
   direita  = Sopas e Cremes + Massas + Sobremesas
   Cada seccao (titulo + lista) e indivisivel. */
.zkb-popup__content .zkb-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    align-items: start;
}

.zkb-popup__content .zkb-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.zkb-popup__content .zkb-sec {
    break-inside: avoid;
}

/* Buffet frio: um pouco mais de ar entre o titulo da seccao e a lista
   (nao afeta os titulos de categoria .zkb-cat das seccoes QUENTES). */
.zkb-popup__content .zkb-sec > h2:not(.zkb-cat) {
    margin-bottom: 14px;
}

/* Seccoes QUENTES: a coluna tem elementos em fluxo normal (nao agrupados
   em .zkb-sec), por isso usa margens em vez do gap flex. */
.zkb-popup__content .zkb-quente .zkb-col {
    display: block;
}

/* Titulo de categoria (QUENTES RUSTICO/CONTEMPORANEO/QUALITY) como no Figma:
   bold, maiusculas, espacamento 4px, line-height 28px. */
.zkb-popup__content .zkb-cat {
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 28px;
    margin: 0 0 64px;
}

/* Ritmo vertical das colunas QUENTES (~20px entre blocos, como no Figma).
   Por defeito tudo encostado; os blocos seguintes recebem margem superior. */
.zkb-popup__content .zkb-quente h3,
.zkb-popup__content .zkb-quente h4,
.zkb-popup__content .zkb-quente p {
    margin: 0 0 20px;
    line-height: 24px;
    
}

/* "Peixe" / "Carne": peso normal (Figma), label da lista logo abaixo */
.zkb-popup__content .zkb-quente .zkb-sub {
    font-weight: 400;
    margin-top: 20px;
}

/* Bloco do preco com folga acima */
.zkb-popup__content .zkb-quente .zkb-preco {
    margin-top: 20px;
}

/* O primeiro elemento de cada coluna encosta ao topo (alinha as 2 colunas) */
.zkb-popup__content .zkb-quente .zkb-col > :first-child {
    margin-top: 0;
}

/* Divisor fino entre seccoes (Vector 1 no Figma) */
.zkb-popup__content hr {
    border: 0;
    border-top: 1px solid #e6e6e6;
    margin: 24px 0;
}

/* Numa coluna em ecra pequeno */
@media (max-width: 1023px) {
    .zkb-popup__content .zkb-cols {
        grid-template-columns: 1fr;
    }
}

.zkb-popup__content h2{color: var(--black, #000);
font-family: "Helvetica Neue";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 120% */
}

/* ==========================================================================
   RESPONSIVO — tablet e mobile (mesmo estilo do Figma, escalado)
   ========================================================================== */

/* Evita transbordo horizontal de palavras/linhas longas em ecras estreitos. */
.zkb-popup__content,
.zkb-popup__content p,
.zkb-popup__content li,
.zkb-popup__content h1,
.zkb-popup__content h2,
.zkb-popup__content h3,
.zkb-popup__content h4 {
	overflow-wrap: break-word;
	word-break: normal;
}

/* ---- TABLET (768–1023px): mantem 2 colunas, fontes ~17px ---- */
@media (min-width: 768px) and (max-width: 1023px) {
	/* 2 colunas (anula o colapso de 1 coluna definido em max-width:1023) */
	.zkb-popup__content .zkb-cols {
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
	}

	.zkb-popup__dialog {
		width: auto;
		max-width: 94vw;
		height: auto;
		max-height: 90vh;
		padding: 36px;
	}

	.zkb-popup__title {
		font-size: 34px;
	}

	.zkb-popup__content,
	.zkb-popup__content p,
	.zkb-popup__content li,
	.zkb-popup__content h1,
	.zkb-popup__content h2,
	.zkb-popup__content h3,
	.zkb-popup__content h4,
	.zkb-popup__content h5,
	.zkb-popup__content h6,
	.zkb-popup__content .zkb-cat {
		font-size: 17px;
		line-height: 21px;
	}

	.zkb-popup__content .zkb-cat {
		letter-spacing: 3px;
		margin-bottom: 32px;
	}

	.zkb-popup__content .zkb-quente h3,
	.zkb-popup__content .zkb-quente h4,
	.zkb-popup__content .zkb-quente p {
		margin-bottom: 16px;
	}

	/* Lista de menus (banda) */
	.zkb-title {
		font-size: 18px;
		line-height: 22px;
	}
}

/* ---- MOBILE (<=767px): 1 coluna, popup full-screen, fontes ~15px ---- */
@media (max-width: 767px) {
	.zkb-popup {
		padding: 0;
		align-items: stretch;
	}

	/* Dialogo ocupa o ecra todo */
	.zkb-popup__dialog {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin-top: 0;
		padding: 20px 16px;
	}

	.zkb-popup__head {
		gap: 10px;
		margin-bottom: 16px;
	}

	.zkb-popup__title {
		font-size: 24px;
	}

	.zkb-popup__close {
		font-size: 16px;
	}

	.zkb-popup__body {
		padding-right: 8px;
	}

	/* Tudo numa coluna */
	.zkb-popup__content .zkb-cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.zkb-popup__content,
	.zkb-popup__content p,
	.zkb-popup__content li,
	.zkb-popup__content h1,
	.zkb-popup__content h2,
	.zkb-popup__content h3,
	.zkb-popup__content h4,
	.zkb-popup__content h5,
	.zkb-popup__content h6,
	.zkb-popup__content .zkb-cat {
		font-size: 15px;
		line-height: 20px;
	}

	.zkb-popup__content p {
		margin-bottom: 10px;
	}

	.zkb-popup__content .zkb-cat {
		letter-spacing: 2px;
		margin-bottom: 20px;
	}

	.zkb-popup__content .zkb-quente h3,
	.zkb-popup__content .zkb-quente h4,
	.zkb-popup__content .zkb-quente p {
		margin-bottom: 12px;
	}

	.zkb-popup__content .zkb-quente .zkb-sub,
	.zkb-popup__content .zkb-quente .zkb-preco {
		margin-top: 12px;
	}

	/* Lista de menus (banda) */
	.zkb-title {
		font-size: 16px;
		line-height: 20px;
	}

	.zkb-trigger {
		gap: 12px;
	}

	.zkb-icon {
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
	}

	.zkb-icon svg {
		width: 18px;
		height: 18px;
	}
}