/* ============================================================
 * Portal Salário — Checkout BR. Estilo do checkout clássico
 * (tema Newspaper/TagDiv) + alinhamento do bloco Mercado Pago.
 * Cores: verde #098749 / #10b981, dark #1f2937.
 * ============================================================ */

:root {
	--psal-green: #098749;
	--psal-green-2: #10b981;
	--psal-dark: #1f2937;
	--psal-gray: #6b7280;
	--psal-line: #e5e7eb;
	--psal-bg: #f9fafb;
	--psal-radius: 10px;
}

/* Container oculto que hospeda o gatilho do popup de login do UMP.
   O link real do popup fica aqui; é acionado via JS pelos links de
   login do checkout. Mantido no DOM (não display:none no próprio
   gatilho) para o JS do UMP funcionar, mas visualmente escondido. */
.psal-login-popup-src {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}
/* O modal do UMP, quando aberto, deve ficar visível normalmente —
   ele é anexado ao body pelo próprio UMP, fora deste container. */
.psal-ckbr-back {
	max-width: 1100px;
	margin: 0 auto 14px;
	padding: 0 4px;
}
.psal-ckbr-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--psal-green) !important;
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--psal-line);
	border-radius: 999px;
	background: #fff;
	transition: all .15s ease;
}
.psal-ckbr-back-link:hover {
	border-color: var(--psal-green);
	background: var(--psal-bg);
	transform: translateX(-2px);
}

/* ---------- Notice inline (autofill) ---------- */
.psal-ckbr-notice {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
}
.psal-ckbr-notice.is-loading { color: var(--psal-gray); }
.psal-ckbr-notice.is-loading::before {
	content: "";
	display: inline-block;
	width: 10px; height: 10px;
	margin-right: 6px;
	border: 2px solid #d1d5db;
	border-top-color: var(--psal-green);
	border-radius: 50%;
	vertical-align: -1px;
	animation: psal-ckbr-spin .7s linear infinite;
}
.psal-ckbr-notice.is-error { color: #c2410c; }
.psal-ckbr-notice.is-warn  { color: #b8881e; font-weight: 600; }
@keyframes psal-ckbr-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * LOGIN NATIVO do Woo (aparece deslogado) — estilizado.
 * ============================================================ */
.woocommerce-form-login-toggle {
	margin-bottom: 16px;
}
.woocommerce-form-login-toggle .woocommerce-info {
	background: var(--psal-bg);
	border-left: 3px solid var(--psal-green);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--psal-dark);
}
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .showlogin {
	color: var(--psal-green) !important;
	font-weight: 700;
	cursor: pointer;
}
.woocommerce-form.woocommerce-form-login.login {
	border: 1px solid var(--psal-line);
	border-radius: var(--psal-radius);
	padding: 22px;
	margin-bottom: 22px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.woocommerce-form-login .form-row { margin-bottom: 14px; }
.woocommerce-form-login button[name="login"] {
	background: var(--psal-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 22px !important;
	font-weight: 700 !important;
	cursor: pointer;
}
.woocommerce-form-login button[name="login"]:hover {
	background: #07703c !important;
}
.woocommerce-form-login .lost_password a {
	color: var(--psal-gray) !important;
	font-size: 13px;
}

/* ============================================================
 * CAMPOS de billing.
 * ============================================================ */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	color: var(--psal-green);
	font-weight: 700;
	margin-bottom: 18px;
}
.woocommerce form .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--psal-dark);
	margin-bottom: 4px;
}
.woocommerce form .form-row {
	margin-bottom: 14px;
	padding: 0;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection {
	border: 1px solid var(--psal-line) !important;
	border-radius: 8px !important;
	padding: 11px 13px !important;
	font-size: 15px !important;
	min-height: 44px;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
	background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--psal-green) !important;
	box-shadow: 0 0 0 3px rgba(9,135,73,.12) !important;
	outline: none;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #dc2626 !important;
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--psal-green-2) !important;
}

