/*
 * Gavetas laterais — Cesta (mini-cart) e Entrar (login).
 *
 * Carregado por inc/enqueue.php em todas as páginas (o cabeçalho existe em
 * todas). O esqueleto .cdm-gaveta/.cdm-gaveta__* vem de cabecalho.css (a
 * gaveta de menu); aqui entram só o painel à direita e o miolo das duas.
 */

/* Painel encostado à direita (o da gaveta de menu é à esquerda). */
.cdm-gaveta__painel--direita {
	left: auto;
	right: 0;
}

/* A cesta é mais larga que a gaveta de menu (22rem): com 500px o nome cabe em
   duas linhas ao lado da foto e a linha de variações de produto variável
   (cinco atributos nas meias de compressão) para de rolar. */
.cdm-gaveta--cesta .cdm-gaveta__painel {
	width: min(92%, 500px);
}

/* No celular ela toma a tela inteira: a faixa de fundo que sobrava não levava
   a lugar nenhum e roubava largura de um item que já é apertado. */
@media (max-width: 640px) {
	.cdm-gaveta--cesta .cdm-gaveta__painel {
		width: 100%;
	}
}

/* ==========================================================================
   Cesta
   ==========================================================================

   As medidas abaixo saem do CSS da referência (baseline/referencia/css/
   11_GlobalCss.min.css e 42_farmaciaindiana...overrides.css, componente
   vtex-product-list dentro do minicart), não de estimativa em cima do print:

     foto 60x60, borda 1px, raio 6px      lista: filete #cbcbcb entre itens
     nome 14px / 17.5px, 2 linhas          10px entre o nome e a linha do preço
     preço de tabela 13px riscado          preço 20px negrito
     stepper 83x29, raio 5px, borda fina   número 16px negrito
     lixeira 24x24 absoluta no topo/dir.   topo da gaveta 42px, título 18px

   Só a cor foi traduzida para a paleta da CDM — o resto é cópia. As que não
   têm token (geometria deste componente) ficam nas variáveis locais abaixo em
   vez de espalhadas como número cru pelo arquivo.
   ========================================================================== */

.cdm-cesta {
	--cesta-foto: 60px;
	--cesta-raio-foto: 6px;
	--cesta-nome-altura: 17.5px;
	--cesta-respiro-nome: 10px;
	--cesta-preco: 1.25rem;      /* 20px */
	--cesta-qtd-largura: 83px;
	--cesta-qtd-altura: 29px;
	--cesta-qtd-botao: 26px;
	--cesta-lixeira: 20px;
	--cesta-lixeira-glifo: 0.75rem;   /* 12px */
	--cesta-linha-preco: 40px;

	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	background: var(--cdm-branco);
}

/*
 * O topo da cesta foge do amarelo das outras gavetas de propósito: ele carrega
 * "Remover todos", que é ação destrutiva em vermelho — vermelho sobre amarelo
 * fica ilegível (3,1:1) e sobre branco passa folgado.
 */
