/* ============================================================
   Stone Scan - camada de DESIGN do checkout
   ------------------------------------------------------------
   Separado de checkout.css de proposito: aquele arquivo cuida de
   comportamento (esconder pais, honeypot, estado de erro). Este
   cuida so de aparencia, e pode ser removido inteiro sem quebrar
   nenhuma regra de negocio.

   Os valores abaixo nao foram escolhidos a olho: foram lidos dos
   estilos computados da home do proprio site.
     navy   #042245  titulos
     teal   #4CABB4  acao
     teal-  #0A656C  inicio do gradiente dos botoes
     nevoa  #F3F7FA  fundo de apoio
     fonte  Poppins, titulo peso 300, corpo 400
     botao  pilula de 50px com gradiente -145deg
   ============================================================ */

.woocommerce-checkout {
	--ssb-navy: #042245;
	--ssb-teal: #4cabb4;
	--ssb-teal-esc: #0a656c;
	--ssb-nevoa: #f3f7fa;
	--ssb-linha: #dce6ee;
	--ssb-texto: #333;
	--ssb-suave: #5a6b7c;
	--ssb-erro: #b32d2e;
	--ssb-raio: 16px;
	--ssb-raio-campo: 12px;
	--ssb-fonte: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ------------------------------------------------ cabecalho e rodape */

/* O logo gigante do Hello (header + footer) e tratado em marca.css:
   o cabecalho vira uma barra fina e o rodape, a faixa azul da home. */

/* O Hello limita o conteudo a 1140px; o layout de duas colunas (lateral
   + formulario) precisa de toda essa largura. O seletor copia o do Hello,
   senao o max-width dele vence. */
body.woocommerce-checkout:not([class*=elementor-page-]) .site-main {
	max-width: 1180px;
	width: 100%;
	padding: 48px 24px 0;
}

.woocommerce-checkout .entry-title {
	margin: 0 0 32px;
	font-family: var(--ssb-fonte);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 300;
	letter-spacing: -1px;
	color: var(--ssb-navy);
}

@media (max-width: 767px) {
	body.woocommerce-checkout:not([class*=elementor-page-]) .site-main {
		padding: 28px 16px 0;
	}
}

/* ------------------------------------------------ base tipografica */

.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout input,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout button,
.woocommerce-checkout .woocommerce-notices-wrapper {
	font-family: var(--ssb-fonte);
}

.woocommerce-checkout form.checkout h3,
.woocommerce-checkout form.checkout h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--ssb-fonte);
	font-weight: 300;          /* a home usa 300 nos titulos */
	color: var(--ssb-navy);
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.2px;
	margin: 0 0 20px;
}

/* ------------------------------------------------ as duas colunas */

/* O tema traz clearfix (::before/::after com content) nesses containers.
   Em display:grid cada pseudo vira um ITEM e ocupa celula: com 2 colunas,
   o ::before tomava a celula 1 e empurrava a coluna 1 para a direita. */
.woocommerce-checkout form.checkout .col2-set::before,
.woocommerce-checkout form.checkout .col2-set::after,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::before,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after {
	content: none;
}

.woocommerce-checkout form.checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: 100%;
	margin: 0 0 24px;
}

/* o tema base ainda aplica float/width nas colunas; no grid isso atrapalha */
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--ssb-linha);
	border-radius: var(--ssb-raio);
	box-shadow: 0 2px 10px rgba(4, 34, 69, 0.04);
}

/* ------------------------------------------------ campos */

