/*
 * Ajustes visuais do checkout (to-legacy/comprar), comuns a todos os sites.
 * Carregado em comprar/header.php DEPOIS do CSS do tema, para vencer regras antigas dos temas
 * (ex.: aviso com altura fixa de 600/700px e margens de 115/160px em ~51 temas).
 * Por isso usa seletores mais específicos e !important.
 */

/* ---------- Aviso ($.dialog / div.alert): fundo escuro na tela inteira + cartão centralizado ---------- */

/* O display (mostrar/esconder) continua por conta do jQuery; aqui só posição, tamanho e cor. */
html body div.alert {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 16px !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
	background: rgba(0, 0, 0, 0.72) !important;
	box-shadow: none !important;
	z-index: 100000 !important;
}

html body div.alert > div.centraliza {
	position: relative !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	float: none !important;
	width: 100% !important;
	max-width: 460px !important;
	height: auto !important;
	margin: 0 auto !important;
	padding: 28px 24px 20px !important;
	box-sizing: border-box !important;
	background: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
	text-align: center !important;
}

html body div.alert > div.centraliza > img {
	display: block !important;
	float: none !important;
	width: 48px !important;
	height: auto !important;
	margin: 0 auto 14px !important;
}

html body div.alert div.container_erros {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

html body div.alert div.container_erros p {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	color: #222 !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-align: center !important;
}

/* Botão: mantém a cor/gradiente do tema; só tamanho e posição */
html body div.alert > div.centraliza > a {
	display: block !important;
	float: none !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: 22px 0 0 !important;
	padding: 12px 16px !important;
	box-sizing: border-box !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #fff !important;
}

@media (max-width: 600px) {
	html body div.alert > div.centraliza {
		max-width: 100% !important;
		padding: 22px 18px 16px !important;
	}

	html body div.alert div.container_erros p {
		font-size: 16px !important;
	}
}

/* ---------- Carrinho (etapa 2): tipo de ingresso com o nome inteiro ---------- */

/* O nome quebra em mais de uma linha em vez de ser cortado; a seta fica à direita. */
#pedido_resumo .sbHolder {
	height: auto !important;
	min-height: 26px;
}

#pedido_resumo .sbHolder {
	position: relative !important;
}

/* o plugin posiciona o texto "solto" (absolute); no fluxo normal a caixa cresce junto com o nome */
#pedido_resumo .sbSelector {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: block !important;
	height: auto !important;
	min-height: 26px !important;
	padding: 5px 26px 5px 6px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	text-indent: 0 !important;
	line-height: 1.25 !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	word-break: normal !important;
}

#pedido_resumo .sbOptions li a {
	white-space: normal !important;
	line-height: 1.3 !important;
	height: auto !important;
}

@media (max-width: 600px) {
	#pedido_resumo .sbHolder {
		width: 130px !important;
	}
}

/* ---------- Carrinho: campo do código promocional e botão "Validar" ---------- */

/* Caixa de imagem da promoção sem imagem cadastrada não aparece quebrada */
#pedido_resumo .img_complemento img[src=""],
#pedido_resumo .img_complemento img:not([src]) {
	display: none !important;
}

#pedido_resumo .container_validador .validador_itau {
	height: 40px !important;
	box-sizing: border-box !important;
}

#pedido_resumo a.botao_validar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-radius: 6px;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap;
}

/* o JS esconde o botão (classe hidden) depois de validar */
#pedido_resumo a.botao_validar.hidden {
	display: none !important;
}

/* ---------- Dica do mapa no celular ($.dicaMapa, etapa1 e assento do combo) ---------- */

.dica-mapa {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	padding: 16px;
	box-sizing: border-box;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.72);
}

.dica-mapa__cartao {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	max-width: 400px;
	margin: 0 auto;
	padding: 24px 22px 18px;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	text-align: center;
	font-family: inherit;
}

.dica-mapa__icone {
	margin: 0 auto 8px;
	line-height: 0;
}

.dica-mapa__titulo {
	margin: 0 0 8px !important;
	color: #222 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.dica-mapa__texto {
	margin: 0 0 8px !important;
	color: #222 !important;
	font-size: 16px !important;
	line-height: 1.45 !important;
}

.dica-mapa__obs {
	margin: 0 !important;
	color: #666 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

a.dica-mapa__botao {
	display: block;
	min-height: 44px;
	margin: 18px 0 14px;
	padding: 12px 16px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #333;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	text-decoration: none !important;
}

/* barrinha do tempo até fechar sozinha (8s) */
.dica-mapa__tempo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: #eee;
}

.dica-mapa__tempo span {
	display: block;
	height: 100%;
	width: 100%;
	background: #999;
	transform-origin: left center;
	animation: dica-mapa-tempo 8s linear forwards;
}

@keyframes dica-mapa-tempo {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* dedos se afastando = gesto de ampliar */
.dica-mapa__dedo {
	transform-box: fill-box;
	transform-origin: center;
}

.dica-mapa__dedo--1 {
	animation: dica-mapa-dedo-1 1.6s ease-in-out infinite;
}

.dica-mapa__dedo--2 {
	animation: dica-mapa-dedo-2 1.6s ease-in-out infinite;
}

.dica-mapa__assentos {
	transform-box: fill-box;
	transform-origin: center;
	animation: dica-mapa-zoom 1.6s ease-in-out infinite;
}

@keyframes dica-mapa-dedo-1 {
	0%, 15% { transform: translate(6px, 6px); }
	60%, 100% { transform: translate(-6px, -6px); }
}

@keyframes dica-mapa-dedo-2 {
	0%, 15% { transform: translate(-6px, -6px); }
	60%, 100% { transform: translate(6px, 6px); }
}

@keyframes dica-mapa-zoom {
	0%, 15% { transform: scale(1); }
	60%, 100% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
	.dica-mapa__dedo--1, .dica-mapa__dedo--2, .dica-mapa__assentos, .dica-mapa__tempo span {
		animation: none;
	}
}