/* =========================================================
 * FLAAG 10.4 — Divulgação Automática / Premium Hardening
 * Regra única e final do módulo. O próprio CANVAS define a altura,
 * eliminando sobras, sobreposição e diferenças entre dispositivos.
 * ========================================================= */

#promo-modal.promo-modal{
  position:fixed!important; inset:0!important; z-index:2147483100!important;
  display:none!important; align-items:center!important; justify-content:center!important;
  padding:18px!important; box-sizing:border-box!important; overflow:hidden!important;
}
#promo-modal.promo-modal.open{display:flex!important}
#promo-modal .promo-backdrop{
  position:absolute!important; inset:0!important;
  background:rgba(7,20,38,.22)!important;
  -webkit-backdrop-filter:blur(6px) saturate(1.06)!important;
  backdrop-filter:blur(6px) saturate(1.06)!important;
}
#promo-modal .promo-panel{
  position:relative!important; z-index:2!important; box-sizing:border-box!important;
  display:grid!important; grid-template-columns:minmax(360px,470px) minmax(0,1fr)!important;
  align-items:start!important; gap:30px!important;
  width:min(1180px,calc(100vw - 36px))!important; max-width:1180px!important;
  height:auto!important; max-height:calc(100dvh - 36px)!important; min-width:0!important;
  margin:0!important; padding:32px!important; overflow-x:hidden!important; overflow-y:auto!important;
  border:1px solid rgba(221,231,242,.96)!important; border-radius:28px!important;
  background:rgba(255,255,255,.985)!important; box-shadow:0 28px 88px rgba(4,20,44,.23)!important;
  -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important;
}
#promo-modal .promo-close{
  position:absolute!important; top:14px!important; right:14px!important; z-index:50!important;
  width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important;
  display:grid!important; place-items:center!important; padding:0!important;
  border:1px solid rgba(10,35,67,.08)!important; border-radius:999px!important;
  background:#fff!important; color:#0a2343!important; box-shadow:0 8px 24px rgba(5,20,43,.14)!important;
  font-size:28px!important; line-height:1!important; cursor:pointer!important; touch-action:manipulation!important;
}

/* ÚNICA FONTE DE VERDADE DA PRÉVIA: canvas em fluxo normal.
   Não há altura calculada por CSS/JS nem canvas absoluto. */
#promo-modal #promo-card.promo-preview{
  position:relative!important; display:block!important; float:none!important; clear:both!important;
  flex:none!important; align-self:start!important; box-sizing:border-box!important;
  width:100%!important; max-width:470px!important; min-width:0!important;
  height:auto!important; min-height:0!important; max-height:none!important;
  aspect-ratio:auto!important; margin:0 auto!important; padding:0!important; border:0!important;
  border-radius:20px!important; background:transparent!important; overflow:hidden!important;
  contain:layout paint!important; isolation:isolate!important; line-height:0!important;
  box-shadow:0 18px 45px rgba(5,26,56,.16)!important;
}
#promo-modal #promo-card.promo-preview.is-story{max-width:360px!important}
#promo-modal #promo-card .promo-render-canvas,
#promo-modal #promo-card.is-story .promo-render-canvas{
  position:relative!important; inset:auto!important; display:block!important; float:none!important;
  box-sizing:border-box!important; width:100%!important; max-width:100%!important;
  height:auto!important; max-height:none!important; min-width:0!important; min-height:0!important;
  margin:0!important; padding:0!important; border:0!important; border-radius:inherit!important;
  background:#071f42!important; object-fit:fill!important; image-rendering:auto!important;
  transform:none!important; vertical-align:top!important; opacity:1!important;
}
#promo-modal #promo-card .promo-render-canvas{aspect-ratio:4/5!important}
#promo-modal #promo-card.is-story .promo-render-canvas{aspect-ratio:9/16!important}
#promo-modal #promo-card .promo-render-source{
  position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important;
  clip-path:inset(50%)!important; pointer-events:none!important; opacity:0!important;
}
#promo-modal #promo-card:before,#promo-modal #promo-card:after{display:none!important;content:none!important}

#promo-modal .promo-tools{
  position:relative!important; z-index:3!important; box-sizing:border-box!important;
  width:100%!important; min-width:0!important; max-width:none!important;
  margin:0!important; padding:10px 0 4px!important; align-self:start!important; contain:none!important;
}
#promo-modal .promo-tools h3{margin-top:0!important}
#promo-modal .promo-tools textarea{box-sizing:border-box!important;width:100%!important;max-width:100%!important;resize:vertical!important}
#promo-modal .promo-format-choice{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
#promo-modal .promo-format-btn{min-width:0!important;touch-action:manipulation!important}
#promo-modal .promo-photo-controls-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
#promo-modal .promo-photo-controls-grid>*{min-width:0!important}
#promo-modal .promo-photo-controls-grid input[type=range]{width:100%!important;max-width:100%!important}
#promo-modal .promo-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:stretch!important}
#promo-modal .promo-actions>*{min-width:0!important;min-height:48px!important}

/* Tablet e notebooks compactos: sempre uma coluna. Evita a zona intermediária
   que historicamente causava sobreposição. */
@media (max-width:1180px){
  #promo-modal.promo-modal.open{padding:12px!important;align-items:center!important;justify-content:center!important}
  #promo-modal .promo-panel{
    display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:24px!important;
    width:min(780px,calc(100vw - 24px))!important; max-width:780px!important;
    max-height:calc(100dvh - 24px)!important; padding:62px 24px 30px!important; border-radius:24px!important;
  }
  #promo-modal #promo-card.promo-preview{order:1!important;width:min(100%,470px)!important;max-width:470px!important;margin:0 auto!important}
  #promo-modal #promo-card.promo-preview.is-story{width:min(100%,360px)!important;max-width:360px!important}
  #promo-modal .promo-tools{order:2!important;width:100%!important;padding:0!important}
}

@media (max-width:720px){
  #promo-modal.promo-modal.open{padding:0!important;align-items:stretch!important;justify-content:stretch!important}
  #promo-modal .promo-backdrop{-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}
  #promo-modal .promo-panel{
    width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;
    margin:0!important;padding:max(60px,calc(env(safe-area-inset-top) + 52px)) 12px max(24px,env(safe-area-inset-bottom))!important;
    border-radius:0!important;border-left:0!important;border-right:0!important;gap:20px!important;
  }
  #promo-modal .promo-close{top:max(10px,env(safe-area-inset-top))!important;right:max(10px,env(safe-area-inset-right))!important}
  #promo-modal #promo-card.promo-preview{width:min(100%,390px)!important;max-width:390px!important;border-radius:16px!important}
  #promo-modal #promo-card.promo-preview.is-story{width:min(100%,320px)!important;max-width:320px!important}
  #promo-modal .promo-photo-controls-grid{grid-template-columns:1fr!important}
  #promo-modal .promo-actions{display:grid!important;grid-template-columns:1fr!important}
  #promo-modal .promo-actions>*{width:100%!important}
}
@media (max-width:390px){
  #promo-modal #promo-card.promo-preview{max-width:350px!important}
  #promo-modal #promo-card.promo-preview.is-story{max-width:292px!important}
  #promo-modal .promo-format-choice{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){#promo-modal *,#promo-modal *::before,#promo-modal *::after{transition:none!important;animation:none!important}}