.pama-tryon-open-btn{ display: inline-block; margin: 12px 0; padding: 12px 22px; border: 0; border-radius: 10px; background: #FF0A88; color: #fff; font-weight: 700; cursor: pointer; font-size: 15px; }
.pama-tryon-open-btn:hover{ opacity: .92; }

/* Fixed Z-Index Issue */
.pama-tryon-modal{ 
  position: fixed !important; 
  inset: 0 !important; 
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; 
  z-index: 2147483647 !important; /* Max possible z-index to cover theme footer/whatsapp */
  background: #000 !important; 
  display: none; 
}
.pama-tryon-modal.pama-tryon-open{ display: block !important; }
.pama-tryon-modal iframe{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; background: #000 !important; z-index: 2147483647 !important; }
.pama-tryon-close-btn{ position: fixed !important; top: 15px !important; left: 15px !important; z-index: 2147483647 !important; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.55); color: #fff; font-size: 18px; cursor: pointer; }
@media (max-width: 480px){ .pama-tryon-open-btn{ width: 100%; } }

/* The site's floating WhatsApp/contact button (from a separate chat-widget
   plugin, id "mySingleBtn") sits at the same max z-index as this modal, so
   depending on DOM order it can float on top of the camera view. Hide it
   only while the try-on modal is open; it's untouched everywhere else. */
body.pama-tryon-active #mySingleBtn { display: none !important; }