.cdm-gaveta__topo--cesta {
	justify-content: flex-start;
	gap: var(--cdm-e-3);
	height: 42px;
	padding: 0 var(--cdm-e-3);
	color: var(--cdm-texto);
	background-color: var(--cdm-branco);
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-gaveta__topo--cesta .cdm-gaveta__titulo {
	margin-right: auto;
	font-size: var(--cdm-t-lg);
	/* Peso normal, como na referência: nada aqui compete com o preço. */
	font-weight: var(--cdm-peso-normal);
}

/* O X da referência tem 22px de altura e nenhum enfeite em volta. */
.cdm-gaveta__topo--cesta .cdm-gaveta__fechar {
	padding: 0;
	font-size: var(--cdm-t-lg);
	line-height: 1;
}

/*
 * "Remover todos" só existe com item na cesta. A lista mora dentro do
 * fragmento que o Woo troca inteiro a cada AJAX, e este link fica fora dele —
 * por isso quem decide é o :has do painel, que reavalia sozinho na troca.
 */
.cdm-cesta__limpar {
	display: none;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-vermelho);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.cdm-gaveta__painel:has(.cdm-cesta__lista) .cdm-cesta__limpar {
	display: inline-block;
}

.cdm-cesta__limpar:hover,
.cdm-cesta__limpar:focus-visible {
	color: var(--cdm-vermelho);
	text-decoration: none;
}

.cdm-cesta .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

ul.cdm-cesta__lista {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 var(--cdm-e-3);
}

/*
 * Duas linhas ao lado da foto: nome em cima ocupando a largura toda, preço e
 * stepper embaixo nas pontas. A lixeira sai do fluxo e ancora no topo direito,
 * como na referência — por isso o nome reserva a faixa dela no padding.
 */
li.cdm-cesta__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--cesta-foto) minmax(0, 1fr) auto;
	grid-template-areas:
		"foto nome nome"
		"foto preco qtd";
	column-gap: var(--cdm-e-3);
	row-gap: var(--cesta-respiro-nome);
	align-items: center;
	padding: var(--cdm-e-2) 0;
	border-bottom: 1px solid var(--cdm-cinza-300);
}

/* A foto encosta no topo da célula para nascer na mesma altura da primeira
   linha do nome — com o nome de uma linha só, centralizar desalinhava os dois. */
.cdm-cesta__foto {
	grid-area: foto;
	display: block;
	align-self: start;
}

.cdm-cesta__foto img {
	width: var(--cesta-foto);
	height: var(--cesta-foto);
	object-fit: contain;
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cesta-raio-foto);
	background: var(--cdm-branco);
}

.cdm-cesta__info {
	grid-area: nome;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	/* Faixa da lixeira, que é absoluta e passaria por cima do texto. */
	padding-right: calc(var(--cesta-lixeira) + var(--cdm-e-2));
}

a.cdm-cesta__nome,
span.cdm-cesta__nome {
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	line-height: var(--cesta-nome-altura);
	color: var(--cdm-azul);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.cdm-cesta__nome:hover {
	text-decoration: underline;
}

.cdm-cesta__info dl.variation {
	margin: 0;
	font-size: var(--cdm-t-xs);
	line-height: 1.35;
	color: var(--cdm-texto-apagado);
}

.cdm-cesta__info dl.variation dt,
.cdm-cesta__info dl.variation dd,
.cdm-cesta__info dl.variation dd p {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: var(--cdm-peso-normal);
}

/* --- preços do item --- */

.cdm-cesta__precos {
	grid-area: preco;
	align-self: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* flexCol--priceWrapper da referência: é esta altura que abre o respiro
	   entre o stepper e o filete do item. */
	min-height: var(--cesta-linha-preco);
	min-width: 0;
}

/*
 * A referência pinta o preço de tabela em #c9c9c9 (1,9:1) — abaixo do mínimo
 * legível. Preço antigo é informação de compra, não enfeite, então aqui ele
 * usa o cinza de texto apagado (4,0:1) e mantém o mesmo tamanho do gabarito.
 */
del.cdm-cesta__preco-antigo,
del.cdm-cesta__preco-antigo .woocommerce-Price-amount {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	line-height: 1.25;
	color: var(--cdm-texto-apagado);
	text-decoration: line-through;
}

span.cdm-cesta__preco,
span.cdm-cesta__preco .woocommerce-Price-amount {
	font-size: var(--cesta-preco);
	font-weight: var(--cdm-peso-forte);
	line-height: 1.25;
	color: var(--cdm-azul);
}

/* --- lixeira --- */

.cdm-cesta__item a.remove_from_cart_button {
	position: absolute;
	top: var(--cdm-e-2);
	right: 0;
	margin-top: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cesta-lixeira);
	height: var(--cesta-lixeira);
	/* Remover produto não é a ação que a cesta quer estimular: o ícone fica
	   pequeno e leve, longe do peso do preço e do botão de pagar. */
	font-size: var(--cesta-lixeira-glifo);
	font-weight: var(--cdm-peso-normal);
	line-height: 1;
	text-decoration: none;
	color: var(--cdm-texto-apagado);
	border-radius: var(--cdm-raio-sm);
	transition: var(--cdm-transicao);
}

