/* ── MODAL APP PHONE ── */
.app-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(6,6,12,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999;
  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;

 /* ############################## */
    position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 24px !important;
  z-index: 2147483647 !important; /* valor máximo possível de z-index */
  isolation: isolate;
}

.app-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Modal sized to match phone.php exactly */
.app-modal {
  position: relative;
  width: 460px;
  height: 860px;
  /* max-height: 100vh; */
  background: transparent;
  border-radius: 16px;
  /* overflow: hidden; */
  transform: scale(0.95) translateY(16px);
  transition: transform 0.3s ease;
  margin-top: 50px;
}

.app-modal-overlay.open .app-modal {
  transform: scale(1) translateY(0);
}

.app-close {
  position: absolute;
  /* top: -12px; */
  top: 0px;
  /* right: -12px; */
  right: 11px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.app-close:hover { background: rgba(239,68,68,0.8); }

.app-frame {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}

/* iframe ocupa exatamente o tamanho do phone.php */
.app-frame iframe {
  border: none;
  display: block;
  width: 460px;
  height: 860px;
}

@media (max-height: 900px) {
  .app-modal {
    transform: scale(0.85) translateY(0);
  }
  .app-modal-overlay.open .app-modal {
    transform: scale(0.85) translateY(0);
  }
}

/* ############################################## */

/* ── PHONE EMBED FIXO ── */
.phone-embed-wrapper {
  /* display: flex; */
  display: grid;
  justify-content: center;
  align-items: center;
  /* margin-top: 6rem; */
  /*margin-bottom: -180px; /* ajuste junto com o scale */
 /* margin-bottom: -240px; /* ajuste junto com o scale */
  margin-bottom: -11px; /* ajuste junto com o scale */

 /* flex-direction: column; /* empilha iframe e botão verticalmente */
 /* gap: 0;

  /* Ajuste do Scale da classe .phone-embed-frame {
  /* Scale	Redução	margin-bottom sugerido
    0.85	15% menor	-120px
    0.75	25% menor	-180px
    0.65	35% menor	-250px
    0.55	45% menor	-320px */
    overflow: hidden;
}

.phone-embed-frame {
  border: none;
  width: 440px;
  /* height: 820px; */
  height: 800px;
  display: block;
  border-radius: 16px;
  /* escala para caber em telas menores */
  transform-origin: top center;
  transform: scale(0.7); /* ← ajuste esse valor*/

 margin-bottom: calc((820px * (1 - 0.7)) * -1); /* ajuste o 0.75 para o seu scale atual */
}

/* @media (max-width: 500px) {
  .phone-embed-frame {
    transform: scale(0.7);
    margin-bottom: -200px; /* compensa o espaço do scale *
  }
} */