/* ============================================================
 * DROPE — Checkout em etapas (wizard)
 *
 * Camada sobre edd-checkout.css: mesmos tokens --ck-*, mesmo campo neutro,
 * laranja só na ação principal. NADA aqui esconde coisa alguma sozinho —
 * todas as classes de estado (.ckw-*) são aplicadas pelo JS. Sem JavaScript,
 * o checkout continua o de página única, inteiro e funcional.
 * ============================================================ */

/* ---------- O que o wizard esconde ---------- */

/* Elemento fora da etapa atual. O !important vence os displays próprios dos
 * fieldsets do bloco do EDD sem depender de especificidade. */
.ckw-off {
	display: none !important;
}

/* Campos de endereço preenchidos pelo CEP: ocultos por padrão quando o
 * wizard assume; a falha do ViaCEP devolve a visibilidade (o JS remove a
 * classe) para preencher à mão. */
.ckw-auto {
	display: none !important;
}

/* O indicador estático de 3 etapas do cabeçalho dá lugar ao navegador vivo. */
.ckw-on .ck-steps {
	display: none;
}

/* ---------- Nome completo + telefone na mesma linha ---------- */

/* O wizard troca Nome/Sobrenome por um campo único (o JS sincroniza
 * edd_first/edd_last por baixo). No grid do CFM ele ocupa a coluna 1 e o
 * telefone sobe para a coluna 2, fechando a etapa 1 numa linha só. */
.ckw-on #edd_checkout_user_info .ckw-nome-wrap {
	grid-column: 1;
}

.ckw-on #edd_checkout_user_info .cfm-el.phone {
	grid-column: 2;
}

/* Sem o telefone ao lado (ele mora na etapa 1), o CPF esticaria só a
 * coluna 2; na etapa de cobrança ele vira linha inteira, como o e-mail. */
.ckw-on #edd_checkout_user_info .cfm-el.cpf {
	grid-column: 1 / -1;
}

/* ---------- Navegação das etapas ---------- */

.ckw-nav {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	margin: 2px auto 26px;
	padding: 0;
	list-style: none;
	max-width: 560px;
}

.ckw-nav li {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

/* O fio que liga as bolinhas. */
.ckw-nav li + li::before {
	content: '';
	position: absolute;
	top: 15px;
	right: calc(50% + 22px);
	left: calc(-50% + 22px);
	height: 2px;
	background: var(--ck-line);
	border-radius: 2px;
	transition: background-color .25s ease;
}

.ckw-nav li.is-done + li::before {
	background: var(--ck-brand);
}

.ckw-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--ck-line);
	border-radius: 50%;
	background: var(--ck-surface);
	color: var(--ck-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.ckw-nav li.is-now .ckw-dot {
	border-color: var(--ck-brand);
	color: var(--ck-brand-ink);
	box-shadow: 0 0 0 4px var(--ck-brand-tint);
}

.ckw-nav li.is-done .ckw-dot {
	border-color: var(--ck-brand);
	background: var(--ck-brand);
	color: #fff;
}

.ckw-dot svg {
	width: 14px;
	height: 14px;
}

.ckw-rotulo {
	max-width: 110px;
	color: var(--ck-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

.ckw-nav li.is-now .ckw-rotulo {
	color: var(--ck-ink);
}

.ckw-nav li.is-done .ckw-rotulo {
	color: var(--ck-ink-2);
}

/* Etapa concluída é clicável para voltar. */
.ckw-nav li.is-done {
	cursor: pointer;
}

@media (max-width: 600px) {
	.ckw-rotulo {
		font-size: 11px;
		max-width: 76px;
	}
}

/* ---------- Painel da etapa ---------- */

/* Entrada suave a cada troca — o JS re-aplica a classe para re-disparar. */
@keyframes ckw-entra {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ckw-anim {
	animation: ckw-entra .22s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.ckw-anim {
		animation: none;
	}
}

/* ---------- Rodapé de navegação (Continuar / Voltar) ---------- */

.ckw-acoes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

/* Especificidade proposital (.ckw-on + button + classe): os estilos globais
 * de botão do kit do Elementor pintam button:hover/:focus de magenta e
 * venceriam uma classe sozinha — o Continuar fica focado após o clique. */
.ckw-on button.ckw-continuar,
.ckw-on button.ckw-continuar:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--ck-r);
	background: var(--ck-brand);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
	box-shadow: 0 1px 2px rgba(255, 126, 1, .3);
}

.ckw-on button.ckw-continuar:hover,
.ckw-on button.ckw-continuar:focus:hover {
	background: var(--ck-brand-hover);
	color: #fff;
	box-shadow: 0 6px 18px rgba(255, 126, 1, .28);
}

.ckw-on button.ckw-continuar:active {
	background: var(--ck-brand-hover);
	color: #fff;
	transform: scale(.99);
}

/* Consultando o servidor (disponibilidade de e-mail/usuário): o botão espera. */
.ckw-on button.ckw-continuar:disabled,
.ckw-on button.ckw-continuar.ckw-verificando {
	opacity: .55;
	cursor: wait;
	transform: none;
	box-shadow: none;
}

.ckw-continuar svg {
	width: 16px;
	height: 16px;
}

.ckw-on button.ckw-voltar,
.ckw-on button.ckw-voltar:focus {
	align-self: center;
	border: 0;
	background: none;
	padding: 4px 8px;
	color: var(--ck-muted);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color .16s ease;
}

.ckw-on button.ckw-voltar:hover,
.ckw-on button.ckw-voltar:active {
	background: none;
	color: var(--ck-ink);
}

/* ---------- Validação inline ---------- */

.ckw-err {
	display: block;
	margin-top: 6px;
	color: var(--ck-danger);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
}

.ckw-campo-erro,
input.ckw-campo-erro.edd-input {
	border-color: var(--ck-danger) !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 28, .08) !important;
}

/* ---------- CEP resolvido ---------- */

/* Os avisos do CEP são filhos diretos do grid de cobrança: linha inteira,
 * DEPOIS dos campos — os grupos do fieldset têm order 1..6, então sem um
 * order alto o alerta cairia na primeira linha do grid. */
#edd_cc_address .ckw-cep-ok,
#edd_cc_address .ckw-cep-aviso {
	grid-column: 1 / -1;
	order: 99;
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Mobile: formulário antes do carrinho ---------- */

/* Empilhado, o CSS base dá order:-1 ao carrinho de propósito (checkout de
 * página única). Com o wizard ativo a ordem inverte: cabeçalho, etapas +
 * campos, e o resumo do carrinho por último. Sem JS nada muda. */
@media (max-width: 781px) {
	.ckw-on #edd_checkout_form_wrap > .edd-blocks__purchase-form {
		order: -1;
	}

	.ckw-on #edd_checkout_form_wrap > .edd-blocks__cart {
		order: 1;
	}
}

/* Card de confirmação, no espírito de um alerta de sucesso do Bootstrap:
 * fundo tingido, borda 1px, sem sombra. */
.ckw-cep-ok {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid rgba(21, 127, 88, .35);
	border-radius: 8px;
	background: rgba(21, 127, 88, .08);
	color: var(--ck-ok);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.ckw-cep-ok svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.ckw-cep-aviso {
	display: block;
	margin-top: 8px;
	color: var(--ck-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ---------- Miudezas ---------- */

/* Erros do servidor (EDD) sempre visíveis, em qualquer etapa. */
.ckw-on .edd_errors {
	display: block !important;
}