/* ============================================================
 * input pass
 * ============================================================ */
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
    width: 25px;
}
.required { color: #dc2626; }

/* ============================================================
 * Mercado Pago - Pagamento interno
 * ============================================================ */
#add_payment_method #payment ul.payment_methods li input, .woocommerce-cart #payment ul.payment_methods li input, .woocommerce-checkout #payment ul.payment_methods li input {
  margin: 0 1em 0 0;
  width: 20px;
}

.woocommerce form .form-row .input-checkbox {
  display: inline;
  margin: -2px 8px 0 0;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}

/* ============================================================
 * OCULTAR ENDEREÇO até autofill (CNPJ) ou CEP (PF).
 * Campos com .psal-addr-field ficam ocultos; .psal-addr-visible revela.
 * ============================================================ */
.psal-addr-field {
	display: none !important;
}
.psal-addr-field.psal-addr-visible {
	display: block !important;
}

/* ============================================================
 * BLOCO MERCADO PAGO — o "torto".
 * Estrutura real: <li> tem 3 filhos diretos:
 *   input[radio]  (IRMÃO do label)
 *   label (contém texto + img)
 *   div.payment_box
 * O tema TagDiv força display:block no li com alta especificidade,
 * então prefixamos com "body .woocommerce-checkout" + !important
 * no display para vencer. Flex vai no <li>; payment_box quebra (wrap).
 * ============================================================ */
body .woocommerce-checkout #payment {
	background: #fff;
	border: 0px solid var(--psal-line);
	border-radius: var(--psal-radius);
	padding: 6px 4px;
}
body .woocommerce-checkout #payment ul.payment_methods {
	border: none;
	padding: 6px;
	margin: 0;
}
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	margin: 0;
	padding: 0 12px;
	border-bottom: 1px solid var(--psal-line);
	list-style: none;
}
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before {
	display: none !important; /* remove bullet do tema */
}
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}
/* Radio: primeiro item da linha flex, alinhado ao texto */
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	margin: 0 10px 0 0 !important;
	flex: 0 0 auto !important;
	order: 1 !important;
	accent-color: var(--psal-green);
	cursor: pointer;
	position: static !important;
	float: none !important;
}
/* Label: ocupa o espaço restante na mesma linha do radio */
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: flex !important;
	align-items: center;
	flex: 1 1 auto !important;
	order: 2 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 16px 0 !important;
	font-size: 15px !important;
	font-weight: 600;
	color: var(--psal-dark);
	cursor: pointer;
	line-height: 1.2;
}
/* Ícone do método: empurrado pro fim da linha do label */
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
	max-height: 28px !important;
	width: auto;
	margin: 0 0 0 auto !important;
	padding: 0;
	float: none !important;
	display: inline-block;
	vertical-align: middle;
}
/* Caixa de conteúdo: força quebra para a linha inteira abaixo do radio+label */
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
	flex: 0 0 100% !important;
	order: 3 !important;
	width: 100% !important;
	background: var(--psal-bg) !important;
	border-radius: 8px;
	margin: 0 0 14px;
	padding: 18px !important;
	font-size: 14px;
	line-height: 1.5;
	color: var(--psal-gray);
	box-sizing: border-box;
}
body .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box::before {
	display: none !important; /* remove a setinha torta */
}
body .woocommerce-checkout #payment div.payment_box img {
	max-width: 180px;
	height: auto;
	display: block;
	margin: 0 auto 10px;
}

/* ---------- "Seu pedido" / review ---------- */
.woocommerce-checkout .woocommerce-checkout-review-order > h3,
.woocommerce-checkout #order_review_heading {
	color: var(--psal-green);
	font-weight: 700;
	margin-bottom: 16px;
}
.woocommerce-checkout table.shop_table {
	border: 1px solid var(--psal-line);
	border-radius: var(--psal-radius);
	overflow: hidden;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 12px 14px;
}
.woocommerce-checkout table.shop_table tfoot .order-total td {
	font-size: 17px;
	color: var(--psal-green);
	font-weight: 800;
}

/* ---------- Termos + botão final ---------- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0;
	font-size: 13px;
}
/* CHECKBOX de termos — o tema TagDiv estica o input pra 100% (345px) com
   alta especificidade. O checkbox fica DENTRO do label, em
   .place-order > .woocommerce-terms-and-conditions-wrapper > p > label > input.
   Miramos essa cadeia e travamos min/max-width para vencer o tema. */
