/* === MOBILE-SAFE MODAL FIX (drop-in) ===
   Place this file AFTER your main CSS so it can override older modal rules.
   Works with common .modal and .modal-content patterns.
*/

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px;
  box-sizing: border-box;
}

.modal-content{
  width: 100%;
  max-width: 420px;        /* desktop-friendly cap */
  max-height: 90vh;        /* fits phone height */

  background: #fff;
  border-radius: 12px;

  overflow-y: auto;
  overflow-x: hidden;

  box-sizing: border-box;
}

/* Extra safety: prevent inner elements from forcing horizontal overflow */
.modal-content *{
  max-width: 100%;
  box-sizing: border-box;
}

/* Media (optional) */
@media (max-width: 480px){
  .modal-content{
    border-radius: 10px;
    padding: 12px;
  }
  .modal-content img,
  .modal-content video{
    width: 100%;
    height: auto;
  }
}