/*
 * Imob Engine — biblioteca de componentes globais.
 * Consome os tokens de core.css. Claro/escuro via [data-theme].
 */

/* Ícones internos: herdam a cor do texto; tamanho controlável no atributo. */
.ie-icon { display: inline-block; vertical-align: middle; flex: none; }

/* Trava de scroll (usada por drawer/modal). */
.ie-no-scroll { overflow: hidden; }

/* Utilidade só-leitor-de-tela. */
.ie-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
 * Badges / chips.
 * ---------------------------------------------------------------------- */
.ie-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .55rem;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.3;
	border-radius: var(--ie-radius-pill);
	border: 1px solid var(--ie-border);
	background: var(--ie-surface);
	color: var(--ie-text);
	white-space: nowrap;
}
.ie-badge--gold { background: color-mix(in srgb, var(--ie-brand-fg) 14%, var(--ie-surface)); border-color: color-mix(in srgb, var(--ie-brand-fg) 40%, var(--ie-border)); color: var(--ie-brand-fg); }
.ie-badge--success { background: var(--ie-success-soft); border-color: color-mix(in srgb, var(--ie-success) 40%, var(--ie-border)); color: var(--ie-success); }
.ie-badge--warning { background: var(--ie-warning-soft); border-color: color-mix(in srgb, var(--ie-warning) 40%, var(--ie-border)); color: var(--ie-warning); }
.ie-badge--danger { background: var(--ie-danger-soft); border-color: color-mix(in srgb, var(--ie-danger) 40%, var(--ie-border)); color: var(--ie-danger); }
.ie-badge--info { background: var(--ie-info-soft); border-color: color-mix(in srgb, var(--ie-info) 40%, var(--ie-border)); color: var(--ie-info); }

.ie-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	font-size: .85rem;
	border-radius: var(--ie-radius-pill);
	border: 1px solid var(--ie-border);
	background: var(--ie-surface);
	color: var(--ie-text);
}
.ie-chip__remove {
	display: inline-flex;
	background: none; border: 0; padding: 0; margin: 0;
	color: var(--ie-text-muted); cursor: pointer; line-height: 0;
}
.ie-chip__remove:hover { color: var(--ie-danger); }

/* -------------------------------------------------------------------------
 * Cabeçalho de seção.
 * ---------------------------------------------------------------------- */
.ie-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--ie-border);
}
.ie-section-header__title { margin: 0; }
.ie-section-header__sub { margin: .3rem 0 0; color: var(--ie-text-muted); font-size: .95rem; }

/* -------------------------------------------------------------------------
 * Estado vazio (ícone).
 * ---------------------------------------------------------------------- */
.ie-empty__icon { color: var(--ie-text-muted); margin-bottom: .5rem; display: flex; justify-content: center; }
.ie-empty__action { margin-top: 1rem; }

/* -------------------------------------------------------------------------
 * Alertas (inline, persistentes — não confundir com toasts).
 * ---------------------------------------------------------------------- */
.ie-alert {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .8rem 1rem;
	border: 1px solid var(--ie-border);
	border-left: 4px solid var(--ie-info);
	border-radius: var(--ie-radius-sm);
	background: var(--ie-info-soft);
	color: var(--ie-text);
	margin-block: 1rem;
}
.ie-alert__icon { color: var(--ie-info); margin-top: .1rem; }
.ie-alert--success { border-left-color: var(--ie-success); background: var(--ie-success-soft); }
.ie-alert--success .ie-alert__icon { color: var(--ie-success); }
.ie-alert--warning { border-left-color: var(--ie-warning); background: var(--ie-warning-soft); }
.ie-alert--warning .ie-alert__icon { color: var(--ie-warning); }
.ie-alert--danger { border-left-color: var(--ie-danger); background: var(--ie-danger-soft); }
.ie-alert--danger .ie-alert__icon { color: var(--ie-danger); }
.ie-alert__title { margin: 0 0 .15rem; font-weight: 700; }
.ie-alert p { margin: 0; }

/* -------------------------------------------------------------------------
 * Tabs.
 * ---------------------------------------------------------------------- */
.ie-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--ie-border); flex-wrap: wrap; }
.ie-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: .6rem .9rem;
	margin-bottom: -1px;
	font: inherit;
	font-weight: 600;
	color: var(--ie-text-muted);
	cursor: pointer;
}
.ie-tab:hover { color: var(--ie-text); }
.ie-tab[aria-selected="true"] { color: var(--ie-brand-fg); border-bottom-color: var(--ie-brand-fg); }
.ie-tab:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); border-radius: var(--ie-radius-sm); }

