#dwtarot-overlay {
	position: fixed; inset: 0; z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	background: #0b0715e6;
	background-size: cover; background-position: center;
	padding: 20px; box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#dwtarot-overlay[hidden] { display: none; }

#dwtarot-caixa {
	background: #1a0f2e; color: #f1e9ff; border-radius: 16px;
	max-width: 420px; width: 100%; padding: 28px 24px; text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid #7d5fff55;
	position: relative;
	transition: max-width .2s ease;
}
/* Na tiragem de 3, as cartas ficam do mesmo tamanho que na de 1 (ver
   .dwtarot-cena mais abaixo) — a caixa precisa de ser mais larga para as 3
   caberem lado a lado sem espremer. Só em ecrãs largos: a media query no
   fim do ficheiro repõe o max-width normal em mobile. */
#dwtarot-caixa.dwtarot-caixa-larga { max-width: 740px; }

#dwtarot-fechar {
	position: absolute; top: 10px; right: 14px; background: none; border: none;
	color: #cbb8ff; font-size: 22px; cursor: pointer; line-height: 1;
}
#dwtarot-fechar:hover { color: #fff; }

/* Etiqueta de modo ("Tiragem de 1 carta" ou "Passado · Presente · Futuro")
   — fica visível também durante a revelação, para contextualizar as
   posições por baixo de cada carta na tiragem de 3. */
#dwtarot-modo-label {
	font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: #a58bff; margin: 0 0 4px; font-weight: 600;
}
#dwtarot-titulo { font-size: 18px; font-weight: 600; margin: 4px 0 8px; }
/* Aviso prévio, antes de escolher o tema — complementa o #dwtarot-repetida
   (que só aparece DEPOIS de a pessoa insistir); este avisa antes, para não
   ser só uma surpresa a meio do caminho. */
#dwtarot-aviso-previo {
	font-size: 12px; color: #cbb8ff; margin: 0 0 16px; font-style: italic;
}

