/* Estilos compartilhados por cart.php e wishlist.php.
   Ficavam escritos dentro do cart.php, o que deixava a lista de desejos com a
   aparencia antiga. Centralizados aqui para as duas paginas nao divergirem. */

/* ===== LUXUYER — componentes de carrinho e lista de desejos ===== */
	.lux-tabela-titulo {
		font-family: "Cormorant Garamond", Georgia, serif;
		font-size: 30px; font-weight: 500; letter-spacing: 0.18em;
		text-align: center; color: #E8CB7A; margin: 26px 0 18px;
	}
	table.lux-tabela {
		border-collapse: collapse;
		background: rgba(0,0,0,0.55);
		border: 1px solid rgba(201,164,76,0.35);
	}
	/* rede de seguranca: primeira linha da tabela sempre com fundo escuro, mesmo
	   que o HTML antigo traga bgcolor="#ffdb7a" -- CSS vence o atributo. */
	table.lux-tabela tr:first-child td,
	table.lux-tabela tr:first-child th {
		background: rgba(201,164,76,0.10) !important;
		color: #E8CB7A !important;
		font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
		font-weight: 500;
		border-bottom: 1px solid rgba(201,164,76,0.35);
	}
	table.lux-tabela tr:first-child td strong,
	table.lux-tabela tr:first-child th strong { font-weight: 500; color: #E8CB7A; }

	table.lux-tabela th {
		background: rgba(201,164,76,0.10);
		color: #E8CB7A;
		font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
		font-weight: 500; padding: 12px 10px;
		border-bottom: 1px solid rgba(201,164,76,0.35);
	}
	table.lux-tabela td {
		border-bottom: 1px solid rgba(201,164,76,0.15);
		color: #EDE8DC; font-size: 14px; vertical-align: middle;
	}
	table.lux-tabela td font { color: #EDE8DC !important; }
	table.lux-tabela td a font { color: #E8CB7A !important; }
	table.lux-tabela td a { text-decoration: none; }
	.lux-thumb {
		width: 62px; height: 78px; object-fit: cover;
		border: 1px solid rgba(201,164,76,0.4); border-radius: 2px; background: #111;
	}
	/* campos e botoes da linha do produto */
	table.lux-tabela input[type="text"] {
		background: rgba(255,255,255,0.06) !important;
		border: 1px solid rgba(201,164,76,0.35) !important;
		color: #F1ECE1 !important; height: 34px; width: 46px;
		text-align: center; border-radius: 2px !important;
	}
	table.lux-tabela input[type="submit"] {
		background: transparent !important;
		border: 1px solid rgba(201,164,76,0.55) !important;
		color: #EBD08A !important; height: 34px; min-width: 34px;
		border-radius: 2px !important; cursor: pointer; transition: all .25s ease;
	}
	table.lux-tabela input[type="submit"]:hover {
		background: linear-gradient(100deg,#FFF6D5,#E8CB7A 45%,#C9A44C) !important;
		color: #17150f !important;
	}
	table.lux-tabela input[name^="deleteBtn"] { border-color: rgba(190,70,70,0.6) !important; color: #c98a8a !important; }
	table.lux-tabela input[name^="deleteBtn"]:hover { background: #8d3a3a !important; color: #fff !important; }

	/* Apple Pay indisponivel: presente, mas sem prometer o que nao existe */
	.lux-pay-soon { text-align: right; }
	.lux-applepay {
		display: inline-flex; align-items: center; justify-content: center;
		width: 213px; height: 52px;
		background: #101012;
		border: 1px solid rgba(201,164,76,0.35);
		border-radius: 6px;
		opacity: 0.5; cursor: not-allowed;
	}
	/* o logo da Apple e escuro; sobre fundo preto sumia. brightness(0) invert(1)
	   forca ele a branco puro, independente da cor original do arquivo. */
	.lux-applepay img {
		height: 30px; width: auto;
		filter: brightness(0) invert(1) opacity(0.85);
	}
	.lux-pay-soon-nota {
		display: block; margin-top: 6px;
		font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8d8474;
	}

	/* Faixa de selos: a malha de arabescos volta, agora em transparencia sobre o
	   escuro em vez de dourado sobre bege. O back_good.png ja e um padrao dourado
	   com fundo transparente, entao basta sobrepor e cobrir com um veu escuro.
	   Para deixar a malha mais forte, baixe o 0.82; mais discreta, suba para 0.90. */
	table.lux-selos {
		background-color: #15151a;
		background-image:
			linear-gradient(180deg, rgba(20,20,25,0.82), rgba(12,12,16,0.86)),
			url(/images/back_good.png);
		background-repeat: repeat, repeat;
		background-size: auto, 300px 300px;
		background-position: center, 0 0;
		border-top: 1px solid rgba(201,164,76,0.30);
		border-bottom: 1px solid rgba(201,164,76,0.30);
		min-height: 64px;
	}
	/* Celulas de tabela dividem o espaco proporcionalmente ao conteudo, e as
	   imagens tem larguras diferentes (100px, 150px, 50px) -- por isso os selos
	   ficavam desalinhados e empurrados para um lado. Com flex e "flex: 1 1 0"
	   cada um recebe exatamente a mesma fatia, independente do tamanho da imagem. */
	table.lux-selos { display: block; padding: 0 3%; box-sizing: border-box; }
	table.lux-selos tbody { display: block; width: 100%; }
	table.lux-selos tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	table.lux-selos tr:empty { display: none; }
	table.lux-selos th {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14px 6px;
		min-width: 0;
	}
	table.lux-selos img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 40px;
		filter: grayscale(1) brightness(1.9) opacity(0.55);
		transition: filter .3s ease;
	}
	/* o logo da Apple e preto: com brightness ele continuava escuro sobre o
	   escuro. Invertido, fica branco como os demais. */
	table.lux-selos img#apple__ { filter: brightness(0) invert(1) opacity(0.55); }
	table.lux-selos img:hover { filter: grayscale(0) opacity(1); }
	table.lux-selos img#apple__:hover { filter: brightness(0) invert(1) opacity(1); }

/* ===================== MOBILE ===================== */
@media screen and (max-width: 700px) {
	/* a tabela de 6 colunas nao cabe: rola na horizontal dentro do proprio bloco,
	   em vez de empurrar a pagina inteira para o lado */
	table.lux-tabela { display: block; overflow-x: auto; white-space: nowrap; }
	.lux-thumb { width: 48px; height: 60px; }
	.lux-tabela-titulo { font-size: 22px; letter-spacing: 0.12em; }

	/* selos: quebram em duas linhas de tres em vez de seis colunas espremidas */
	table.lux-selos tr { flex-wrap: wrap; }
	table.lux-selos th { flex: 0 0 33.33%; padding: 12px 4px; }
	table.lux-selos img { max-height: 30px; }

	.lux-pay-soon { text-align: center; }
	.lux-applepay { width: 100%; max-width: 260px; }
}

/* ===== equilibrio da coluna de checkout =====
   As duas caixas da direita (total e pagamento) usavam a classe .gradient-border
   do style.css, que e literalmente um gradiente vermelho e roxo -- daqui vinha a
   borda avermelhada. Aqui elas viram um so bloco visual, com a mesma largura. */
table.box.gradient-border {
	background-image: none !important;
	background-color: rgba(0,0,0,0.55) !important;
	border: 1px solid rgba(201,164,76,0.32) !important;
	border-radius: 4px;
	width: 280px !important;
	max-width: 100%;
	margin: 0 0 14px auto !important;
	float: none !important;
}
table.box.gradient-border td,
table.box.gradient-border th {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 14px !important;
}

/* total do carrinho, agora unico e em dolar */
.lux-total {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #A79E8B;
	text-align: right;
	padding: 4px 2px;
}
.lux-total strong {
	display: block;
	margin-top: 6px;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: none;
	color: #E8CB7A;
}

/* termos: era uma tabela com borda vermelha, colada na borda esquerda da tela */
.lux-termos {
	max-width: 460px;
	padding: 14px 16px;
	background: rgba(0,0,0,0.45);
	border: 1px solid rgba(201,164,76,0.25);
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.9;
	color: #A79E8B;
	letter-spacing: 0.05em;
}
.lux-termos a {
	color: #E8CB7A;
	text-decoration: none;
	border-bottom: 1px solid rgba(201,164,76,0.45);
	margin-left: 4px;
}
.lux-termos a:hover { color: #FFF6D5; }

/* o botao do PayPal e imagem oficial e nao da para recolorir; ao menos
   igualar a largura com o Apple Pay para a coluna nao ficar irregular */
#paypal__y { width: 100% !important; max-width: 232px; height: auto; }
.lux-applepay { width: 100%; max-width: 232px; }

@media screen and (max-width: 700px) {
	table.box.gradient-border { width: 100% !important; margin: 0 auto 14px !important; }
	.lux-termos { max-width: 100%; }
}

/* ===== aviso de nao autenticado ===== */
.lux-aviso {
	margin: 14px auto;
	max-width: 900px;
	padding: 12px 16px;
	background: rgba(201,164,76,0.08);
	border: 1px solid rgba(201,164,76,0.30);
	border-radius: 3px;
	color: #C9A44C;
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	text-align: center;
	cursor: pointer;
}

/* carrinho vazio: esconde o cabecalho e a linha em branco da tabela */
table.lux-vazio tr { display: none; }
table.lux-vazio { border: none; background: transparent; }

/* ===== a coluna de checkout precisa empilhar no celular ===== */
@media screen and (max-width: 700px) {
	/* as duas celulas (termos e pagamento) ficavam lado a lado, espremendo o
	   PayPal em uma faixa de 150px. Aqui viram blocos, um sob o outro. */
	.lux-termos { max-width: 100%; margin: 0 0 16px; }

	.lux-rodape-cart,
	.lux-rodape-cart tbody,
	.lux-rodape-cart tr { display: block; width: 100%; }
	.lux-col-termos,
	.lux-col-pagamento {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}
	table.box.gradient-border {
		width: 100% !important;
		max-width: 320px !important;
		margin: 0 auto 14px !important;
		float: none !important;
	}
	table.box.gradient-border th[id="unique1"] { display: block; width: 100%; }
	#paypal__y { max-width: 100%; }
	.lux-applepay { max-width: 100%; }
	.lux-total { text-align: center; }
}