.cdm-cesta__item a.remove_from_cart_button:hover,
.cdm-cesta__item a.remove_from_cart_button:focus-visible {
	color: var(--cdm-vermelho);
	background: var(--cdm-cinza-100);
}

/* --- stepper de quantidade --- */

.cdm-cesta__qtd {
	grid-area: qtd;
	justify-self: end;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--cesta-qtd-largura);
	height: var(--cesta-qtd-altura);
	padding: 0 var(--cdm-e-2);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: 5px;
	background: var(--cdm-branco);
}

.cdm-cesta__qtd-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cesta-qtd-botao);
	height: var(--cesta-qtd-botao);
	padding: 0;
	font-family: inherit;
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-normal);
	line-height: 1;
	color: var(--cdm-azul);
	background: none;
	border: 0;
	border-radius: var(--cdm-raio-sm);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

.cdm-cesta__qtd-botao:hover,
.cdm-cesta__qtd-botao:focus-visible {
	background: var(--cdm-azul-claro);
}

.cdm-cesta__qtd-botao[disabled] {
	color: var(--cdm-texto-apagado);
	cursor: default;
}

span.cdm-cesta__qtd-valor {
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	line-height: 1.25;
	color: var(--cdm-azul);
	text-align: center;
}

/* Enquanto o AJAX corre o item fica apagado — sem isso o clique repetido
   dispara duas requisições e a segunda desfaz a primeira. */
.cdm-cesta__qtd--ocupado {
	opacity: 0.5;
	pointer-events: none;
}

/* --- rodapé: resumo + botões --- */

.cdm-cesta__rodape {
	margin-top: auto;
	padding: var(--cdm-e-3) var(--cdm-e-4) var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
	background: var(--cdm-branco);
}

.cdm-cesta__resumo {
	margin: 0 0 var(--cdm-e-3);
}

.cdm-cesta__resumo-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-1) 0;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-cesta__resumo-linha dt,
.cdm-cesta__resumo-linha dd {
	margin: 0;
}

/* O valor herda a cor de destaque que o CSS do Woo dá a .woocommerce-Price-amount;
   no resumo ele precisa ler como texto corrido. */
.cdm-cesta__resumo-linha dd,
.cdm-cesta__resumo-linha dd .woocommerce-Price-amount,
.cdm-cesta__resumo-linha dd .woocommerce-Price-currencySymbol {
	color: var(--cdm-texto);
}

.cdm-cesta__resumo-linha--desconto dt {
	color: var(--cdm-verde);
}

.cdm-cesta__resumo-vazio {
	color: var(--cdm-texto-apagado);
}

/* O filete tracejado antes do total é o da referência: separa sem pesar. */
.cdm-cesta__resumo-linha--total {
	font-size: var(--cesta-preco);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* Só separa se houver o que separar: sem desconto e sem frete calculado o
   fechamento fica sozinho, e um tracejado solto no alto do rodapé parece
   sobra de linha apagada. */
.cdm-cesta__resumo-linha--total:not(:first-child) {
	margin-top: var(--cdm-e-2);
	padding-top: var(--cdm-e-3);
	border-top: 1px dashed var(--cdm-cinza-300);
}

/* Vence a regra de cor logo acima (mesma altura de seletor, um passo a mais de
   classe): no total o valor volta a ser azul. */
.cdm-cesta__resumo-linha--total dd,
.cdm-cesta__resumo-linha--total dd .woocommerce-Price-amount,
.cdm-cesta__resumo-linha--total dd .woocommerce-Price-currencySymbol {
	font-size: var(--cesta-preco);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

p.cdm-cesta__botoes {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-2);
	margin: 0;
}

.cdm-cesta__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	width: 100%;
	padding: var(--cdm-e-3) var(--cdm-e-5);
	font-family: inherit;
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-semi);
	text-align: center;
	text-decoration: none;
	border-radius: var(--cdm-raio-cheio);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

