/* Fav Hideout — CSS estrutural mínimo.
   Isto NÃO é o design da interface (isso é feito por você no Elementor).
   Isto só garante que o canvas 3D funcione dentro do seu container e que os overlays/estados
   apareçam/desapareçam direito. Tudo aqui é relativo ao container que tem o id "fav-hideout"
   (ou o que você configurar), nunca à janela inteira. */

/* Importante: esta regra NUNCA define width/height/min-height do container diretamente.
   Isso é de propósito — se definíssemos aqui, por empate de especificidade do CSS, essa regra
   poderia vencer e ignorar a altura/largura que VOCÊ configurou no Elementor (foi exatamente
   esse bug que apareceu). O tamanho é inteiramente seu (via Elementor ou seu próprio CSS). */
.fh-stage { position: relative; overflow: hidden; }

/* Rede de segurança: só entra em ação se o motor medir, via JavaScript (não CSS), que o
   container realmente colapsou a quase nada (ver ensureStageHeight em fh-scene.js). Usamos
   !important de propósito aqui: como isso só é aplicado quando a altura medida já está
   confirmadamente perto de 0, não existe "sua altura real" pra respeitar nesse caso — então
   pode vencer qualquer empate de especificidade com segurança. */
.fh-stage.fh-stage-autoheight { min-height: 70vh !important; width: 100% !important; }

.fh-stage > .fh-canvas-wrap { position: absolute; inset: 0; z-index: 0; background: #8ec5ff; overflow: hidden; }
.fh-stage #fh-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.fh-hidden { display: none !important; }

/* ---------------- zonas (data-fh-zone="...") ---------------- */
/* Qualquer elemento seu com data-fh-zone="top-left" (ou outra das 9 posições) é movido pra dentro
   desta grade automaticamente. A grade cobre o container inteiro e se reajusta sozinha
   quando ele muda de tamanho, porque é só CSS grid — nenhum JS recalcula posição em cada frame. */
.fh-zones {
  position: absolute; inset: 0; z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.fh-zone-cell { display: flex; gap: 8px; padding: 10px; pointer-events: none; }
.fh-zone-cell > * { pointer-events: auto; }
.fh-zone-top-left     { grid-column: 1; grid-row: 1; align-items: flex-start; justify-content: flex-start; }
.fh-zone-top-center   { grid-column: 2; grid-row: 1; align-items: flex-start; justify-content: center; }
.fh-zone-top-right    { grid-column: 3; grid-row: 1; align-items: flex-start; justify-content: flex-end; }
.fh-zone-mid-left     { grid-column: 1; grid-row: 2; align-items: center; justify-content: flex-start; flex-direction: column; }
.fh-zone-mid-center   { grid-column: 2; grid-row: 2; align-items: center; justify-content: center; }
.fh-zone-mid-right    { grid-column: 3; grid-row: 2; align-items: center; justify-content: flex-end; flex-direction: column; }
.fh-zone-bottom-left  { grid-column: 1; grid-row: 3; align-items: flex-end; justify-content: flex-start; }
.fh-zone-bottom-center{ grid-column: 2; grid-row: 3; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.fh-zone-bottom-right { grid-column: 3; grid-row: 3; align-items: flex-end; justify-content: flex-end; }

/* ---------------- overlays, loading, toasts (tudo relativo ao container) ---------------- */
.fh-stage #fh-backdrop {
  position: absolute; inset: 0; background: rgba(10,10,20,0.55); backdrop-filter: blur(6px);
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.fh-stage #fh-backdrop.fh-open { opacity: 1; pointer-events: auto; }

.fh-stage [id^="fh-overlay-"] {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.96);
  z-index: 41; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.fh-stage [id^="fh-overlay-"].fh-open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }

.fh-stage #fh-loading, .fh-stage #fh-error {
  position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
}
.fh-stage #fh-loading-bar { width: calc(var(--fh-progress, 0) * 100%); transition: width .25s ease; }

.fh-stage #fh-tooltip, .fh-stage #fh-object-toolbar {
  position: absolute;
  left: var(--fh-anchor-x, 50%);
  top: var(--fh-anchor-y, 50%);
  transform: translate(-50%, -120%);
  z-index: 30; opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.fh-stage #fh-tooltip.fh-open, .fh-stage #fh-object-toolbar.fh-open { opacity: 1; pointer-events: auto; }

.fh-stage #fh-toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.fh-stage #fh-toast.fh-open { opacity: 1; transform: translateX(-50%) translateY(0); }

.fh-stage.fh-loading .fh-zones { pointer-events: none; opacity: 0; }

@media (max-width: 767px) {
  .fh-stage.fh-has-selection #fh-catalog { display: none !important; }
  .fh-stage #fh-object-toolbar { position: absolute; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: 100%; }
}