/* Nome/Sobrenome e CEP/Numero vinham em float de 47%. Em grid o
   alinhamento para de depender de clearfix e some o risco de campo
   escapando da coluna. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.woocommerce-checkout form.checkout .form-row {
	float: none !important;
	width: auto !important;
	padding: 0;
	margin: 0 0 16px;
	grid-column: 1 / -1;
}

.woocommerce-checkout form.checkout .form-row-first {
	grid-column: 1;
}

.woocommerce-checkout form.checkout .form-row-last {
	grid-column: 2;
}

.woocommerce-checkout form.checkout .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--ssb-navy);
	letter-spacing: 0.2px;
	margin-bottom: 6px;
}

.woocommerce-checkout form.checkout .form-row .required,
.woocommerce-checkout form.checkout .form-row abbr.required {
	color: var(--ssb-teal);
	border: 0;
	text-decoration: none;
}

.woocommerce-checkout form.checkout .form-row .optional {
	color: var(--ssb-suave);
	font-weight: 400;
}

.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 15px;
	color: var(--ssb-texto);
	background: #fff;
	border: 1px solid var(--ssb-linha);
	border-radius: var(--ssb-raio-campo);
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce-checkout form.checkout textarea {
	min-height: 110px;
	padding-top: 12px;
	resize: vertical;
}

.woocommerce-checkout form.checkout .input-text::placeholder,
.woocommerce-checkout form.checkout textarea::placeholder {
	color: #9aabb8;
}

.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout select:focus,
.woocommerce-checkout form.checkout textarea:focus {
	outline: 0;
	border-color: var(--ssb-teal);
	box-shadow: 0 0 0 3px rgba(76, 171, 180, .18);
}

/* o campo de data ja tinha min-height no checkout.css; aqui so o resto */
.woocommerce-checkout form.checkout #billing_birthdate {
	min-height: 48px;
}

.woocommerce-checkout form.checkout .woocommerce-input-wrapper {
	width: 100%;
}

/* caixinhas de marcar */
.woocommerce-checkout form.checkout .form-row.checkbox label,
.woocommerce-checkout form.checkout label.checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	color: var(--ssb-texto);
	cursor: pointer;
}

.woocommerce-checkout form.checkout input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	accent-color: var(--ssb-teal);
	margin: 0;
}

/* ----- aceite do Termo de Consentimento ----- */

/* A regra geral acima centraliza a caixinha no meio do rotulo, e isso cai
   bem no "Nao uso nenhum medicamento", que tem uma linha so. O aceite do
   Termo tem tres: centralizado, a caixinha flutua no meio do paragrafo, longe
   da primeira palavra. Aqui ela sobe para a linha inicial. */
.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper label.checkbox {
	align-items: flex-start;
	line-height: 1.55;
}

.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	/* Alinha o centro da caixinha com o centro da primeira linha de texto. */
	margin-top: 2px;
	flex: 0 0 auto;
}

/* O `<abbr class="required">*` e o terceiro filho do flex, entao ia parar na
   ponta direita, orfao, a dois dedos do texto. Como o aceite e obrigatorio por
   definicao — sem ele nao ha pedido — o asterisco nao informa nada e so suja. */
.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper label.checkbox .required {
	display: none;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-link {
	color: var(--ssb-teal-esc);
	font-weight: 500;
}

.woocommerce-checkout .ssb-aviso {
	color: var(--ssb-suave);
}

.woocommerce-checkout .ssb-aviso--erro {
	color: var(--ssb-erro);
}

/* bloco do medico solicitante, que o plugin injeta */
.woocommerce-checkout #ssb-bloco-medico {
	margin-top: 0;
}

.woocommerce-checkout #ssb-bloco-medico h3 {
	margin-bottom: 20px;
}

/* ------------------------------------------------ resumo do pedido */

.woocommerce-checkout #order_review_heading {
	margin-top: 8px;
}

.woocommerce-checkout #order_review {
	padding: 28px 26px;
	background: var(--ssb-nevoa);
	border: 1px solid var(--ssb-linha);
	border-radius: var(--ssb-raio);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 22px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 15px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--ssb-linha);
	background: transparent;
	color: var(--ssb-texto);
	vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--ssb-suave);
	padding-bottom: 10px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	padding-top: 16px;
	font-size: 18px;
	font-weight: 500;
	color: var(--ssb-navy);
}

.woocommerce-checkout .woocommerce-Price-amount {
	font-weight: 500;
	color: var(--ssb-navy);
}

/* ------------------------------------------------ pagamento */

