/**
 * Estilo do front-end de submissao do proprietario (MEIEMBIPE).
 *
 * Depende de base.css (handle meiembipe-base) pelos tokens da marca e
 * pela tipografia - NAO redeclarar token aqui. A paleta antiga deste
 * arquivo (verde-floresta + dourado) foi substituida pela identidade real
 * calibrada no site publicado: verde-pinheiro + taupe + creme, SEM
 * dourado, blocos flat (sem sombra e sem arredondado).
 *
 * As unicas cores locais sao os estados de erro/sucesso do formulario:
 * nao sao cores de marca, entao ficam com prefixo --mei-sub-* para deixar
 * claro que sao do componente. Namespace .meiembipe-* para nao colidir
 * com o tema.
 */

.meiembipe-sub {
	--mei-sub-erro: #8c2f2a;
	--mei-sub-erro-bg: #f6ebe9;
	--mei-sub-ok: var(--mei-pine);
	--mei-sub-ok-bg: #eaf0e9;

	/*
	 * Tamanho e peso vem do campo "Paragrafo" da Tipografia do Theme Options
	 * (a camada -option, que o Redux so imprime quando o campo esta
	 * preenchido). Campo vazio, ou site sem WP Residence: 13px/400, a regra
	 * do SH de 13/out/2026. A camada base do tema (--wp-estate-paragraph-
	 * font-size, 14px) fica de fora de proposito: e o padrao da demo, nao o
	 * da marca. O line-height do painel tambem fica de fora - la ele esta em
	 * 13px, o que cola as linhas.
	 */
	--mei-sub-fs: var(--wp-estate-paragraph-font-size-option, 13px);
	--mei-sub-fw: var(--wp-estate-paragraph-font-weight-option, 400);

	max-width: 820px;
	margin: 0 auto;
	/*
	 * Tudo abaixo fica em 1em de proposito: a diferenca entre niveis sai da
	 * caixa alta, da cor e do espacamento, nao do tamanho. Antes a base era
	 * 16px com fracoes de em, e o resultado no dev ia de 8px a 15px.
	 */
	font-size: var(--mei-sub-fs);
	font-weight: var(--mei-sub-fw);
	line-height: 1.6;
}

/* O tema poe peso 500 em todo label; na Extended isso le como negrito. */
.meiembipe-sub label {
	font-weight: var(--mei-sub-fw);
}

/*
 * Os campos e os botoes ficam dentro de <p>, e o tema da ao p o tamanho do
 * Paragrafo com a camada base de 14px por reserva. Com o campo do painel
 * vazio, tudo dentro desses p saia em 14px e o resto em 13px. A regra do
 * tema e `p:not(.elementor-widget-container p)`, especificidade 0,1,2 - a
 * classe repetida aqui (0,2,1) vence sem !important e sem depender da ordem
 * de carga.
 */
.meiembipe-sub.meiembipe-sub p {
	font-size: inherit;
	font-weight: inherit;
}

.meiembipe-sub *,
.meiembipe-sub *::before,
.meiembipe-sub *::after {
	box-sizing: border-box;
}

/* ---- Alertas ---- */
.meiembipe-alert {
	padding: 14px 16px;
	margin: 0 0 20px;
	border-left: 3px solid transparent;
}
.meiembipe-alert--error {
	background: var(--mei-sub-erro-bg);
	border-left-color: var(--mei-sub-erro);
	color: var(--mei-sub-erro);
}
.meiembipe-alert--success {
	background: var(--mei-sub-ok-bg);
	border-left-color: var(--mei-sub-ok);
	color: var(--mei-sub-ok);
}
.meiembipe-alert ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* ---- Formulario ---- */
.meiembipe-form h3 {
	color: var(--mei-pine);
	/* sem isto o h3 herda o tamanho de h3 do painel (8px no dev) */
	font-size: 1em;
	line-height: 1.6;
	font-weight: var(--mei-sub-fw);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.meiembipe-fieldset {
	border: 1px solid var(--mei-line);
	padding: 18px 20px;
	margin: 0 0 20px;
	background: var(--mei-bg);
}
.meiembipe-fieldset > legend {
	color: var(--mei-pine);
	padding: 0 8px;
	font-size: 1em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
/* O bloco da rubrica e o diferencial do formulario: ganha o creme da
   marca para se destacar sem depender de cor de alerta. */
.meiembipe-fieldset--ilhagene {
	background: var(--mei-warm);
	border-color: var(--mei-earth);
}

.meiembipe-field {
	margin: 0 0 14px;
	flex: 1 1 180px;
}
.meiembipe-field > label,
.meiembipe-label {
	display: block;
	margin-bottom: 5px;
	font-size: 1em;
	font-weight: var(--mei-sub-fw);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mei-earth);
}
.meiembipe-field .req {
	color: var(--mei-sub-erro);
}

.meiembipe-form input[type="text"],
.meiembipe-form input[type="number"],
.meiembipe-form input[type="file"],
.meiembipe-form select,
.meiembipe-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--mei-line);
	background: var(--mei-panel);
	font: inherit;
	color: var(--mei-text);
}
.meiembipe-form input:focus,
.meiembipe-form select:focus,
.meiembipe-form textarea:focus {
	outline: 2px solid var(--mei-pine);
	outline-offset: 1px;
	border-color: var(--mei-pine);
}

