/**
 * Devsite Hub Ecommerce — Base do frontend de checkout (tokens, reset, cabeçalho e rodapé de confiança).
 *
 * Partes REUTILIZÁVEIS extraídas de `checkout.css` / `checkout-page.css` para poderem ser carregadas sozinhas (ex.: no Formulário
 * de Aptidão, que usa o mesmo cabeçalho e o mesmo rodapé do Carrinho/Checkout sem trazer o checkout inteiro):
 *   1. tokens `--wbrsc-*`, reset localizado, `.dshe-container` (escopo `.dshe-frontend`);
 *   2. cabeçalho (`.dshe-co-header`: logo, passos, selo de segurança) e seus ajustes responsivos;
 *   3. rodapé de confiança (`.dshe-co-socialproof`: Prova social + selos, configurado em Templates › Checkout);
 *   4. `.dshe-co-chrome` / `.dshe-co-footer`: invólucros usados fora das páginas de loja (Formulário de Aptidão).
 * Handle: `dshe-checkout-base` ({@see DSHE_Frontend::register_base_style()}); `checkout.css` depende dele.
 * Todo o CSS é escopado sob `.dshe-frontend` para não vazar para o tema.
 *
 * @package Devsite_Hub_Ecommerce
 */

/* Isolamento contra o CSS do tema/Elementor: neutraliza regras globais de `svg`
 * (ex.: `svg{width:100%}`) sem !important. SVGs inline com atributos width/height
 * voltam a usar o tamanho do atributo (width/height:auto). Os ícones da webfont (`.dsh-i`) seguem o
 * `font-size` do contexto (regras abaixo). */
.dshe-frontend svg {
	width: auto;
	height: auto;
	max-width: 100%;
	box-sizing: content-box;
	vertical-align: middle;
}