/* o padrao do WooCommerce vem com um lilas (rgba(129,110,153,.14))
   que nao existe na marca */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
	background: #fff;
	border: 1px solid var(--ssb-linha);
	border-radius: var(--ssb-raio-campo);
	padding: 4px 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 18px 20px;
	border-bottom: 1px solid var(--ssb-linha);
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	margin: 0 0 10px;
	font-size: 15px;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--ssb-nevoa);
	border-radius: 10px;
	color: var(--ssb-suave);
	font-size: 14px;
	line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--ssb-nevoa);
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 20px;
	margin: 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 14px;
	font-size: 14px;
}

/* ------------------------------------------------ botao principal */

.woocommerce-checkout #place_order,
.woocommerce-checkout form.checkout button.button.alt {
	display: block;
	width: 100%;
	max-width: 420px;          /* sem teto virava uma pilula de 1044px */
	/* o woocommerce-layout.css poe float:right aqui, e com float a margem
	   auto resolve para zero. Tirando o float, o botao fica alinhado a
	   direita pela margem - no mesmo eixo do total, que tambem e a direita. */
	float: none;
	margin-left: auto;
	margin-right: 0;
	padding: 17px 40px;
	font-family: var(--ssb-fonte);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	letter-spacing: .2px;
	background-color: transparent;
	background-image: linear-gradient(-145deg, var(--ssb-teal-esc) 0%, var(--ssb-teal) 100%);
	border: 0;
	border-radius: 50px;              /* a pilula que a home usa */
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	box-shadow: 0 6px 18px rgba(10, 101, 108, .22);
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout form.checkout button.button.alt:hover {
	background-image: linear-gradient(-145deg, var(--ssb-teal-esc) 0%, var(--ssb-teal) 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(10, 101, 108, .3);
	filter: brightness(1.04);
}

.woocommerce-checkout #place_order:focus-visible {
	outline: 3px solid rgba(76, 171, 180, .45);
	outline-offset: 2px;
}

.woocommerce-checkout #place_order:disabled,
.woocommerce-checkout #place_order[disabled] {
	opacity: .55;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}

/* ------------------------------------------------ avisos */

.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	font-family: var(--ssb-fonte);
	font-size: 14.5px;
	border-radius: var(--ssb-raio-campo);
	border: 1px solid var(--ssb-linha);
	border-top: 3px solid var(--ssb-teal);
	background: var(--ssb-nevoa);
	color: var(--ssb-texto);
}

.woocommerce-checkout .woocommerce-error {
	border-top-color: var(--ssb-erro);
}

.woocommerce-checkout .woocommerce-message .button,
.woocommerce-checkout .woocommerce-info .button {
	font-family: var(--ssb-fonte);
	font-size: 14px;
	border-radius: 50px;
	padding: 10px 22px;
	color: #fff;
	background: var(--ssb-teal);
	border: 0;
}

.woocommerce-checkout form.checkout .woocommerce-invalid .input-text,
.woocommerce-checkout form.checkout .woocommerce-invalid select {
	border-color: var(--ssb-erro);
}

.woocommerce-checkout form.checkout .woocommerce-validated .input-text {
	border-color: rgba(76, 171, 180, .55);
}

/* ------------------------------------------------ layout lateral + passos */

/* A estrutura (coluna explicativa + formulario em passos) vem de
   PainelLateral.php e checkout.js; o desenho basico, de checkout.css.
   Aqui ela recebe as cores e a tipografia da marca — checkout.css usava
   um azul (#0f2b46 / #6fb1f2) que nao existe na home. */

.woocommerce-checkout .ssb-layout {
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 32px;
}

/* ----- coluna explicativa ----- */

.woocommerce-checkout .ssb-lateral {
	padding: 36px 32px;
	background: var(--ssb-navy);
	color: rgba(255, 255, 255, .78);
	border-radius: var(--ssb-raio);
	font-family: var(--ssb-fonte);
}