.meiembipe-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.meiembipe-hint {
	display: block;
	font-size: 1em;
	color: var(--mei-muted);
	margin-top: 4px;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Checkboxes ---- */
.meiembipe-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 14px;
	margin-top: 6px;
}
.meiembipe-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 1em;
	font-weight: var(--mei-sub-fw);
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mei-text);
}
.meiembipe-check input {
	/*
	 * O tema desenha o checkbox (appearance: none, 15px, borda #e7e7e7).
	 * Dentro do flex ele encolhia ate virar um risco, e a borda sumia no
	 * creme do bloco da rubrica.
	 */
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin: 3px 0 0;
	border-color: var(--mei-earth-soft);
}

.meiembipe-ilhagene-cat {
	margin: 12px 0 4px;
	padding-top: 10px;
	border-top: 1px solid var(--mei-line);
}
.meiembipe-ilhagene-cat:first-of-type {
	border-top: 0;
}
.meiembipe-ilhagene-cat h4 {
	margin: 0 0 6px;
	color: var(--mei-pine);
	font-size: 1em;
	font-weight: var(--mei-sub-fw);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---- Botoes ---- */
.meiembipe-actions {
	margin: 8px 0 0;
}
.meiembipe-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--mei-pine);
	background: transparent;
	color: var(--mei-pine);
	font: inherit;
	font-size: 1em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.meiembipe-btn:hover {
	background: var(--mei-pine);
	color: var(--mei-warm);
}
.meiembipe-btn--primary {
	background: var(--mei-pine);
	color: var(--mei-warm);
}
.meiembipe-btn--primary:hover {
	background: var(--mei-pine-2);
	color: var(--mei-warm);
}
.meiembipe-btn--ghost {
	border-color: var(--mei-earth-soft);
	color: var(--mei-earth);
}
.meiembipe-btn--ghost:hover {
	background: var(--mei-earth);
	color: var(--mei-warm);
}

/* ---- Painel "Meus imoveis" ---- */
.meiembipe-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.meiembipe-card {
	border: 1px solid var(--mei-line);
	padding: 16px 18px;
	background: var(--mei-panel);
}
.meiembipe-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.meiembipe-card__head .meiembipe-title {
	color: var(--mei-pine);
	font-size: 1em;
	letter-spacing: 0.02em;
}
.meiembipe-card__meta {
	font-size: 1em;
	color: var(--mei-muted);
}
.meiembipe-card__reason {
	margin-top: 8px;
	padding: 8px 12px;
	background: var(--mei-sub-erro-bg);
	border-left: 3px solid var(--mei-sub-erro);
	font-size: 1em;
	color: var(--mei-sub-erro);
}
.meiembipe-card__actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- Badges de status ---- */
.meiembipe-badge {
	display: inline-block;
	padding: 4px 11px;
	font-size: 1em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}
.meiembipe-badge.is-publish {
	background: var(--mei-pine);
	color: var(--mei-warm);
}
.meiembipe-badge.is-review {
	background: var(--mei-warm);
	color: var(--mei-earth);
}
.meiembipe-badge.is-rejected {
	background: var(--mei-sub-erro-bg);
	color: var(--mei-sub-erro);
}
.meiembipe-badge.is-draft {
	background: var(--mei-bg);
	color: var(--mei-muted);
}

.meiembipe-empty {
	color: var(--mei-muted);
	background: var(--mei-bg);
	border: 1px solid var(--mei-line);
	padding: 26px;
	text-align: center;
}

/* ---- Gate (nao logado) ---- */
.meiembipe-sub--gate {
	text-align: center;
	background: var(--mei-warm);
	border: 0;
	padding: 32px;
}