#dwtarot-temas { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dwtarot-tema-btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	width: 100%; text-align: center;
	background: linear-gradient(135deg, #2a1a4a, #1c1130); color: #f1e9ff;
	border: 1px solid #7d5fff4d; border-radius: 14px;
	padding: 14px 18px; font-size: 15px; font-weight: 500; cursor: pointer;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dwtarot-tema-btn:hover {
	background: linear-gradient(135deg, #3d2673, #2a1a4a);
	border-color: #a58bff; transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(125,95,255,.35);
}
/* Ícone desenhado (fornecido pela Sónia) por cima do nome do tema — cor
   herdada via currentColor, para acompanhar o hover só com CSS, sem JS. */
.dwtarot-tema-icone-topo {
	display: flex; align-items: center; justify-content: center;
	color: #a58bff;
	transition: color .18s ease, filter .18s ease;
}
.dwtarot-tema-btn:hover .dwtarot-tema-icone-topo { color: #fff; filter: drop-shadow(0 0 4px #a58bffb3); }
/* São faixas largas, não ícones quadrados (proporções bem diferentes entre
   temas) — por isso só a altura é fixa; a largura segue o desenho real de
   cada um, sem esticar nem espremer. */
.dwtarot-tema-svgicone { display: block; height: 26px; width: auto; max-width: 100%; }
.dwtarot-tema-label { flex: 0 0 auto; }

#dwtarot-palco { display: none; flex-direction: column; align-items: center; gap: 16px; }

/* Palco: 1 ou 3 slots lado a lado (os que sobram ficam "hidden" via JS,
   consoante o modo da tiragem). */
#dwtarot-cenas { display: flex; justify-content: center; align-items: flex-start; gap: 12px; width: 100%; }
#dwtarot-cenas.dwtarot-modo-3 { gap: 16px; }

.dwtarot-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dwtarot-slot[hidden] { display: none; }
.dwtarot-slot-posicao { font-size: 11px; color: #cbb8ff; margin: 0; text-align: center; }
.dwtarot-slot-posicao[hidden] { display: none; }

/* Proporção 2:3 (imagens das cartas são 1536x2304px) — a caixa da carta
   segue a mesma proporção para a imagem aparecer inteira, sem cortar. Em
   ecrã largo, a tiragem de 3 usa o MESMO tamanho da tiragem de 1 (a caixa
   #dwtarot-caixa.dwtarot-caixa-larga alarga-se para caberem lado a lado);
   só em mobile é que ficam mais pequenas (ver media query no fim). */
.dwtarot-cena { perspective: 1000px; width: 210px; height: 315px; margin: 0 auto; position: relative; }
/* Uma vez revelada, a carta fica clicável (abre o modal de detalhe) — o
   selinho "i" é só uma pista visual de que há mais para ver, não faz parte
   da animação de flip (fica sempre virado para o utilizador). */
.dwtarot-slot.dwtarot-revelado .dwtarot-cena { cursor: pointer; }
.dwtarot-slot.dwtarot-revelado .dwtarot-cena::after {
	content: "i"; position: absolute; right: 6px; bottom: 6px; z-index: 2;
	width: 22px; height: 22px; border-radius: 50%;
	background: #7d5fffe6; color: #fff; font-size: 13px; font-weight: 700;
	font-style: normal; font-family: Georgia, "Times New Roman", serif;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.45); pointer-events: none;
}
.dwtarot-carta {
	width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
	transition: transform 1.9s cubic-bezier(.22,.61,.36,1);
}
/* 3 voltas completas antes de assentar virada (1260 = 180 + 3×360), para dar
   sensação de "sorteio a acontecer" em vez de um simples flip instantâneo. */
.dwtarot-carta.dwtarot-a-virar { transform: rotateY(1260deg); }

.dwtarot-verso-face, .dwtarot-frente-face {
	position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
	overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.4); background: #2a1a4a;
}
.dwtarot-verso-face { display: flex; align-items: center; justify-content: center; font-size: 40px; }
.dwtarot-frente-face { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
/* contain, não cover: as imagens carregadas nem sempre respeitam a
   proporção 2:3 da caixa (ex: algumas cartas foram carregadas quadradas,
   1024x1024) — cover cortava as laterais nesses casos. Com contain a
   carta aparece sempre inteira; a margem que sobrar fica com o fundo
   escuro da própria caixa (já definido acima), não em branco. */
.dwtarot-frente-face img, .dwtarot-verso-face img { width: 100%; height: 100%; object-fit: contain; }
.dwtarot-frente-face.dwtarot-invertida img { transform: rotate(180deg); }

/* Nome e orientação de cada carta, por baixo do respetivo slot — aparecem
   com um fade suave só depois de essa carta (não as outras) ter virado. */
.dwtarot-slot-nome { font-size: 17px; font-weight: 600; margin: 0; opacity: 0; transition: opacity .5s ease; }
.dwtarot-slot-orientacao { font-size: 13px; color: #cbb8ff; margin: 0; opacity: 0; transition: opacity .5s ease; }
.dwtarot-slot.dwtarot-revelado .dwtarot-slot-nome,
.dwtarot-slot.dwtarot-revelado .dwtarot-slot-orientacao { opacity: 1; }

#dwtarot-resultado { min-height: 0; opacity: 0; transition: opacity .5s ease; }
#dwtarot-resultado.dwtarot-visivel { opacity: 1; }
/* Aviso de "já tiraste hoje" — cartão com contorno e fundo, texto à
   esquerda (3 frases, não cabe bem numa pílula de uma linha só), para ser
   reparado mesmo sem ler com atenção. */
#dwtarot-repetida {
	display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px;
	font-size: 12.5px; font-weight: 600; color: #f1e9ff; font-style: normal;
	text-align: left; line-height: 1.45;
	margin: 10px auto 0; max-width: 300px;
	background: #7d5fff33; border: 1px solid #a58bff80; border-radius: 14px;
	padding: 10px 14px;
}
#dwtarot-repetida[hidden] { display: none; }
.dwtarot-repetida-orn { display: inline-flex; flex-shrink: 0; color: #cbb8ff; margin-top: 2px; }

#dwtarot-continuar {
	display: none; background: #7d5fff; color: #fff; border: none; border-radius: 999px;
	padding: 10px 22px; font-size: 14px; cursor: pointer; margin-top: 6px;
}
#dwtarot-continuar:hover { background: #6a4ce0; }

@media (max-width: 480px) {
	/* Em mobile a tiragem de 3 continua em fila, mais pequena que a de 1 —
	   não há espaço de ecrã para o tamanho "cheio" das 3 lado a lado. */
	#dwtarot-caixa.dwtarot-caixa-larga { max-width: 420px; }
	.dwtarot-cena { width: 170px; height: 255px; }
	#dwtarot-cenas.dwtarot-modo-3 { gap: 7px; }
	#dwtarot-cenas.dwtarot-modo-3 .dwtarot-cena { width: 82px; height: 123px; }
	#dwtarot-cenas.dwtarot-modo-3 .dwtarot-verso-face { font-size: 22px; }
	#dwtarot-cenas.dwtarot-modo-3 .dwtarot-slot-nome { font-size: 12px; }
	#dwtarot-cenas.dwtarot-modo-3 .dwtarot-slot-orientacao { font-size: 10.5px; }
}

/* Modal de detalhe de uma carta (imagem + título/subtítulo/descrição) — vive
   por cima do popup principal (z-index mais alto), aberto ao clicar numa
   carta já revelada. Layout imagem-à-esquerda/texto-à-direita em ecrã largo,
   empilhado em mobile. */
#dwtarot-detalhe-overlay {
	position: fixed; inset: 0; z-index: 1000000;
	display: flex; align-items: center; justify-content: center;
	background: #0b0715f2;
	padding: 20px; box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#dwtarot-detalhe-overlay[hidden] { display: none; }

#dwtarot-detalhe-caixa {
	background: #1a0f2e; color: #f1e9ff; border-radius: 16px;
	/* Bem mais larga que o popup principal — a imagem aqui é propositadamente
	   maior do que a carta na revelação (ver #dwtarot-detalhe-imagem), para
	   dar para ver os pormenores do baralho. min() com vw acompanha o ecrã. */
	max-width: min(940px, 94vw); width: 100%; max-height: 90vh; overflow-y: auto;
	padding: 30px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid #7d5fff55;
	position: relative; display: flex; gap: 28px; align-items: flex-start; text-align: left;
}
#dwtarot-detalhe-fechar {
	position: absolute; top: 10px; right: 14px; background: none; border: none;
	color: #cbb8ff; font-size: 22px; cursor: pointer; line-height: 1;
}
#dwtarot-detalhe-fechar:hover { color: #fff; }

/* Tamanho fluido (clamp com vw) em vez de um valor fixo — cresce com a
   largura do ecrã até 380px, sempre maior do que a carta na revelação
   (210px em desktop, ver .dwtarot-cena), mas nunca maior do que cabe. */
#dwtarot-detalhe-imagem {
	flex: 0 0 clamp(220px, 32vw, 380px); width: clamp(220px, 32vw, 380px);
	aspect-ratio: 2 / 3; border-radius: 12px;
	overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.4); background: #2a1a4a;
}
#dwtarot-detalhe-imagem img { width: 100%; height: 100%; object-fit: contain; }
#dwtarot-detalhe-imagem.dwtarot-invertida img { transform: rotate(180deg); }

