/* Mobile modal layout for the preview page. */
@media (max-width:767px) {
  .modal {
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    overflow:hidden!important;
  }
  .modal {
    padding:0 8px!important;
  }
  .modal-dialog,
  .modal-dialog.modal-dialog-centered {
    width:100%;
    max-width:none;
    height:calc(100vh - 16px)!important;
    height:calc(100dvh - 16px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 16px)!important;
    margin:8px auto!important;
    display:flex;
    align-items:center;
  }
  .modal-content {
    width:100%;
    height:100%!important;
    max-height:100%!important;
    display:flex;
    flex-direction:column;
    overflow:hidden!important;
    border-radius:14px;
  }
  .modal-header {
    align-items:flex-start;
    padding:16px 18px;
  }
  .modal-title {
    min-width:0;
    padding-right:12px;
    font-size:18px;
    line-height:1.25;
  }
  .modal .close {
    flex:0 0 auto;
    margin:-3px -4px 0 0;
    padding:0 4px;
    font-size:28px;
    line-height:1;
  }
  .modal-body {
    flex:1 1 auto;
    height:0;
    min-height:0!important;
    max-height:none;
    overflow-y:scroll!important;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:16px 18px;
    font-size:15px;
    line-height:1.55;
    text-align:left!important;
    overflow-wrap:anywhere;
  }
  .modal-body img {
    display:block;
    width:100%!important;
    max-width:100%;
    height:auto;
    max-height:170px;
    object-fit:cover;
    border-radius:9px;
    margin:0 0 12px!important;
  }
  .modal-body h6 {
    margin:16px 0 7px;
    color:var(--heading);
    font-size:16px;
    font-weight:700;
  }
  .modal-body ul {
    margin:7px 0 14px;
    padding-left:20px;
  }
  .modal-body .card-body {
    padding:14px!important;
  }
  .modal-footer {
    flex:0 0 auto;
    padding:12px 18px 16px;
  }
  .modal-footer .btn {
    width:100%;
    min-height:42px;
  }
}