/**
 * Melhor Envio — Visual: calculadora de frete da página do produto.
 *
 * As cores vêm do tema Livro Único quando ele está ativo (variáveis --lu-*);
 * em outro tema, valem os mesmos azuis como padrão.
 */

.mev-calc {
	--mev-accent: var(--lu-accent, #2b7f9b);
	--mev-deep: var(--lu-blue-deep, #1d6479);
	--mev-soft: var(--lu-blue-soft, #d3e8ee);
	--mev-tint: var(--lu-bg-blue, #edf5f7);
	--mev-red: var(--lu-red, #c4272c);
	--mev-ink: var(--lu-ink, #14232a);
	--mev-ink-soft: var(--lu-ink-soft, #3d4f57);
	--mev-muted: var(--lu-muted, #74848b);
	--mev-line: var(--lu-line, #d3e0e5);
	--mev-line-soft: var(--lu-line-soft, #e6eef1);
	--mev-surface: var(--lu-surface, #ffffff);
	--mev-serif: var(--lu-serif, Georgia, "Times New Roman", serif);
	--mev-radius: 12px;

	display: block !important;
	box-sizing: border-box;
	width: 100%;
	max-width: 460px;
	margin: 1.25rem 0 1.5rem;
	padding: 1.1rem 1.15rem 1.15rem;
	background: var(--mev-surface);
	border: 1px solid var(--mev-line);
	border-radius: var(--mev-radius);
	color: var(--mev-ink);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	float: none;
	clear: both;
}

.mev-calc *,
.mev-calc *::before,
.mev-calc *::after { box-sizing: border-box; }

/* antes do script montar a calculadora, não mostra a marcação crua do plugin */
.containerCalculator:not(.mev-pronta) > :not(input[type=hidden]) { visibility: hidden; }
.containerCalculator:not(.mev-pronta) { min-height: 118px; }

/* ------------------------------------------------------------ cabeçalho */

.mev-calc__cabeca {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .8rem;
}

.mev-calc__icone {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mev-tint);
	color: var(--mev-deep);
}
.mev-calc__icone svg { width: 19px; height: 19px; display: block; }

.mev-calc__titulo {
	margin: 0;
	padding: 0;
	font-family: var(--mev-serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mev-ink);
	cursor: pointer;
}

/* ------------------------------------------------------------ formulário */

.mev-calc__form {
	display: flex;
	gap: .5rem;
	margin: 0;
}

.mev-calc .mev-calc__cep {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 46px;
	margin: 0;
	padding: 0 .95rem;
	font: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	color: var(--mev-ink);
	background: var(--lu-bg, #f5f8f9);
	border: 1px solid var(--mev-line);
	border-radius: 999px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.mev-calc .mev-calc__cep::placeholder { color: #a3b1b7; letter-spacing: .06em; }
.mev-calc .mev-calc__cep:focus {
	background: #fff;
	border-color: var(--mev-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mev-accent) 16%, transparent);
}
.mev-calc .mev-calc__cep[aria-invalid="true"] {
	border-color: var(--mev-red);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mev-red) 12%, transparent);
}

.mev-calc .mev-calc__botao {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	height: 46px;
	min-width: 112px;
	margin: 0;
	padding: 0 1.25rem;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: none;
	color: #fff;
	background: var(--mev-accent);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--mev-deep) 90%, transparent);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.mev-calc .mev-calc__botao:hover { background: var(--mev-deep); transform: translateY(-1px); }
.mev-calc .mev-calc__botao:focus-visible { outline: 2px solid var(--mev-deep); outline-offset: 2px; }
.mev-calc .mev-calc__botao[disabled] { cursor: progress; transform: none; opacity: .85; }

.mev-calc__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mev-gira .7s linear infinite;
}
.mev-carregando .mev-calc__spinner { display: block; }
@keyframes mev-gira { to { transform: rotate(360deg); } }

.mev-calc__ajuda {
	display: inline-block;
	margin: .55rem 0 0 .95rem;
	font-size: .8rem;
	color: var(--mev-muted);
	text-decoration: underline;
	text-decoration-color: var(--mev-line);
	text-underline-offset: 3px;
}
.mev-calc__ajuda:hover { color: var(--mev-deep); text-decoration-color: currentColor; }

.mev-calc__msg {
	margin: .45rem 0 0 .95rem;
	font-size: .85rem;
	color: var(--mev-muted);
}
.mev-calc__msg:empty { display: none; }
.mev-calc__msg--erro { color: var(--mev-red); }

/* ------------------------------------------------------------ resultado */

.mev-calc__saida:empty { display: none; }

.mev-calc__saida {
	margin-top: 1rem;
	padding-top: .95rem;
	border-top: 1px solid var(--mev-line-soft);
	animation: mev-surge .25s ease-out;
}
@keyframes mev-surge { from { opacity: 0; transform: translateY(4px); } }

.mev-carregando .mev-calc__saida { opacity: .45; transition: opacity .15s; }

.mev-calc__destino {
	margin: 0 0 .7rem;
	font-size: .82rem;
	line-height: 1.4;
	color: var(--mev-ink-soft);
}
.mev-calc__destino-rotulo {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mev-muted);
	margin-bottom: .1rem;
}

.mev-calc__lista {
	display: grid;
	gap: .45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mev-opcao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .9rem;
	margin: 0;
	padding: .75rem .9rem;
	background: var(--lu-bg, #f5f8f9);
	border: 1px solid var(--mev-line-soft);
	border-radius: 10px;
	list-style: none;
}
.mev-opcao::before { content: none; }

.mev-opcao--barato {
	background: var(--mev-tint);
	border-color: color-mix(in srgb, var(--mev-accent) 35%, var(--mev-line));
}

.mev-opcao__info {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.mev-opcao__nome {
	font-weight: 600;
	font-size: .95rem;
	color: var(--mev-ink);
	overflow-wrap: anywhere;
}

.mev-opcao__prazo {
	font-size: .82rem;
	color: var(--mev-muted);
}

.mev-opcao__selos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }

.mev-selo {
	display: inline-block;
	padding: .18rem .5rem;
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
}
.mev-selo--barato { background: var(--mev-accent); color: #fff; }
.mev-selo--rapido { background: #fff; color: var(--mev-red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mev-red) 45%, transparent); }

.mev-opcao__preco {
	flex: none;
	font-size: 1.02rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mev-deep);
	white-space: nowrap;
}
.mev-opcao--gratis .mev-opcao__preco { color: var(--mev-accent); }

.mev-calc__obs,
.mev-calc__vazio,
.mev-calc__nota {
	margin: .7rem 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--mev-muted);
}
.mev-calc__vazio { font-size: .88rem; color: var(--mev-ink-soft); }

@media (max-width: 480px) {
	.mev-calc { max-width: none; padding: 1rem; }
	.mev-calc .mev-calc__botao { min-width: 0; padding: 0 1rem; }
	.mev-opcao { padding: .7rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mev-calc *, .mev-calc__saida { animation: none !important; transition: none !important; }
}