#dwtarot-detalhe-texto { flex: 1 1 260px; min-width: 220px; }
/* Cor sempre explícita aqui (não só herdada de #dwtarot-detalhe-caixa) e com
   !important — o tema do site tem um estilo global para títulos que, sem
   isto, ganhava à herança e deixava o texto quase invisível (preto sobre
   fundo escuro). Por precaução aplica-se aos três elementos de texto. */
#dwtarot-detalhe-titulo {
	font-size: 20px; font-weight: 700; margin: 0 0 4px; padding-right: 22px;
	color: #f1e9ff !important;
}
#dwtarot-detalhe-subtitulo {
	font-size: 14px; font-style: italic; margin: 0 0 14px;
	color: #a58bff !important;
}
#dwtarot-detalhe-subtitulo[hidden] { display: none; }
#dwtarot-detalhe-descricao { font-size: 14.5px; line-height: 1.6; color: #f1e9ff !important; }
/* Herda a cor de cima em vez de deixar cada tag (p, li, etc.) sujeita a
   estilos globais do tema — mesmo problema do título, só que aqui a
   descrição é HTML livre (escrito pela Sónia no backend), por isso pode ter
   qualquer uma destas tags. */
#dwtarot-detalhe-descricao p,
#dwtarot-detalhe-descricao li,
#dwtarot-detalhe-descricao ul,
#dwtarot-detalhe-descricao ol,
#dwtarot-detalhe-descricao b,
#dwtarot-detalhe-descricao strong,
#dwtarot-detalhe-descricao i,
#dwtarot-detalhe-descricao em { color: inherit !important; }
#dwtarot-detalhe-descricao p { margin: 0 0 10px; }
#dwtarot-detalhe-descricao p:last-child { margin-bottom: 0; }
#dwtarot-detalhe-descricao ul, #dwtarot-detalhe-descricao ol { margin: 8px 0; padding-left: 22px; }