/* -------------------------------------------------------------------------
 * Loaders / skeletons.
 * ---------------------------------------------------------------------- */
.ie-spinner {
	display: inline-block;
	width: 1.25em; height: 1.25em;
	border: 2px solid color-mix(in srgb, currentcolor 30%, transparent);
	border-right-color: currentcolor;
	border-radius: 50%;
	animation: ie-spin .6s linear infinite;
}
.ie-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--ie-surface-strong);
	border-radius: var(--ie-radius-sm);
}
.ie-skeleton::after {
	content: "";
	position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ie-text) 8%, transparent), transparent);
	animation: ie-shimmer 1.4s infinite;
}
@keyframes ie-shimmer { to { transform: translateX(100%); } }

/* -------------------------------------------------------------------------
 * Switch (input alternativo acessível: é um checkbox estilizado).
 * ---------------------------------------------------------------------- */
.ie-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.ie-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ie-switch__track {
	width: 42px; height: 24px;
	border-radius: var(--ie-radius-pill);
	background: var(--ie-surface-strong);
	border: 1px solid var(--ie-border);
	position: relative;
	transition: background var(--ie-transition-fast);
	flex: none;
}
.ie-switch__track::after {
	content: "";
	position: absolute; top: 2px; left: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ie-shadow-sm);
	transition: transform var(--ie-transition-fast);
}
.ie-switch input:checked + .ie-switch__track { background: var(--ie-brand-fill); border-color: var(--ie-brand-fill); }
.ie-switch input:checked + .ie-switch__track::after { transform: translateX(18px); }
.ie-switch input:focus-visible + .ie-switch__track { box-shadow: var(--ie-focus-ring); }

/* -------------------------------------------------------------------------
 * Tooltip acessível (baseado em foco/hover; conteúdo sempre no DOM).
 * ---------------------------------------------------------------------- */
.ie-tooltip { position: relative; display: inline-flex; }
.ie-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--ie-text);
	color: var(--ie-bg);
	padding: .35rem .6rem;
	border-radius: var(--ie-radius-sm);
	font-size: .8rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ie-transition-fast), transform var(--ie-transition-fast);
	z-index: var(--ie-z-dropdown);
}
.ie-tooltip:hover .ie-tooltip__bubble,
.ie-tooltip:focus-within .ie-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
 * Campos de formulário do front — cobertura completa de tipos (a11y + marca).
 *
 * Garante que TODO input do tema (contato, newsletter, simulador, busca, CRM
 * público) tenha a mesma identidade, com foco visível dourado e contraste AAA.
 * Escopo nos contêineres de formulário do tema — nunca vaza para plugins.
 * Superespecificado (tag + tipo) por robustez dentro do WordPress.
 * ====================================================================== */
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page, .ie-home-search) :is(
	input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
	input[type="password"], input[type="search"], input[type="number"],
	input[type="date"], input[type="datetime-local"], input[type="datetime"],
	input[type="month"], input[type="time"], input[type="week"],
	textarea, select
) {
	width: 100%;
	background: var(--ie-bg);
	color: var(--ie-text);
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-sm);
	padding: .7rem .85rem;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--ie-transition-fast), box-shadow var(--ie-transition-fast), background-color var(--ie-transition-fast);
}
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page, .ie-home-search) :is(
	input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
	input[type="password"], input[type="search"], input[type="number"],
	input[type="date"], input[type="datetime-local"], input[type="datetime"],
	input[type="month"], input[type="time"], input[type="week"],
	textarea, select
):hover {
	border-color: color-mix(in srgb, var(--ie-brand-fg) 55%, var(--ie-border));
}
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page, .ie-home-search) :is(
	input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
	input[type="password"], input[type="search"], input[type="number"],
	input[type="date"], input[type="datetime-local"], input[type="datetime"],
	input[type="month"], input[type="time"], input[type="week"],
	textarea, select
):focus {
	border-color: var(--ie-brand-fg);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ie-brand-fg) 35%, transparent);
	outline: 2px solid transparent;
}
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page, .ie-home-search) :is(input, textarea)::placeholder {
	color: var(--ie-text-muted);
	opacity: 1;
}
/* Checkbox e radio do tema: cor da marca, nativos (teclado/AT preservados). */
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page) input[type="checkbox"],
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page) input[type="radio"] {
	accent-color: var(--ie-brand-fg);
	width: 1.15rem;
	height: 1.15rem;
	vertical-align: middle;
}
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page) input[type="checkbox"]:focus-visible,
:is(.ie-field, .ie-intake-form, .ie-lp-form, .ie-sim, .ie-nl-form, .ie-form, .ie-contact-page) input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ie-brand-fg) 35%, transparent);
	border-radius: 4px;
}