a.cdm-cesta__botao--ir {
	color: var(--cdm-branco);
	background: var(--cdm-verde-comprar);
	border: 1px solid var(--cdm-verde-comprar);
}

a.cdm-cesta__botao--ir:hover,
a.cdm-cesta__botao--ir:focus-visible {
	background: var(--cdm-verde-comprar-fundo);
	border-color: var(--cdm-verde-comprar-fundo);
}

button.cdm-cesta__botao--continuar {
	color: var(--cdm-azul);
	background: var(--cdm-branco);
	border: 1px solid var(--cdm-azul);
}

button.cdm-cesta__botao--continuar:hover,
button.cdm-cesta__botao--continuar:focus-visible {
	background: var(--cdm-azul-claro);
}

/* --- vazia --- */

.cdm-cesta__vazia {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-4);
	padding: var(--cdm-e-8) var(--cdm-e-4);
	text-align: center;
}

p.cdm-cesta__vazia-texto {
	margin: 0;
	color: var(--cdm-texto-fraco);
	line-height: var(--cdm-altura-normal);
}

/* ==========================================================================
   Blindagem contra o CSS do WooCommerce
   ==========================================================================

   A gaveta é impressa no wp_footer, fora de qualquer invólucro .woocommerce —
   mas o <body> ganha a classe `woocommerce` em produto, loja, carrinho e
   checkout, e aí o woocommerce.css alcança a cesta e a desmonta: nome em
   negrito, foto de 32px flutuando à direita, lixeira vermelha e redonda, botão
   verde virando o cinza padrão do plugin. Na home nada disso aparece, porque
   lá o body não tem a classe — foi por isso que passou despercebido.

   A marcação não pode largar as classes do Woo (`cart_list`,
   `product_list_widget`, `a.remove`, `a.button`): são elas que o
   wc-add-to-cart.js e os fragments procuram. Então o conserto é de
   especificidade, reunido aqui, com a regra que cada bloco desfaz anotada em
   cima. `!important` só onde o Woo também usa.
   ========================================================================== */

/* .woocommerce ul.product_list_widget { padding: 0; margin: 0 } */
.cdm-cesta .widget_shopping_cart_content ul.cdm-cesta__lista {
	padding: 0 var(--cdm-e-3);
	margin: 0;
}

/* .woocommerce ul.product_list_widget li { padding: 4px 0; margin: 0 } */
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item {
	padding: var(--cdm-e-2) 0;
	margin: 0;
}

/* .woocommerce ul.product_list_widget li a { display: block; font-weight: 700 }
   O display:block também desligaria o corte em duas linhas, que depende de
   -webkit-box. */
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item a.cdm-cesta__nome {
	display: -webkit-box;
	font-weight: var(--cdm-peso-normal);
}

/* .woocommerce ul.product_list_widget li img { float: right; margin-left: 4px;
   width: 32px } — jogava a foto para o lado direito do item, em 32px. */
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item .cdm-cesta__foto img {
	float: none;
	width: var(--cesta-foto);
	height: var(--cesta-foto);
	margin: 0;
}

/* .woocommerce ul.product_list_widget li dl { padding-left: 1em;
   border-left: 2px solid } e, pior, `dl dt { float: left; clear: both }` com
   `padding: 0 0 .25em` nos dois — que põe cada atributo numa linha só para si.
   Num produto de cinco atributos (as meias de compressão) isso vira seis
   linhas de rolagem por item. Aqui eles voltam a ser texto corrido. */
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item .cdm-cesta__info dl.variation {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.35;
}

.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item .cdm-cesta__info dl.variation dt,
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item .cdm-cesta__info dl.variation dd,
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item .cdm-cesta__info dl.variation dd p {
	display: inline;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	font-weight: var(--cdm-peso-normal);
}