/* Abaixo disto a carta+texto lado a lado ficariam espremidos — empilha
   (imagem em cima, texto por baixo) e a imagem passa a acompanhar a largura
   do ecrã (78vw, até 340px), continuando bem maior do que a carta da
   revelação em mobile (170px em 1 carta, 82px em 3 cartas). */
@media (max-width: 640px) {
	#dwtarot-detalhe-caixa { flex-direction: column; align-items: center; text-align: center; padding: 26px 20px; max-width: min(480px, 94vw); }
	#dwtarot-detalhe-imagem { flex: 0 0 auto; width: min(78vw, 340px); }
	#dwtarot-detalhe-texto { min-width: 0; }
	#dwtarot-detalhe-titulo { padding-right: 0; }
}

/* Botão "Tirar uma carta" no widget do chat (vem do DW Chatbot IA, através
   do filtro genérico dw_chatbot_botoes_extra) — ao contrário dos outros
   botões extra, este é a chamada de atenção principal para a funcionalidade
   do Tarot, por isso tem destaque próprio: preenchido a cor por omissão,
   invertido (branco) ao passar o rato. Usa !important porque o CSS base
   deste botão vem impresso inline pelo DW Chatbot IA, depois deste
   ficheiro na página — sem isso, o estilo dele ganhava por ser o último.
   A cor vem de var(--jfc-cor), a mesma variável que o DW Chatbot IA já
   define no #jfc-raiz a partir da cor escolhida no backend dele — não a
   fixamos aqui, para acompanhar sempre a cor real do chatbot. O fallback
   (#7d5fff) só entra em sites com uma versão do DW Chatbot IA anterior a
   esta variável existir. Os dois botões (1 carta e 3 cartas) partilham
   exatamente o mesmo estilo, só o texto muda. */
#jfc-botao-extra-dwtarot_tirar,
#jfc-botao-extra-dwtarot_tirar3 {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	background: var(--jfc-cor, #7d5fff) !important;
	color: #fff !important;
	border: 1px solid var(--jfc-cor, #7d5fff) !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
}
#jfc-botao-extra-dwtarot_tirar:hover,
#jfc-botao-extra-dwtarot_tirar3:hover {
	background: #fff !important;
	color: var(--jfc-cor, #7d5fff) !important;
	border-color: var(--jfc-cor, #7d5fff) !important;
}
/* Ícone à esquerda do texto, em vez do emoji 🔮 — mesmo sparkle usado no
   tema "Geral", via mask (não background-image), para herdar a cor do
   texto (currentColor) e trocar sozinho no hover, sem duplicar CSS. */
#jfc-botao-extra-dwtarot_tirar::before,
#jfc-botao-extra-dwtarot_tirar3::before {
	content: "";
	width: 13px; height: 13px; flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L15 9L23 12L15 15L12 23L9 15L1 12L9 9Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L15 9L23 12L15 15L12 23L9 15L1 12L9 9Z'/%3E%3C/svg%3E") no-repeat center / contain;
}