.woocommerce-checkout form.checkout h2.ssb-lateral__titulo,
.woocommerce-checkout .ssb-lateral__titulo {
	margin: 0 0 22px;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -.5px;
	color: #fff;
}

.woocommerce-checkout .ssb-diagrama {
	margin: 0 0 26px;
	padding: 18px;
	box-sizing: border-box;
	color: var(--ssb-teal);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 12px;
	font-family: var(--ssb-fonte);
}

.woocommerce-checkout .ssb-lateral__texto {
	font-size: 14.5px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .78);
}

.woocommerce-checkout .ssb-lateral__texto strong {
	font-weight: 600;
	color: var(--ssb-teal);
}

.woocommerce-checkout .ssb-lateral__texto--forte {
	font-weight: 500;
	color: #fff;
}

.woocommerce-checkout .ssb-lateral__lista {
	border-top-color: rgba(255, 255, 255, .14);
}

.woocommerce-checkout .ssb-lateral__lista li {
	padding-left: 28px;
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

/* bolinha teal com visto, no lugar do ponto azul claro */
.woocommerce-checkout .ssb-lateral__lista li::before {
	left: 0;
	top: .15em;
	width: 18px;
	height: 18px;
	background: var(--ssb-teal);
}

.woocommerce-checkout .ssb-lateral__lista li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: calc(.15em + 5px);
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--ssb-navy);
	border-bottom: 2px solid var(--ssb-navy);
	transform: rotate(-45deg);
}

/* foto da analista (Ui/FotoAnalise.php), no lugar do diagrama */
.woocommerce-checkout .ssb-lateral__figura {
	position: relative;
	margin: 0 0 26px;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .10);
}

.woocommerce-checkout .ssb-lateral__figura::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ssb-gradiente);
}

.woocommerce-checkout .ssb-lateral__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 630 / 438;
	object-fit: cover;
}

/* ----- coluna do formulario: um cartao branco ----- */

.woocommerce-checkout .ssb-coluna-form {
	min-width: 0;
	padding: 34px 36px;
	background: #fff;
	border: 1px solid var(--ssb-linha);
	border-radius: var(--ssb-raio);
	box-shadow: 0 18px 40px rgba(4, 34, 69, .06);
}

/* Os campos migram para dentro dos passos; o #customer_details original
   fica so com restos (atribuicao de pedido, invólucros vazios). Sem isso,
   as regras de .col2-set acima desenhavam dois cartoes vazios no fim. */
.woocommerce-checkout .ssb-coluna-form #customer_details {
	display: block;
	margin: 0;
}

.woocommerce-checkout .ssb-coluna-form #customer_details .col-1,
.woocommerce-checkout .ssb-coluna-form #customer_details .col-2 {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* ----- navegacao dos passos ----- */

.woocommerce-checkout .ssb-passos-nav {
	gap: 8px 28px;
	margin: 0 0 30px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--ssb-linha);
}

.woocommerce-checkout .ssb-passos-nav__item {
	gap: 10px;
	font-size: 14px;
	color: #8a9aab;
}

.woocommerce-checkout .ssb-passos-nav__num {
	width: 32px;
	height: 32px;
	font-size: 14px;
	font-weight: 500;
	border-color: var(--ssb-linha);
	color: #8a9aab;
}

.woocommerce-checkout .ssb-passos-nav__item.is-atual {
	color: var(--ssb-navy);
	font-weight: 500;
}

.woocommerce-checkout .ssb-passos-nav__item.is-atual .ssb-passos-nav__num {
	background: var(--ssb-gradiente);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 12px rgba(10, 101, 108, .25);
}

.woocommerce-checkout .ssb-passos-nav__item.is-feito {
	color: var(--ssb-teal-esc);
}

.woocommerce-checkout .ssb-passos-nav__item.is-feito .ssb-passos-nav__num {
	background: rgba(76, 171, 180, .14);
	border-color: var(--ssb-teal);
	color: var(--ssb-teal-esc);
}

/* ----- cabecalho de cada passo ----- */

.woocommerce-checkout .ssb-passo__cab {
	margin: 0 0 24px;
}

