/*
 * Wines of Portugal - Lista de Castas
 * Estilos base do widget. As personalizacoes feitas no painel do
 * Elementor (secao Estilo) sao injetadas via seletores CSS custom
 * (ver wop-lista-castas.php) e sobrepoem-se a estes valores base.
 */

.wop-castas-widget,
.wop-castas-widget * {
	box-sizing: border-box;
}

/* Garante que o widget preenche sempre a largura disponivel, mesmo dentro
   de um Container flex do Elementor sem "Align Items: Stretch", e que nao
   e o proprio widget a cortar o preenchimento em largura total (bleed)
   dos grupos de lista (ver mais abaixo). Um antepassado do widget (Secao/
   Coluna do Elementor, ou o tema) com "overflow: hidden" continua a poder
   cortar o bleed - nesse caso a solucao e ativar "Stretch Section" na
   Seccao do Elementor que contem o widget. */
.wop-castas-widget,
.wop-castas-panels,
.wop-castas-panel {
	width: 100%;
	overflow: visible;
}

.wop-castas-admin-notice {
	padding: 16px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	color: #664d03;
	font-size: 14px;
}

/* Separador (tabs) */
.wop-castas-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 40px;
	padding: 0;
}

.wop-castas-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0 0 16px;
	margin: 0;
	color: #1a1a1a;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.wop-castas-tab.is-active {
	color: #b32d2e;
	border-bottom-color: #b32d2e;
}

/* Paineis das castas principais (dentro do tablador) */
.wop-castas-panel {
	display: none;
}

.wop-castas-panel.is-active {
	display: block;
}

/* Paineis das castas normais - fora do tablador (".wop-castas-panels"),
   mas sincronizados com o mesmo tablador via JS (ver wop-lista-castas.js:
   "data-wop-normal-panel" tem de corresponder ao slug do tab ativo). */
.wop-castas-normal-panels {
	width: 100%;
	overflow: visible;
}

/* Especificidade composta (duas classes) de proposito: ".wop-castas-group"
   tambem define "display:block" para o container, e tem a MESMA
   especificidade que ".wop-castas-normal-panel" sozinho - sem isto, a
   ordem das regras na folha de estilo decidia (mal) qual delas ganhava,
   e os dois paineis normais (Brancas e Tintas) ficavam sempre visiveis
   ao mesmo tempo. */
.wop-castas-group.wop-castas-normal-panel {
	display: none;
}

.wop-castas-group.wop-castas-normal-panel.is-active {
	display: block;
}

/* Containers dos dois grupos (Principais / Normais) - largura total do
   container do widget, para a cor de preenchimento cobrir toda a linha. */
.wop-castas-group {
	display: block;
	width: 100%;
	margin: 0 0 24px;
}

.wop-castas-group:last-child {
	margin-bottom: 0;
}

/* Preenchimento em Largura Total (opcional, ligado por omissao) - o
   conteudo (textos) mantem-se na coluna normal, mas um pseudo-elemento
   atras estica a MESMA cor de fundo ate as bordas da janela.
   --wop-bleed-left/--wop-bleed-width sao calculados em JS (ver
   wop-lista-castas.js) a partir da posicao real do elemento na pagina,
   em vez de assumirem uma coluna perfeitamente centrada. Os valores por
   omissao (0px / 100%) sao usados so ate o JS correr, ou se o JS estiver
   desativado - equivale a nao ter bleed nenhum, sem quebrar o layout. */
/* "z-index:0" (alem de "position:relative") e essencial aqui: cria um
   contexto de empilhamento PROPRIO para o grupo, para que o "z-index:-1"
   do ::before abaixo fique so atras do CONTEUDO deste grupo (o texto da
   lista) - sem isto, o ::before ficava atras do FUNDO DE TODA A PAGINA
   (o contexto de empilhamento mais proximo podia estar bem mais acima na
   arvore do DOM), tornando o preenchimento invisivel fora da coluna de
   conteudo mesmo com a largura calculada corretamente em JS. */
.wop-castas-bleed-principal-yes .wop-castas-group--principal,
.wop-castas-bleed-normal-yes .wop-castas-group--normal {
	position: relative;
	z-index: 0;
}

.wop-castas-bleed-principal-yes .wop-castas-group--principal::before,
.wop-castas-bleed-normal-yes .wop-castas-group--normal::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --wop-bleed-left, 0px );
	width: var( --wop-bleed-width, 100% );
	background: inherit;
	z-index: -1;
}

/* Etiqueta "Principais Castas" */
.wop-castas-badge {
	display: inline-block;
	background-color: #b32d2e;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	margin: 0 0 8px;
}

/* Listas de itens */
.wop-castas-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wop-castas-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Container do item: titulo + seta em linha; a imagem do cacho e absoluta
   (ver .wop-castas-item__hover-img) e flutua sobre a linha no hover. */
.wop-castas-item__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	text-decoration: none !important;
	position: relative;
}

.wop-castas-item__name {
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(20px, 3vw, 32px);
	color: #1a1a1a;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.wop-castas-item--normal .wop-castas-item__name {
	color: #8c8c8c;
}

/* O icone (Icons_Manager ou o SVG de fallback) tem sempre uma dimensao
   minima garantida, mesmo que o tema aplique um reset global a "svg"/"i". */
.wop-castas-item__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	font-size: 24px;
	line-height: 1;
	min-width: 1em;
	min-height: 1em;
	flex-shrink: 0;
}

.wop-castas-item__icon svg,
.wop-castas-item__icon i {
	width: 1em !important;
	height: 1em !important;
	display: inline-block !important;
	font-size: inherit;
}

.wop-castas-item--normal .wop-castas-item__icon {
	color: #8c8c8c;
}

.wop-castas-item__link:hover .wop-castas-item__name,
.wop-castas-item__link:hover .wop-castas-item__icon {
	color: #b32d2e;
}

/* Imagem do cacho - absoluta, flutua sobre a linha, so visivel no hover.
   Posicao configuravel no painel (Estilo > Etiqueta e Imagem em Hover). */
.wop-castas-item__hover-img {
	position: absolute;
	right: 60px;
	bottom: 100%;
	margin-bottom: 10px;
	width: 140px;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.25s ease;
}

.wop-castas-item__hover-img img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}

.wop-castas-item__link:hover .wop-castas-item__hover-img {
	opacity: 1;
}

/* Responsivo */
@media (max-width: 767px) {
	.wop-castas-tabs {
		gap: 20px;
		margin-bottom: 24px;
	}

	.wop-castas-item__link {
		gap: 12px;
		padding: 18px 0;
	}

	/* Imagem absoluta escondida em mobile - nao existe hover real ao
	   toque, e evita sobrepor conteudo. */
	.wop-castas-item__hover-img {
		display: none;
	}
}