.modal {
  overflow: hidden;
}

.modal-card {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card .actions {
  position: sticky;
  bottom: -27px;
  z-index: 2;
  margin-right: -27px;
  margin-bottom: -27px;
  margin-left: -27px;
  padding: 17px 27px calc(17px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -10px 18px #fff;
}

@media (max-width: 800px) {
  .modal {
    padding: 8px;
  }

  .modal-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 20px;
  }

  .modal-card .actions {
    bottom: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    margin-left: -20px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }

  .modal-card .actions .primary {
    flex: 1;
    min-width: 210px;
  }

  .signature-capture canvas {
    touch-action: none;
  }
}

#complete-modal .mobile-complete-card {
  max-height: calc(100dvh - 16px);
  padding-bottom: 0;
  scroll-padding-bottom: 120px;
}

#complete-modal .mobile-complete-card .actions {
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin: 16px -27px 0;
  padding: 14px 27px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,.92), #fff 28%);
  box-shadow: 0 -14px 30px rgba(31,55,75,.16);
  border-top: 1px solid #dce7ee;
}

#complete-modal .mobile-complete-card .actions .primary {
  min-height: 58px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 900;
}

#complete-modal .mobile-complete-card .actions .secondary {
  min-height: 52px;
  border-radius: 15px;
}

@media (max-width: 1180px), (pointer: coarse) {
  #complete-modal {
    padding: 6px;
    align-items: stretch;
  }

  #complete-modal .mobile-complete-card {
    width: 100%;
    max-height: calc(100dvh - 12px);
    padding: 18px 18px 0;
  }

  #complete-modal .mobile-complete-card .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-right: -18px;
    margin-left: -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }

  #complete-modal .mobile-complete-card .actions .primary {
    order: -1;
    width: 100%;
    min-height: 64px;
  }

  #complete-modal .mobile-complete-card .actions .secondary {
    width: 100%;
  }
}