/* ============================================================
   INTER.PLANAR · OVERRIDE DO CALCULADOR DE FRETE
   Arquivo: /wp-content/themes/interplanar/interplanar-frete.css
   Plugin: woo-better-shipping-calculator-for-brazil

   O plugin injeta um <style> inline com !important em cor,
   padding, margem e fonte, e forca Poppins. Por isso todas as
   regras aqui usam !important. E o unico arquivo do projeto
   onde isso se justifica.

   Carregar por ultimo, depois do interplanar-woo.css.
   ============================================================ */

/* ── Bloco principal ─────────────────────────────────────── */

.woo-better-info-block {
	background: var(--surface-2) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	box-shadow: none !important;
	color: var(--text) !important;
	margin: var(--s-5) 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Mata a fonte Poppins que o plugin forca */
.woo-better-poppins-family,
.woo-better-info-block,
.woo-better-info-block * {
	font-family: var(--font-mono) !important;
}

.woo-better-info-block * {
	background-color: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
}

/* ── Faixa do CEP (cabecalho cinza claro) ────────────────── */

.woo-better-current-postcode-block {
	background: var(--surface) !important;
	border-bottom: 1px solid var(--border) !important;
	padding: var(--s-3) var(--caixa) !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--s-4) !important;
	font-size: 0.8rem !important;
}

.woo-better-current-postcode-block strong,
.woo-better-current-postcode-block b {
	color: var(--text-bright) !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
}

.woo-better-current-postcode-block a {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--accent) !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.woo-better-current-postcode-block a:hover {
	text-decoration: underline !important;
}

/* ── Miolo ───────────────────────────────────────────────── */

.woo-better-content-block {
	padding: var(--caixa) !important;
	height: auto !important;
	font-size: 0.85rem !important;
}

.woo-better-cart-name,
.woo-better-cart-quantity {
	color: var(--text) !important;
	margin-bottom: var(--s-3) !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--s-2) !important;
}

.woo-better-shipping-methods {
	margin-bottom: var(--s-3) !important;
}

.woo-better-shipping-methods strong,
.woo-better-shipping-methods b {
	color: var(--text-bright) !important;
}

/* Valor do frete em verde */
.woo-better-info-block .amount,
.woo-better-info-block .woocommerce-Price-amount,
.woo-better-shipping-methods .amount {
	color: var(--accent) !important;
	font-weight: 700 !important;
}

/* ── Divisoria ───────────────────────────────────────────── */

.woo-better-separator {
	border: 0 !important;
	border-top: 1px solid var(--border) !important;
	margin: var(--s-4) 0 !important;
	height: 1px !important;
	background: none !important;
}

/* ── Rodape: "Atualizado em ..." ─────────────────────────── */

.woo-better-update-section {
	align-items: center !important;
	gap: var(--s-3) !important;
	color: var(--text-dim) !important;
	font-size: 0.72rem !important;
	line-height: 1.5 !important;
}

.woo-better-update-section strong,
.woo-better-update-section b {
	color: var(--text) !important;
	font-weight: 700 !important;
}

/* ── Icones ──────────────────────────────────────────────── */
/* Sao <img> apontando pros SVGs do plugin, entao fill nao
   funciona: so filtro. O matiz gira do azul pro verde da
   paleta. Se algum icone sumir ou ficar estranho, comente
   este bloco. */

.woo-better-icon,
.blue-icon {
	filter: hue-rotate(120deg) saturate(1.6) !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	background: transparent !important;
}

/* Se o filtro nao agradar, troque o bloco acima por este,
   que deixa os icones em cinza neutro:

   .woo-better-icon,
   .blue-icon {
       filter: grayscale(1) brightness(2) !important;
       opacity: 0.55 !important;
   }
*/

/* ── Formulario de CEP (aparece ao clicar em "Alterar") ──── */

#custom-postcode-form {
	margin-top: var(--s-4) !important;
	padding: 0 var(--caixa) var(--caixa) !important;
	display: flex !important;
	gap: var(--s-2) !important;
	flex-wrap: wrap !important;
}

#custom-postcode-form input[type="text"],
#custom-postcode-form input[type="tel"],
.woo-better-info-block input {
	background: var(--bg) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: var(--radius) !important;
	color: var(--text-bright) !important;
	font-family: var(--font-mono) !important;
	padding: var(--s-3) var(--s-4) !important;
	flex: 1 !important;
	min-width: 140px !important;
}

#custom-postcode-form input:focus,
.woo-better-info-block input:focus {
	outline: none !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Botoes do plugin.
   Fantasma por padrao: varios deles so contem um icone, e
   fundo solido transforma o icone num quadrado verde. */
#custom-postcode-form button,
.woo-better-info-block button,
.woo-better-info-block a.button {
	background: transparent !important;
	border: 1px solid var(--accent) !important;
	border-radius: var(--radius) !important;
	color: var(--accent) !important;
	font-family: var(--font-mono) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: var(--s-2) var(--s-4) !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--s-2) !important;
}

#custom-postcode-form button:hover,
.woo-better-info-block button:hover {
	background: var(--accent) !important;
	color: var(--preto) !important;
}

/* Botao que so tem icone: quadrado, sem padding lateral */
.woo-better-info-block button:has(> img:only-child),
.woo-better-update-section button {
	padding: var(--s-2) !important;
	width: 40px !important;
	height: 40px !important;
	flex-shrink: 0 !important;
}

/* Inline | https://interplanar.shop/carrinho/ */

.woo-better-content-block {
  /* background-color: #ffffff !important; */
  background-color: #111 !important;
}

.woo-better-current-postcode-block {
  /* background-color: #f5f5f5 !important; */
  background-color: #091c13 !important;
}