/* Ponto entre um atributo e o próximo: sem ele "Preta" e "Modelo:" encostam e
   viram uma frase só. */
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item .cdm-cesta__info dl.variation dd:not(:last-of-type)::after {
	content: " · ";
}

/* .woocommerce a.remove { display: block; font-size: 1.5em; width: 1em;
   height: 1em; border-radius: 100%; font-weight: 700;
   color: var(--wc-red) !important } */
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item a.remove_from_cart_button {
	display: inline-flex;
	width: var(--cesta-lixeira);
	height: var(--cesta-lixeira);
	font-size: var(--cesta-lixeira-glifo);
	font-weight: var(--cdm-peso-normal);
	line-height: 1;
	border-radius: var(--cdm-raio-sm);
	color: var(--cdm-texto-apagado) !important;
}

.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item a.remove_from_cart_button:hover,
.cdm-cesta ul.cdm-cesta__lista li.cdm-cesta__item a.remove_from_cart_button:focus-visible {
	color: var(--cdm-vermelho) !important;
}

/* O glifo carrega o font-size do próprio .cdm-icone (20px) e não herda o do
   link — sem esta linha a lixeira continua grande em qualquer página. */
.cdm-cesta__item a.remove_from_cart_button .cdm-icone {
	font-size: var(--cesta-lixeira-glifo);
}

/* .woocommerce a.button { padding: .618em 1em; border-radius: 3px;
   background-color: #e9e6ed; color: #515151 } — apagava o botão de pagar. */
.cdm-cesta .cdm-cesta__rodape p.cdm-cesta__botoes a.cdm-cesta__botao--ir {
	padding: var(--cdm-e-3) var(--cdm-e-5);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-semi);
	line-height: 1.25;
	color: var(--cdm-branco);
	background-color: var(--cdm-verde-comprar);
	border: 1px solid var(--cdm-verde-comprar);
	border-radius: var(--cdm-raio-cheio);
}

.cdm-cesta .cdm-cesta__rodape p.cdm-cesta__botoes a.cdm-cesta__botao--ir:hover,
.cdm-cesta .cdm-cesta__rodape p.cdm-cesta__botoes a.cdm-cesta__botao--ir:focus-visible {
	background-color: var(--cdm-verde-comprar-fundo);
	border-color: var(--cdm-verde-comprar-fundo);
}

/* ==========================================================================
   Entrar
   ========================================================================== */

.cdm-entrar {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-5);
	padding: var(--cdm-e-4);
	overflow-y: auto;
}

p.cdm-entrar__texto {
	margin: 0;
	color: var(--cdm-texto-fraco);
	line-height: var(--cdm-altura-normal);
}

.cdm-entrar form.woocommerce-form-login .form-row {
	margin: 0 0 var(--cdm-e-4);
	padding: 0;
}

.cdm-entrar form.woocommerce-form-login label {
	display: block;
	margin-bottom: var(--cdm-e-1);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

.cdm-entrar form.woocommerce-form-login label.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: var(--cdm-e-2);
	align-items: center;
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto);
}

.cdm-entrar button.woocommerce-form-login__submit {
	width: 100%;
	padding: var(--cdm-e-3) var(--cdm-e-5);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul-escuro);
	background: var(--cdm-amarelo);
	border: 1px solid var(--cdm-amarelo);
	border-radius: var(--cdm-raio);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

.cdm-entrar button.woocommerce-form-login__submit:hover {
	background: var(--cdm-amarelo-escuro);
	border-color: var(--cdm-amarelo-escuro);
}

.cdm-entrar .lost_password {
	margin: var(--cdm-e-2) 0 0;
	font-size: var(--cdm-t-sm);
}

.cdm-entrar .lost_password a {
	color: var(--cdm-link);
}

.cdm-entrar__cadastro {
	padding-top: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
	text-align: center;
}