.woocommerce-checkout form.checkout h3.ssb-passo__titulo {
	margin: 0 0 6px;
	font-size: 26px;
}

.woocommerce-checkout .ssb-passo__resumo {
	font-size: 14px;
	color: var(--ssb-suave);
}

/* Os campos vem soltos dentro do corpo do passo: mesmo grid de duas
   colunas que o .woocommerce-billing-fields__field-wrapper tinha. */
.woocommerce-checkout .ssb-passo__corpo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.woocommerce-checkout .ssb-passo__corpo > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce-checkout .ssb-passo__corpo > .form-row-first {
	grid-column: 1;
}

.woocommerce-checkout .ssb-passo__corpo > .form-row-last {
	grid-column: 2;
}

/*
 * A dica que aparece sob o campo ao focá-lo.
 *
 * Esta regra existia desde setembro e NUNCA pegou. O WooCommerce estiliza a
 * mesma dica com `.woocommerce form .form-row .woocommerce-input-wrapper
 * .description` — quatro classes e um elemento. O nosso seletor tinha três
 * classes, perdia por especificidade, e o que o paciente via era o tooltip
 * azul de fábrica (#1e85be), uma cor que não aparece em nenhum outro ponto
 * do site.
 *
 * E ele vinha cortado. O script do WooCommerce abre a dica com `slideDown`;
 * para medir a altura de destino, o jQuery tira o elemento do fluxo, e fora
 * do fluxo o texto cabe em UMA linha. No lugar certo ele ocupa DUAS. A
 * animação para na altura de uma linha e o `overflow: hidden` que ela deixa
 * para trás corta a segunda — exatamente o que apareceu na tela.
 *
 * Por isso `height` e `overflow` levam `!important`: não é preferência, é a
 * única forma de vencer o estilo inline que a animação escreve no elemento.
 * O preço é a dica surgir de uma vez em vez de deslizar. Texto legível vale
 * mais que 200 ms de animação.
 *
 * `display` fica de fora de propósito. Quem manda nele continua sendo o
 * WooCommerce (`none` em repouso) e o jQuery (ao focar), para a dica seguir
 * aparecendo só quando o paciente está no campo — como está hoje em
 * produção. Declará-lo aqui deixaria todas as dicas visíveis o tempo todo.
 */
.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper .description {
	height: auto !important;
	overflow: visible !important;
	margin-top: 6px;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ssb-suave);
	background: none;
	border-radius: 0;
	box-shadow: none;
}

/* A setinha do balão. Sem balão, não há seta. */
.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper .description::before {
	display: none;
}

/* ----- bloco de exame (passo 2) ----- */

.woocommerce-checkout #ssb-bloco-exame {
	margin: 0 0 28px;
}

.woocommerce-checkout #ssb-bloco-exame h3 {
	font-size: 22px;
	margin-bottom: 16px;
}

.woocommerce-checkout .ssb-passo__corpo #order_review_heading {
	font-size: 22px;
	margin: 8px 0 16px;
}

/* ----- rodape do passo: Voltar / Continuar ----- */

.woocommerce-checkout .ssb-passo__rodape {
	margin-top: 28px;
	padding-top: 24px;
	border-top-color: var(--ssb-linha);
}

.woocommerce-checkout form.checkout button.button.alt.ssb-btn-avancar {
	width: auto;
	min-width: 220px;
	margin: 0 0 0 auto;
}

.woocommerce-checkout form.checkout .ssb-passo__rodape .ssb-btn-voltar {
	padding: 12px 4px;
	background: transparent;
	border: 0;
	font-family: var(--ssb-fonte);
	font-size: 15px;
	font-weight: 400;
	color: var(--ssb-suave);
	cursor: pointer;
}

.woocommerce-checkout form.checkout .ssb-passo__rodape .ssb-btn-voltar::before {
	content: "\2190\00a0";
}

.woocommerce-checkout form.checkout .ssb-passo__rodape .ssb-btn-voltar:hover {
	color: var(--ssb-navy);
	background: transparent;
}