body .woocommerce-checkout .place-order .woocommerce-terms-and-conditions-wrapper p.form-row {
	margin: 0 0 14px;
}
body .woocommerce-checkout .place-order label.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	cursor: pointer;
}
body .woocommerce-checkout .place-order label.woocommerce-form__label-for-checkbox input#terms,
body .woocommerce-checkout .place-order input.woocommerce-form__input-checkbox#terms {
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	float: none !important;
	position: static !important;
	display: inline-block !important;
	accent-color: var(--psal-green) !important;
	cursor: pointer;
}

/* CHECKBOX "Sem número" (S/N) */
.psal-sn-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--psal-gray);
	cursor: pointer;
}
.psal-sn-toggle input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
	min-width: 15px;
	flex: 0 0 15px !important;
	margin: 0 !important;
	float: none !important;
	position: static !important;
	accent-color: var(--psal-green);
	cursor: pointer;
}

.woocommerce-checkout #place_order {
	width: 100%;
	background: var(--psal-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 16px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: .2px;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.woocommerce-checkout #place_order:hover {
	background: #07703c !important;
	transform: translateY(-1px);
}

/* ============================================================
 * MENSAGENS (erro / sucesso / info).
 * O tema renderiza erro com fundo vermelho puro (#f00) e texto
 * cinza — ilegível. Refazemos com contraste adequado.
 * ============================================================ */
body .woocommerce-checkout .woocommerce-error,
body .woocommerce .woocommerce-error {
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	border-left: 4px solid #dc2626 !important;
	border-radius: 8px !important;
	color: #b91c1c !important;
	list-style: none !important;
	margin: 0 0 20px !important;
	padding: 16px 16px 16px 48px !important;
	position: relative;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 1px 3px rgba(220,38,38,.08);
}
body .woocommerce-checkout .woocommerce-error::before,
body .woocommerce .woocommerce-error::before {
	content: "!";
	position: absolute;
	left: 16px;
	top: 16px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: 800;
	color: #fff;
	background: #dc2626;
	border-radius: 50%;
	font-size: 14px;
}
body .woocommerce-checkout .woocommerce-error li,
body .woocommerce .woocommerce-error li {
	color: #b91c1c !important;
	background: transparent !important;
	list-style: none !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: none !important;
}
body .woocommerce-checkout .woocommerce-error li:last-child,
body .woocommerce .woocommerce-error li:last-child {
	margin-bottom: 0 !important;
}
body .woocommerce-checkout .woocommerce-error li strong,
body .woocommerce .woocommerce-error li strong {
	color: #991b1b !important;
	font-weight: 700;
}

/* Sucesso */
body .woocommerce-checkout .woocommerce-message,
body .woocommerce .woocommerce-message {
	background: #f0fdf4 !important;
	border: 1px solid #bbf7d0 !important;
	border-left: 4px solid var(--psal-green) !important;
	border-radius: 8px !important;
	color: #166534 !important;
	margin: 0 0 20px !important;
	font-size: 14px;
}

/* Info / aviso */
body .woocommerce-checkout .woocommerce-info,
body .woocommerce .woocommerce-info {
	background: var(--psal-bg) !important;
	border: 1px solid var(--psal-line) !important;
	border-left: 4px solid var(--psal-green) !important;
	border-radius: 8px !important;
	color: var(--psal-dark) !important;
	padding: 14px 16px !important;
	font-size: 14px;
}

/* Campo com erro: borda vermelha consistente */
body .woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
body .woocommerce-checkout form .form-row.woocommerce-invalid select,
body .woocommerce-checkout form .form-row.woocommerce-invalid .select2-selection {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}

/* ============================================================
 * RESPONSIVO
 * ============================================================ */
@media (max-width: 768px) {
	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
		padding: 14px 8px;
		font-size: 14px !important;
	}
	.woocommerce-checkout #payment div.payment_box {
		margin: 4px 6px 12px;
		padding: 14px !important;
	}
	.psal-ckbr-back { padding: 0 12px; }
}