/* Wishlist — botão coração + página da lista. */

/* DSA-2 — este módulo era o único do forte-core com o acento CRAVADO em
   hex (o azul legado do piso) em vez de puxar a cor de marca.
   Os irmãos (filtro, galeria, parcelamento, frete) já pediam
   `var(--lb-color-primary, ...)`; aqui a cor ficou presa e a lista de
   desejos continuava azul mesmo depois do redesign.

   Mesma convenção dos irmãos: uma variável local com fallback, pra o
   módulo seguir funcional se um dia rodar fora deste tema. Os tons
   derivados (fundo de aba ativa, borda suave, anel de foco) saem por
   `color-mix()` a partir do acento, em vez de 3 hexes independentes que
   precisariam ser reajustados à mão a cada troca de marca.

   Declarado em `:root` (mesma técnica que o módulo Minha Conta já usa via
   `Style::css_vars()`) pra não depender de qual wrapper envolve cada peça
   — o botão de coração, por exemplo, renderiza solto dentro do card de
   produto e do buy-box, fora de qualquer container da lista. */
:root {
	--fwl-accent: var(--lb-color-primary, #5b3df0);
	--fwl-accent-tint: color-mix(in srgb, var(--fwl-accent) 10%, #fff);
	--fwl-accent-line: color-mix(in srgb, var(--fwl-accent) 28%, #fff);
	--fwl-accent-ring: color-mix(in srgb, var(--fwl-accent) 14%, transparent);
}

/* Base do botão: não mexe em fundo/borda (o contexto decide a "casca"). */
.forte-wishlist-btn {
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	border: none;
	background: none;
	padding: 0;
	color: #9aa7b6;
	transition: color 0.15s, transform 0.15s;
}
.forte-wishlist-btn:hover { color: var(--forte-wl-accent, #e11d48); }
.forte-wishlist-btn.is-on { color: var(--forte-wl-accent, #e11d48); }
.forte-wishlist-btn.is-on svg { fill: var(--forte-wl-accent, #e11d48); }
.forte-wishlist-btn.is-loading { opacity: 0.5; pointer-events: none; }
.forte-wishlist-btn svg { display: block; }

/* Variante: card de listagem (WooCommerce loop) — círculo no canto. */
.woocommerce ul.products li.product { position: relative; }
.forte-wishlist-btn--loop {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 3;
	width: 34px;
	height: 34px;
	border: 1px solid #e6eaf1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(20, 40, 80, 0.08);
}

/* Variante: single product — botão com rótulo. */
.forte-wishlist-single {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: #5c6e82;
}
.forte-wishlist-single .forte-wishlist-btn {
	width: 38px;
	height: 38px;
	border: 1px solid #e2e8f1;
	border-radius: 10px;
}

/* ===== Página da wishlist ([forte_wishlist]) ===== */
.forte-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}
.forte-wl-item {
	position: relative;
	background: #fff;
	border: 1px solid #eaeef4;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.forte-wishlist-btn--corner { position: absolute; right: 12px; top: 12px; z-index: 2; }
.forte-wl-thumb img { width: 100%; height: auto; border-radius: 10px; }
.forte-wl-name { font-weight: 700; color: #14233a; margin: 12px 0 4px; text-decoration: none; }
.forte-wl-price { color: var(--fwl-accent); font-weight: 700; margin-bottom: 12px; }
.forte-wl-add { margin-top: auto; }
.forte-wishlist-empty { text-align: center; padding: 50px 20px; color: #5c6e82; }
.forte-wishlist-empty p { margin-bottom: 14px; }
.forte-wishlist-empty--inline { padding: 34px 20px; }
.forte-wl-stock { font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.forte-wl-stock.is-in { color: #15803d; }
.forte-wl-stock.is-out { color: #b45309; }

/* ===== App multi-lista ===== */
.forte-wishlist-app { --wl-line: #e6eaf1; }

.forte-wl-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--wl-line);
	padding-bottom: 14px;
	margin-bottom: 16px;
}
.forte-wl-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	background: #f3f6fb;
	color: #5c6e82;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	border: 1px solid transparent;
}
.forte-wl-tab span {
	background: #dfe6f0;
	color: #5c6e82;
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 11.5px;
}
.forte-wl-tab.is-active { background: var(--fwl-accent-tint); color: var(--fwl-accent); border-color: var(--fwl-accent-line); }
.forte-wl-tab.is-active span { background: var(--fwl-accent); color: #fff; }
.forte-wl-newtab {
	cursor: pointer;
	border: 1.5px dashed #c7d0dd;
	background: none;
	color: #5c6e82;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 999px;
}
.forte-wl-newtab:hover { color: var(--fwl-accent); border-color: var(--fwl-accent); }
.forte-wl-newform { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.forte-wl-newform[hidden] { display: none; }
.forte-wl-newform input {
	flex: 1;
	max-width: 280px;
	height: 40px;
	border: 1.5px solid #e2e8f1;
	border-radius: 10px;
	padding: 0 12px;
	font-size: 14px;
}

.forte-wl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.forte-wl-listname {
	font-size: 18px;
	font-weight: 800;
	color: #14233a;
	border: 1.5px solid transparent;
	border-radius: 8px;
	padding: 6px 10px;
	background: transparent;
	min-width: 180px;
}
.forte-wl-listname:hover { border-color: #e2e8f1; }
.forte-wl-listname:focus { outline: none; border-color: var(--fwl-accent); background: #fff; box-shadow: 0 0 0 3px var(--fwl-accent-ring); }
.forte-wl-privacy { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: #8694a8; font-weight: 600; }
.forte-wl-privacy select {
	height: 38px;
	border: 1.5px solid #e2e8f1;
	border-radius: 9px;
	padding: 0 10px;
	font-size: 13px;
	color: #14233a;
	background: #fff;
}
.forte-wl-sharebtn, .forte-wl-deletebtn {
	cursor: pointer;
	height: 38px;
	border-radius: 9px;
	font-weight: 700;
	font-size: 13px;
	padding: 0 16px;
	border: 1.5px solid #e2e8f1;
	background: #fff;
}
.forte-wl-sharebtn { color: var(--fwl-accent); border-color: var(--fwl-accent-line); }
.forte-wl-sharebtn:hover { background: var(--fwl-accent-tint); }
.forte-wl-deletebtn { color: #b91c1c; border-color: #f0c8c8; }
.forte-wl-deletebtn:hover { background: #fdecec; }

.forte-wl-move {
	width: 100%;
	margin-top: 8px;
	height: 36px;
	border: 1.5px solid #e2e8f1;
	border-radius: 9px;
	padding: 0 8px;
	font-size: 12.5px;
	color: #5c6e82;
	background: #fff;
}

.forte-wl-pubtitle { font-size: 22px; font-weight: 800; color: #14233a; margin: 0 0 18px; }

/* ===== Ações (share / pdf / orçamento) ===== */
.forte-wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.forte-wl-share { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.forte-wl-actbtn {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 9px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	border: 1.5px solid #e2e8f1;
	background: #fff;
	color: #14233a;
}
.forte-wl-actbtn:hover { border-color: #c7d0dd; }
.forte-wl-sharebtn { color: var(--fwl-accent); border-color: var(--fwl-accent-line); }
.forte-wl-sharebtn:hover { background: var(--fwl-accent-tint); }
.forte-wl-estimate { background: linear-gradient(180deg, #4cca16, #3ea612); color: #fff; border: none; box-shadow: 0 6px 14px rgba(76, 202, 22, 0.3); }
.forte-wl-pdf { color: #14233a; }
.forte-wl-deletebtn { color: #b91c1c; border-color: #f0c8c8; }
.forte-wl-deletebtn:hover { background: #fdecec; }

.forte-wl-soc {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 14px;
	border-radius: 9px;
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
}
.forte-wl-soc--fb { background: #1877f2; }
.forte-wl-soc--wa { background: #25d366; }
.forte-wl-soc--em { background: #5c6e82; }
.forte-wl-soc:hover { filter: brightness(1.06); }

/* ===== Modal de orçamento ===== */
.forte-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.forte-modal[hidden] { display: none; }
.forte-modal__overlay { position: absolute; inset: 0; background: rgba(10, 20, 40, 0.55); }
.forte-modal__box {
	position: relative;
	width: min(440px, 92vw);
	background: #fff;
	border-radius: 16px;
	padding: 26px 26px 22px;
	box-shadow: 0 24px 60px rgba(10, 20, 40, 0.35);
}
.forte-modal__x {
	position: absolute;
	top: 12px;
	right: 14px;
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #8694a8;
	cursor: pointer;
}
.forte-modal__title { font-size: 19px; font-weight: 800; color: #14233a; margin: 0 0 6px; }
.forte-modal__intro { font-size: 13.5px; color: #5c6e82; margin: 0 0 16px; }
.forte-modal__form { display: flex; flex-direction: column; gap: 10px; }
.forte-modal__form input,
.forte-modal__form textarea {
	width: 100%;
	border: 1.5px solid #e2e8f1;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 14px;
	font-family: inherit;
}
.forte-modal__form input:focus,
.forte-modal__form textarea:focus { outline: none; border-color: var(--fwl-accent); box-shadow: 0 0 0 3px var(--fwl-accent-ring); }
.forte-modal__form .lb-btn { margin-top: 4px; }
.forte-modal__feedback { font-size: 13px; font-weight: 600; min-height: 18px; }
.forte-modal__feedback.is-ok { color: #15803d; }
.forte-modal__feedback.is-err { color: #b91c1c; }