/* Ícones da webfont DSH (FontAwesome 7 Pro) — escopo frontend. */
.dshe-frontend .dsh-i {
	font-size: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

/* ============================================================
 * Tokens (escopados)
 * `body.dshe-fitness-page` (Formulário de Aptidão, classe via `body_class`) recebe os mesmos tokens para o CSS do formulário
 * (`dshe-fitness-form.css`) herdar a paleta e as fontes do cabeçalho.
 * ============================================================ */
.dshe-frontend,
body.dshe-fitness-page {
	--wbrsc-blue-950: #0B1E44;
	--wbrsc-blue-900: #102A5C;
	--wbrsc-blue-800: #16346F;
	--wbrsc-blue-700: #1E4494;
	--wbrsc-blue-100: #E3EAF7;
	--wbrsc-blue-50: #F2F6FC;

	--wbrsc-orange-600: #C96F06;
	--wbrsc-orange-500: #E5830D;
	--wbrsc-orange-100: #FCEBD3;
	--wbrsc-orange-50: #FEF6EA;

	--wbrsc-green: #199A6A;
	--wbrsc-green-wpp: #25D366;

	--wbrsc-ink-900: #131A26;
	--wbrsc-ink-700: #3A4557;
	--wbrsc-ink-500: #647082;
	--wbrsc-ink-300: #A6B0C0;

	--wbrsc-bg-page: #F6F8FC;
	--wbrsc-bg-card: #FFFFFF;
	--wbrsc-line: #E5EAF2;
	--wbrsc-star: #F5A623;

	--wbrsc-font-display: "Sora", sans-serif;
	--wbrsc-font-body: "Plus Jakarta Sans", sans-serif;

	--wbrsc-radius-sm: 10px;
	--wbrsc-radius-md: 16px;
	--wbrsc-radius-lg: 24px;
	--wbrsc-radius-pill: 999px;

	--wbrsc-shadow-soft: 0 6px 24px -8px rgba(16, 42, 92, 0.10);
	--wbrsc-shadow-card: 0 10px 32px -10px rgba(16, 42, 92, 0.14);
	--wbrsc-shadow-lift: 0 18px 44px -12px rgba(16, 42, 92, 0.22);

	--wbrsc-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
	--wbrsc-container: 1240px;

	font-family: var(--wbrsc-font-body);
	color: var(--wbrsc-ink-900);
}

/* Quando o wrapper de página do plugin está ativo, o body assume o fundo. */
body.dshe-frontend {
	margin: 0;
	background: var(--wbrsc-bg-page);
}

/* ============================================================
 * Reset localizado
 * ============================================================ */
.dshe-frontend *,
.dshe-frontend *::before,
.dshe-frontend *::after {
	box-sizing: border-box;
}

.dshe-frontend img {
	max-width: 100%;
	display: block;
}

.dshe-frontend a {
	color: inherit;
	text-decoration: none;
}

.dshe-frontend h1,
.dshe-frontend h2,
.dshe-frontend h3 {
	font-family: var(--wbrsc-font-display);
	margin: 0;
}

.dshe-container {
	width: 100%;
	max-width: var(--wbrsc-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ============================================================
 * Cabeçalho do checkout (co-header) + passos
 * ============================================================ */
.dshe-co-header {
	background: #fff;
	border-bottom: 1px solid var(--wbrsc-line);
	position: sticky;
	top: 0;
	z-index: 30;
}

body.admin-bar .dshe-co-header {
	top:32px;
}
@media (max-width: 782px){
	body.admin-bar .dshe-co-header {
		top:0px;
	}
}

/* Compensa a altura da admin bar do WordPress quando presente. */
/*
body.admin-bar .dshe-co-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .dshe-co-header {
		top: 46px;
	}
}
*/

.dshe-co-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
}

.dshe-co-logo img,
.dshe-co-logo .dshe-co-logo-img {
	display: block;
	height: 50px;
	max-height: 50px;
	width: auto;
}

.dshe-co-logo--text {
	font-family: var(--wbrsc-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--wbrsc-blue-900);
}

.dshe-co-secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #DDF3EA91;
	color: var(--dsh-shop-secure, #199a6a);
	border-radius: var(--wbrsc-radius-pill);
	padding: 8px 16px;
	font-weight: 700;
	font-size: 0.82rem;
	border: 1px solid #199A6A17;
}

.dshe-co-secure svg {
	color: var(--dsh-shop-secure, #199a6a);
}

/* Passos */
.dshe-co-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
}

.dshe-co-steps .dshe-cstep {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wbrsc-ink-300);
}

.dshe-co-steps .dshe-cstep .dshe-cstep-box {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 2px solid var(--wbrsc-line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dshe-co-steps .dshe-cstep.is-done {
	color: var(--wbrsc-ink-300);
}

.dshe-co-steps .dshe-cstep.is-done .dshe-cstep-box {
	background: var(--dsh-shop-step-done, #199a6a);
	border-color: var(--dsh-shop-step-done, #199a6a);
	color: #fff;
	opacity: .5;
}

.dshe-co-steps .dshe-cstep.is-current {
	color: var(--wbrsc-blue-900);
}

.dshe-co-steps .dshe-cstep.is-current .dshe-cstep-box {
	border-color: var(--dsh-shop-step-current, #16346f);
}

.dshe-co-steps .dshe-cstep.is-current .dshe-cstep-box::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--dsh-shop-step-current, #16346f);
}

.dshe-co-steps .dshe-cstep-sep {
	width: 26px;
	height: 2px;
	background: var(--wbrsc-line);
	border-radius: 2px;
}

@media (max-width: 860px) {
	.dshe-co-header-inner {
		flex-wrap: wrap;
		gap: 12px;
	}

	.dshe-co-steps {
		order: 3;
		width: 100%;
		justify-content: center;
	}

	.dshe-co-steps .dshe-cstep .dshe-cstep-label {
		display: none;
	}

	.dshe-co-steps .dshe-cstep.is-current .dshe-cstep-label {
		display: inline;
	}
}

/* ============================================================
 * Header (carrinho/checkout/obrigado) — responsivo mais compacto
 * ============================================================ */
@media (max-width: 860px) {
	.dshe-co-header-inner {
		padding: 12px 14px;
		gap: 10px;
	}

	.dshe-co-logo img,
	.dshe-co-logo .dshe-co-logo-img {
		height: 34px;
		max-height: 34px;
	}

	.dshe-co-secure {
		padding: 6px 10px;
		font-size: 0.72rem;
	}

	.dshe-co-secure .dsh-i {
		font-size: 14px;
}

	.dshe-co-steps {
		gap: 6px;
	}
}

@media (max-width: 480px) {
	.dshe-co-header-inner {
		gap: 8px;
	}

	.dshe-co-logo img,
	.dshe-co-logo .dshe-co-logo-img {
		height: 30px;
		max-height: 30px;
	}

	.dshe-co-secure {
		padding: 5px 9px;
		font-size: 0.68rem;
		gap: 5px;
	}
}

/* ============================================================
 * Header (carrinho / checkout / pedido realizado) — disposição em telas menores
 * Uma linha só: logo à esquerda, passos no centro, selo de segurança à direita. Antes os passos caíam para uma
 * segunda linha e o respiro lateral ficava menor que o do conteúdo.
 * ============================================================ */
@media (max-width: 860px) {
	.dshe-frontend .dshe-co-header-inner {
		flex-wrap: nowrap;
		gap: 12px;
		padding: 10px 16px;
	}

	.dshe-frontend .dshe-co-logo {
		flex: 0 0 auto;
		line-height: 0;
	}

	.dshe-frontend .dshe-co-steps {
		order: 0;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		justify-content: center;
		gap: 6px;
	}

	.dshe-frontend .dshe-co-steps .dshe-cstep-label {
		white-space: nowrap;
	}

	.dshe-frontend .dshe-co-secure {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Estreito: o selo vira só o ícone (o texto fica no title) para os passos caberem na mesma linha. */
@media (max-width: 640px) {
	.dshe-frontend .dshe-co-secure-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.dshe-frontend .dshe-co-secure {
		width: 34px;
		height: 34px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.dshe-frontend .dshe-co-secure .dsh-i {
		font-size: 16px;
	}
}

/* Muito estreito: só as caixas dos passos (sem o rótulo do passo atual). */
@media (max-width: 400px) {
	.dshe-frontend .dshe-co-header-inner {
		gap: 8px;
		padding: 10px 12px;
	}

	.dshe-frontend .dshe-co-steps .dshe-cstep.is-current .dshe-cstep-label {
		display: none;
	}
}

/* Celular (até 640px): a barra de passos some do cabeçalho; ficam o logo à esquerda e o selo de segurança (só o ícone; o texto
   continua acessível) à direita. */
@media (max-width: 640px) {
	.dshe-frontend .dshe-co-steps {
		display: none;
	}

	.dshe-frontend .dshe-co-header-inner {
		justify-content: space-between;
	}

	.dshe-frontend .dshe-co-secure .dsh-i {
		font-size: 16px;
	}
}

/* Logo do cabeçalho maior nas telas menores (sem a barra de passos sobra espaço). */
@media (max-width: 860px) {
	.dshe-frontend .dshe-co-logo img,
	.dshe-frontend .dshe-co-logo .dshe-co-logo-img {
		height: 44px;
		max-height: 44px;
	}
}

@media (max-width: 480px) {
	.dshe-frontend .dshe-co-logo img,
	.dshe-frontend .dshe-co-logo .dshe-co-logo-img {
		height: 40px;
		max-height: 40px;
	}
}

/* ============================================================
 * Cabeçalho — respiro lateral e passos reduzidos
 * O `padding: 14px 0` do cabeçalho zerava o respiro lateral do contêiner e o conteúdo encostava nas bordas em
 * telas intermediárias. Agora há sempre 24px de cada lado (16px no celular).
 * ============================================================ */
.dshe-frontend .dshe-co-header-inner {
	padding-left: 24px;
	padding-right: 24px;
}

/* Abaixo de 1024px: só o passo ATUAL (caixa + rótulo); os outros passos e os separadores somem. */
@media (max-width: 1023px) {
	.dshe-frontend .dshe-co-steps .dshe-cstep:not(.is-current),
	.dshe-frontend .dshe-co-steps .dshe-cstep-sep {
		display: none;
	}

	.dshe-frontend .dshe-co-steps .dshe-cstep.is-current .dshe-cstep-label {
		display: inline;
		white-space: nowrap;
	}
}

@media (max-width: 860px) {
	.dshe-frontend .dshe-co-header-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 560px) {
	.dshe-frontend .dshe-co-header-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ============================================================
 * Cabeçalho com título (Formulário de Aptidão: `partials/header-steps` com `title`)
 * Logo à esquerda, título centralizado, selo de segurança à direita. No celular o título desce para uma segunda linha
 * (logo e selo continuam na primeira).
 * ============================================================ */
/* Com título: grade 0.3fr 0.6fr 0.3fr (logo à esquerda, título ao centro, selo no fim). */
.dshe-frontend .dshe-co-header.has-title .dshe-co-header-inner {
	display: grid;
	grid-template-columns: 0.3fr 0.6fr 0.3fr;
	align-items: center;
	column-gap: 16px;
}

.dshe-frontend .dshe-co-header.has-title .dshe-co-logo {
	justify-self: start;
}

.dshe-frontend .dshe-co-header.has-title .dshe-co-secure {
	justify-self: end;
}

.dshe-frontend .dshe-co-header .dshe-co-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: center;
	font-family: var(--wbrsc-font-display);
	font-weight: 700;
	font-size: clamp(1rem, 0.86rem + 0.7vw, 1.4rem);
	line-height: 1.25;
	color: var(--wbrsc-blue-900);
	text-wrap: balance;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 640px) {
	.dshe-frontend .dshe-co-header.has-title .dshe-co-header-inner {
		grid-template-columns: 1fr auto;
		row-gap: 6px;
		padding-top: 10px;
		padding-bottom: 12px;
	}

	.dshe-frontend .dshe-co-header .dshe-co-title {
		order: 3;
		grid-column: 1 / -1;
		font-size: 0.85rem;
    padding-top: 12px;
		border-top: 1px solid var(--wbrsc-line);
	}
}

/* ============================================================
 * Prova social
 * ============================================================ */
.dshe-co-socialproof { 
	text-align: center; 
	padding: 26px 12px 4px;
	display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  gap: 8px; 
}
.dshe-co-socialproof .dshe-sp-main { font-size: 0.92rem; background: var(--dsh-foot1-bg, #f6f8fc); color: var(--dsh-foot1-text, #3a4557); }
.dshe-sp-stars { color: var(--dsh-foot1-stars, #f5a623); letter-spacing: 1px; }
.dshe-co-socialproof .dshe-sp-main strong { color: var(--dsh-foot1-strong, #102a5c); }
.dshe-sp-sep { color: var(--wbrsc-ink-300); margin: 0 7px; }
.dshe-sp-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 0.8rem; background: var(--dsh-foot2-bg, #f6f8fc); color: var(--dsh-foot2-text, #647082); }
.dshe-sp-trust span { display: inline-flex; align-items: center; gap: 6px; }
.dshe-sp-trust svg { color: var(--dsh-foot2-icon, #199a6a); }

/* ============================================================
 * Invólucros fora das páginas de loja (Formulário de Aptidão)
 * `.dshe-co-chrome` não gera caixa (display: contents): o cabeçalho continua "colado" no topo da página, e o escopo
 * `.dshe-frontend` (tokens e reset) vale só dentro dele, sem tocar no resto da página do Elementor.
 * ============================================================ */
.dshe-frontend.dshe-co-chrome {
	display: contents;
}

.dshe-frontend .dshe-co-footer {
	background: var(--wbrsc-bg-page);
	border-top: 1px solid var(--wbrsc-line);
	padding: 8px 0 32px;
}