/* BRENDA SINAIS V22.6 — ajustes finais de UX antes dos webhooks em produção. */

/* Todo controle com X que fecha uma camada deve ser imediatamente reconhecível. */
:where(
  .modal-close,
  .initial-popup-close,
  .house-close,
  .admin-close,
  .v22-promo-close,
  .close-btn,
  .floating-notice-close,
  #v22LinkClose
){
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:12px !important;
  background:#e53935 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 7px 18px rgba(229,57,53,.27) !important;
  font-size:23px !important;
  font-weight:800 !important;
  line-height:1 !important;
  opacity:1 !important;
  cursor:pointer;
  touch-action:manipulation !important;
  transition:transform .14s ease-out, background-color .14s ease-out, box-shadow .14s ease-out !important;
}

/* Elementos que usam o atributo hidden nativo, mas cuja classe também define display:
   a regra de classe empatava em especificidade com [hidden] e vencia por ordem de cascata,
   deixando o conteúdo visível mesmo com hidden=true (ex.: spinner "IA lendo" sobre o resultado). */
:where(#aiStatus, #signalResults)[hidden]{
  display:none !important;
}

/* #signalModal e #house-gate-modal não tinham visibility no estado fechado. O motion.js
   aplica uma vez (na abertura) uma animação (.v21-backdrop-enter, fill-mode:both) que fixa
   opacity:1 permanentemente — animações vencem a cascata normal, então remover a classe
   "open" no fechamento parava de bloquear cliques (pointer-events) mas a tela ficava
   visualmente travada em tela cheia. visibility não é afetado pela mesma animação, então
   força o esconder mesmo com a opacidade presa. */
:where(#signalModal, #houseGateModal){
  visibility:hidden !important;
  transition:opacity .22s ease, visibility .22s ease !important;
}
:where(#signalModal, #houseGateModal).open{
  visibility:visible !important;
}

:where(
  .modal-close,
  .initial-popup-close,
  .house-close,
  .admin-close,
  .v22-promo-close,
  .close-btn,
  .floating-notice-close,
  #v22LinkClose
):hover{
  background:#f0443e !important;
  box-shadow:0 9px 22px rgba(229,57,53,.34) !important;
}

:where(
  .modal-close,
  .initial-popup-close,
  .house-close,
  .admin-close,
  .v22-promo-close,
  .close-btn,
  .floating-notice-close,
  #v22LinkClose
):active{
  transform:scale(.96) !important;
  background:#c92f2b !important;
}

:where(
  .modal-close,
  .initial-popup-close,
  .house-close,
  .admin-close,
  .v22-promo-close,
  .close-btn,
  .floating-notice-close,
  #v22LinkClose
):focus-visible{
  outline:3px solid rgba(255,255,255,.85) !important;
  outline-offset:2px !important;
}

/* No iframe externo personalizado o X segue a mesma linguagem do restante do app. */
#v22LinkFrame header #v22LinkClose{
  flex:0 0 38px !important;
}

@media(max-width:680px){
  :where(
    .modal-close,
    .initial-popup-close,
    .house-close,
    .admin-close,
    .v22-promo-close,
    .close-btn,
    .floating-notice-close,
    #v22LinkClose
  ){
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    border-radius:13px !important;
    font-size:25px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  :where(
    .modal-close,
    .initial-popup-close,
    .house-close,
    .admin-close,
    .v22-promo-close,
    .close-btn,
    .floating-notice-close,
    #v22LinkClose
  ){
    transition:none !important;
  }
}