/* ----- erros de preenchimento na cor da marca ----- */

.woocommerce-checkout .form-row.ssb-erro input,
.woocommerce-checkout .form-row.ssb-erro select,
.woocommerce-checkout .form-row.ssb-erro textarea {
	border-color: var(--ssb-erro) !important;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, .12);
}

@media (max-width: 1024px) {
	.woocommerce-checkout .ssb-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.woocommerce-checkout .ssb-lateral__fixo {
		position: static;
	}

	/* Empilhada, a coluna vem antes do formulario. Com a imagem ela
	   passava de 1000px e o primeiro campo sumia da tela; o texto explica
	   sozinho, e a foto continua na pagina de preparo. */
	.woocommerce-checkout .ssb-diagrama,
	.woocommerce-checkout .ssb-lateral__figura {
		display: none;
	}
}

@media (max-width: 767px) {
	.woocommerce-checkout .ssb-lateral {
		padding: 26px 20px;
	}

	.woocommerce-checkout .ssb-coluna-form {
		padding: 24px 18px;
	}

	.woocommerce-checkout .ssb-passo__corpo {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout .ssb-passo__corpo > .form-row-first,
	.woocommerce-checkout .ssb-passo__corpo > .form-row-last {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout button.button.alt.ssb-btn-avancar {
		min-width: 0;
		width: 100%;
		max-width: none;
	}
}

/* ------------------------------------------------ cabecalho da home */

/* O cabecalho (template 89) e o mesmo da pagina de preparo. Aqui a pessoa
   ja esta solicitando: o botao "Solicite sua analise" so recarregaria a
   pagina e poderia parecer um segundo caminho. */
.woocommerce-checkout [data-elementor-type="header"] .elementor-element-7e6b34fa {
	display: none;
}

/* ------------------------------------------------ ajustes de especificidade */

/* O Hello centraliza o titulo com margem automatica numa largura menor que
   a do layout; ele ficava recuado em relacao as colunas. */
body.woocommerce-checkout .page-header .entry-title {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* woocommerce.css desenha a tabela com borda em volta e entre celulas
   (.woocommerce table.shop_table), mais especifico que as regras acima.
   Dentro do cartao nevoa a tabela so precisa das linhas horizontais. */
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
	border: 0;
	border-radius: 0;
	margin: 0 0 22px;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td {
	border: 0;
	border-bottom: 1px solid var(--ssb-linha);
	padding: 14px 0;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
}

/* "(opcional)" colado na caixa de marcar */
.woocommerce-checkout form.checkout .form-row.checkbox .optional,
.woocommerce-checkout form.checkout label.checkbox .optional {
	margin-left: -4px;
	font-size: 13px;
}

/* Links do formulario (politica de privacidade, termos) vinham no rosa
   padrao do tema. */
.woocommerce-checkout form.checkout a:not(.button) {
	color: var(--ssb-teal-esc);
	text-decoration-color: rgba(10, 101, 108, .35);
}

/* ------------------------------------------------ telas menores */

@media (max-width: 1024px) {
	.woocommerce-checkout form.checkout .col2-set {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

@media (max-width: 767px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout form.checkout .form-row-first,
	.woocommerce-checkout form.checkout .form-row-last {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout .col2-set .col-1,
	.woocommerce-checkout form.checkout .col2-set .col-2,
	.woocommerce-checkout #order_review {
		padding: 22px 18px;
	}

	.woocommerce-checkout form.checkout h3,
	.woocommerce-checkout #order_review_heading {
		font-size: 22px;
	}

	/* 16px evita o zoom automatico do iOS ao focar o campo */
	.woocommerce-checkout form.checkout .input-text,
	.woocommerce-checkout form.checkout select,
	.woocommerce-checkout form.checkout textarea {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout #place_order,
	.woocommerce-checkout form.checkout .input-text {
		transition: none;
	}

	.woocommerce-checkout #place_order:hover {
		transform: none;
	}
}