/* =========================================================

   GETICK — Modal fixes (About / Info modals)

   ========================================================= */



/* Always keep Bootstrap modal above GETICK shell layers */

.modal{

  z-index: 200000 !important;

}

.modal-backdrop{

  z-index: 199999 !important;

}



/* Force modal to fit viewport and make body scroll */

.modal-dialog{

  max-height: 92vh !important;

}

.modal-content{

  max-height: 92vh !important;

}

.modal-body{

  max-height: calc(92vh - 120px) !important; /* header/footer allowance */

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;

}



/* Make images responsive and not dominant */

.modal-body img{

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto 12px auto;



  /* Cap image height so text is always visible */

  max-height: 38vh;

  object-fit: contain;

}



/* Ensure text is never clipped */

.scr2-about-text,

.ipo-about-text{

  overflow: visible !important;

  max-height: none !important;

}



/* Stack image + text properly (if you use these wrappers) */

.scr2-about-wrap,

.ipo-about-wrap{

  display: flex;

  flex-direction: column;

  gap: 12px;

}

/* Stage2 About modal — force correct scrolling */

.scr2-about-modal{

  max-height: 92vh !important;

  overflow: hidden !important; /* keep scroll in the body, not the content wrapper */

  display: flex !important;

  flex-direction: column !important;

}



/* Ensure header/footer don't grow and body takes the scroll */

.scr2-about-modal .modal-header,

.scr2-about-modal .modal-footer{

  flex: 0 0 auto !important;

}



.scr2-about-modal .modal-body{

  flex: 1 1 auto !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;

  max-height: none !important; /* handled by flex */

}



/* Cap image so it doesn't consume the whole view */

.scr2-about-modal img{

  max-height: 38vh !important;

  object-fit: contain !important;

}