.cdm-entrar__cadastro p {
	margin: 0 0 var(--cdm-e-3);
	color: var(--cdm-texto-fraco);
}

/* O global/form-login.php do core marca usuário/senha como first/last (lado a
   lado); num painel de 22rem cada campo fica com 10rem — empilha tudo. */
.cdm-entrar form.woocommerce-form-login .form-row-first,
.cdm-entrar form.woocommerce-form-login .form-row-last {
	float: none;
	width: 100%;
}

/* ==========================================================================
   Entrar por código (plugin Checkout CDM)
   --------------------------------------------------------------------------
   Mora aqui (e não em conta.css) porque a gaveta de login existe em todas as
   páginas, e conta.css só é enfileirado em /minha-conta/. Vem
   ANTES do formulário de senha porque é o caminho de quem não lembra e-mail
   nem senha — o motivo nº 1 de abandono relatado pelo televendas.
   ========================================================================== */

.cdm-otp--acesso {
	display: grid;
	gap: var(--cdm-e-3);
	margin-bottom: var(--cdm-e-5);
	padding: var(--cdm-e-5);
	border: 1px solid var(--cdm-azul);
	border-radius: var(--cdm-raio);
	background: var(--cdm-azul-claro);
}

.cdm-otp--acesso .cdm-otp__passo[hidden] {
	display: none;
}

.cdm-otp--acesso .cdm-otp__passo {
	display: grid;
	gap: var(--cdm-e-3);
}

.cdm-otp--acesso p.cdm-otp__titulo {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-otp--acesso p.cdm-otp__titulo--ok {
	color: var(--cdm-verde-escuro);
}

.cdm-otp--acesso p.cdm-otp__texto {
	margin: 0;
	font-size: var(--cdm-t-sm);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
}

label.cdm-otp__rotulo {
	margin: 0;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
}

input.cdm-otp__identificador {
	width: 100%;
	min-height: var(--cdm-alvo-toque);
	padding: var(--cdm-e-3);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	background: var(--cdm-branco);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	color: var(--cdm-texto);
}

input.cdm-otp__identificador:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 1px;
	border-color: var(--cdm-azul);
}

.cdm-otp--acesso button.cdm-otp__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	width: 100%;
	min-height: 3rem;
	padding: var(--cdm-e-3) var(--cdm-e-4);
	border: 0;
	border-radius: var(--cdm-raio);
	background: var(--cdm-azul);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-branco);
	cursor: pointer;
}

.cdm-otp--acesso button.cdm-otp__botao[data-canal="whatsapp"] {
	background: var(--cdm-whatsapp);
}

.cdm-otp--acesso button.cdm-otp__botao--email {
	background: var(--cdm-superficie);
	color: var(--cdm-azul);
	border: 1px solid var(--cdm-azul);
}

.cdm-otp--acesso input.cdm-otp__codigo {
	width: 100%;
	min-height: 3.5rem;
	padding: var(--cdm-e-2);
	border: 2px solid var(--cdm-azul);
	border-radius: var(--cdm-raio);
	background: var(--cdm-branco);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xl);
	font-weight: var(--cdm-peso-forte);
	letter-spacing: .5em;
	text-align: center;
	color: var(--cdm-azul);
}

.cdm-otp--acesso p.cdm-otp__aviso {
	margin: 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-fraco);
}

.cdm-otp--acesso p.cdm-otp__aviso--erro {
	color: var(--cdm-vermelho);
	font-weight: var(--cdm-peso-medio);
}

.cdm-otp--acesso p.cdm-otp__alternativas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-3);
	margin: 0;
}

.cdm-otp--acesso .cdm-otp__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-link);
	text-decoration: underline;
	cursor: pointer;
}

.cdm-otp--acesso .cdm-otp__link[disabled] {
	color: var(--cdm-texto-apagado);
	text-decoration: none;
	cursor: default;
}

.cdm-otp--acesso .cdm-otp__link[hidden] {
	display: none;
}